@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SF-Pro-Display-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@keyframes ptrSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes bootLoaderMove {
  0% {
    transform: translateX(-80%);
  }
  50% {
    transform: translateX(80%);
  }
  100% {
    transform: translateX(-80%);
  }
}

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

@keyframes purseFloat {
  0% {
    transform: translate3d(0,0,0) rotate(0deg);
  }
  50% {
    transform: translate3d(0,-4px,0) rotate(-1.2deg);
  }
  100% {
    transform: translate3d(0,0,0) rotate(0deg);
  }
}

@keyframes maintenanceBreath {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.03);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes balancePillFlash {
  0% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.35);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes toastSlidePop {
  0% {
    transform: translateY(calc(-100% - 18px)) scale(0.98);
  }
  60% {
    transform: translateY(0) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes iosBannerIn {
  0% {
    opacity: 0;
    transform: translate3d(0,calc(-100% - 16px),0);
  }
  65% {
    opacity: 1;
    transform: translate3d(0,6px,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes iosBannerOut {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0,calc(-100% - 16px),0);
  }
}

@keyframes ptr-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

:root {
  --app-height: 100vh;
  --app-stable-height: 100vh;
  --tg-bg: #141414;
  --tg-bg-elevated: #282727;
  --tg-bg-elevated-soft: #2f2e2e;
  --tg-text: var(--tg-theme-text-color,#f2f3f5);
  --tg-text-mute: var(--tg-theme-hint-color,#949ba4);
  --tg-text-secondary: var(--tg-theme-hint-color,#b5bac1);
  --tg-accent: #2AAE5D !important;
  --tg-accent-2: #2AAE5D !important;
  --tg-accent-soft: rgba(42,174,93,0.16) !important;
  --tg-button-text: var(--tg-theme-button-text-color,#ffffff);
  --tg-border-subtle: rgba(255,255,255,0.0);
  --tg-border: rgba(255,255,255,0.0);
  --tg-green: #2AAE5D;
  --tg-red: #f23f42;
  --tg-yellow: #f0b232;
  --card-radius: 16px;
  --card-radius-lg: 20px;
  --transition-fast: 180ms var(--ease-out);
  --stack-gap: 8px;
  --font-sans: "SF Pro Display" !important;
  --dur-fast: 160ms;
  --dur-med: 240ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22,1,0.36,1) !important;
  --ease-in-out: cubic-bezier(0.4,0,0.2,1);
  --ui-menu-ms: 520ms !important;
  --transition-slow: 280ms var(--ease-out);
  --tg-ios-topbar: 0px;
  --anim-ease: cubic-bezier(0.16,1,0.3,1);
  --anim-ms: 320ms;
  --app-gutter-x: 12px;
  --overlay-gap-y: 12px;
  --sticky-stack-gap: 10px;
  --menu-backdrop-bg: rgba(0,0,0,0.66);
  --menu-backdrop-blur: 0px !important;
  --ui-stack-gap: 10px;
  --ui-backdrop-ms: 160ms;
  --filter-preview-size: 24px;
  --filter-preview-gap: 8px;
  --overlay-top-offset: 0px;
  --toast-slide-ms: 280ms;
  --gp-accent-bg: url("../img/accent-green.webp");
  --modal-slide-ms: 520ms;
  --modal-ease: cubic-bezier(0.22,1,0.36,1);
  color-scheme: light dark;
  --tg-shell-height: var(--tg-viewport-height,var(--app-height,100vh));
  --tg-shell-min-height: var(--tg-viewport-stable-height,var(--tg-shell-height));
  --gp-scrollbar-gutter: calc(100vw - 100%);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: var(--tg-viewport-height,var(--app-height,100vh));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-synthesis: none;
  text-rendering: auto !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  background: var(--tg-bg);
  color: var(--tg-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  min-height: var(--tg-viewport-stable-height,var(--tg-viewport-height,var(--app-height,100vh)));
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-weight: 500;
  padding-right: 0 !important;
}

.gift-name,
.gift-number,
.gift-sheet-card-title,
.gift-sheet-card-number {
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

.gift-sheet-card-caption--overlay .gift-sheet-card-title, 
.gift-sheet-card-caption--overlay .gift-sheet-card-number {
  pointer-events: auto !important;
}

html {
  height: var(--tg-viewport-height,var(--app-height,100vh));
  min-height: var(--tg-viewport-stable-height,var(--tg-viewport-height,var(--app-height,100vh)));
}

.app-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tg-shell-height,var(--tg-viewport-height,100vh)) !important;
  min-height: var(--tg-shell-min-height,var(--tg-viewport-stable-height,100vh)) !important;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  background: var(--tg-bg) !important;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-color: var(--tg-border-subtle) !important;
}

.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

main {
  flex: 1;
  padding: 2px 12px calc(16px + 0px);
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  scrollbar-width: none;
  position: relative;
  background: var(--tg-bg) !important;
  touch-action: pan-y !important;
  contain: none;
  scroll-behavior: auto;
  min-height: 0;
  padding-top: 0 !important;
  padding-left: var(--app-gutter-x) !important;
  padding-right: var(--app-gutter-x) !important;
  overflow-anchor: none !important;
  scrollbar-gutter: stable;
  overflow-x: hidden !important;
}

main::-webkit-scrollbar {
  display: none;
}

main[aria-busy="true"] {
  opacity: 1;
}

.ptr-indicator {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px !important;
  z-index: 1500;
  display: flex;
  justify-content: center;
  pointer-events: none;
  --ptr-offset: 0px;
  height: 56px;
  align-items: center;
  opacity: 0;
  transition: none !important;
}

.ptr-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(31,33,38,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transform: translateY(calc(-56px + var(--ptr-offset,0px)));
  opacity: 1;
  transition: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  justify-content: center;
}

.ptr-indicator.active .ptr-pill {
  opacity: 1;
}

.ptr-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: rgba(255,255,255,0.9);
  display: inline-block;
  box-sizing: border-box;
}

.ptr-indicator.active .ptr-icon {
  animation: ptrSpin 0.8s linear infinite;
}

.ptr-indicator.ready .ptr-icon {
  border-top-color: #2AAE5D;
  border-right-color: rgba(42,174,93,0.3);
  border-bottom-color: rgba(42,174,93,0.2);
  border-left-color: rgba(42,174,93,0.3);
  animation: ptrSpin 0.8s linear infinite;
}

.ptr-indicator.refreshing .ptr-icon {
  animation: ptrSpin 0.6s linear infinite;
  border-top-color: #2AAE5D !important;
  border-right-color: rgba(42,174,93,0.3) !important;
  border-bottom-color: rgba(42,174,93,0.2) !important;
  border-left-color: rgba(42,174,93,0.3) !important;
}

.top-promo-banner {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  margin-top: 6px !important;
  margin-bottom: 8px;
  border-radius: 18px;
  overflow: hidden;
  color: var(--tg-text);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  border: 1px solid rgba(255,214,120,0.18);
  box-shadow: 0 14px 38px rgba(0,0,0,0.44);
}

.filters-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 56px !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.filter-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 20px 10px 8px !important;
  background: var(--tg-bg-elevated);
  border: 1px solid var(--tg-border-subtle);
  border-radius: 18px;
  color: var(--tg-text);
  cursor: pointer;
  transition: background var(--transition-fast) !important;
  white-space: normal;
  width: 100%;
  position: relative;
  height: 56px !important;
  text-align: left;
  overflow: hidden !important;
  row-gap: 2px;
  min-height: 56px !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.filter-btn--single {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.filter-btn--single .filter-label {
  display: none !important;
}

.filter-btn--single .filter-value {
  width: 100%;
  justify-content: flex-start;
  transform: none !important;
  align-items: center !important;
}

.filter-btn--single .filter-value-pill {
  margin: 0;
  align-items: center !important;
}

.filter-btn:hover {
  background: var(--tg-bg-elevated-soft);
  border-color: var(--tg-border);
}

.filter-btn.active {
  background: rgba(42,174,93,0.12);
  border-color: var(--tg-accent);
}

.filter-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#advanced-trigger {
  padding: 0;
  width: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  height: 56px;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.82) !important;
  position: relative;
  display: flex;
  border-color: rgba(255,255,255,0.12) !important;
}

#advanced-trigger .filter-label, #advanced-trigger .filter-value {
  display: none !important;
}

#advanced-trigger::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  transition: transform 240ms cubic-bezier(0.32,0.72,0,1) !important;
  animation: none !important;
  will-change: transform;
}

#advanced-trigger.active {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

#advanced-trigger.active::before {
  transform: translate(-50%,-50%) rotate(-135deg);
}

#advanced-trigger.has-advanced::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tg-accent) !important;
  box-shadow: none;
}

.filter-label {
  color: var(--tg-text-mute);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
  display: block !important;
  text-align: left;
}

.filter-value {
  color: var(--tg-text);
  font-weight: 600;
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  max-width: 100%;
  min-width: 0;
  line-height: 1.25;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
}

.filter-value-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.filter-value-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  flex-shrink: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
}

.filter-value-backdrop-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.1);
}

.filter-value-icon img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: contain;
}

.filter-value-text {
  flex: 1;
  min-width: 0 !important;
  font-size: clamp(11px,3.2vw,12px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.filter-value-count {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  padding-left: 0;
}

.advanced-panel {
  background: transparent !important;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden !important;
  max-height: none !important;
  opacity: 1 !important;
  transform: translateY(-4px) !important;
  transition: height var(--ui-menu-ms,280ms) cubic-bezier(0.16,1,0.3,1) !important;
  border: none;
  height: 0;
  will-change: height !important;
  pointer-events: none;
}

.advanced-panel.open {
  max-height: none !important;
  opacity: 1;
  transform: translateY(0) !important;
  padding: 0;
  margin-top: 0;
  margin-bottom: var(--stack-gap);
  border: none;
  pointer-events: auto;
  overflow: hidden !important;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.advanced-search {
  position: relative;
  margin-bottom: 0;
  background: var(--tg-bg) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  height: 46px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

.search-input {
  width: 100%;
  padding: 10px 36px 10px 34px;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  background-clip: padding-box;
  color: var(--tg-text);
  font-size: 16px;
  line-height: 22px;
  font-family: inherit;
  -webkit-text-fill-color: currentColor;
}

.search-input::placeholder {
  color: var(--tg-text-mute);
  text-align: left;
}

.search-input:focus {
  box-shadow: none;
}

.search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' stroke='rgba(148,155,164,1)' stroke-width='2' fill='none'/%3E%3Cline x1='15' y1='15' x2='20' y2='20' stroke='rgba(148,155,164,1)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.inline-reset-btn {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tg-bg-elevated) !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tg-accent) !important;
  cursor: pointer;
  transition: background var(--transition-fast),border-color var(--transition-fast);
  height: 30px !important;
  margin-top: 0 !important;
  margin-bottom: var(--sticky-stack-gap) !important;
  margin-left: 0;
  width: auto;
  min-width: 0;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  outline: none !important;
}

.inline-reset-btn.inline-reset-btn--visible {
  display: inline-flex !important;
}

.inline-reset-btn:hover {
  background: var(--tg-bg-elevated-soft);
  border-color: var(--tg-border);
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
  gap: 16px;
  margin-bottom: 20px;
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
}

.gift-grid > .gift-card:only-child {
  width: min(260px,100%);
  justify-self: start;
}

.gift-card {
  background: var(--tg-bg-elevated) !important;
  border-radius: 24px !important;
  padding: 8px !important;
  overflow: hidden;
  border: 1px solid var(--tg-border-subtle);
  box-shadow: none;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-color: var(--tg-border-subtle) !important;
  transition: transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out) !important;
  transform: none !important;
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.gift-card:hover {
  background: var(--tg-bg-elevated-soft);
}

.gift-card--unavailable:hover {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 180ms ease,transform 180ms ease;
  pointer-events: none;
}

.gift-card--bought:hover {
  background: var(--tg-bg-elevated);
}

.gift-card--unavailable, .gift-card--bought {
  cursor: default;
}

.gift-card--unavailable {
  opacity: 0.82;
}

.gift-card--unavailable .gift-image, .gift-card--unavailable .color-block {
  filter: grayscale(1);
  opacity: 0.82;
}

.gift-card--bought {
  opacity: 1;
  background: linear-gradient(135deg,rgba(42,174,93,0.16),rgba(42,174,93,0.12)) !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  outline: none !important;
  border-color: var(--tg-border-subtle) !important;
  transform: none !important;
  transition: none !important;
}

.gift-card--bought .gift-image, .gift-card--bought .color-block {
  filter: grayscale(0.15) sepia(0.55) hue-rotate(85deg) saturate(2.2) brightness(0.95);
  opacity: 1;
}

.gift-card--bought .gift-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42,174,93,0.26);
  pointer-events: none;
}

.gift-card--locked {
  cursor: default;
  opacity: 0.9;
  pointer-events: none;
}

.gift-card--locked .gift-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.12);
  pointer-events: none;
}

.gift-card-locked {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 24px);
  pointer-events: none;
  z-index: 2;
}

.gift-card-locked-text {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #ffffff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.1;
  text-align: center;
}

.gift-card-unavailable-text {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.gift-card-bought {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 24px);
  pointer-events: none;
  z-index: 2;
  background: rgba(0,190,120,0.26) !important;
}

.gift-card-unavailable {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 24px);
  pointer-events: none;
  z-index: 2;
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.gift-card-bought-text {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(42,174,93,0.95);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.gift-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 20px !important;
  overflow: hidden;
  background: var(--tg-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

.color-block {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  transition: none;
}

.gift-card:hover .color-block {
  transform: none;
}

.gift-image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  transform: scale(1.12) !important;
  transform-origin: center;
  transition: transform var(--dur-med) var(--ease-out) !important;
}

.gift-card:hover .gift-image {
  transform: none;
}

.gift-info {
  padding: 10px 6px 2px !important;
  border-radius: 0;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px !important;
}

.gift-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--tg-text);
  margin-bottom: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.26 !important;
  padding-bottom: 1px !important;
}

.gift-number {
  font-size: 13px !important;
  color: var(--tg-text-mute);
  font-family: var(--font-sans);
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 8px !important;
  line-height: 1.24 !important;
  opacity: 0.68 !important;
}

.gift-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: var(--tg-accent);
  color: var(--tg-button-text);
  border: none;
  border-radius: 999px !important;
  padding: 0 16px !important;
  cursor: pointer;
  box-shadow: none;
  font-size: 18px;
  font-weight: 600;
  margin-top: auto;
  font-family: var(--font-sans);
  min-height: 40px !important;
  line-height: 1.2;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out) !important;
}

.gift-buy-btn:hover {
  background: var(--tg-accent);
  filter: brightness(0.96);
}

.gift-buy-btn:active {
  transform: translateY(1px) scale(0.99) !important;
}

.gift-card--unavailable .gift-buy-btn {
  background: var(--tg-bg-elevated-soft);
  color: var(--tg-text-mute);
  cursor: default;
  border: 1px solid var(--tg-border-subtle);
}

.gift-card--unavailable .gift-buy-btn:hover {
  background: var(--tg-bg-elevated-soft);
  filter: none;
}

.gift-card--unavailable .gift-buy-btn .price-value, .gift-card--unavailable .gift-buy-btn .price-currency {
  opacity: 0.95;
}

.gift-card--bought .gift-buy-btn {
  background: var(--tg-green) !important;
  color: #ffffff !important;
  cursor: default;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.gift-card--bought .gift-buy-btn:hover, .gift-card--bought .gift-buy-btn:active {
  background: var(--tg-green);
}

.gift-card--bought .gift-buy-btn:hover {
  background: var(--tg-green);
}

.gift-card--bought .gift-buy-btn:disabled {
  opacity: 1;
}

.gift-card--locked .gift-buy-btn {
  background: var(--tg-green);
  color: #ffffff;
  cursor: default;
}

.gift-card--locked .gift-buy-btn:hover, .gift-card--locked .gift-buy-btn:active {
  background: var(--tg-green);
}

.gift-card--locked .gift-buy-btn:disabled {
  opacity: 1;
}

.price-value {
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  font-family: var(--font-sans);
  text-shadow: none;
  font-feature-settings: "tnum" 1;
  line-height: 1.1;
}

.price-currency {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  opacity: 0.95;
  font-family: var(--font-sans);
  text-shadow: none;
  margin-left: 4px;
  letter-spacing: 0;
  line-height: 1.1;
}

.empty-state {
  margin: 40px auto 0;
  padding: 0 20px 32px;
  max-width: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.empty-state-icon-svg {
  width: 40px;
  height: 40px;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
}

.empty-state-icon-svg--mono {
  color: var(--tg-text-secondary);
}

.empty-state-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--tg-text);
  line-height: 1.35;
}

.empty-state-subtitle {
  font-size: 14px;
  color: var(--tg-text-mute);
  margin-bottom: 18px;
  line-height: 1.5;
  max-width: 280px;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--tg-border);
  border-radius: 20px;
  padding: 12px 26px;
  color: var(--tg-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-outline:hover {
  background: var(--tg-bg-elevated-soft);
  border-color: var(--tg-accent);
}

.load-more {
  text-align: center;
  padding: 24px;
  color: var(--tg-text-mute);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.load-more-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--tg-border-subtle);
  border-top-color: var(--tg-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  padding: 0px 0 0px 0;
  box-sizing: border-box;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
  cursor: pointer;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.modal-overlay.open, .modal-overlay.closing {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  visibility: visible !important;
  transition: opacity var(--ui-menu-ms) var(--ease-out) !important;
}

.modal-overlay.open {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modal-overlay.closing {
  opacity: 0 !important;
  pointer-events: none !important;
}

.modal {
  width: 100%;
  height: calc(100% - 4px);
  max-height: calc(100% - 4px);
  background: rgba(30,30,30,0.96) !important;
  border-radius: 26px 26px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: 0 -18px 60px rgba(0,0,0,0.55);
  transform: translate3d(0,100%,0) !important;
  transition: transform var(--ui-menu-ms) var(--ease-out) !important;
  will-change: transform;
  opacity: 1 !important;
}

.modal-overlay.open .modal {
  transform: none !important;
  opacity: 1 !important;
}

.modal-header {
  padding: 16px 18px 10px;
  text-align: left;
  display: flex;
  align-items: center !important;
  justify-content: space-between;
  gap: 12px;
  position: relative !important;
}

.modal-title-wrap {
  flex: 1;
  min-width: 0;
  padding-right: 56px !important;
}

.modal-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--tg-text);
  margin-bottom: 4px;
  line-height: 1.25 !important;
  padding-bottom: 1px !important;
}

.modal-subtitle {
  font-size: 13px;
  color: var(--tg-text-mute);
  line-height: 1.4;
}

.modal-close-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
  color: var(--tg-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background-color var(--transition-fast);
  position: relative !important;
}

.modal-close-btn:active {
  transform: none;
}

.modal-search {
  padding: 0 18px 10px;
}

.modal-search .search-input {
  height: 46px;
  font-size: 16px;
  border-radius: 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' stroke='rgba(148,155,164,1)' stroke-width='2' fill='none'/%3E%3Cline x1='15' y1='15' x2='20' y2='20' stroke='rgba(148,155,164,1)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 16px 16px;
}

.modal-list {
  flex: 1;
  overflow-y: auto !important;
  padding: 0;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

.modal-list::-webkit-scrollbar {
  display: none;
}

.modal-item {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  transition: none;
  background: none;
  border: 0;
  width: 100%;
  color: var(--tg-text);
  text-align: left;
  min-height: 72px;
  border-bottom: none;
  position: relative;
}

.modal-item::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.06);
}

.modal-item:hover {
  background: none;
}

.modal-item.active {
  background: none;
}

.modal-item:last-child {
  border-bottom: none;
}

.modal-item:last-child::after {
  display: none;
}

.item-info {
  flex: 1;
  min-width: 0 !important;
  margin-right: 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
}

.item-name {
  font-size: clamp(14px,4.0vw,16px) !important;
  font-weight: 700;
  color: var(--tg-text);
  margin-bottom: 0;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25;
  word-break: break-word !important;
}

.item-price {
  text-align: right;
  flex-shrink: 0;
  min-width: 84px !important;
}

.price-value-modal {
  font-size: 17px !important;
  font-weight: 700;
  color: var(--tg-text);
  margin-bottom: 2px;
  line-height: 1.2;
}

.price-label {
  font-size: 12px;
  color: var(--tg-text-mute);
  line-height: 1.2;
}

.modal-footer {
  padding: 16px 18px calc(16px + 0px);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 12px;
}

.modal-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px !important;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border: none;
  font-family: inherit;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
}

.modal-btn:active {
  transform: none;
}

.modal-btn.ghost {
  background: var(--tg-bg-elevated-soft);
  color: var(--tg-text);
  border: 1px solid var(--tg-border-subtle);
}

.modal-btn.primary {
  background: var(--tg-accent);
  color: var(--tg-button-text);
}

.modal-btn.ghost:hover {
  background: rgba(255,255,255,0.08);
  filter: brightness(0.98);
}

.modal-btn.primary:hover {
  background: var(--tg-accent);
}

.toast {
  position: fixed !important;
  top: calc(0px + 12px) !important;
  left: 16px !important;
  transform: translate3d(0,-140%,0) !important;
  background: var(--tg-bg-elevated) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 20px !important;
  padding: 14px 16px !important;
  font-size: 14px;
  color: var(--tg-text);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: transform var(--toast-slide-ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
  z-index: 9999 !important;
  max-width: 520px !important;
  white-space: normal;
  word-break: break-word;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  visibility: hidden !important;
  right: 16px !important;
  width: auto !important;
  margin: 0 auto !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.48) !important;
  bottom: auto !important;
  will-change: transform !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  visibility: visible !important;
  transition: transform 260ms cubic-bezier(0.16,1,0.3,1),visibility 0s !important;
}

.toast-emoji {
  font-size: 16px;
  flex-shrink: 0;
}

.scroll-top-btn {
  position: fixed !important;
  right: 16px !important;
  bottom: calc(16px + 0px) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  outline: none;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.26) !important;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 140ms,transform 140ms,background var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast);
  z-index: 1000 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 0 !important;
}

.scroll-top-btn:hover {
  background: rgba(38,38,38,0.92);
  border-color: var(--tg-border);
}

.scroll-top-btn:active {
  transform: scale(0.92) !important;
  box-shadow: none;
}

.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex !important;
}

.scroll-top-btn-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  transform: translateY(-1px);
}

.skeleton {
  background: #1c1e21;
}

.modal-check {
  width: 28px;
  height: 28px;
  border-radius: 11px;
  border: 1.6px solid rgba(255,255,255,0.20);
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--tg-bg-elevated-soft);
  transition: none;
  border-color: var(--tg-border);
}

.modal-check-icon {
  width: 15px;
  height: 11px;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: none;
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width='16'%20height='12'%20viewBox='0%200%2016%2012'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%206.5L5.5%2010L14%202'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width='16'%20height='12'%20viewBox='0%200%2016%2012'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%206.5L5.5%2010L14%202'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--tg-button-text);
}

.filter-btn:not(#advanced-trigger)::before, .filter-btn:not(#advanced-trigger)::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  border-right: 1.5px solid var(--tg-text-secondary);
  border-bottom: 1.5px solid var(--tg-text-secondary);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity var(--transition-fast),border-color var(--transition-fast);
}

.filter-btn:not(#advanced-trigger)::before {
  top: 46%;
  transform: translateY(-50%) rotate(-135deg);
}

.filter-btn:not(#advanced-trigger)::after {
  top: 54%;
  transform: translateY(-50%) rotate(45deg);
}

.filter-btn:not(#advanced-trigger):disabled::before, .filter-btn:not(#advanced-trigger):disabled::after {
  opacity: 0.3;
}

.filter-btn.active:not(#advanced-trigger)::before, .filter-btn.active:not(#advanced-trigger)::after {
  opacity: 1;
  border-color: var(--tg-accent);
}

.error-state {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal-list, main, .filters-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal-list::-webkit-scrollbar, main::-webkit-scrollbar, .filters-bar::-webkit-scrollbar {
  display: none;
}

.modal-overlay .modal {
  cursor: default;
  transform: translate3d(0,110%,0) !important;
  transition: transform 250ms cubic-bezier(0.32,0.72,0,1) !important;
  opacity: 0.4 !important;
  will-change: transform,opacity;
}

button:focus-visible, input:focus-visible {
  outline: none;
  box-shadow: none;
}

h1, h2, h3, h4, h5, h6, p {
  line-height: 1.4;
}

.gift-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  min-height: 100%;
  padding: 0;
  box-sizing: border-box;
  background: rgba(0,0,0,0.55) !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 999;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  visibility: hidden !important;
}

.gift-sheet-overlay.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  visibility: visible;
  transition: opacity var(--ui-menu-ms) var(--ease-out) !important;
}

.gift-sheet {
  position: relative;
  width: 100%;
  max-width: none;
  border-radius: 24px !important;
  background: #1d1d1d;
  box-shadow: none !important;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom,0px));
  margin: 0;
  color: var(--tg-text);
  transform: translate3d(0,110%,0) !important;
  transition: transform var(--ui-menu-ms) var(--ease-out) !important;
  max-height: calc(var(--tg-viewport-height,100vh) - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform,opacity;
  opacity: 0;
}

.gift-sheet.open {
  transform: none !important;
}

.gift-sheet.dragging {
  transition: none !important;
}

.gift-sheet-drag-handle {
  display: none !important;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  margin: 6px auto 10px;
  background: rgba(255,255,255,0.18);
}

.gift-sheet-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  color: #ffffff;
  cursor: pointer;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  left: auto !important;
  margin: 0 !important;
}

.gift-sheet-close:hover {
  background: rgba(0,0,0,0.35);
}

.gift-sheet-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  margin-bottom: 8px;
}

.gift-sheet-visual {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 28px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.gift-sheet-lottie {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  z-index: 1;
}

.gift-sheet-card-caption--overlay {
  z-index: 6;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  padding: 0 16px;
  pointer-events: none;
  text-shadow: none;
}

.gift-sheet-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.gift-sheet-lottie-anim {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: translateZ(0);
  pointer-events: none;
}

.gift-sheet-lottie-anim canvas, .gift-sheet-lottie-anim svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: transparent !important;
  outline: none !important;
  transform: none;
  transform-origin: center;
}

.gift-sheet-fallback {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}

.gift-sheet-tap-hint {
  width: min(340px,calc(100% - 32px));
  margin: 10px auto 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  text-align: center;
  color: rgba(255,255,255,0.78);
  pointer-events: none;
  user-select: none;
  transition: opacity 160ms ease;
  display: block !important;
  opacity: 0.9;
}

.gift-sheet-tap-hint.is-hidden {
  opacity: 0;
}

.gift-sheet-card-caption {
  text-align: center;
  color: #ffffff;
}

.gift-sheet-card-title {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  margin: 0 auto;
  max-width: min(360px,calc(100% - 32px));
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  display: block;
  word-break: break-word;
}

.gift-sheet-card-number {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  margin-top: 4px;
  line-height: 1.2;
}

.gift-sheet--unavailable .gift-sheet-visual {
  filter: grayscale(1);
  opacity: 0.85;
}

.gift-sheet--unavailable .gift-sheet-buy-bar {
  background: #3a3a3a;
  cursor: default;
}

.gift-sheet--unavailable .gift-sheet-buy-bar:hover {
  background: #3a3a3a;
}

.gift-sheet--unavailable .gift-sheet-visual::after {
  content: "Продано";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0,0,0,0.8);
  z-index: 8;
  background: rgba(0,0,0,0.22);
  border-radius: inherit;
}

.gift-sheet--bought .gift-sheet-buy-bar {
  background: var(--tg-green);
  cursor: default;
}

.gift-sheet--bought .gift-sheet-buy-bar:hover {
  background: var(--tg-green);
}

.gift-sheet--bought .gift-sheet-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none !important;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0,0,0,0.55);
  z-index: 8;
  background: rgba(42,174,93,0.22);
  border-radius: inherit;
  pointer-events: none;
}

.gift-sheet-traits {
  margin-top: 16px;
  border-radius: 20px;
  background: #262626;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

.gift-sheet-trait-row {
  display: grid;
  grid-template-columns: minmax(0,0.9fr) minmax(0,2.1fr);
  font-size: 14px;
}

.gift-sheet-trait-row:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.gift-sheet-trait-label {
  padding: 10px 14px;
  background: #3a3a3a !important;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 500;
}

.gift-sheet-trait-value {
  padding: 10px 16px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-weight: 500;
}

.gift-sheet-trait-name {
  color: var(--tg-accent);
  cursor: default;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 170px;
  text-align: right;
}

.gift-sheet-trait-rarity {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--tg-accent-soft);
  color: var(--tg-accent);
  white-space: nowrap;
}

.gift-sheet-buy-bar {
  margin-top: 18px;
  width: 100%;
  border-radius: 999px !important;
  border: none;
  background: var(--tg-accent);
  cursor: pointer;
  box-shadow: none;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  text-transform: none;
  height: 52px;
}

.gift-sheet-buy-bar:hover {
  background: var(--tg-accent);
}

.gift-sheet-buy-bar[data-state="paid_wait"], .gift-sheet-buy-bar[data-state="delivering"], .gift-sheet-buy-bar[data-state="bought"] {
  background: var(--tg-green);
}

.gift-sheet-buy-bar[data-state="paid_wait"]:hover, .gift-sheet-buy-bar[data-state="delivering"]:hover, .gift-sheet-buy-bar[data-state="bought"]:hover {
  background: #00b86c;
}

.gift-sheet-buy-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pay-sheet-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 4px 0;
}

.gift-sheet.result-sheet {
  width: 100%;
  max-width: none;
  border-radius: 24px 24px 0 0;
  background: var(--tg-bg-elevated);
  border: 1px solid var(--tg-border-subtle);
  box-shadow: none;
  padding: 12px 16px calc(12px + 0px);
  margin: 0;
  color: var(--tg-text);
  max-height: 62vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.result-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  color: #ffffff;
  cursor: pointer;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.result-sheet-close:active {
  transform: translateY(1px);
}

.result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-top: 10px;
}

.result-title {
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.result-subtitle {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
  width: 100%;
  box-sizing: border-box;
  padding: 0 2px;
}

.result-actions {
  width: 100%;
  margin-top: 8px;
}

.result-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: none;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.result-btn--success {
  background: var(--tg-green) !important;
  color: #fff !important;
}

.result-btn--danger {
  background: linear-gradient(180deg,rgba(255,90,90,0.98),rgba(215,45,45,0.98));
  color: #ffffff;
}

.result-btn:active {
  transform: translateY(1px);
}

.pay-sheet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  font-size: 34px;
  font-weight: 800;
  margin: 0 auto 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.pay-sheet--price .pay-sheet-icon--price {
  background: rgba(255,208,80,0.95);
  border-color: rgba(255,208,80,0.25);
  color: rgba(20,20,20,0.9);
  box-shadow: none;
}

.pay-action--price {
  background: rgba(255,208,80,0.95) !important;
  color: rgba(20,20,20,0.95) !important;
}

.pay-action--price:hover {
  background: rgba(255,208,80,0.9) !important;
}

.pay-sheet-title {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.pay-sheet-subtitle {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tg-text-secondary);
  width: 100%;
  box-sizing: border-box;
  padding: 0 2px;
}

.pay-sheet-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pay-action {
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  min-height: 52px;
  transition: transform 0.08s ease,background 0.12s ease,opacity 0.12s ease;
}

.pay-action:active {
  transform: scale(0.99);
}

.pay-action--primary {
  background: var(--tg-accent);
  color: #fff;
}

.pay-action--primary:hover {
  background: var(--tg-accent);
}

.boot-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tg-viewport-height,var(--app-height,100vh));
  min-height: var(--tg-viewport-stable-height,var(--tg-viewport-height,var(--app-height,100vh)));
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
  z-index: 100000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-bg) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.boot-loader.visible {
  opacity: 1;
  pointer-events: auto;
}

.boot-loader.boot-loader--hide {
  opacity: 0;
  pointer-events: none;
}

.boot-loader-inner {
  width: min(320px,88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.boot-loader-logo {
  display: none;
}

.boot-loader-lottie {
  width: clamp(92px,28vw,140px);
  height: clamp(92px,28vw,140px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.boot-loader-lottie svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.boot-loader-logo-img {
  width: 60px;
  height: 60px;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35));
}

.boot-loader-title {
  font-size: clamp(20px,6.5vw,30px) !important;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
  text-align: center;
}

.boot-loader-bar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  overflow: hidden;
  margin-top: 6px;
}

.boot-loader-bar-fill {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  animation: bootLoaderMove 1100ms ease-in-out infinite;
}

.gift-card-unavailable, .gift-card-bought {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  pointer-events: none;
  border-radius: inherit;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
}

.gift-card--bought .gift-image-wrap::after, .gift-card--unavailable .gift-image-wrap::after {
  content: none !important;
}

.gift-card--bought .gift-image {
  filter: grayscale(1) saturate(0) contrast(1) brightness(0.95) !important;
  opacity: 0.9 !important;
}

.gift-card--unavailable .gift-card-unavailable-text {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55) !important;
}

.gift-card--bought .gift-card-bought-text {
  background: rgba(0,110,70,0.72) !important;
  border: none !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.40) !important;
}

.gift-card--bought, .gift-card--unavailable {
  pointer-events: none !important;
  cursor: default !important;
}

.modal-close-btn, .gift-sheet-close, .result-sheet-close {
  width: 44px !important;
  height: 44px !important;
  font-size: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  line-height: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.modal-close-btn, .gift-sheet-close, .result-sheet-close {
  border: none !important;
  background: transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
  will-change: auto !important;
  transform: none !important;
}

.modal-close-btn:hover, .gift-sheet-close:hover, .result-sheet-close:hover {
  background: transparent !important;
}

.modal-close-btn:active, .gift-sheet-close:active, .result-sheet-close:active {
  background: transparent !important;
}

.modal-close-btn:hover, .gift-sheet-close:hover, .result-sheet-close:hover {
  transform: rotate(8deg) scale(1.04) !important;
  background: transparent !important;
}

.modal-close-btn:active, .gift-sheet-close:active, .result-sheet-close:active {
  transform: rotate(0deg) scale(0.96) !important;
}

.modal-close-btn:focus-visible, .gift-sheet-close:focus-visible, .result-sheet-close:focus-visible {
  outline: 2px solid rgba(42,174,93,0.65) !important;
  outline-offset: 2px !important;
}

.top-promo-banner:not(.top-promo-banner--photo)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 30%,rgba(255,255,255,0.55) 0 1px,rgba(0,0,0,0) 2px),radial-gradient(circle at 32% 22%,rgba(255,255,255,0.35) 0 1px,rgba(0,0,0,0) 2px),radial-gradient(circle at 46% 42%,rgba(255,255,255,0.38) 0 1px,rgba(0,0,0,0) 2px),radial-gradient(circle at 62% 24%,rgba(255,255,255,0.30) 0 1px,rgba(0,0,0,0) 2px),radial-gradient(circle at 74% 46%,rgba(255,255,255,0.34) 0 1px,rgba(0,0,0,0) 2px),radial-gradient(circle at 86% 28%,rgba(255,255,255,0.28) 0 1px,rgba(0,0,0,0) 2px),radial-gradient(circle at 90% 62%,rgba(255,255,255,0.20) 0 1px,rgba(0,0,0,0) 2px);
  opacity: 0.55;
  pointer-events: none;
}

.top-promo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.00) 40%,rgba(255,255,255,0.10) 70%,rgba(255,255,255,0.00) 100%);
  pointer-events: none;
  opacity: 0.65;
  mix-blend-mode: normal !important;
}

#payment-success-overlay, #payment-fail-overlay {
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.result-lottie {
  width: 124px;
  height: 124px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-lottie svg {
  width: 100%;
  height: 100%;
  display: block;
}

.top-promo-banner--photo {
  position: relative !important;
  height: 94px !important;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  border: none !important;
  box-shadow: none !important;
  margin: 0 0 10px !important;
  transform: none !important;
  background: var(--tg-bg-elevated) !important;
  will-change: auto !important;
  margin-top: 0 !important;
}

.top-promo-banner--photo::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: 0 !important;
}

.top-promo-banner--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(12px 12px at 12% 28%,rgba(255,255,255,0.18),transparent 60%),radial-gradient(10px 10px at 38% 62%,rgba(255,255,255,0.12),transparent 62%),radial-gradient(14px 14px at 72% 22%,rgba(255,255,255,0.14),transparent 62%),radial-gradient(16px 16px at 88% 70%,rgba(255,255,255,0.10),transparent 64%);
  opacity: 0.35;
  animation: none !important;
  display: none !important;
}

.top-promo-banner--photo:active {
  transform: none !important;
}

.top-promo-banner-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.98) brightness(1.00) contrast(1.02);
  border-radius: inherit;
  z-index: 0;
  opacity: 0;
  transition: opacity 140ms ease;
}

.top-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 10px 12px 8px !important;
  gap: 12px;
}

.top-banner-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}

.top-banner-title {
  font-size: clamp(13px,4.3vw,19px);
  font-weight: 850;
  color: #fff;
  line-height: 1.25 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  white-space: nowrap !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  text-overflow: clip;
  padding-bottom: 2px !important;
  overflow: hidden;
}

.top-banner-handle {
  margin-top: 0;
  font-size: 15px;
  font-weight: 850;
  color: rgba(255,255,255,0.96);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  line-height: 1.3 !important;
  padding-bottom: 2px !important;
}

#purchase-cancel-sheet.gift-sheet {
  padding-bottom: calc(14px + 0px);
  max-height: 70vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 24px 24px 0 0 !important;
}

.gift-card-unavailable-text, .gift-card-bought-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  font-weight: 900;
  letter-spacing: 0.6px;
  font-size: 18px;
  text-transform: none;
  white-space: nowrap;
}

.gift-card--unavailable .gift-buy-btn, .gift-card--bought .gift-buy-btn {
  display: flex !important;
}

.modal-close-btn:hover, .gift-sheet-close:hover, .result-sheet-close:hover, .modal-close-btn:active, .gift-sheet-close:active, .result-sheet-close:active {
  transform: none !important;
}

.gift-card--unavailable .gift-card-unavailable, .gift-card--bought .gift-card-bought {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

.gift-card--unavailable .gift-card-unavailable {
  background: rgba(0,0,0,0.38) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.gift-card--bought .gift-card-bought {
  background: transparent !important;
}

.gift-card--unavailable .gift-card-unavailable-text, .gift-card--bought .gift-card-bought-text {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.68) !important;
  color: rgba(255,255,255,0.98) !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px !important;
  font-size: 18px !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55) !important;
  white-space: nowrap !important;
}

#purchase-cancel-overlay.gift-sheet-overlay {
  align-items: flex-end !important;
  padding: 0 !important;
}

.ptr-content {
  transform: none;
  transition: none;
}

.ptr-content.ptr-pulling {
  transition: none;
}

.ptr-indicator.active, .ptr-indicator.ready, .ptr-indicator.refreshing {
  opacity: 1;
}

.filters-bar .filter-btn {
  height: 56px !important;
  min-height: 56px !important;
  padding: 8px 36px 10px 10px !important;
  border-radius: 18px !important;
  row-gap: 1px !important;
  min-width: 0 !important;
  padding-right: 36px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
}

.filters-bar #advanced-trigger {
  height: 56px !important;
  min-height: 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
}

.filters-bar .filter-label {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.filters-bar .filter-value {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.filters-bar .filter-value-text {
  font-size: 14px !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
  display: block !important;
  align-items: center !important;
  height: auto !important;
  padding-bottom: 1px !important;
}

.filters-bar .filter-value-count {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.filters-bar .filter-value-icon {
  width: var(--filter-preview-size) !important;
  height: var(--filter-preview-size) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.filters-bar .filter-value-backdrop-dot {
  width: var(--filter-preview-size) !important;
  height: var(--filter-preview-size) !important;
  flex: 0 0 var(--filter-preview-size) !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.22) inset;
}

.gift-card:hover, .gift-card:active, .gift-card:focus {
  background: var(--tg-bg-elevated) !important;
}

.modal-close-btn,  .gift-sheet-close,  .result-sheet-close,  .filters-bar button,  .gift-buy-btn {
  transition: none !important;
  transform: none !important;
  filter: none !important;
}

.modal-close-btn:hover, .modal-close-btn:active, .modal-close-btn:focus, .modal-close-btn:focus-visible, .gift-sheet-close:hover, .gift-sheet-close:active, .gift-sheet-close:focus, .gift-sheet-close:focus-visible, .result-sheet-close:hover, .result-sheet-close:active, .result-sheet-close:focus, .result-sheet-close:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.balance-widget {
  background-color: rgba(42,174,93,0.16) !important;
  border-radius: 999px !important;
  padding: 4px 6px !important;
  gap: 6px !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: auto;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: fit-content !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  background: rgba(10,33,54,0.98) !important;
  margin: 0 0 0 auto !important;
  height: 26px !important;
}

.balance-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 6px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 22px !important;
  cursor: pointer !important;
  transform: none !important;
  border-radius: 999px !important;
  border-right: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
}

.balance-pill:active {
  transform: none !important;
}

.balance-pill-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #2AAE5D !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  transform: translateZ(0) !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background-color: #2AAE5D !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale !important;
  image-rendering: auto !important;
  will-change: auto !important;
  text-rendering: geometricPrecision;
}

.balance-pill-amount {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 22px !important;
  font-variant-numeric: tabular-nums;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: 0.1px !important;
  height: 22px !important;
}

.balance-pill-amount::after {
  content: " ₽";
  margin-left: 1px;
  font-size: inherit;
  font-weight: inherit;
  opacity: 1;
  transform: none;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.balance-plus-btn {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: #2AAE5D !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translateZ(0) !important;
  font-weight: 700 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  outline: none !important;
  background-color: #2AAE5D !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

.balance-plus-btn svg {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  fill: none !important;
  stroke: currentColor !important;
  shape-rendering: geometricPrecision !important;
}

.balance-plus-btn:hover, .balance-plus-btn:active, .balance-plus-btn:focus, .balance-plus-btn:focus-visible {
  background: #fff !important;
  outline: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.filters-bar button:hover, .filters-bar button:active, .filters-bar button:focus, .filters-bar button:focus-visible {
  background: var(--tg-bg-elevated) !important;
  border-color: var(--tg-border-subtle) !important;
  box-shadow: none !important;
  outline: none !important;
}

.gift-card:hover, .gift-card:active, .gift-card:focus, .gift-card:focus-visible {
  background: var(--tg-bg-elevated) !important;
  box-shadow: none !important;
  outline: none !important;
}

.gift-sheet-close, .modal-close-btn, .result-sheet-close {
  transition: none !important;
}

.gift-card--bought .gift-image, .gift-card--bought .color-block {
  filter: none !important;
}

html.tg-webapp .modal-overlay,  html.tg-webapp .gift-sheet-overlay,  html.tg-webapp .toast,  html.tg-webapp .scroll-top-btn,  html.tg-webapp #payment-success-overlay,  html.tg-webapp #payment-fail-overlay,  html.tg-webapp .gift-card--unavailable .gift-card-unavailable {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.tg-webapp .top-promo-banner::after {
  mix-blend-mode: normal !important;
  opacity: 0.35 !important;
}

.modal-overlay[aria-hidden="true"], .gift-sheet-overlay[aria-hidden="true"] {
  display: flex !important;
}

html.tg-webapp-ios main {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: none !important;
  scroll-behavior: auto !important;
  background: var(--tg-bg) !important;
  contain: none !important;
  transform: none !important;
  will-change: scroll-position;
  padding-top: 0 !important;
  padding-bottom: calc(16px + 0px) !important;
}

html.tg-webapp-ios .top-promo-banner--photo {
  transform: none !important;
}

html.tg-webapp-ios .top-promo-banner--photo::after {
  animation: none !important;
  opacity: 0.55 !important;
}

html.tg-webapp-ios .top-promo-banner-photo {
  filter: none !important;
  transform: none !important;
}

html.tg-webapp-ios .gift-card--unavailable .gift-image, html.tg-webapp-ios .gift-sheet--unavailable .gift-sheet-visual {
  filter: none !important;
}

html.tg-webapp-ios .modal {
  transform: translateY(100%) !important;
  will-change: auto !important;
}

html.tg-webapp-ios .modal-overlay.open .modal {
  transform: translateY(0) !important;
}

.top-promo-banner-photo.is-loaded {
  opacity: 1;
}

.modal-overlay, .gift-sheet-overlay, .toast, .scroll-top-btn, #payment-success-overlay, #payment-fail-overlay, .gift-card-unavailable {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.gift-card-bought-text, .gift-card--bought .gift-card-bought-text {
  background: var(--tg-green) !important;
  color: #ffffff !important;
}

.gift-card--bought .gift-buy-btn, .gift-card--bought .gift-buy-btn:hover, .gift-card--bought .gift-buy-btn:active {
  background: var(--tg-green) !important;
  color: #ffffff !important;
}

.gift-sheet--bought .gift-sheet-tap-hint {
  display: none !important;
}

.gift-sheet--bought .gift-sheet-preview-img {
  filter: grayscale(1) saturate(0) contrast(1) brightness(0.95) !important;
  opacity: 0.9 !important;
}

.gift-sheet, .modal, .modal-list, .ptr-content, .result-sheet, .pay-sheet, #purchase-cancel-sheet.gift-sheet {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gift-sheet::-webkit-scrollbar, .modal::-webkit-scrollbar, .modal-list::-webkit-scrollbar, .ptr-content::-webkit-scrollbar, .result-sheet::-webkit-scrollbar, .pay-sheet::-webkit-scrollbar, #purchase-cancel-sheet.gift-sheet::-webkit-scrollbar {
  width: 0;
  height: 0;
}

html.tg-webapp-ios #ptr-content {
  transform: translate3d(0,var(--ptr-offset,0px),0) !important;
  backface-visibility: hidden;
}

html.tg-webapp-ios .app-shell {
  position: absolute !important;
  padding-bottom: 0px !important;
}

html.tg-webapp-ios .modal-overlay.open, html.tg-webapp-ios .modal-overlay.closing, html.tg-webapp-ios .gift-sheet-overlay.visible, html.tg-webapp-ios .toast.visible {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html, body {
  background: var(--tg-bg) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-family: var(--font-sans);
  height: var(--tg-shell-height,var(--tg-viewport-height,100vh)) !important;
  min-height: var(--tg-shell-min-height,var(--tg-viewport-stable-height,100vh)) !important;
}

.gift-card:active {
  transform: none !important;
}

.gift-card:active .gift-image {
  transform: scale(1.12) !important;
}

.gift-sheet-buy-bar .gift-buy-btn {
  border-radius: 999px !important;
}

.filter-btn, .modal-btn, .result-btn, .pay-action, .modal-close-btn, .gift-sheet-close, .result-sheet-close, .top-promo-banner--photo {
  transition: transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out) !important;
}

.filter-btn:active, .modal-btn:active, .result-btn:active, .pay-action:active, .modal-close-btn:active, .gift-sheet-close:active, .result-sheet-close:active, .top-promo-banner--photo:active {
  transform: scale(0.97) !important;
}

body, input, button, textarea, select {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility;
}

html.tg-webapp-ios, html.tg-webapp-ios body, html.tg-webapp-ios input, html.tg-webapp-ios button, html.tg-webapp-ios textarea, html.tg-webapp-ios select {
  -webkit-font-smoothing: antialiased !important;
}

.modal-overlay.closing .modal {
  transform: translateY(100%) !important;
  opacity: 0.4 !important;
}

.advanced-panel.closing {
  max-height: none !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) !important;
  margin-bottom: 0;
  overflow: hidden !important;
}

.balance-modal-body {
  padding: 14px 16px 12px !important;
  display: flex;
  flex-direction: column;
  gap: 14px !important;
}

.balance-modal-input-wrap {
  position: relative;
  width: 100%;
}

.balance-modal-input-wrap .search-input {
  width: 100%;
  padding-left: 14px !important;
  padding-right: 42px !important;
  font-variant-numeric: tabular-nums;
  height: 46px !important;
  border-radius: 16px !important;
  background: var(--tg-bg-elevated) !important;
}

.balance-modal-currency {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.75;
  font-weight: 700;
  font-size: 16px;
}

.topup-chips {
  display: flex;
  gap: 10px !important;
  flex-wrap: wrap;
}

.chip {
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: #3a3a3a !important;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.chip:active {
  transform: translateY(1px);
}

.chip--exact {
  border-color: rgba(46,133,255,0.35);
  background: rgba(46,133,255,0.10);
}

.chip.is-selected {
  border-color: rgba(46,133,255,0.60);
  background: rgba(46,133,255,0.16);
}

.topup-state {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

.topup-state-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}

.topup-state-sub {
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.35;
}

.topup-state.is-success {
  border-color: rgba(46,133,255,0.35);
  background: rgba(46,133,255,0.10);
}

.topup-state.is-failed {
  border-color: rgba(255,80,80,0.25);
  background: rgba(255,80,80,0.08);
}

.topbar {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  padding: calc(0px + 8px) 12px 10px !important;
  background: #141414 !important;
  border-bottom: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: calc(0px + 8px) !important;
  padding-bottom: 8px !important;
}

.modal--compact {
  height: auto !important;
  max-height: min(72dvh,520px) !important;
}

.balance-shortage {
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  position: relative;
}

.balance-shortage-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  display: flex !important;
  gap: 4px !important;
  align-items: flex-start !important;
  flex-direction: column !important;
}

.modal-overlay.open, .modal-overlay.closing, .gift-sheet-overlay.visible {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.balance-pill-amount, .balance-modal-currency, #topup-amount-input {
  font-variant-numeric: tabular-nums;
}

.modal-close-btn::before, .modal-close-btn::after, .gift-sheet-close::before, .gift-sheet-close::after, .result-sheet-close::before, .result-sheet-close::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform-origin: center;
}

.modal-close-btn::before, .gift-sheet-close::before, .result-sheet-close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}

.modal-close-btn::after, .gift-sheet-close::after, .result-sheet-close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

#collections-modal .modal, #models-modal .modal, #backdrops-modal .modal {
  background: #282727 !important;
  height: calc(100% - 4px) !important;
  max-height: calc(100% - 4px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  transform: translate3d(0,100%,0) !important;
  transition: transform var(--ui-menu-ms,260ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
  will-change: transform !important;
}

#collections-modal .modal-header, #models-modal .modal-header, #backdrops-modal .modal-header {
  padding: 18px 18px 12px !important;
}

#collections-modal .modal-search, #models-modal .modal-search, #backdrops-modal .modal-search {
  padding: 0 18px 10px !important;
}

#collections-modal .modal-search .search-input, #models-modal .modal-search .search-input, #backdrops-modal .modal-search .search-input {
  height: 46px !important;
  border-radius: 16px !important;
  background-color: var(--tg-bg-elevated) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  padding-left: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' stroke='rgba(148,155,164,1)' stroke-width='2' fill='none'/%3E%3Cline x1='15' y1='15' x2='20' y2='20' stroke='rgba(148,155,164,1)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 16px 50% !important;
  background-size: 16px 16px !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 15px !important;
}

#collections-modal .modal-item, #models-modal .modal-item, #backdrops-modal .modal-item {
  padding: 12px 18px !important;
  min-height: 74px !important;
  align-items: center !important;
}

#collections-modal .item-name, #models-modal .item-name, #backdrops-modal .item-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#collections-modal .price-value-modal, #models-modal .price-value-modal, #backdrops-modal .price-value-modal {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--font-sans) !important;
  margin-bottom: 2px !important;
}

#collections-modal .modal-footer, #models-modal .modal-footer, #backdrops-modal .modal-footer {
  border-top: none !important;
  padding: 14px 18px calc(14px + 0px) !important;
  background: transparent !important;
}

#collections-modal .modal-btn, #models-modal .modal-btn, #backdrops-modal .modal-btn {
  border-radius: 14px !important;
  height: 54px !important;
}

html, body, .app-shell, main {
  background: var(--tg-bg) !important;
}

.gift-card, .filter-btn, .search-input, .advanced-panel, .modal, .gift-sheet, .gift-sheet-traits {
  background: var(--tg-bg-elevated) !important;
}

.modal-btn.primary, .gift-sheet-buy-bar, .gift-buy-btn {
  background: var(--tg-accent) !important;
}

.gift-sheet-buy-bar:hover, .modal-btn.primary:hover, .gift-buy-btn:hover {
  background: var(--tg-accent) !important;
}

.filter-btn, .gift-card, .modal-btn, .gift-sheet-buy-bar, .balance-pill {
  transition: background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast) !important;
}

.modal-overlay, .gift-sheet-overlay, .result-sheet-overlay {
  background: rgba(0,0,0,0.62) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity var(--ui-menu-ms) var(--ease-out) !important;
}

.modal-overlay[aria-hidden="true"] {
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
}

.modal-overlay.closing .modal, .modal-overlay[aria-hidden="true"] .modal {
  transform: translateY(100%);
  opacity: 0;
}

.gift-sheet-overlay[aria-hidden="true"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.gift-sheet-overlay.visible .gift-sheet {
  transform: translateY(0) !important;
  opacity: 1;
}

.filter-btn, .gift-card, .modal-btn, .gift-buy-btn, .balance-pill {
  transition: background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast) !important;
}

.gift-card--unavailable .gift-buy-btn, .gift-card--unavailable .gift-buy-btn:hover, .gift-card--unavailable .gift-buy-btn:active, .gift-card--unavailable .gift-buy-btn:disabled {
  background: #3a3a3a !important;
  color: #ffffff !important;
}

.gift-card--bought .gift-buy-btn, .gift-card--bought .gift-buy-btn:hover, .gift-card--bought .gift-buy-btn:active, .gift-card--bought .gift-buy-btn:disabled, .gift-card--locked .gift-buy-btn, .gift-card--locked .gift-buy-btn:hover, .gift-card--locked .gift-buy-btn:active, .gift-card--locked .gift-buy-btn:disabled {
  background: var(--tg-green) !important;
  color: #ffffff !important;
  background-color: var(--tg-accent) !important;
  background-image: var(--gp-accent-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.gift-sheet-buy-bar[data-state="sold"], .gift-sheet-buy-bar[data-state="sold"]:hover, .gift-sheet-buy-bar[data-state="sold"]:active, .gift-sheet--unavailable .gift-sheet-buy-bar, .gift-sheet--unavailable .gift-sheet-buy-bar:hover, .gift-sheet--unavailable .gift-sheet-buy-bar:active {
  background: #3a3a3a !important;
  color: #ffffff !important;
}

.gift-sheet-buy-bar[data-state="paid_wait"], .gift-sheet-buy-bar[data-state="delivering"], .gift-sheet-buy-bar[data-state="bought"] {
  background: var(--tg-green) !important;
}

.gift-sheet-buy-bar[data-state="paid_wait"]:hover, .gift-sheet-buy-bar[data-state="delivering"]:hover, .gift-sheet-buy-bar[data-state="bought"]:hover {
  background: #00b86c !important;
}

.balance-plus-btn:active {
  transform: none !important;
}

.balance-plus-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  filter: none !important;
  box-shadow: none !important;
}

.balance-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.balance-summary-label {
  opacity: 0.8;
  font-size: 13px;
}

.balance-summary-value {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}

.topup-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.topup-label {
  opacity: 0.85;
  font-size: 13px;
}

.balance-fee-info {
  flex-basis: 100%;
  width: 100%;
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--tg-bg-elevated-soft);
  border: 1px solid var(--tg-border-subtle);
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.25;
}

.balance-settings {
  margin-top: 2px;
}

.balance-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--tg-bg-elevated-soft);
  border: 1px solid var(--tg-border-subtle);
}

.balance-setting-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.balance-setting-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1px;
}

.balance-setting-sub {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.2;
}

.tg-switch {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tg-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  transition: transform 180ms ease,background 180ms ease;
}

.tg-switch[aria-checked="true"] {
  background: rgba(42,174,93,0.55) !important;
  border-color: rgba(42,174,93,0.55) !important;
}

.tg-switch[aria-checked="true"]::after {
  transform: translateX(18px);
  background: #ffffff;
}

.tg-switch:active {
  transform: scale(0.98);
}

.chip.is-selected, .chip--exact.is-selected {
  border-color: rgba(42,174,93,0.75) !important;
  background: rgba(42,174,93,0.22) !important;
}

.modal, .gift-sheet, .result-sheet, .pay-sheet {
  box-shadow: none !important;
}

.modal-btn:disabled, .gift-sheet-buy-bar:disabled, .gift-buy-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

button, input, textarea, select {
  font-family: var(--font-sans);
}

.gift-sheet, .result-sheet {
  transition: transform var(--ui-menu-ms) var(--ease-out),opacity var(--ui-menu-ms) var(--ease-out);
  will-change: transform,opacity;
}

.modal-footer.balance-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-btn.secondary {
  background: transparent;
  border: 1px solid var(--tg-border);
  color: var(--tg-text);
}

.modal-btn.secondary:active {
  transform: translateY(1px);
}

.topup-state-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topup-mini-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--tg-border);
  background: transparent;
  color: var(--tg-text);
  font-size: 13px;
  font-weight: 600;
}

.topup-mini-btn:active {
  transform: translateY(1px);
}

.modal-close-btn, .gift-sheet-close, .result-sheet-close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.gift-sheet, .result-sheet, .pay-sheet {
  transition: transform var(--ui-menu-ms) var(--ease-out) !important;
  transform: translate3d(0,100%,0) !important;
  will-change: transform;
  opacity: 1 !important;
}

.gift-sheet.open, .result-sheet.open, .pay-sheet.open {
  transform: none !important;
}

html.overlay-open, html.overlay-open body {
  overflow: hidden !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

.tonkeeper-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100%;
  overflow: hidden !important;
  height: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: rgba(0,0,0,0.6) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
  z-index: 9999 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: var(--tg-viewport-stable-height,100vh);
  visibility: hidden !important;
  padding-bottom: calc(12px + 0px + var(--tg-keyboard-inset,0px)) !important;
  overflow-y: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.tonkeeper-overlay.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  /* Do not animate padding-bottom: it causes inner UI to shift/jitter on open. */
  transition: opacity var(--ui-menu-ms) var(--ease-out),visibility 0ms linear 0ms !important;
  visibility: visible !important;
}

.tonkeeper-sheet {
  position: relative !important;
  width: 100% !important;
  background: #1c1c1e !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 20px 20px calc(20px + 0px) !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5) !important;
  overflow: hidden !important;
  border: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: translateY(100%) !important;
  transition: transform 250ms cubic-bezier(0.32,0.72,0,1) !important;
  will-change: transform !important;
  opacity: 0 !important;
  max-height: 85vh !important;
  clip-path: inset(0 round 22px) !important;
  min-height: 360px !important;
  overflow-y: auto !important;
}

.tonkeeper-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.06) !important;
  color: transparent !important;
  font-size: 28px !important;
  line-height: 1 !important;
  display: flex !important;
  place-items: center;
  cursor: pointer !important;
  z-index: 10 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
}

.tonkeeper-close:hover {
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.08) !important;
}

.tonkeeper-purse {
  width: 140px !important;
  height: 110px !important;
  margin: 0 auto 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible;
}

.tonkeeper-purse > * {
  width: 100% !important;
  height: 100% !important;
}

.tonkeeper-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 8px 0 16px !important;
  text-align: center !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: #fff !important;
}

.tonkeeper-subtitle {
  font-size: 13px !important;
  opacity: 0.78 !important;
  line-height: 1.35 !important;
  margin-top: 6px;
  text-align: center;
}

.tonkeeper-input-wrap {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch !important;
  margin: 16px 0 !important;
}

.tonkeeper-input {
  width: 100% !important;
  height: 56px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-size: 20px !important;
  padding: 0 50px 0 20px !important;
  outline: none !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}

.tonkeeper-input:focus {
  border-color: rgba(255,255,255,0.25) !important;
}

.tonkeeper-input::placeholder {
  color: rgba(255,255,255,0.35);
}

.tonkeeper-input.is-invalid {
  border-color: rgba(255,78,78,0.85);
  box-shadow: 0 0 0 2px rgba(255,78,78,0.18);
}

.tonkeeper-btn {
  width: 100% !important;
  height: 56px !important;
  border: none !important;
  border-radius: 14px !important;
  background: #007AFF !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 16px !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  line-height: 1;
}

.tonkeeper-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.tonkeeper-sheet--confirm {
  padding: 14px 16px 18px !important;
}

.confirm-spinner {
  width: 74px;
  height: 74px;
  margin: 8px auto 10px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.14);
  border-top-color: rgba(255,255,255,0.52);
  animation: confirmSpin 0.9s linear infinite;
}

.balance-shortage--compact {
  margin: 4px auto 10px;
  width: min(280px,100%);
  padding: 10px 12px;
  border-radius: 14px;
}

.balance-shortage--compact .balance-shortage-title {
  font-size: 14px;
}

.tonkeeper-sheet .balance-shortage--compact {
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 12px 12px !important;
  border-radius: 16px !important;
}

.tonkeeper-sheet .balance-shortage-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  text-align: center !important;
}

.tonkeeper-sheet .balance-shortage-head {
  font-weight: 700 !important;
  color: rgba(242,63,66,0.98) !important;
  font-size: 14px !important;
  line-height: 18px !important;
}

.tonkeeper-sheet .balance-shortage-need {
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  color: rgba(255,255,255,0.94) !important;
  font-variant-numeric: tabular-nums;
}

.tonkeeper-field {
  position: relative !important;
  width: 100%;
}

.tonkeeper-currency {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.4) !important;
  pointer-events: none !important;
  font-size: 20px !important;
}

.tonkeeper-close::before, .tonkeeper-close::after {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 2px !important;
  background: rgba(255,255,255,0.7) !important;
  border-radius: 1px !important;
  top: 50% !important;
  left: 50% !important;
  transform-origin: center;
  display: none !important;
}

.tonkeeper-close::before {
  transform: translate(-50%,-50%) rotate(45deg) !important;
}

.tonkeeper-close::after {
  transform: translate(-50%,-50%) rotate(-45deg) !important;
}

.balance-shortage::before {
  content: none !important;
  position: absolute;
  left: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  display: none !important;
  place-items: center;
  font-weight: 900;
  color: rgba(255,92,92,0.95);
  background: rgba(255,92,92,0.14);
}

.tonkeeper-overlay.visible .tonkeeper-sheet {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.balance-shortage-head {
  color: var(--tg-red) !important;
  font-weight: 900 !important;
}

.balance-shortage-need {
  font-weight: 900 !important;
}

.modal-overlay, .gift-sheet-overlay, .tonkeeper-overlay {
  transition: opacity var(--anim-ms) var(--anim-ease),visibility 0ms linear var(--anim-ms) !important;
  padding-left: var(--app-gutter-x) !important;
  padding-right: var(--app-gutter-x) !important;
}

.tonkeeper-close:active {
  background: rgba(255,255,255,0.12) !important;
}

.tonkeeper-sheet .balance-shortage {
  background: transparent !important;
  border: none !important;
  padding: 6px 0 2px !important;
  margin: 4px 0 10px !important;
  text-align: center !important;
}

.tonkeeper-overlay.settled .tonkeeper-sheet {
  transform: none !important;
  will-change: auto !important;
}

.tonkeeper-title, .modal-title {
  font-weight: 700 !important;
}

.advanced-search .search-input {
  background: transparent !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  height: 46px !important;
  box-sizing: border-box !important;
  padding: 0 44px 0 48px !important;
  line-height: 46px !important;
}

.tonkeeper-overlay.visible, .tonkeeper-overlay.closing {
  visibility: visible !important;
  transition: opacity var(--ui-menu-ms) var(--ease-out),visibility 0ms linear var(--ui-menu-ms) !important;
}

.tonkeeper-overlay.closing {
  opacity: 0 !important;
  pointer-events: none !important;
  /* Do not animate padding-bottom: it makes inner controls "jump" during open/close. */
  transition: opacity var(--ui-menu-ms) var(--ease-out),visibility 0ms linear var(--ui-menu-ms) !important;
  visibility: visible !important;
}

.tonkeeper-overlay.closing .tonkeeper-sheet {
  transform: translateY(100%) !important;
  opacity: 0.4 !important;
}

.tonkeeper-purse canvas, .tonkeeper-purse svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.purse-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 60%;
  animation: purseFloat 1800ms var(--ease-out) infinite;
}

.gift-sheet-buy-bar, .gift-buy-btn, .pay-action, .modal-btn, .tonkeeper-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  background-image: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.gift-sheet-buy-bar:focus, .gift-buy-btn:focus, .pay-action:focus, .modal-btn:focus, .tonkeeper-btn:focus {
  outline: none !important;
}

.gift-sheet-buy-bar::-moz-focus-inner, .gift-buy-btn::-moz-focus-inner, .pay-action::-moz-focus-inner, .modal-btn::-moz-focus-inner, .tonkeeper-btn::-moz-focus-inner {
  border: 0 !important;
}

.gift-image-wrap {
  background: transparent !important;
}

.gift-image, .gift-sheet-preview-img {
  object-fit: contain !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
}

button:active, a:active, [role="button"]:active, .chip:active, .gift-card:active, .modal-close-btn:active, .gift-sheet-close:active, .result-sheet-close:active, .pay-action:active, .tonkeeper-btn:active, .gift-sheet-buy-bar:active {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

button, a, [role="button"], .gift-card, .chip, .balance-pill, .balance-plus-btn, .gift-sheet-buy-bar, .tonkeeper-btn, .pay-action {
  transition: none !important;
}

.balance-pill:active, .balance-plus-btn:active {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html.tg-webapp .tonkeeper-overlay {
  padding-left: 16px !important;
  padding-right: 16px !important;
  transition: opacity 180ms ease,padding-bottom 240ms cubic-bezier(0.16,1,0.3,1) !important;
}

html.tg-webapp .tonkeeper-sheet {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  padding-bottom: calc(16px + 0px) !important;
}

html.tg-webapp .pay-sheet {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  padding-bottom: calc(16px + 0px) !important;
}

.tonkeeper-subtitle {
  font-size: 14px !important;
  line-height: 18px !important;
}

.modal-close-btn, .gift-sheet-close, .result-sheet-close, .tonkeeper-close {
  transition: none !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.modal-close-btn:hover, .gift-sheet-close:hover, .result-sheet-close:hover, .tonkeeper-close:hover, .modal-close-btn:active, .gift-sheet-close:active, .result-sheet-close:active, .tonkeeper-close:active {
  background: transparent !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

button:active, a:active, [role="button"]:active, .pay-action:active, .tonkeeper-btn:active, .gift-buy-btn:active, .gift-sheet-buy-bar:active, .chip:active {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.tonkeeper-sheet, .tonkeeper-sheet * {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: auto !important;
}

#quick-topup-shortage {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
  margin: 12px 0 !important;
  padding: 14px !important;
  border-radius: 14px !important;
  background: rgba(255,59,48,0.1) !important;
  border: 1px solid rgba(255,59,48,0.2) !important;
}

#topup-menu-sheet {
  text-align: center;
  width: min(420px,calc(100% - 32px)) !important;
  max-width: 420px !important;
  min-height: 0 !important;
  max-height: min(520px,calc(var(--tg-viewport-stable-height,var(--tg-viewport-height,100vh)) - 32px)) !important;
  padding: 16px 16px 14px !important;
  border-radius: 22px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#quick-topup-shortage-amount {
  font-weight: 900 !important;
}

.gift-sheet-overlay .gift-sheet-close,  .gift-sheet .gift-sheet-close,  .pay-sheet .gift-sheet-close,  .modal-overlay .modal-close-btn,  .result-sheet .result-sheet-close,  .tonkeeper-sheet .tonkeeper-close,  .tonkeeper-overlay .tonkeeper-close {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
}

.gift-sheet-overlay .gift-sheet-close:hover,  .gift-sheet .gift-sheet-close:hover,  .pay-sheet .gift-sheet-close:hover,  .modal-overlay .modal-close-btn:hover,  .result-sheet .result-sheet-close:hover,  .tonkeeper-sheet .tonkeeper-close:hover,  .tonkeeper-overlay .tonkeeper-close:hover,  .gift-sheet-overlay .gift-sheet-close:active,  .gift-sheet .gift-sheet-close:active,  .pay-sheet .gift-sheet-close:active,  .modal-overlay .modal-close-btn:active,  .result-sheet .result-sheet-close:active,  .tonkeeper-sheet .tonkeeper-close:active,  .tonkeeper-overlay .tonkeeper-close:active,  .gift-sheet-overlay .gift-sheet-close:focus,  .gift-sheet .gift-sheet-close:focus,  .pay-sheet .gift-sheet-close:focus,  .modal-overlay .modal-close-btn:focus,  .result-sheet .result-sheet-close:focus,  .tonkeeper-sheet .tonkeeper-close:focus,  .tonkeeper-overlay .tonkeeper-close:focus,  .gift-sheet-overlay .gift-sheet-close:focus-visible,  .gift-sheet .gift-sheet-close:focus-visible,  .pay-sheet .gift-sheet-close:focus-visible,  .modal-overlay .modal-close-btn:focus-visible,  .result-sheet .result-sheet-close:focus-visible,  .tonkeeper-sheet .tonkeeper-close:focus-visible,  .tonkeeper-overlay .tonkeeper-close:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
}

.tonkeeper-sheet--confirm .confirm-spinner {
  display: block !important;
}

.balance-pill:active, .balance-pill:focus, .balance-pill:focus-visible, .balance-plus-btn:active, .balance-plus-btn:focus, .balance-plus-btn:focus-visible {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
  outline: none !important;
}

button, a, [role="button"], .gift-card, .filter-btn, .chip, .btn-outline, .modal-btn, .pay-action, .gift-sheet-buy-bar, .gift-buy-btn, .scroll-top-btn {
  transition: none !important;
}

button:active, a:active, [role="button"]:active, .gift-card:active, .filter-btn:active, .chip:active, .btn-outline:active, .modal-btn:active, .pay-action:active, .gift-sheet-buy-bar:active, .gift-buy-btn:active, .scroll-top-btn:active {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.top-promo-banner--photo, .top-promo-banner--photo *, .gift-card, .gift-card *, .filter-btn, .chip, .btn-outline, .modal-btn, .pay-action, .gift-sheet-buy-bar, .gift-buy-btn, .inline-reset-btn, .scroll-top-btn, .balance-pill, .balance-plus-btn {
  transition: none !important;
}

.top-promo-banner--photo:active,  .gift-card:active,  .gift-card:active .gift-image,  .gift-card:active img,  .filter-btn:active,  .chip:active,  .btn-outline:active,  .modal-btn:active,  .pay-action:active,  .gift-sheet-buy-bar:active,  .gift-buy-btn:active,  .inline-reset-btn:active,  .scroll-top-btn:active {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.modal-overlay, .gift-sheet-overlay, .pay-sheet-overlay, .tonkeeper-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-bottom: 0 !important;
  transition: opacity var(--ui-menu-ms) var(--ease-out),visibility 0ms linear var(--ui-menu-ms) !important;
  will-change: opacity;
  isolation: isolate !important;
}

.modal, .gift-sheet, .result-sheet, .pay-sheet, .tonkeeper-sheet {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  opacity: 1 !important;
  transition-property: transform !important;
  transition-duration: var(--ui-menu-ms,280ms) !important;
  transition-timing-function: var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  box-shadow: none !important;
}

.gift-sheet-overlay[aria-hidden="false"] {
  visibility: visible !important;
}

#quick-topup-shortage .balance-shortage-title {
  align-items: center !important;
  text-align: center !important;
}

#quick-topup-shortage, #balance-shortage {
  padding: 8px 12px !important;
  border-radius: 14px !important;
}

#quick-topup-shortage .balance-shortage-title, #balance-shortage .balance-shortage-title {
  align-items: center !important;
  text-align: center !important;
}

.gift-sheet-buy-bar, .gift-sheet-buy-bar:focus, .gift-sheet-buy-bar:focus-visible, .gift-sheet-buy-bar:active, .gift-sheet-buy-bar:disabled, .gift-sheet-buy-bar[data-state="sold"], .gift-sheet-buy-bar[data-state="sold"]:focus, .gift-sheet-buy-bar[data-state="sold"]:active {
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
  border: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background-clip: padding-box !important;
}

.balance-plus-btn::before, .balance-plus-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #111;
  border-radius: 2px;
}

.balance-plus-btn::before {
  width: 10px;
  height: 2px;
}

.balance-plus-btn::after {
  width: 2px;
  height: 10px;
}

.balance-plus-btn:hover, .balance-plus-btn:active, .balance-pill:hover, .balance-pill:active {
  transform: none !important;
  filter: none !important;
}

button,  .gift-buy-btn,  .filters-bar button,  .balance-widget,  .balance-pill,  .balance-plus-btn,  .modal-btn {
  border: none !important;
}

input, textarea, select, .search-input, .modal-search .search-input, .balance-modal-input-wrap .search-input {
  border: none !important;
}

.gift-card,  .gift-sheet,  .topup-state,  .balance-shortage {
  border: none !important;
}

.advanced-search .search-icon {
  left: 18px !important;
  width: 18px !important;
  height: 18px !important;
  background-size: 18px 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.modal-close-btn, .gift-sheet-close, .result-sheet-close, .tonkeeper-close {
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
  z-index: 50 !important;
}

.modal-close-btn::before, .modal-close-btn::after, .gift-sheet-close::before, .gift-sheet-close::after, .result-sheet-close::before, .result-sheet-close::after, .tonkeeper-close::before, .tonkeeper-close::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 18px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  top: 50% !important;
  left: 50% !important;
  transform-origin: center !important;
}

.modal-close-btn::before, .gift-sheet-close::before, .result-sheet-close::before, .tonkeeper-close::before {
  transform: translate(-50%,-50%) rotate(45deg) !important;
}

.modal-close-btn::after, .gift-sheet-close::after, .result-sheet-close::after, .tonkeeper-close::after {
  transform: translate(-50%,-50%) rotate(-45deg) !important;
}

.modal-close-btn:hover, .gift-sheet-close:hover, .result-sheet-close:hover, .tonkeeper-close:hover, .modal-close-btn:active, .gift-sheet-close:active, .result-sheet-close:active, .tonkeeper-close:active, .modal-close-btn:focus, .gift-sheet-close:focus, .result-sheet-close:focus, .tonkeeper-close:focus, .modal-close-btn:focus-visible, .gift-sheet-close:focus-visible, .result-sheet-close:focus-visible, .tonkeeper-close:focus-visible {
  background: transparent !important;
  outline: none !important;
}

#collections-modal .modal-check, #models-modal .modal-check, #backdrops-modal .modal-check {
  background: transparent !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  border: 1.6px solid rgba(255,255,255,0.22) !important;
  box-shadow: none !important;
  margin-right: 12px !important;
  border-width: 1.6px !important;
  transition: background-color 220ms var(--ease-out),border-color 220ms var(--ease-out) !important;
}

#collections-modal .item-info, #models-modal .item-info, #backdrops-modal .item-info {
  justify-content: center !important;
  min-height: 46px !important;
  margin-right: 12px !important;
  min-width: 0 !important;
}

#collections-modal .item-price, #models-modal .item-price, #backdrops-modal .item-price {
  min-width: 104px !important;
  width: 64px !important;
}

#collections-modal .price-label, #models-modal .price-label, #backdrops-modal .price-label {
  font-size: 12px !important;
  line-height: 1.15 !important;
  opacity: 0.78 !important;
  white-space: nowrap !important;
  word-break: break-word !important;
}

.inline-reset-btn:active {
  background: var(--tg-bg-elevated-soft) !important;
}

#collections-modal .modal-check-icon, #models-modal .modal-check-icon, #backdrops-modal .modal-check-icon {
  width: 15px !important;
  height: 11px !important;
  transform: scale(0) !important;
  transition: transform 180ms var(--ease-out) !important;
  opacity: 1 !important;
}

.sticky-filters {
  position: sticky;
  top: 0;
  z-index: 60 !important;
  background: var(--tg-bg);
  padding-top: 6px !important;
  padding-bottom: var(--ui-stack-gap) !important;
  margin-bottom: 0;
  box-shadow: none;
  border-bottom: none;
}

.sticky-filters .inline-reset-btn {
  margin-top: 0 !important;
  margin-bottom: var(--sticky-stack-gap) !important;
  margin: 0 !important;
}

#collections-modal .modal-subtitle, #models-modal .modal-subtitle, #backdrops-modal .modal-subtitle {
  font-size: 15px !important;
  line-height: 1.35 !important;
  padding-bottom: 0 !important;
}

.inline-reset-btn:focus, .inline-reset-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

html.tg-webapp-ios .app-shell {
  padding-top: calc(0px + var(--tg-ios-topbar)) !important;
}

html.tg-webapp-ios .modal-overlay, html.tg-webapp-ios .tonkeeper-overlay, html.tg-webapp-ios .gift-sheet-overlay {
  padding-top: calc(0px + var(--tg-ios-topbar)) !important;
}

html.tg-webapp-ios .topbar {
  padding-top: calc(0px + 8px) !important;
  padding-bottom: 8px !important;
}

.tonkeeper-sheet, .tonkeeper-sheet--confirm {
  width: min(420px,calc(100% - 32px)) !important;
  max-width: 420px !important;
  border-radius: 24px !important;
  margin: 0 auto !important;
}

.gift-sheet-overlay .pay-sheet, .gift-sheet-overlay .result-sheet {
  width: min(420px,calc(100% - 24px)) !important;
  max-width: 420px !important;
  border-radius: 24px !important;
  margin: 0 auto calc(12px + 0px) !important;
}

.modal, .gift-sheet, .tonkeeper-sheet, .pay-sheet, .result-sheet {
  transition: transform var(--anim-ms) var(--anim-ease),opacity var(--anim-ms) var(--anim-ease) !important;
}

.filter-btn--single .filter-value-text {
  display: block !important;
  line-height: 1.15 !important;
}

#collections-modal, #models-modal, #backdrops-modal {
  padding-top: calc(0px + var(--tg-ios-topbar,0px)) !important;
  padding-bottom: 0 !important;
  align-items: flex-end !important;
  background: transparent !important;
  transition: opacity var(--ui-menu-ms,260ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
}

.filter-value, .filter-value-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
}

html.tg-webapp-ios {
  --tg-ios-topbar: 44px !important;
}

.sticky-filters .filters-bar {
  margin-bottom: 0 !important;
}

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

.filters-bar .filter-btn::before, .filters-bar .filter-btn::after {
  right: 14px !important;
}

.filters-bar .filter-label, .filters-bar .filter-value {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  line-height: 1.3 !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
}

.filters-bar .filter-value-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--filter-preview-gap) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  height: var(--filter-preview-size) !important;
  min-height: var(--filter-preview-size) !important;
}

.empty-state #reset-filters-btn.btn-outline, .empty-state .btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.05) !important;
}

.filter-btn::before, .filter-btn::after {
  right: 14px !important;
}

.empty-state .btn-outline, #reset-filters-btn.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.05) !important;
}

#balance-modal .modal {
  width: min(420px,calc(100% - 28px)) !important;
  max-width: 420px !important;
  border-radius: 24px !important;
  margin: 0 auto calc(12px + 0px) !important;
}

.filters-bar .filter-label, .filters-bar .filter-value, .filters-bar .filter-value-text {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.filters-bar .filter-value, .filters-bar .filter-value-text {
  font-size: 12px !important;
}

html.tg-webapp-ios .sticky-filters {
  padding-top: 4px !important;
}

html, body, button, input, textarea, select, *, *::before, *::after {
  font-family: "SF Pro Display" !important;
  font-synthesis: none !important;
}

input::placeholder, textarea::placeholder {
  font-family: "SF Pro Display" !important;
}

#collections-modal .modal-title, #models-modal .modal-title, #backdrops-modal .modal-title {
  font-size: 28px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 6px !important;
  font-weight: 700 !important;
}

.filters-bar .filter-btn:not(#advanced-trigger)::before, .filters-bar .filter-btn:not(#advanced-trigger)::after {
  width: 8px !important;
  height: 8px !important;
  border-right-width: 2px !important;
  border-bottom-width: 2px !important;
  right: 14px !important;
}

.filters-bar .filter-value-icon img {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  display: block !important;
}

.modal-overlay .modal-close-btn, .gift-sheet .gift-sheet-close, .gift-sheet .result-sheet-close, .tonkeeper-sheet .tonkeeper-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  margin: 0 !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.gift-sheet, .pay-sheet, .result-sheet, .tonkeeper-sheet {
  transform: translate3d(0,100%,0) !important;
  opacity: 0.4 !important;
  transition: transform var(--ui-menu-ms) var(--ease-out),opacity var(--ui-menu-ms) var(--ease-out) !important;
  will-change: transform,opacity;
}

.gift-sheet.open, .pay-sheet.open, .result-sheet.open, .tonkeeper-overlay.visible .tonkeeper-sheet {
  transform: none !important;
  opacity: 1 !important;
}

.modal-overlay.open.settled .modal {
  transform: none !important;
}

.gift-sheet-overlay.settled .gift-sheet.open, .gift-sheet-overlay.settled .pay-sheet.open, .gift-sheet-overlay.settled .result-sheet.open {
  transform: none !important;
}

.modal-overlay.settled .modal, .gift-sheet-overlay.settled .gift-sheet, .gift-sheet-overlay.settled .pay-sheet, .gift-sheet-overlay.settled .result-sheet, .tonkeeper-overlay.settled .tonkeeper-sheet {
  transition: none !important;
}

.modal-overlay .modal, .modal-overlay.open .modal, .modal-overlay.closing .modal {
  opacity: 1 !important;
  transition-property: transform !important;
}

.tonkeeper-overlay .tonkeeper-sheet, .tonkeeper-overlay.visible .tonkeeper-sheet, .tonkeeper-overlay.closing .tonkeeper-sheet {
  opacity: 1 !important;
  transition-property: transform !important;
}

#backdrops-modal .modal-item {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  min-height: 82px !important;
}

html.tg-phone .modal-overlay,  html.tg-phone .gift-sheet-overlay,  html.tg-phone .pay-sheet-overlay,  html.tg-phone .tonkeeper-overlay,  html.tg-phone #payment-success-overlay,  html.tg-phone #payment-fail-overlay,  html.tg-phone #purchase-cancel-overlay,  html.tg-phone #price-change-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-overlay, .gift-sheet-overlay, .pay-sheet-overlay, .tonkeeper-overlay, #payment-success-overlay, #payment-fail-overlay {
  background: var(--menu-backdrop-bg) !important;
  backdrop-filter: blur(var(--menu-backdrop-blur)) !important;
  -webkit-backdrop-filter: blur(var(--menu-backdrop-blur)) !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
}

.modal-overlay[aria-hidden="false"] {
  visibility: visible !important;
}

.gift-sheet-overlay[aria-hidden="true"], .pay-sheet-overlay[aria-hidden="true"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

.gift-sheet-overlay[aria-hidden="false"], .pay-sheet-overlay[aria-hidden="false"] {
  visibility: visible !important;
}

.gift-sheet-overlay.visible, .pay-sheet-overlay.visible {
  pointer-events: auto !important;
}

.tonkeeper-overlay[aria-hidden="true"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

.tonkeeper-overlay[aria-hidden="false"] {
  visibility: visible !important;
}

#collections-modal .modal-list, #models-modal .modal-list, #backdrops-modal .modal-list {
  background: #282727 !important;
}

html.tg-webapp .tonkeeper-sheet, html.tg-webapp .tonkeeper-sheet--confirm {
  width: min(420px,calc(100% - 32px)) !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
}

#top-banner {
  margin-bottom: var(--sticky-stack-gap,10px) !important;
}

.sticky-filters .inline-reset-btn.inline-reset-btn--visible {
  margin-top: var(--ui-stack-gap) !important;
}

.gift-sheet-preview-img.is-hidden {
  visibility: hidden !important;
}

.modal-overlay, .gift-sheet-overlay, .pay-sheet-overlay, .tonkeeper-overlay, #payment-success-overlay, #payment-fail-overlay, #purchase-cancel-overlay, #price-change-overlay {
  background: transparent !important;
  opacity: 1 !important;
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-overlay::before, .gift-sheet-overlay::before, .pay-sheet-overlay::before, .tonkeeper-overlay::before, #payment-success-overlay::before, #payment-fail-overlay::before, #purchase-cancel-overlay::before, #price-change-overlay::before {
  content: "";
  position: absolute;
  inset: auto !important;
  background: var(--menu-backdrop-bg,rgba(0,0,0,0.72));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ui-backdrop-ms) var(--ease-out);
  backdrop-filter: blur(var(--menu-backdrop-blur,12px));
  -webkit-backdrop-filter: blur(var(--menu-backdrop-blur,12px));
  top: var(--overlay-top-offset,0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

.modal-overlay.open::before {
  opacity: 1 !important;
}

.gift-sheet-overlay.visible::before {
  opacity: 1;
}

.pay-sheet-overlay.visible::before {
  opacity: 1;
}

.tonkeeper-overlay.visible::before {
  opacity: 1;
}

#payment-success-overlay.visible::before {
  opacity: 1;
}

#payment-fail-overlay.visible::before {
  opacity: 1;
}

#purchase-cancel-overlay.visible::before {
  opacity: 1;
}

#price-change-overlay.visible::before {
  opacity: 1;
}

.modal-overlay.closing::before, .gift-sheet-overlay.closing::before, .pay-sheet-overlay.closing::before, .tonkeeper-overlay.closing::before, #payment-success-overlay.closing::before, #payment-fail-overlay.closing::before, #purchase-cancel-overlay.closing::before, #price-change-overlay.closing::before {
  opacity: 0 !important;
}

.gift-sheet-overlay[aria-hidden="false"], .pay-sheet-overlay[aria-hidden="false"], .tonkeeper-overlay[aria-hidden="false"], #payment-success-overlay[aria-hidden="false"], #payment-fail-overlay[aria-hidden="false"], #purchase-cancel-overlay[aria-hidden="false"], #price-change-overlay[aria-hidden="false"] {
  visibility: visible !important;
}

.gift-sheet-overlay[aria-hidden="true"], .pay-sheet-overlay[aria-hidden="true"], .tonkeeper-overlay[aria-hidden="true"], #payment-success-overlay[aria-hidden="true"], #payment-fail-overlay[aria-hidden="true"], #purchase-cancel-overlay[aria-hidden="true"], #price-change-overlay[aria-hidden="true"] {
  visibility: hidden !important;
}

.gift-sheet-overlay.visible, .pay-sheet-overlay.visible, .tonkeeper-overlay.visible, #payment-success-overlay.visible, #payment-fail-overlay.visible, #purchase-cancel-overlay.visible, #price-change-overlay.visible {
  pointer-events: auto !important;
}

.gift-sheet-overlay.closing, .pay-sheet-overlay.closing, .tonkeeper-overlay.closing, #payment-success-overlay.closing, #payment-fail-overlay.closing, #purchase-cancel-overlay.closing, #price-change-overlay.closing {
  pointer-events: none !important;
}

.modal, .gift-sheet, .pay-sheet, .result-sheet, .tonkeeper-sheet {
  opacity: 1 !important;
  transition: transform var(--ui-menu-ms) var(--ease-out) !important;
  will-change: transform;
}

.gift-sheet.open, .pay-sheet.open, .result-sheet.open, .tonkeeper-sheet.open {
  transform: none !important;
}

#topup-menu-overlay::before, #payment-confirm-overlay::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.tg-webapp-ios .modal-overlay::before, html.tg-webapp-ios .gift-sheet-overlay::before, html.tg-webapp-ios .pay-sheet-overlay::before, html.tg-webapp-ios .tonkeeper-overlay::before, html.tg-webapp-ios #payment-success-overlay::before, html.tg-webapp-ios #payment-fail-overlay::before, html.tg-webapp-ios #purchase-cancel-overlay::before, html.tg-webapp-ios #price-change-overlay::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#sticky-filters .advanced-panel {
  transform: none !important;
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
}

#sticky-filters .filters-bar {
  position: relative;
  z-index: 3;
  margin-bottom: var(--sticky-stack-gap,10px) !important;
  margin: 0 !important;
}

*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.overlay-open main, html.overlay-open #ptr-content {
  overflow: hidden !important;
  touch-action: pan-y !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-overlay, .gift-sheet-overlay, .result-sheet-overlay, .tonkeeper-overlay {
  transition: none !important;
}

.modal-overlay::before, .gift-sheet-overlay::before, .result-sheet-overlay::before, .tonkeeper-overlay::before {
  transition: none !important;
  opacity: 1 !important;
}

.pay-sheet {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 auto !important;
  width: min(520px,100%) !important;
  max-width: 520px !important;
  border-radius: 22px 22px 0 0 !important;
  transform: translate3d(0,100%,0) !important;
}

.pay-sheet.open {
  transform: none !important;
}

#gift-grid {
  margin-top: 0 !important;
  padding-top: 0 !important;
  transition: opacity 140ms ease-out !important;
  overflow-anchor: none !important;
}

.quick-topup-paymode {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 12px auto !important;
}

.quick-topup-paymode-btn {
  appearance: none;
  border: 1px solid transparent !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.6) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  font-weight: 600 !important;
  min-width: 52px;
  width: 56px !important;
  height: 40px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.quick-topup-paymode-btn.is-active {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.24);
}

.tg-star-icon {
  width: 16px;
  height: 16px;
  display: block;
  image-rendering: auto !important;
}

.tg-star-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
}

.tg-star-inline img {
  width: 100%;
  height: 100%;
  display: block;
}

.quick-topup-paymode-btn img.tg-star-icon {
  vertical-align: middle;
}

.quick-topup-paymode-btn.is-active, .quick-topup-paymode-btn.active {
  color: #fff !important;
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

.gift-sheet-overlay .gift-sheet {
  transition: transform var(--ui-menu-ms,520ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
  will-change: transform !important;
}

.gift-sheet-overlay.closing .gift-sheet {
  transform: translateY(100%) !important;
}

.pay-sheet-overlay {
  transition: none !important;
}

.pay-sheet-overlay .pay-sheet {
  transition: transform 250ms cubic-bezier(0.32,0.72,0,1) !important;
}

.pay-sheet-overlay.visible .pay-sheet {
  transform: translateY(0) !important;
}

.pay-sheet-overlay.closing .pay-sheet {
  transform: translateY(100%) !important;
}

.modal, .gift-sheet, .pay-sheet, .result-sheet, #purchase-cancel-sheet {
  border-radius: 20px 20px 0 0 !important;
}

#topup-menu-sheet .tonkeeper-close, #payment-confirm-sheet .tonkeeper-close, .tonkeeper-overlay .tonkeeper-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

#topup-menu-sheet .tonkeeper-close:hover, #payment-confirm-sheet .tonkeeper-close:hover, .tonkeeper-overlay .tonkeeper-close:hover, #topup-menu-sheet .tonkeeper-close:active, #payment-confirm-sheet .tonkeeper-close:active, .tonkeeper-overlay .tonkeeper-close:active, #topup-menu-sheet .tonkeeper-close:focus, #payment-confirm-sheet .tonkeeper-close:focus, .tonkeeper-overlay .tonkeeper-close:focus, #topup-menu-sheet .tonkeeper-close:focus-visible, #payment-confirm-sheet .tonkeeper-close:focus-visible, .tonkeeper-overlay .tonkeeper-close:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#topup-menu-sheet .tonkeeper-close::before, #topup-menu-sheet .tonkeeper-close::after, #payment-confirm-sheet .tonkeeper-close::before, #payment-confirm-sheet .tonkeeper-close::after, .tonkeeper-overlay .tonkeeper-close::before, .tonkeeper-overlay .tonkeeper-close::after {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 2px !important;
  background: rgba(255,255,255,0.8) !important;
  border-radius: 1px !important;
  left: 50% !important;
  top: 50% !important;
  text-indent: 0 !important;
}

#topup-menu-sheet .tonkeeper-close::before, #payment-confirm-sheet .tonkeeper-close::before, .tonkeeper-overlay .tonkeeper-close::before {
  transform: translate(-50%,-50%) rotate(45deg) !important;
}

#topup-menu-sheet .tonkeeper-close::after, #payment-confirm-sheet .tonkeeper-close::after, .tonkeeper-overlay .tonkeeper-close::after {
  transform: translate(-50%,-50%) rotate(-45deg) !important;
}

.modal .modal-close-btn {
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
}

.modal .modal-close-btn::before, .modal .modal-close-btn::after {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 2px !important;
  background: rgba(255,255,255,0.7) !important;
  border-radius: 1px !important;
  left: 50% !important;
  top: 50% !important;
}

.modal .modal-close-btn::before {
  transform: translate(-50%,-50%) rotate(45deg) !important;
}

.modal .modal-close-btn::after {
  transform: translate(-50%,-50%) rotate(-45deg) !important;
}

#collections-modal.open .modal, #models-modal.open .modal, #backdrops-modal.open .modal {
  transform: none !important;
}

#collections-modal.closing .modal, #models-modal.closing .modal, #backdrops-modal.closing .modal {
  transform: translate3d(0,100%,0) !important;
  transition: transform var(--modal-slide-ms) var(--modal-ease) !important;
}

#collections-modal.settled .modal, #models-modal.settled .modal, #backdrops-modal.settled .modal {
  transform: translateY(0) !important;
  will-change: auto !important;
}

#topup-menu-overlay {
  align-items: center !important;
  justify-content: center !important;
}

#topup-menu-overlay .tonkeeper-sheet {
  transform: translate3d(0,0,0) !important;
  opacity: 0 !important;
  transition: opacity var(--ui-menu-ms,360ms) cubic-bezier(0.22,1,0.36,1) !important;
  will-change: opacity !important;
}

#topup-menu-overlay.visible .tonkeeper-sheet {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
}

#topup-menu-overlay.closing .tonkeeper-sheet {
  transform: translate3d(0,0,0) !important;
  opacity: 0 !important;
}

#topup-menu-overlay.settled .tonkeeper-sheet {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  will-change: auto !important;
}

.modal-overlay, .gift-sheet-overlay {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.gift-sheet:not(.result-sheet) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 24px 24px 0 0 !important;
}

.modal-overlay::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  opacity: 0 !important;
  transition: none !important;
}

.modal-overlay.closing::before {
  opacity: 0 !important;
}

.modal-overlay.closing.open .modal {
  transform: none !important;
}

.modal-overlay.closing:not(.open) .modal {
  transform: translate3d(0,110%,0) !important;
}

#advanced-panel .advanced-search {
  transform: translate3d(0,8px,0) !important;
  opacity: 0 !important;
  transition: transform var(--adv-panel-ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)),opacity var(--adv-panel-ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  will-change: transform,opacity !important;
  margin-bottom: 0 !important;
  transition-delay: 40ms !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border: none !important;
  padding: 1px !important;
  box-shadow: inset 0 0 0 1px var(--tg-border-subtle,rgba(255,255,255,0.10)) !important;
  min-height: 46px !important;
  max-height: 46px !important;
}

#advanced-panel.open .advanced-search {
  transform: none !important;
  opacity: 1 !important;
}

#topup-menu-sheet .tonkeeper-close {
  background: transparent !important;
  border-radius: 0 !important;
  top: 12px !important;
  right: 12px !important;
}

#topup-menu-sheet .tonkeeper-close:hover {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
}

#topup-menu-sheet .tonkeeper-purse {
  width: 160px !important;
  height: 160px !important;
  margin: 6px auto 8px !important;
  flex: 0 0 auto !important;
  aspect-ratio: 4 / 3;
  max-height: 220px !important;
  position: relative !important;
  overflow: hidden !important;
}

#topup-menu-sheet .tonkeeper-title {
  font-size: 20px !important;
  margin: 4px 0 10px !important;
}

#topup-menu-sheet .tonkeeper-input-wrap {
  margin: 8px 0 4px !important;
}

#topup-menu-sheet .tonkeeper-input {
  height: 44px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  padding: 0 44px 0 14px !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#topup-menu-sheet .tonkeeper-currency {
  right: 14px !important;
  font-size: 15px !important;
}

#topup-menu-sheet .tonkeeper-btn {
  height: 50px !important;
  margin-top: 6px !important;
  font-size: 17px !important;
  border-radius: 14px !important;
  line-height: 1.1 !important;
}

.gift-sheet, .modal, .tonkeeper-sheet, .advanced-panel {
  transition: none !important;
  animation: none !important;
}

.gift-sheet-overlay, .gift-sheet-overlay::before, .gift-sheet, .pay-sheet-overlay, .pay-sheet-overlay::before, .pay-sheet, .tonkeeper-overlay, .tonkeeper-overlay::before, .tonkeeper-sheet, .modal-overlay, .modal-overlay::before, .modal {
  transition: none !important;
  animation: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

#quick-topup-hint.quick-topup-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 8px;
  min-height: 24px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 16px;
  color: rgba(255,255,255,0.70);
}

#quick-topup-hint .quick-topup-hint-left {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#quick-topup-hint .quick-topup-hint-right {
  flex: 0 0 auto;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

#quick-topup-hint[hidden] {
  display: flex !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#topup-menu-sheet .tonkeeper-purse canvas, #topup-menu-sheet .tonkeeper-purse svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

#collections-modal.modal-overlay, #models-modal.modal-overlay, #backdrops-modal.modal-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  opacity: 1 !important;
  transition: none !important;
}

#advanced-panel.advanced-panel {
  max-height: none !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  transition: height 280ms cubic-bezier(0.16,1,0.3,1) !important;
  transform: none !important;
  will-change: height !important;
  opacity: 1 !important;
  margin: 0 !important;
  overflow: hidden !important;
  contain: strict !important;
  backface-visibility: hidden !important;
  --adv-panel-ms: 380ms;
  animation: none !important;
  display: block !important;
  height: 0px;
  padding-top: 0 !important;
  padding-bottom: var(--sticky-stack-gap,8px) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel.open {
  margin-bottom: 12px !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#advanced-panel.advanced-panel:not(.open) {
  margin-bottom: 0 !important;
}

#quick-topup-hint {
  display: none !important;
}

.filters-bar .filter-value-text, .filters-bar .filter-value-count {
  transform: translateY(1px) !important;
}

#advanced-panel.advanced-panel, #advanced-panel.advanced-panel.open {
  overflow: hidden !important;
}

.modal-overlay .modal, .gift-sheet-overlay .gift-sheet, .pay-sheet-overlay .pay-sheet {
  transition: transform var(--ui-menu-ms) var(--ease-out) !important;
}

#advanced-panel.advanced-panel.open, #advanced-panel.advanced-panel.closing {
  margin-bottom: 0 !important;
  transform: none !important;
  display: block !important;
}

.tonkeeper-overlay .tonkeeper-sheet, .tonkeeper-overlay .tonkeeper-sheet--confirm, .tonkeeper-overlay.visible .tonkeeper-sheet, .tonkeeper-overlay.visible .tonkeeper-sheet--confirm, .tonkeeper-overlay.closing .tonkeeper-sheet, .tonkeeper-overlay.closing .tonkeeper-sheet--confirm, .tonkeeper-overlay.settled .tonkeeper-sheet, .tonkeeper-overlay.settled .tonkeeper-sheet--confirm {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

#advanced-panel.advanced-panel::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
}

#advanced-panel.advanced-panel.open::after, #advanced-panel.advanced-panel.closing::after {
  height: 12px;
}

#advanced-panel.closing .advanced-search {
  transform: translate3d(0,8px,0) !important;
  opacity: 0 !important;
  transition-delay: 0ms !important;
}

#sticky-filters, #advanced-panel {
  overflow-anchor: none !important;
}

#topup-menu-sheet #quick-topup-shortage {
  margin-top: 2px !important;
  margin-bottom: 10px !important;
}

#topup-menu-sheet #quick-topup-paymode {
  margin: 0 auto 10px !important;
}

#payment-confirm-overlay.tonkeeper-overlay {
  padding-top: max(0px,0px) !important;
  padding-bottom: max(0px,0px) !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  align-items: center !important;
  justify-content: center !important;
}

#topup-menu-sheet #quick-topup-paymode.quick-topup-paymode {
  order: 0 !important;
  align-self: auto !important;
  width: 92px !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  padding: 2px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 0 !important;
  border-radius: 999px !important;
  z-index: 30 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  height: 34px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#topup-menu-sheet #quick-topup-paymode .quick-topup-paymode-btn {
  width: auto !important;
  height: calc(100% - 4px) !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  border: 0 !important;
  background: transparent !important;
  font-weight: 900 !important;
  position: relative !important;
  z-index: 1 !important;
  transition: color 160ms cubic-bezier(0.32,0.72,0,1) !important;
  flex: 1 1 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

#topup-menu-overlay.tonkeeper-overlay {
  align-items: flex-end !important;
  justify-content: center !important;
  height: var(--tg-viewport-height,var(--app-height,100vh)) !important;
  padding-top: max(0px,16px) !important;
  padding-bottom: 0px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

#topup-menu-sheet #quick-topup-paymode .quick-topup-paymode-btn.is-active, #topup-menu-sheet #quick-topup-paymode .quick-topup-paymode-btn.active {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
}

#topup-menu-sheet #quick-topup-paymode .tg-star-mode-icon {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

#payment-confirm-sheet {
  min-height: 0 !important;
  width: min(420px,calc(100% - 32px)) !important;
  max-width: 420px !important;
  max-height: min(340px,calc(var(--tg-viewport-height,100vh) - 32px)) !important;
  border-radius: 22px !important;
  padding: 20px 20px 18px !important;
  overflow: hidden !important;
}

#quick-topup-hint[hidden], #quick-topup-shortage[hidden], #quick-topup-paymode[hidden] {
  display: none !important;
}

#topup-menu-sheet #quick-topup-amount {
  font-size: 18px !important;
}

#topup-menu-sheet .tonkeeper-purse .purse-layer {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 120ms linear !important;
}

#topup-menu-sheet .tonkeeper-purse .purse-layer.is-active {
  opacity: 1 !important;
}

#topup-menu-sheet .tonkeeper-purse .purse-layer canvas, #topup-menu-sheet .tonkeeper-purse .purse-layer svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

#topup-menu-sheet .tg-star-icon {
  width: 16px !important;
  height: 16px !important;
}

#topup-menu-sheet .balance-shortage-need {
  line-height: 20px !important;
}

#topup-menu-sheet #quick-topup-shortage-amount {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

html.overlay-open main {
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.tg-phone .modal-overlay, html.tg-phone .gift-sheet-overlay, html.tg-phone .pay-sheet-overlay {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

html.tg-phone .gift-sheet, html.tg-phone #purchase-cancel-sheet.gift-sheet {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 26px 26px 0 0 !important;
}

html.tg-phone #collections-modal .modal, html.tg-phone #models-modal .modal, html.tg-phone #backdrops-modal .modal {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 26px 26px 0 0 !important;
}

html.tg-phone .gift-sheet-overlay .pay-sheet, html.tg-phone .gift-sheet-overlay .result-sheet {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.tonkeeper-sheet .tonkeeper-input-wrap {
  margin: 8px 0 6px !important;
}

.tonkeeper-sheet .tonkeeper-btn {
  margin-top: 6px !important;
}

#topup-menu-sheet #quick-topup-paymode.quick-topup-paymode::before {
  content: "";
  position: absolute;
  top: 2px !important;
  left: 2px !important;
  width: calc((100% - 4px) / 2) !important;
  height: calc(100% - 4px) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.18);
  transform: translateX(0%) !important;
  transition: transform 240ms cubic-bezier(0.32,0.72,0,1);
  will-change: transform;
}

#topup-menu-sheet #quick-topup-paymode.quick-topup-paymode[data-mode="STARS"]::before {
  transform: translateX(100%) !important;
}

#topup-menu-sheet #quick-topup-paymode .quick-topup-paymode-btn:active {
  transform: none !important;
}

#topup-menu-sheet #quick-topup-paymode.mode-anim {
  animation: none !important;
}

#payment-success-overlay, #payment-fail-overlay, #price-change-overlay, #purchase-cancel-overlay {
  padding: 0 !important;
  align-items: flex-end !important;
}

#payment-success-overlay .result-sheet, #payment-fail-overlay .result-sheet, #price-change-overlay .pay-sheet, #purchase-cancel-overlay .gift-sheet {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  padding-bottom: calc(18px + 0px) !important;
}

.result-lottie .maintenance-mark {
  width: 92px;
  height: 92px;
  margin: 0 auto 12px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  font-size: 46px;
  animation: maintenanceBreath 1200ms cubic-bezier(0.32,0.72,0,1) infinite;
}

.toast.toast-pop {
  animation: toastSlidePop 520ms cubic-bezier(0.16,1,0.3,1);
}

.toast[data-type="success"] {
  background: #1b2a1f !important;
  border-color: rgba(34,197,94,0.35) !important;
  border-left: 3px solid rgba(52,199,89,0.9) !important;
}

.toast[data-type="error"], .toast[data-type="warning"] {
  background: #2a1b1b !important;
  border-color: rgba(239,68,68,0.35) !important;
  border-left: 3px solid rgba(255,69,58,0.9) !important;
}

.toast[data-type="info"] {
  background: #1b2330 !important;
  border-color: rgba(59,130,246,0.35) !important;
  border-left: 3px solid rgba(10,132,255,0.9) !important;
}

html.tg-phone .toast {
  max-width: none !important;
}

#advanced-trigger:active {
  transform: none !important;
}

.balance-pill.balance-pill--flash {
  animation: balancePillFlash 900ms cubic-bezier(0.32,0.72,0,1);
}

#topup-menu-sheet #quick-topup-paymode .paymode-icon {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  pointer-events: none;
}

#topup-menu-sheet #quick-topup-paymode .paymode-icon--rub {
  font-size: 16px !important;
  font-weight: 800 !important;
  transform: none !important;
}

#topup-menu-sheet #quick-topup-paymode .paymode-icon--star .tg-star-mode-icon {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  transform: none !important;
}

#topup-menu-sheet #quick-topup-paymode .tg-star-icon {
  vertical-align: middle !important;
}

.toast[data-type] {
  background: var(--tg-bg-elevated) !important;
}

#toast.toast {
  position: fixed !important;
  top: calc( 0px + var(--tg-ios-topbar,0px) + 10px ) !important;
  left: max(18px,0px) !important;
  right: max(18px,0px) !important;
  bottom: auto !important;
  margin: 0 auto !important;
  max-width: 560px !important;
  width: auto !important;
  display: grid !important;
  grid-template-columns: 26px 1fr !important;
  column-gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  background: rgba(24,24,24,0.72) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.45) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
  backdrop-filter: blur(26px) saturate(180%) !important;
  color: rgba(255,255,255,0.96) !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: hidden !important;
  transform: translate3d(0,-140%,0) !important;
  transition: transform var(--toast-slide-ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
  will-change: transform !important;
  border-left: none !important;
  height: auto !important;
  min-height: 0 !important;
}

#toast.toast.visible {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: transform 520ms var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important,opacity 200ms ease-out !important,visibility 0s linear 0ms !important;
  animation: none !important;
}

#toast.toast .toast-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  align-self: center !important;
}

#toast.toast .toast-emoji {
  font-size: 22px !important;
  line-height: 1 !important;
  transform: translateY(1px) !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.98) !important;
  display: block !important;
}

#toast.toast .toast-content {
  min-width: 0 !important;
}

#toast.toast .toast-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 1px 0 2px 0 !important;
}

#toast.toast .toast-app {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: rgba(255,255,255,0.86) !important;
}

#toast.toast .toast-time {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.60) !important;
}

#toast.toast .toast-text {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.96) !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html.tg-webapp-ios #toast.toast {
  left: max(22px,0px) !important;
  right: max(22px,0px) !important;
}

#toast.toast.hiding {
  pointer-events: none !important;
  animation: iosBannerOut 420ms cubic-bezier(0.4,0,0.2,1) both !important;
  visibility: visible !important;
  transform: translate3d(0,-140%,0) !important;
}

.filters-bar .filter-btn--single .filter-value {
  display: flex !important;
  align-items: center !important;
  min-height: var(--filter-preview-size) !important;
}

html.tg-webapp-ios .scroll-top-btn {
  bottom: calc(24px + 0px) !important;
}

html.overlay-open .scroll-top-btn, html.overlay-open .scroll-top-btn.visible {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#topup-menu-sheet .tonkeeper-input:focus {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

#toast.toast.entering {
  visibility: visible !important;
  pointer-events: none !important;
  animation: iosBannerIn 520ms cubic-bezier(0.22,1,0.36,1) both !important;
}

#advanced-search-clear {
  display: none !important;
}

#advanced-panel .advanced-search .search-input {
  padding-right: 16px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 16px 0 48px !important;
  line-height: 46px !important;
  font-size: 16px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.modal-close-btn:hover, .gift-sheet-close:hover, .result-sheet-close:hover, .tonkeeper-close:hover {
  background: transparent !important;
  transform: none !important;
}

#collections-modal::before, #models-modal::before, #backdrops-modal::before {
  content: none !important;
  display: none !important;
}

.modal-close-btn:active, .gift-sheet-close:active, .result-sheet-close:active, .tonkeeper-close:active {
  background: transparent !important;
  transform: none !important;
}

#topup-menu-overlay.tonkeeper-overlay, #payment-confirm-overlay.tonkeeper-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: max(16px,0px) !important;
  padding-bottom: max(16px,0px) !important;
}

#topup-menu-overlay .tonkeeper-sheet, #payment-confirm-overlay .tonkeeper-sheet {
  transform: translate3d(0,12px,0) scale(0.96) !important;
  opacity: 0 !important;
  transition: transform var(--ui-menu-ms,360ms) cubic-bezier(0.22,1,0.36,1),opacity var(--ui-menu-ms,360ms) cubic-bezier(0.22,1,0.36,1) !important;
}

#topup-menu-overlay.visible .tonkeeper-sheet, #payment-confirm-overlay.visible .tonkeeper-sheet {
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}

#topup-menu-overlay.settled .tonkeeper-sheet, #payment-confirm-overlay.settled .tonkeeper-sheet {
  transform: none !important;
}

#topup-menu-overlay.closing .tonkeeper-sheet, #payment-confirm-overlay.closing .tonkeeper-sheet {
  transform: translate3d(0,12px,0) scale(0.96) !important;
  opacity: 0 !important;
}

html.tg-desktop #advanced-panel.advanced-panel::after {
  height: 12px !important;
}

.pay-sheet, .result-sheet, .tonkeeper-sheet, #balance-modal .modal {
  background: #282727 !important;
}

.gift-sheet-overlay::before, .modal-overlay::before, .pay-sheet-overlay::before, .tonkeeper-overlay::before, #payment-success-overlay::before, #payment-fail-overlay::before, #purchase-cancel-overlay::before, #price-change-overlay::before {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

#collections-modal.modal-overlay::before, #models-modal.modal-overlay::before, #backdrops-modal.modal-overlay::before {
  content: "" !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity var(--ui-menu-ms,280ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
}

#topup-menu-sheet #quick-topup-paymode.quick-topup-paymode[data-mode="RUB"]::before {
  transform: translateX(0%) !important;
}

#topup-menu-sheet .tonkeeper-close, #payment-confirm-sheet .tonkeeper-close {
  transition: none !important;
}

#topup-menu-sheet .tonkeeper-close:hover, #topup-menu-sheet .tonkeeper-close:active, #topup-menu-sheet .tonkeeper-close:focus, #topup-menu-sheet .tonkeeper-close:focus-visible, #payment-confirm-sheet .tonkeeper-close:hover, #payment-confirm-sheet .tonkeeper-close:active, #payment-confirm-sheet .tonkeeper-close:focus, #payment-confirm-sheet .tonkeeper-close:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

#balance-modal .modal-close-btn {
  transition: none !important;
}

#balance-modal .modal-close-btn:hover, #balance-modal .modal-close-btn:active, #balance-modal .modal-close-btn:focus, #balance-modal .modal-close-btn:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

.toast.visible, .toast.entering {
  visibility: visible !important;
  transform: none !important;
}

.toast.hiding {
  visibility: visible !important;
  transform: translate3d(0,-140%,0) !important;
}

#payment-confirm-overlay .tonkeeper-sheet--confirm {
  transform: translate3d(0,110%,0) !important;
  transition: transform 250ms cubic-bezier(0.32,0.72,0,1) !important;
  will-change: transform !important;
}

#payment-confirm-overlay.visible .tonkeeper-sheet--confirm {
  transform: none !important;
}

#payment-confirm-overlay.closing .tonkeeper-sheet--confirm {
  transform: translate3d(0,110%,0) !important;
}

#toast.toast.visible, #toast.toast.entering {
  visibility: visible !important;
  transform: none !important;
}

#advanced-panel.advanced-panel .advanced-search {
  transform: none !important;
  opacity: 0 !important;
  will-change: auto !important;
  transition: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel.open .advanced-search {
  transform: none !important;
  opacity: 1 !important;
}

#advanced-panel.advanced-panel.closing .advanced-search {
  transform: translate3d(0,-6px,0) !important;
  opacity: 0 !important;
  background-color: transparent !important;
  border-color: transparent !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal-btn.primary,  .gift-sheet-buy-bar,  .gift-buy-btn,  .pay-action--primary,  .balance-pill-icon,  .balance-plus-btn,  .tonkeeper-btn,  .scroll-top-btn.visible {
  background-color: var(--tg-accent) !important;
  background-image: var(--gp-accent-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #ffffff !important;
}

.modal-btn.primary:hover,  .modal-btn.primary:active,  .gift-sheet-buy-bar:hover,  .gift-sheet-buy-bar:active,  .gift-buy-btn:hover,  .gift-buy-btn:active,  .pay-action--primary:hover,  .pay-action--primary:active,  .balance-plus-btn:hover,  .balance-plus-btn:active,  .tonkeeper-btn:hover,  .tonkeeper-btn:active,  .tonkeeper-btn:disabled,  .scroll-top-btn.visible:hover,  .scroll-top-btn.visible:active {
  background-color: var(--tg-accent) !important;
  background-image: var(--gp-accent-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.gift-sheet-buy-bar[data-state="paid_wait"], .gift-sheet-buy-bar[data-state="delivering"], .gift-sheet-buy-bar[data-state="bought"], .gift-sheet-buy-bar[data-state="paid_wait"]:hover, .gift-sheet-buy-bar[data-state="delivering"]:hover, .gift-sheet-buy-bar[data-state="bought"]:hover {
  background-color: var(--tg-accent) !important;
  background-image: var(--gp-accent-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

html.tg-desktop main {
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
}

.balance-pill {
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.balance-plus-btn:hover, .balance-plus-btn:active, .balance-plus-btn:focus {
  background: #2AAE5D !important;
  background-color: #2AAE5D !important;
  background-image: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.top-promo-banner-photo, .top-promo-banner-photo.is-loaded {
  filter: none !important;
}

html.tg-desktop #advanced-panel.advanced-panel {
  box-sizing: border-box !important;
  contain: strict !important;
}

.gift-sheet-overlay .gift-sheet, #gift-sheet-overlay .gift-sheet {
  transition: transform var(--ui-menu-ms,260ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
  will-change: transform !important;
}

.gift-sheet-overlay.visible .gift-sheet, #gift-sheet-overlay.visible .gift-sheet {
  transform: none !important;
}

.gift-sheet-overlay.closing .gift-sheet, #gift-sheet-overlay.closing .gift-sheet {
  transform: translate3d(0,100%,0) !important;
  transition: transform var(--modal-slide-ms) var(--modal-ease) !important;
}

#sticky-filters, .sticky-filters {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 120 !important;
  padding-bottom: var(--ui-stack-gap,10px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  padding-top: 0 !important;
  top: calc(env(safe-area-inset-top) + var(--sticky-stack-gap,10px)) !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: visible !important;
  will-change: auto !important;
  contain: layout style !important;
}

body.overlay-open #sticky-filters, body.overlay-open .sticky-filters, html.overlay-open #sticky-filters, html.overlay-open .sticky-filters {
  visibility: visible !important;
  opacity: 1 !important;
}

body.overlay-open main, html.overlay-open main {
  overflow: visible !important;
}

.balance-plus-btn svg path {
  stroke: currentColor !important;
}

main, body, html {
  overflow-anchor: none !important;
}

#collections-modal.modal-overlay.open, #models-modal.modal-overlay.open, #backdrops-modal.modal-overlay.open, #collections-modal.modal-overlay.closing, #models-modal.modal-overlay.closing, #backdrops-modal.modal-overlay.closing {
  opacity: 1 !important;
}

#collections-modal.modal-overlay.open::before, #models-modal.modal-overlay.open::before, #backdrops-modal.modal-overlay.open::before {
  opacity: 1 !important;
}

#collections-modal.modal-overlay.closing::before, #models-modal.modal-overlay.closing::before, #backdrops-modal.modal-overlay.closing::before {
  opacity: 0 !important;
  transition: none !important;
}

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

#advanced-panel.advanced-panel, #advanced-panel.advanced-panel.open, #advanced-panel.advanced-panel.closing {
  transform: none !important;
}

#sticky-filters .filters-bar, #sticky-filters .advanced-panel, #sticky-filters .inline-reset-btn {
  margin: 0 !important;
}

#sticky-filters .inline-reset-btn {
  align-self: flex-start !important;
  margin-bottom: 0 !important;
  margin: 0 !important;
}

#advanced-panel.advanced-panel:not(.open):not(.closing) {
  display: block !important;
  height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

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

html.overlay-open, html.overlay-open body, body.overlay-open {
  overflow: visible !important;
  position: initial !important;
  width: auto !important;
  height: auto !important;
}

html.overlay-open main, body.overlay-open main, html.overlay-open #ptr-content, body.overlay-open #ptr-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.overlay-open #sticky-filters {
  z-index: 60 !important;
  transform: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: auto !important;
  pointer-events: none !important;
}

.filters-bar .filter-btn--single {
  align-items: center !important;
}

.filters-bar .filter-value-icon, .filters-bar .filter-value-backdrop-dot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.overlay-open .modal-overlay::before,  html.overlay-open .gift-sheet-overlay::before,  html.overlay-open .pay-sheet-overlay::before,  html.overlay-open .tonkeeper-overlay::before,  html.overlay-open #payment-success-overlay::before,  html.overlay-open #payment-fail-overlay::before,  html.overlay-open #purchase-cancel-overlay::before,  html.overlay-open #price-change-overlay::before {
  inset: auto !important;
  top: var(--overlay-top-offset,0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

#ptr-content.ptr-content {
  transform: translate3d(0,var(--ptr-offset,0px),0) !important;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1) !important;
  will-change: transform;
}

#ptr-content.ptr-content.ptr-pulling {
  transition: none !important;
}

#ptr-indicator.ptr-indicator {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 0px !important;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1500 !important;
  opacity: 0 !important;
  --ptr-offset: unset !important;
}

#ptr-indicator .ptr-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  transform: translate3d(0,calc(-56px + var(--ptr-offset,0px)),0) !important;
  transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1),opacity 160ms ease-out !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#ptr-indicator.ptr-indicator.active, #ptr-indicator.ptr-indicator.ready, #ptr-indicator.ptr-indicator.refreshing {
  opacity: 1 !important;
}

#gift-grid.grid-swap--out {
  opacity: 0 !important;
}

#gift-grid.grid-swap--in {
  opacity: 1 !important;
}

.gift-card.gift-card--enter {
  animation: cardAppear 240ms ease-out both !important;
  animation-delay: var(--enter-delay,0ms) !important;
}

#ptr-content {
  transform: translate3d(0,var(--ptr-offset,0px),0) !important;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}

#ptr-content.ptr-pulling {
  transition: none !important;
}

html.tg-phone.tg-webapp-ios .modal-overlay, html.tg-phone.tg-webapp-ios .gift-sheet-overlay, html.tg-phone.tg-webapp-ios .pay-sheet-overlay {
  padding-bottom: 0 !important;
}

html.tg-phone.tg-webapp-ios .modal-footer {
  padding-bottom: calc(16px + 12px) !important;
}

html.tg-phone.tg-webapp-ios #collections-modal .modal-footer, html.tg-phone.tg-webapp-ios #models-modal .modal-footer, html.tg-phone.tg-webapp-ios #backdrops-modal .modal-footer {
  padding-bottom: calc(14px + 12px) !important;
}

html.tg-phone.tg-webapp-ios .gift-sheet {
  padding-bottom: calc(14px + 12px) !important;
}

html.tg-phone.tg-webapp-ios .pay-sheet {
  padding-bottom: calc(16px + 12px) !important;
}

html.tg-phone.tg-webapp-ios .tonkeeper-sheet {
  padding-bottom: calc(18px + 12px) !important;
}

html.public-mode .topbar {
  display: none !important;
}

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

html.public-mode #balance-modal, html.public-mode #topup-menu-overlay, html.public-mode #payment-confirm-overlay {
  display: none !important;
}

html.public-mode #toast {
  display: none !important;
}

html.public-mode .top-banner-overlay {
  background: transparent !important;
}

html.public-mode .top-banner-left {
  width: 100% !important;
  align-items: center !important;
  text-align: center !important;
}

html.public-mode .top-banner-title {
  letter-spacing: 0.6px;
}

html.public-mode .top-banner-handle {
  opacity: 0.95;
}

html.public-mode .public-watermark {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 260px 180px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='180'%3E%3Cg%20transform='rotate(-18%20130%2090)'%3E%3Ctext%20x='14'%20y='105'%20fill='white'%20fill-opacity='0.18'%20font-size='30'%20font-family='Arial'%3EFunPay%20%7C%20koorrekt%3C/text%3E%3C/g%3E%3C/svg%3E");
}

html:not(.public-mode) .public-watermark {
  display: none;
}

.top-banner-title, .top-banner-handle {
  line-height: 1.28 !important;
  padding-top: 1px !important;
  padding-bottom: 2px !important;
  text-shadow: none !important;
}

.modal-overlay, .gift-sheet-overlay, .pay-sheet-overlay, .tonkeeper-overlay, #payment-success-overlay, #payment-fail-overlay, #purchase-cancel-overlay, #price-change-overlay, #balance-modal, #topup-menu-overlay, #payment-confirm-overlay {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.modal, .gift-sheet, .pay-sheet, .tonkeeper-sheet {
  max-height: calc(100dvh - 4px) !important;
  overflow: hidden !important;
}

#ptr-indicator .ptr-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: ptr-spin 0.8s linear infinite;
}

#ptr-indicator:not(.active):not(.ready):not(.refreshing) .ptr-icon {
  opacity: 0;
}

#ptr-indicator.active .ptr-icon, #ptr-indicator.ready .ptr-icon, #ptr-indicator.refreshing .ptr-icon {
  opacity: 1;
}

#ptr-indicator.ready .ptr-icon {
  border-top-color: var(--tg-green,#2AAE5D);
  border-right-color: rgba(42,174,93,0.3);
  border-bottom-color: rgba(42,174,93,0.2);
  border-left-color: rgba(42,174,93,0.3);
}

#ptr-indicator.refreshing .ptr-icon {
  animation-duration: 0.6s;
  border-top-color: var(--tg-accent,#2AAE5D);
  border-right-color: rgba(42,174,93,0.3);
  border-bottom-color: rgba(42,174,93,0.2);
  border-left-color: rgba(42,174,93,0.3);
}

main:not(.ptr-active) #ptr-content.ptr-content {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

main.ptr-active #ptr-content.ptr-content {
  transform: translate3d(0,var(--ptr-offset,0px),0) !important;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1) !important;
  will-change: transform !important;
}

.gift-card--unavailable .gift-image, .gift-card--unavailable .color-block, .gift-card--bought .gift-image, .gift-card--bought .color-block {
  filter: none !important;
}

.modal-overlay::before, .gift-sheet-overlay::before, .result-sheet-overlay::before, .pay-sheet-overlay::before, .tonkeeper-overlay::before, #payment-success-overlay::before, #payment-fail-overlay::before, #purchase-cancel-overlay::before, #price-change-overlay::before {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

main:not(.ptr-active) #ptr-content, main:not(.ptr-active) #ptr-content.ptr-content {
  transform: none !important;
  will-change: auto !important;
  backface-visibility: visible !important;
}

html.tg-phone .modal-overlay::before,  html.tg-phone .gift-sheet-overlay::before,  html.tg-phone .result-sheet-overlay::before,  html.tg-phone .pay-sheet-overlay::before,  html.tg-phone .tonkeeper-overlay::before,  html.tg-phone #payment-success-overlay::before,  html.tg-phone #payment-fail-overlay::before,  html.tg-phone #purchase-cancel-overlay::before,  html.tg-phone #price-change-overlay::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#sticky-filters, .sticky-filters, .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html.overlay-open #sticky-filters, body.overlay-open #sticky-filters {
  transform: none !important;
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  pointer-events: none !important;
  z-index: 60 !important;
}

.modal-overlay, .gift-sheet-overlay, .result-sheet-overlay, .pay-sheet-overlay, .tonkeeper-overlay, #payment-success-overlay, #payment-fail-overlay, #purchase-cancel-overlay, #price-change-overlay {
  z-index: 1000 !important;
}

#sticky-filters {
  padding-bottom: var(--sticky-stack-gap,10px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#sticky-filters .inline-reset-btn, #inline-reset-btn.inline-reset-btn {
  color: var(--tg-green,#2AAE5D) !important;
}

html.overlay-open.overlay-sticky-pinned #sticky-filters, body.overlay-open.overlay-sticky-pinned #sticky-filters {
  z-index: 950 !important;
  filter: none !important;
  opacity: 1 !important;
  position: sticky !important;
  isolation: auto !important;
  top: 0 !important;
}

html.overlay-open.overlay-sticky-pinned .modal-overlay,  html.overlay-open.overlay-sticky-pinned .gift-sheet-overlay,  html.overlay-open.overlay-sticky-pinned .result-sheet-overlay,  html.overlay-open.overlay-sticky-pinned .pay-sheet-overlay,  html.overlay-open.overlay-sticky-pinned .tonkeeper-overlay,  html.overlay-open.overlay-sticky-pinned #payment-success-overlay,  html.overlay-open.overlay-sticky-pinned #payment-fail-overlay,  html.overlay-open.overlay-sticky-pinned #purchase-cancel-overlay,  html.overlay-open.overlay-sticky-pinned #price-change-overlay {
  inset: auto !important;
  top: var(--overlay-top-offset,0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;
}

html.overlay-open.overlay-sticky-pinned::before {
  content: none !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--overlay-top-offset,0px);
  background: rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 1999;
}

html.overlay-open.overlay-sticky-pinned .modal-overlay::before,  html.overlay-open.overlay-sticky-pinned .gift-sheet-overlay::before,  html.overlay-open.overlay-sticky-pinned .result-sheet-overlay::before,  html.overlay-open.overlay-sticky-pinned .pay-sheet-overlay::before,  html.overlay-open.overlay-sticky-pinned .tonkeeper-overlay::before,  html.overlay-open.overlay-sticky-pinned #payment-success-overlay::before,  html.overlay-open.overlay-sticky-pinned #payment-fail-overlay::before,  html.overlay-open.overlay-sticky-pinned #purchase-cancel-overlay::before,  html.overlay-open.overlay-sticky-pinned #price-change-overlay::before {
  inset: auto !important;
  top: var(--overlay-top-offset,0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

html.overlay-open.overlay-sticky-pinned #sticky-filters::after, body.overlay-open.overlay-sticky-pinned #sticky-filters::after {
  content: none !important;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 10;
}

html.overlay-open.overlay-sticky-pinned #sticky-filters {
  isolation: auto !important;
}

#advanced-panel.advanced-panel .advanced-search, #advanced-panel.advanced-panel.open .advanced-search, #advanced-panel.advanced-panel.closing .advanced-search {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
  padding-top: 0 !important;
}

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

#sticky-filters #advanced-panel.advanced-panel {
  padding-bottom: 0 !important;
  margin: 0 !important;
  transition: height var(--adv-panel-ms,240ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)),margin-top var(--adv-panel-ms,240ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)),margin-bottom var(--adv-panel-ms,240ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  will-change: height,margin-top,margin-bottom !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 0;
  transform: none !important;
  opacity: 1 !important;
  padding-top: 0 !important;
}

#sticky-filters #advanced-panel.advanced-panel.open {
  margin-bottom: var(--ui-stack-gap,10px) !important;
  margin-top: var(--ui-stack-gap,10px) !important;
}

#advanced-panel.advanced-panel.closing {
  visibility: visible !important;
  pointer-events: none !important;
}

#sticky-filters, #gift-grid {
  overflow-anchor: none;
}

#advanced-trigger, #advanced-trigger.active {
  color: var(--tg-text);
}

#advanced-panel .advanced-search .search-input::placeholder {
  line-height: 46px !important;
}

html, body {
  overflow-anchor: none;
}

.filter-label, .filter-value {
  line-height: 1.25 !important;
  transition: none !important;
}

.gift-name, .gift-number {
  line-height: 1.3 !important;
}

.price-value, .price-currency {
  line-height: 1.2 !important;
}

#advanced-panel.advanced-panel.open .advanced-search, #advanced-panel.advanced-panel.closing .advanced-search {
  transform: none !important;
}

main, #ptr-content {
  overflow-anchor: none !important;
}

.sticky-filters, #sticky-filters {
  padding-bottom: var(--ui-stack-gap,10px) !important;
  transition: padding-bottom var(--adv-panel-ms,240ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  will-change: padding-bottom !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

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

#advanced-trigger, .filters-bar #advanced-trigger {
  width: 52px !important;
  min-width: 52px !important;
  flex: 0 0 52px !important;
}

#sticky-filters #advanced-panel.advanced-panel.open, #sticky-filters #advanced-panel.advanced-panel.open:focus-within {
  margin-top: var(--ui-stack-gap,10px) !important;
  margin-bottom: var(--ui-stack-gap,10px) !important;
}

#sticky-filters #advanced-panel .advanced-search {
  opacity: 0 !important;
  transform: translate3d(0,-10px,0) !important;
  transition: transform 200ms var(--ease-out,cubic-bezier(0.16,1,0.3,1)),opacity 200ms var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  will-change: transform,opacity !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 46px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  background: var(--tg-bg,#141414) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

#advanced-panel.advanced-panel::after, #sticky-filters #advanced-panel.advanced-panel::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
}

#advanced-panel .advanced-search, #sticky-filters #advanced-panel .advanced-search {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

a, a:visited, a:hover, a:active {
  color: var(--tg-accent) !important;
}

button:focus, button:focus-visible, a:focus, a:focus-visible, [role="button"]:focus, [role="button"]:focus-visible, input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible, .scroll-top-btn:focus, .scroll-top-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--tg-accent) !important;
}

#sticky-filters.is-pinned {
  overflow: visible !important;
}

#sticky-filters.is-pinned::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (env(safe-area-inset-top,0px) + var(--sticky-stack-gap,10px)) - 2px) !important;
  height: calc(env(safe-area-inset-top,0px) + var(--sticky-stack-gap,10px) + 2px) !important;
  background: var(--tg-bg);
  pointer-events: none;
}

.balance-plus-btn svg, .balance-plus-btn svg path, .balance-plus-btn svg line, .balance-plus-btn svg polyline {
  stroke: currentColor !important;
}

#advanced-search-input {
  font-size: 16px !important;
  scroll-margin-top: 200px !important;
  scroll-margin-bottom: 200px !important;
}

#advanced-search-input:focus, #advanced-search-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

html.adv-input-focused #sticky-filters, html.adv-input-focused #sticky-filters * {
  animation: none !important;
}

html.adv-input-focused #advanced-panel .advanced-search {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
}

html:not(.adv-input-focused) #advanced-panel.advanced-panel .advanced-search {
  transform: translate3d(0,8px,0) !important;
  opacity: 0 !important;
  transition: transform var(--ui-menu-ms,240ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)),opacity var(--ui-menu-ms,240ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  will-change: transform,opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html:not(.adv-input-focused) #advanced-panel.advanced-panel.open .advanced-search {
  transform: none !important;
  opacity: 1 !important;
}

html:not(.adv-input-focused) #advanced-panel.advanced-panel.closing .advanced-search {
  transform: translate3d(0,8px,0) !important;
  opacity: 0 !important;
}

html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tg-bg);
  z-index: 2147483647;
  pointer-events: none;
}

html.tg-phone #advanced-panel.advanced-panel, html.tg-phone #advanced-panel, html.tg-phone #sticky-filters #advanced-panel.advanced-panel {
  transition: none !important;
  animation: none !important;
}

html.tg-phone #advanced-panel.advanced-panel .advanced-search, html.tg-phone #advanced-panel.advanced-panel.open .advanced-search, html.tg-phone #advanced-panel.advanced-panel.closing .advanced-search {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

html.tg-phone #advanced-trigger::before {
  transition: none !important;
  animation: none !important;
}

html.tg-desktop {
  scrollbar-gutter: auto !important;
}

html.tg-desktop.overlay-open, html.tg-desktop body.overlay-open {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.filter-btn, .filter-label, .filter-value, .filter-value-text, .filter-value-count {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

.filters-bar, .filters-bar .filter-btn {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html.overlay-open .filters-bar, body.overlay-open .filters-bar {
  transform: translateZ(0) !important;
}

#advanced-panel, #advanced-panel.advanced-panel {
  transition: height 150ms ease-out,margin-top 150ms ease-out !important;
  transform: none !important;
  will-change: height;
}

#gift-grid, main, #ptr-content {
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
}

.sticky-filters .advanced-panel.open {
  margin-top: var(--ui-stack-gap) !important;
  margin-bottom: 0 !important;
}

#advanced-panel.advanced-panel::after, #advanced-panel.advanced-panel.open::after, #advanced-panel.advanced-panel.closing::after {
  height: 0 !important;
  display: none !important;
  content: none !important;
}

html.tg-desktop .app-shell {
  right: 0 !important;
}

html.tg-desktop .modal-overlay,  html.tg-desktop .gift-sheet-overlay,  html.tg-desktop .result-sheet-overlay,  html.tg-desktop .pay-sheet-overlay,  html.tg-desktop .tonkeeper-overlay,  html.tg-desktop #payment-success-overlay,  html.tg-desktop #payment-fail-overlay,  html.tg-desktop #purchase-cancel-overlay,  html.tg-desktop #price-change-overlay {
  right: 0 !important;
}

html.tg-desktop .modal-overlay::before,  html.tg-desktop .gift-sheet-overlay::before,  html.tg-desktop .result-sheet-overlay::before,  html.tg-desktop .pay-sheet-overlay::before,  html.tg-desktop .tonkeeper-overlay::before,  html.tg-desktop #payment-success-overlay::before,  html.tg-desktop #payment-fail-overlay::before,  html.tg-desktop #purchase-cancel-overlay::before,  html.tg-desktop #price-change-overlay::before {
  right: 0 !important;
}

.sticky-filters .filters-bar, #sticky-filters .filters-bar {
  margin-bottom: 0 !important;
}

.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, #sticky-filters #advanced-panel, #sticky-filters #advanced-panel.open, #sticky-filters #advanced-panel.closing, #sticky-filters #advanced-panel.advanced-panel, #sticky-filters #advanced-panel.advanced-panel.open, #sticky-filters #advanced-panel.advanced-panel.closing, #advanced-panel.advanced-panel, #advanced-panel.advanced-panel.open, #advanced-panel.advanced-panel.closing {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

#advanced-panel .advanced-search, #advanced-panel.advanced-panel .advanced-search, #advanced-panel.advanced-panel.open .advanced-search, #advanced-panel.advanced-panel.closing .advanced-search {
  margin: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  background: var(--tg-bg,#141414) !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
  width: 100% !important;
  display: block !important;
}

html.adv-input-focused #advanced-panel .advanced-search, html.adv-input-focused #advanced-panel.advanced-panel .advanced-search {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
}

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

#advanced-panel, #advanced-panel.advanced-panel, #advanced-panel.advanced-panel.open, #advanced-panel.advanced-panel.closing {
  transition: height 200ms cubic-bezier(0.25,0.1,0.25,1) !important;
  will-change: height !important;
  overflow: hidden !important;
  transform: none !important;
}

#advanced-panel .advanced-search, #advanced-panel.open .advanced-search, #advanced-panel.closing .advanced-search, #advanced-panel.advanced-panel .advanced-search, #advanced-panel.advanced-panel.open .advanced-search, #advanced-panel.advanced-panel.closing .advanced-search, html:not(.adv-input-focused) #advanced-panel .advanced-search, html:not(.adv-input-focused) #advanced-panel.advanced-panel .advanced-search, html:not(.adv-input-focused) #advanced-panel.advanced-panel.open .advanced-search, html:not(.adv-input-focused) #advanced-panel.advanced-panel.closing .advanced-search, html.adv-input-focused #advanced-panel .advanced-search, html.adv-input-focused #advanced-panel.advanced-panel .advanced-search {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
  animation: none !important;
}

#sticky-filters #advanced-panel, #sticky-filters #advanced-panel.open, #sticky-filters #advanced-panel.closing, #sticky-filters #advanced-panel.advanced-panel, #sticky-filters #advanced-panel.advanced-panel.open, #sticky-filters #advanced-panel.advanced-panel.closing, #sticky-filters #advanced-panel.advanced-panel.open:focus-within {
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 6px !important;
  box-sizing: border-box !important;
}

#sticky-filters #advanced-panel, #sticky-filters #advanced-panel.advanced-panel {
  transition: height 200ms cubic-bezier(0.25,0.1,0.25,1) !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
  overflow: hidden !important;
}

.top-promo-banner--photo .top-promo-banner-photo, #top-banner-img.top-promo-banner-photo {
  filter: saturate(0.98) brightness(0.78) contrast(1.06) !important;
}

#sticky-filters #advanced-panel:not(.open):not(.closing), .sticky-filters #advanced-panel:not(.open):not(.closing) {
  padding-top: 0 !important;
}

.modal-overlay[aria-hidden="false"]::before, .gift-sheet-overlay[aria-hidden="false"]::before, .pay-sheet-overlay[aria-hidden="false"]::before, .tonkeeper-overlay[aria-hidden="false"]::before, #payment-success-overlay[aria-hidden="false"]::before, #payment-fail-overlay[aria-hidden="false"]::before, #purchase-cancel-overlay[aria-hidden="false"]::before, #price-change-overlay[aria-hidden="false"]::before {
  opacity: 1 !important;
}

.modal-overlay[aria-hidden="true"]::before, .gift-sheet-overlay[aria-hidden="true"]::before, .pay-sheet-overlay[aria-hidden="true"]::before, .tonkeeper-overlay[aria-hidden="true"]::before, #payment-success-overlay[aria-hidden="true"]::before, #payment-fail-overlay[aria-hidden="true"]::before, #purchase-cancel-overlay[aria-hidden="true"]::before, #price-change-overlay[aria-hidden="true"]::before {
  opacity: 0 !important;
}

.modal-overlay.closing::before,  .gift-sheet-overlay.closing::before,  .pay-sheet-overlay.closing::before,  .tonkeeper-overlay.closing::before,  #payment-success-overlay.closing::before,  #payment-fail-overlay.closing::before,  #purchase-cancel-overlay.closing::before,  #price-change-overlay.closing::before {
  opacity: 0 !important;
}

#advanced-panel, #advanced-panel.advanced-panel, #sticky-filters #advanced-panel, #sticky-filters #advanced-panel.advanced-panel, .sticky-filters #advanced-panel, .sticky-filters #advanced-panel.advanced-panel {
  transition: none !important;
  will-change: auto !important;
}

#advanced-panel .advanced-search, #advanced-panel.advanced-panel .advanced-search {
  transform: translateY(-10px) !important;
  opacity: 0 !important;
  transition: transform 200ms var(--ease-out,cubic-bezier(0.22,1,0.36,1)),opacity 200ms var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
  will-change: transform,opacity !important;
}

#advanced-panel.open .advanced-search, #advanced-panel.advanced-panel.open .advanced-search {
  transform: none !important;
  opacity: 1 !important;
}

#advanced-panel.closing .advanced-search, #advanced-panel.advanced-panel.closing .advanced-search {
  transform: translateY(-10px) !important;
  opacity: 0 !important;
  transition: transform 160ms var(--ease-out,cubic-bezier(0.22,1,0.36,1)),opacity 160ms var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
}

html.overlay-open.overlay-sticky-pinned .modal-overlay, html.overlay-open.overlay-sticky-pinned .gift-sheet-overlay, html.overlay-open.overlay-sticky-pinned .tonkeeper-overlay {
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  padding-top: var(--overlay-top-offset,0px) !important;
  box-sizing: border-box !important;
}

html.overlay-open.overlay-sticky-pinned .modal-overlay::before, html.overlay-open.overlay-sticky-pinned .gift-sheet-overlay::before, html.overlay-open.overlay-sticky-pinned .tonkeeper-overlay::before {
  inset: 0 !important;
  top: var(--overlay-top-offset,0px) !important;
  border-radius: 0 !important;
}

html.overlay-open.overlay-sticky-pinned .gift-sheet, html.overlay-open.overlay-sticky-pinned .pay-sheet, html.overlay-open.overlay-sticky-pinned .result-sheet, html.overlay-open.overlay-sticky-pinned .modal, html.overlay-open.overlay-sticky-pinned .tonkeeper-sheet {
  max-height: calc(100vh - var(--overlay-top-offset,0px) - env(safe-area-inset-bottom,0px)) !important;
}

#sticky-filters .filters-bar, #sticky-filters #advanced-panel, #sticky-filters .inline-reset-btn {
  margin: 0 !important;
}

#sticky-filters #advanced-panel[aria-hidden="true"]:not(.closing) {
  display: block !important;
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#sticky-filters #advanced-panel.open .advanced-search {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sticky-filters #advanced-panel.closing .advanced-search {
  transform: translate3d(0,-10px,0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 160ms var(--ease-out,cubic-bezier(0.16,1,0.3,1)),opacity 160ms var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
}

html.adv-input-focused #sticky-filters #advanced-panel .advanced-search {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
}

#quick-topup-submit.tonkeeper-btn {
  gap: 8px !important;
}

#quick-topup-submit .tg-min-label {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

#quick-topup-submit .tg-stars-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

#quick-topup-submit .tg-star-inline {
  width: 18px !important;
  height: 18px !important;
  margin-right: 0 !important;
  transform: translateY(0.5px) !important;
}

#quick-topup-submit .tg-star-icon {
  width: 18px !important;
  height: 18px !important;
}

#quick-topup-submit .tg-stars-count {
  line-height: 1 !important;
}

#sticky-filters #advanced-panel.open + .inline-reset-btn.inline-reset-btn--visible {
  margin-top: var(--ui-stack-gap,10px) !important;
}

#topup-menu-overlay.visible .tonkeeper-sheet, #topup-menu-overlay.settled .tonkeeper-sheet {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
}

html.public-mode .gift-card .gift-number {
  font-size: 15px !important;
}

.top-banner-note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
  opacity: 0.98;
  max-width: 520px;
  display: inline-block;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.top-banner-note[aria-hidden="true"] {
  display: none !important;
}

html.public-mode .top-banner-note[aria-hidden="false"] {
  display: block !important;
  font-size: clamp(14px,3.6vw,18px);
  line-height: 1.32;
  padding: 9px 12px;
  border-radius: 16px;
  max-width: min(92vw,640px);
  /* Center vertically inside the banner overlay (no extra top margin). */
  margin: 0 auto;
  text-align: center;
}

#sticky-filters #advanced-panel, #sticky-filters #advanced-panel.open, #sticky-filters #advanced-panel.closing {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: height var(--ui-menu-ms,220ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)),padding-top var(--ui-menu-ms,220ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)),padding-bottom var(--ui-menu-ms,220ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  will-change: height !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-height: 0 !important;
}

#sticky-filters #advanced-panel::after, #sticky-filters #advanced-panel.open::after, #sticky-filters #advanced-panel.closing::after {
  display: none !important;
  height: 0 !important;
  content: none !important;
}

#sticky-filters #advanced-panel .advanced-search, #sticky-filters #advanced-panel.open .advanced-search, #sticky-filters #advanced-panel.closing .advanced-search {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  background: var(--tg-bg,#141414) !important;
}

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

#sticky-filters #advanced-panel.open, #sticky-filters #advanced-panel.closing {
  padding-top: 6px !important;
  padding-bottom: 0 !important;
  visibility: visible !important;
}

#sticky-filters #advanced-panel:not(.open):not(.closing) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#advanced-search-input.search-input {
  -webkit-appearance: none !important;
  appearance: none !important;
}

#sticky-filters #advanced-panel.closing {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#advanced-panel .advanced-search, .advanced-panel .advanced-search {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

#advanced-panel .advanced-search .search-input, .advanced-panel .advanced-search .search-input {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

#advanced-panel.advanced-panel.open.adv-settled .advanced-search {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#advanced-panel.advanced-panel .advanced-search, #advanced-panel.advanced-panel.open .advanced-search, #advanced-panel.advanced-panel.closing .advanced-search, #advanced-panel.advanced-panel.open.adv-settled .advanced-search {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
  padding-top: 6px !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel.open .advanced-search, #advanced-panel.advanced-panel.open:focus-within .advanced-search {
  pointer-events: auto !important;
}

#sticky-filters #advanced-panel.advanced-panel.open, #sticky-filters #advanced-panel.advanced-panel.closing {
  padding-top: 6px !important;
}

#sticky-filters .inline-reset-btn.inline-reset-btn--visible, .sticky-filters .inline-reset-btn.inline-reset-btn--visible {
  margin-top: var(--ui-stack-gap,10px) !important;
  margin-bottom: 0 !important;
  align-self: flex-start !important;
}

#sticky-filters #advanced-panel.open + .inline-reset-btn.inline-reset-btn--visible, #sticky-filters #advanced-panel.advanced-panel.open + .inline-reset-btn.inline-reset-btn--visible {
  margin-top: var(--ui-stack-gap,10px) !important;
}

#sticky-filters .filters-bar, .sticky-filters .filters-bar {
  margin-bottom: 0 !important;
}

#sticky-filters #advanced-panel.advanced-panel.open:focus-within, #sticky-filters #advanced-panel.advanced-panel.closing:focus-within {
  padding-top: 6px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

html.tg-phone .filters-bar, html.tg-phone .filters-bar .filter-btn, html.tg-phone .filter-btn, html.tg-phone .filter-label, html.tg-phone .filter-value, html.tg-phone .filter-value-text, html.tg-phone .filter-value-count, html.tg-phone .filter-value-pill, html.tg-phone .filter-value-icon, html.tg-phone .filter-value-backdrop-dot {
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  will-change: auto !important;
}

html.tg-phone #sticky-filters, html.tg-phone .sticky-filters, html.tg-phone.overlay-open #sticky-filters, html.tg-phone.overlay-open .sticky-filters {
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  will-change: auto !important;
}

html.tg-phone #advanced-panel .search-icon, html.tg-phone .advanced-search .search-icon {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#sticky-filters .filter-btn:active {
  transform: none !important;
}

#sticky-filters #advanced-panel {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 0;
  transition: height var(--ui-menu-ms,220ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  will-change: height !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#sticky-filters #advanced-panel .advanced-search .search-input {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 40px 12px 42px !important;
  line-height: 20px !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}

#sticky-filters #advanced-panel .advanced-search .search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#sticky-filters #advanced-panel.open {
  padding-top: 6px !important;
  padding-bottom: 0 !important;
}

#gift-grid .gift-image {
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

#gift-grid .gift-image-wrap {
  background: transparent !important;
}

#sticky-filters #advanced-panel, .sticky-filters #advanced-panel {
  display: block !important;
  height: 0;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: height 200ms cubic-bezier(0.22,1,0.36,1) !important;
  will-change: height;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

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

#sticky-filters #advanced-panel.open, .sticky-filters #advanced-panel.open {
  pointer-events: auto !important;
}

#sticky-filters #advanced-panel.open.adv-settled, .sticky-filters #advanced-panel.open.adv-settled {
  height: auto !important;
}

#sticky-filters #advanced-panel .advanced-search, .sticky-filters #advanced-panel .advanced-search {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: var(--ui-stack-gap,10px) !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.app-shell, .boot-loader, .modal-overlay, .gift-sheet-overlay, .result-sheet-overlay, .pay-sheet-overlay, .tonkeeper-overlay, #payment-success-overlay, #payment-fail-overlay, #purchase-cancel-overlay, #price-change-overlay {
  left: 0 !important;
  width: auto !important;
  right: 0 !important;
}

#advanced-panel.advanced-panel, #sticky-filters #advanced-panel.advanced-panel, .sticky-filters #advanced-panel.advanced-panel {
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: height 220ms cubic-bezier(0.16,1,0.3,1) !important;
  will-change: height !important;
  height: 0px;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  contain: none !important;
}

#advanced-panel.advanced-panel.open.adv-settled, #sticky-filters #advanced-panel.advanced-panel.open.adv-settled, .sticky-filters #advanced-panel.advanced-panel.open.adv-settled {
  height: auto !important;
}

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

#advanced-panel.advanced-panel.open, #sticky-filters #advanced-panel.advanced-panel.open, .sticky-filters #advanced-panel.advanced-panel.open {
  pointer-events: auto !important;
}

#advanced-panel .advanced-search, #sticky-filters #advanced-panel .advanced-search, .sticky-filters #advanced-panel .advanced-search {
  position: relative !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--tg-bg-elevated,#1f1f1f) !important;
  border: 1px solid var(--tg-border-subtle,rgba(255,255,255,0.06)) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

#advanced-panel .search-icon, #sticky-filters #advanced-panel .search-icon, .sticky-filters #advanced-panel .search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}

#advanced-panel .search-input, #sticky-filters #advanced-panel .search-input, .sticky-filters #advanced-panel .search-input {
  height: 46px !important;
  padding: 0 14px 0 44px !important;
  line-height: 46px !important;
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#advanced-panel .search-input:focus, #sticky-filters #advanced-panel .search-input:focus, .sticky-filters #advanced-panel .search-input:focus {
  outline: none !important;
}

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

#sticky-filters #advanced-panel.advanced-panel, .sticky-filters #advanced-panel.advanced-panel {
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  height: 0px;
  transition: height 220ms cubic-bezier(0.16,1,0.3,1),margin-top 220ms cubic-bezier(0.16,1,0.3,1) !important;
  will-change: height,margin-top !important;
  transform: none !important;
  opacity: 1 !important;
}

#sticky-filters #advanced-panel.advanced-panel.open, .sticky-filters #advanced-panel.advanced-panel.open {
  margin-top: var(--ui-stack-gap,10px) !important;
}

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

#sticky-filters #advanced-panel.advanced-panel.open.adv-settled, .sticky-filters #advanced-panel.advanced-panel.open.adv-settled {
  height: auto !important;
}

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

@media (max-width:480px) {
  .gift-sheet {
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(14px + 0px);
  }
  .gift-sheet-visual {
    width: 260px;
    height: 260px;
  }
  .gift-sheet-card-caption--overlay {
    bottom: 14px;
    padding: 0 18px;
  }
  .gift-sheet-card-title {
    font-size: 18px;
    max-width: calc(100% - 36px);
  }
  .gift-sheet.result-sheet {
    margin-bottom: 0;
    max-width: 100%;
  }
  .result-title {
    font-size: 25px;
  }
  .top-promo-banner {
    padding: 0;
  }
  .top-banner-overlay {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .top-promo-banner-photo {
    filter: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* GiftPay UI parity fixes (v4)
/* - Modal list: icon/text spacing
/* - Advanced number search: smooth open/close + no layout jump for reset pill
/* -------------------------------------------------------------------------- */

/* 1) Keep "Очистить фильтр" spacing stable while the advanced panel closes.
   The JS removes `.open` before the height transition starts, so relying on
   `#advanced-panel.open + ...` causes a 1-frame jump. */
#sticky-filters #inline-reset-btn.inline-reset-btn--visible,
#sticky-filters .inline-reset-btn.inline-reset-btn--visible,
#sticky-filters.advanced-open #inline-reset-btn.inline-reset-btn--visible,
#sticky-filters.advanced-open .inline-reset-btn.inline-reset-btn--visible,
.sticky-filters.advanced-open #inline-reset-btn.inline-reset-btn--visible,
.sticky-filters.advanced-open .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(--ui-stack-gap,10px) !important;
  margin-bottom: 0 !important;
}

/* 2) Advanced panel: enforce height transition (older patches disabled it). */
#sticky-filters #advanced-panel,
#sticky-filters #advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel,
.sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing {
  padding: 0 !important;
  overflow: hidden !important;
  will-change: height !important;
  transition: height 220ms cubic-bezier(0.16,1,0.3,1) !important;
}

/* Space between the filter row and the search field (open + closing). */
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing {
  margin-top: var(--ui-stack-gap,10px) !important;
}

/* Fully collapse when hidden (prevents stray padding/margins from other rules). */
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing),
.sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing) {
  height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 3) Inner input row: slide/fade in/out (restore smooth animations). */
#sticky-filters #advanced-panel .advanced-search,
#sticky-filters #advanced-panel.advanced-panel .advanced-search,
.sticky-filters #advanced-panel .advanced-search,
.sticky-filters #advanced-panel.advanced-panel .advanced-search {
  transform: translate3d(0,8px,0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), opacity 220ms cubic-bezier(0.16,1,0.3,1) !important;
  will-change: transform, opacity !important;
}

#sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open .advanced-search {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* `.open` is removed early; `.closing` remains during the height animation. */
#sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.closing .advanced-search {
  transform: translate3d(0,-10px,0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* While the numeric input is focused we keep it visible and avoid flicker. */
html.adv-input-focused #sticky-filters #advanced-panel.advanced-panel .advanced-search,
html.adv-input-focused .sticky-filters #advanced-panel.advanced-panel .advanced-search {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width:520px) {
  body {
    padding: 0;
    align-items: stretch;
  }
  .app-shell {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  main {
    padding: 2px 12px calc(16px + 0px);
  }
  .filters-bar {
    gap: 6px;
  }
  .filter-btn {
    padding: 9px 24px 11px 10px;
    height: 56px;
    min-height: 56px;
  }
  .gift-grid {
    gap: 12px;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .gift-card {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
  .modal {
    max-height: calc(100% - 12px);
  }
  .inline-reset-btn {
    margin-left: 0;
    padding: 7px 14px;
    font-size: 12px;
  }
  body {
    font-size: 16px;
  }
  .app-shell {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0;
    padding-right: 0;
  }
  .filters-bar {
    gap: 10px;
  }
  .filter-btn {
    height: 60px;
    min-height: 60px;
    padding: 12px 24px 12px 12px;
    border-radius: 20px;
  }
  .filter-label {
    font-size: 13px;
  }
  .filter-value {
    font-size: 15px;
  }
  .filter-value-text, .filter-value-count {
    font-size: 14px;
  }
  .search-input {
    min-height: 44px;
    padding: 12px 40px 12px 36px;
    font-size: 15px;
  }
  .inline-reset-btn {
    padding: 9px 18px;
    font-size: 13px;
  }
  .btn-outline, .gift-buy-btn {
    min-height: 38px;
  }
  .gift-card {
    border-radius: 24px;
    padding: 12px;
  }
  .filters-bar {
    gap: 8px !important;
  }
  .filters-bar .filter-btn {
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 22px 10px 10px !important;
    border-radius: 18px !important;
  }
  .filters-bar #advanced-trigger {
    height: 56px !important;
    min-height: 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    border-radius: 18px !important;
  }
  .filters-bar .filter-label {
    font-size: 12px !important;
  }
  .filters-bar .filter-value {
    font-size: 14px !important;
  }
  .app-shell {
    padding-top: 0px;
  }
  .gift-card {
    padding: 6px !important;
  }
  .item-price {
    min-width: 84px !important;
  }
  .gift-card {
    max-width: none;
  }
  .modal-overlay, .gift-sheet-overlay, .pay-sheet-overlay, .tonkeeper-overlay, #payment-success-overlay, #payment-fail-overlay, #purchase-cancel-overlay, #price-change-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .modal-overlay::before, .gift-sheet-overlay::before, .pay-sheet-overlay::before, .tonkeeper-overlay::before, #payment-success-overlay::before, #payment-fail-overlay::before, #purchase-cancel-overlay::before, #price-change-overlay::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width:380px) {
  .top-promo-banner--photo {
    height: 126px !important;
  }
  .top-promo-banner--photo {
    height: 102px !important;
  }
  .item-price {
    min-width: 72px !important;
  }
  #toast.toast {
    left: 10px !important;
    right: 10px !important;
  }
  #toast.toast {
    left: max(16px,0px) !important;
    right: max(16px,0px) !important;
  }
  html.tg-webapp-ios #toast.toast {
    left: max(18px,0px) !important;
    right: max(18px,0px) !important;
  }
}

@media (max-width:430px) {
  .top-promo-banner--photo {
    height: 124px !important;
  }
  .top-banner-overlay {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .top-promo-banner--photo {
    height: 98px !important;
  }
}

@media (max-width:360px) {
  .top-banner-title {
    font-size: 14px !important;
  }
  .boot-loader-title {
    font-size: 20px !important;
  }
  .filters-bar .filter-label {
    font-size: 11px !important;
  }
  .filters-bar .filter-value {
    font-size: 13px !important;
  }
  .filters-bar .filter-value-text {
    font-size: 12.5px !important;
  }
  .filters-bar .filter-btn {
    padding: 8px 34px 10px 8px !important;
  }
  .filters-bar {
    gap: 6px !important;
  }
  .filters-bar .filter-btn {
    padding: 8px 36px 10px 10px !important;
  }
  .filters-bar .filter-label {
    font-size: 11px !important;
  }
  .filters-bar .filter-value {
    font-size: 13px !important;
  }
  .filters-bar .filter-value-text {
    font-size: 12px !important;
  }
  .boot-loader-title {
    font-size: 24px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .modal, .gift-sheet, .result-sheet, .pay-sheet, .tonkeeper-sheet {
    transition: none !important;
  }
  .modal-overlay, .gift-sheet-overlay, .tonkeeper-overlay {
    transition: none !important;
  }
  .purse-fallback {
    animation: none !important;
  }
  :root {
    --ui-menu-ms: 0ms !important;
  }
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
  #gift-grid {
    transition: none !important;
  }
  .gift-card.gift-card--enter {
    animation: none !important;
  }
  #advanced-panel.advanced-panel, #advanced-panel.advanced-panel .advanced-search, #advanced-trigger::before {
    transition: none !important;
  }
}

@media (hover:hover) {
  .gift-card:hover, .balance-pill:hover, .balance-plus-btn:hover, .tonkeeper-btn:hover, .pay-action:hover, .gift-sheet-buy-bar:hover, .chip:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
  .balance-pill:hover, .balance-plus-btn:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
    filter: none !important;
  }
  button:hover, a:hover, [role="button"]:hover, .gift-card:hover, .filter-btn:hover, .chip:hover, .btn-outline:hover, .modal-btn:hover, .pay-action:hover, .gift-sheet-buy-bar:hover, .gift-buy-btn:hover, .scroll-top-btn:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
  .balance-pill:hover, .balance-plus-btn:hover {
    background: transparent !important;
    border-color: inherit !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .balance-pill:hover, .balance-plus-btn:hover {
    filter: none !important;
    box-shadow: none !important;
  }
  .balance-pill:hover, .balance-plus-btn:hover {
    filter: none !important;
    box-shadow: none !important;
  }
}

@media (hover:none) and (pointer:coarse) {
  .advanced-panel {
    transition: transform var(--ui-menu-ms,280ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
    will-change: transform !important;
  }
}

@media (hover:hover) and (pointer:fine) {
  html.overlay-open, html.overlay-open body, body.overlay-open {
    overflow: hidden !important;
  }
}

@media (min-width:521px) {
  #gift-grid.gift-grid {
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr)) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }
  #gift-grid.gift-grid .gift-card {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

.filters-bar .filter-btn {
  overflow: visible !important;
}

.filters-bar .filter-btn:not(#advanced-trigger)::before, .filters-bar .filter-btn:not(#advanced-trigger)::after, .filter-btn:not(#advanced-trigger)::before, .filter-btn:not(#advanced-trigger)::after {
  right: 18px !important;
}

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

#sticky-filters #advanced-panel.open:not(.closing), .sticky-filters #advanced-panel.open:not(.closing), #advanced-panel.open:not(.closing), #advanced-panel.advanced-panel.open:not(.closing) {
  margin-top: var(--ui-stack-gap,10px) !important;
}

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

#advanced-panel.open.adv-settled, #advanced-panel.advanced-panel.open.adv-settled, #sticky-filters #advanced-panel.open.adv-settled, #sticky-filters #advanced-panel.advanced-panel.open.adv-settled, .sticky-filters #advanced-panel.open.adv-settled, .sticky-filters #advanced-panel.advanced-panel.open.adv-settled {
  height: var(--gp-adv-panel-h,auto) !important;
}

#sticky-filters #advanced-panel .advanced-search, .sticky-filters #advanced-panel .advanced-search, #advanced-panel .advanced-search {
  padding-top: 0 !important;
}

#sticky-filters #advanced-panel.closing, #sticky-filters #advanced-panel.open.closing {
  transition-timing-function: cubic-bezier(0.4,0,1,1) !important;
  transition-duration: 160ms !important;
}

#sticky-filters #advanced-panel.closing .advanced-search, #sticky-filters #advanced-panel.open.closing .advanced-search {
  opacity: 0 !important;
  transform: translate3d(0,10px,0) !important;
  transition: opacity 80ms linear,transform 160ms cubic-bezier(0.22,1,0.36,1) !important;
}

#sticky-filters #advanced-panel.open:not(.closing) .advanced-search {
  opacity: 1 !important;
  transform: none !important;
}

@supports (top:env(safe-area-inset-top)) {
  html.tg-webapp-ios {
    --tg-ios-topbar: env(safe-area-inset-top) !important;
  }
  #sticky-filters, .sticky-filters {
    top: calc(env(safe-area-inset-top) + var(--sticky-stack-gap,10px)) !important;
  }
  html.tg-webapp #sticky-filters, html.tg-webapp .sticky-filters {
    top: var(--sticky-stack-gap,10px) !important;
  }
}

#ptr-content {
  padding-top: 0 !important;
}

.topbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: calc(0px + 8px) var(--app-gutter-x,12px) 8px !important;
  margin: 0 !important;
  background: #141414 !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  z-index: 60 !important;
}

#balance-widget, .balance-widget {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: auto !important;
}

.balance-plus-btn::before, .balance-plus-btn::after {
  content: none !important;
  display: none !important;
}

.balance-plus-btn svg {
  display: block !important;
}

html.tg-desktop main, html.tg-desktop.overlay-open main, html.tg-desktop body.overlay-open main {
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
}

#advanced-panel, #advanced-panel.advanced-panel, #sticky-filters #advanced-panel, #sticky-filters #advanced-panel.advanced-panel, .sticky-filters #advanced-panel, .sticky-filters #advanced-panel.advanced-panel {
  margin-top: 0 !important;
  padding-top: 0 !important;
  transition-property: height !important;
}

#advanced-panel.open:not(.closing), #advanced-panel.advanced-panel.open:not(.closing), #sticky-filters #advanced-panel.open:not(.closing), #sticky-filters #advanced-panel.advanced-panel.open:not(.closing), .sticky-filters #advanced-panel.open:not(.closing), .sticky-filters #advanced-panel.advanced-panel.open:not(.closing) {
  padding-top: 6px !important;
}

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

#advanced-panel .advanced-search .search-input, #sticky-filters #advanced-panel .advanced-search .search-input {
  height: 46px !important;
  line-height: 22px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 48px !important;
  padding-right: 44px !important;
}

#advanced-panel .advanced-search .search-input::placeholder, #sticky-filters #advanced-panel .advanced-search .search-input::placeholder {
  line-height: 22px !important;
}

.topbar {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: var(--app-gutter-x,12px) !important;
  padding-right: var(--app-gutter-x,12px) !important;
  justify-content: flex-start !important;
}

.balance-widget {
  margin: 0 !important;
}

.top-promo-banner {
  margin-top: 0 !important;
}

.balance-widget {
  border: none !important;
  background: rgba(10,33,54,0.98) !important;
  box-shadow: none !important;
}

.balance-pill-icon, .balance-pill:hover .balance-pill-icon, .balance-pill:active .balance-pill-icon, .balance-pill:focus .balance-pill-icon, .balance-pill:focus-visible .balance-pill-icon {
  background-color: var(--tg-accent,#2AAE5D) !important;
  background-image: var(--gp-accent-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
}

.balance-pill:hover, .balance-pill:active, .balance-pill:focus, .balance-pill:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.balance-plus-btn {
  background-color: var(--tg-accent,#2AAE5D) !important;
  background-image: var(--gp-accent-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #ffffff !important;
}

.balance-plus-btn:hover, .balance-plus-btn:active, .balance-plus-btn:focus, .balance-plus-btn:focus-visible {
  background-color: var(--tg-accent,#2AAE5D) !important;
  background-image: var(--gp-accent-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  outline: none !important;
}

.filters-bar {
  gap: 8px !important;
}

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

#sticky-filters #advanced-panel.advanced-panel .advanced-search, .sticky-filters #advanced-panel.advanced-panel .advanced-search, #advanced-panel.advanced-panel .advanced-search {
  padding-top: 0 !important;
}

main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

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

#sticky-filters, .sticky-filters {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

#sticky-filters .filters-bar, .sticky-filters .filters-bar {
  width: 100% !important;
  box-sizing: border-box !important;
}

.filters-bar {
  grid-template-columns: 1fr 1fr 1fr 56px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#sticky-filters,  .sticky-filters,  html #sticky-filters,  body #sticky-filters,  html.overlay-open #sticky-filters,  body.overlay-open #sticky-filters,  html.overlay-open .sticky-filters,  body.overlay-open .sticky-filters {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

html.overlay-open .filters-bar,  body.overlay-open .filters-bar,  html.overlay-open #sticky-filters .filters-bar,  body.overlay-open #sticky-filters .filters-bar {
  grid-template-columns: 1fr 1fr 1fr 56px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#advanced-trigger, html.overlay-open #advanced-trigger, body.overlay-open #advanced-trigger {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  flex: 0 0 56px !important;
}

#sticky-filters {
  --gp-adv-gap: 8px;
}

#sticky-filters .filters-bar {
  margin-bottom: 0 !important;
}

#advanced-panel.open, #advanced-panel.advanced-panel.open, #sticky-filters #advanced-panel.open, #sticky-filters #advanced-panel.advanced-panel.open {
  margin-top: var(--gp-adv-gap,8px) !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

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

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

#sticky-filters {
  padding-bottom: var(--gp-adv-gap,8px) !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  margin: 0 !important;
  padding: 2px !important;
  gap: 2px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  background: rgba(10,33,54,0.98) !important;
  border-radius: 999px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  gap: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  line-height: 22px !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  font-size: 12px !important;
  line-height: 22px !important;
  background-color: var(--tg-accent,#2AAE5D) !important;
  background-image: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  vertical-align: middle !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  content: " ₽" !important;
  margin-left: 1px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  vertical-align: middle !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  background-color: var(--tg-accent,#2AAE5D) !important;
  background-image: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: none !important;
  color: #ffffff !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn svg, html body #balance-plus-btn.balance-plus-btn svg, #balance-plus-btn#balance-plus-btn svg, #balance-plus-btn.balance-plus-btn svg, .balance-widget .balance-plus-btn svg, .balance-plus-btn svg {
  width: 10px !important;
  height: 10px !important;
}

#topup-menu-sheet #quick-topup-paymode#quick-topup-paymode, #topup-menu-sheet #quick-topup-paymode.quick-topup-paymode, #topup-menu-sheet .quick-topup-paymode {
  width: 88px !important;
  height: 32px !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#topup-menu-sheet #quick-topup-paymode #quick-topup-mode-rub.quick-topup-paymode-btn, #topup-menu-sheet #quick-topup-paymode #quick-topup-mode-stars.quick-topup-paymode-btn, #topup-menu-sheet #quick-topup-paymode .quick-topup-paymode-btn, #topup-menu-sheet .quick-topup-paymode .quick-topup-paymode-btn {
  width: 42px !important;
  height: 28px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
  z-index: 1 !important;
}

#topup-menu-sheet #quick-topup-paymode#quick-topup-paymode::before, #topup-menu-sheet #quick-topup-paymode.quick-topup-paymode::before, #topup-menu-sheet .quick-topup-paymode::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 42px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.18) !important;
  transform: translateX(0) !important;
  transition: transform 240ms cubic-bezier(0.32,0.72,0,1) !important;
  will-change: transform !important;
  z-index: 0 !important;
}

#topup-menu-sheet #quick-topup-paymode#quick-topup-paymode[data-mode="STARS"]::before, #topup-menu-sheet #quick-topup-paymode.quick-topup-paymode[data-mode="STARS"]::before, #topup-menu-sheet .quick-topup-paymode[data-mode="STARS"]::before, #topup-menu-sheet #quick-topup-paymode#quick-topup-paymode[data-mode="stars"]::before, #topup-menu-sheet #quick-topup-paymode.quick-topup-paymode[data-mode="stars"]::before {
  transform: translateX(42px) !important;
}

#topup-menu-sheet #quick-topup-paymode #quick-topup-mode-rub .paymode-icon, #topup-menu-sheet #quick-topup-paymode #quick-topup-mode-stars .paymode-icon, #topup-menu-sheet #quick-topup-paymode .paymode-icon, #topup-menu-sheet .quick-topup-paymode .paymode-icon {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

#topup-menu-sheet #quick-topup-paymode #quick-topup-mode-rub .paymode-icon--rub, #topup-menu-sheet #quick-topup-paymode .paymode-icon--rub, #topup-menu-sheet .quick-topup-paymode .paymode-icon--rub {
  font-size: 15px !important;
  font-weight: 700 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#topup-menu-sheet #quick-topup-paymode #quick-topup-mode-stars .paymode-icon--star, #topup-menu-sheet #quick-topup-paymode .paymode-icon--star, #topup-menu-sheet .quick-topup-paymode .paymode-icon--star {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#topup-menu-sheet #quick-topup-paymode #quick-topup-mode-stars .tg-star-mode-icon, #topup-menu-sheet #quick-topup-paymode .paymode-icon--star .tg-star-mode-icon, #topup-menu-sheet .quick-topup-paymode .paymode-icon--star .tg-star-mode-icon, #topup-menu-sheet #quick-topup-paymode .tg-star-mode-icon, #topup-menu-sheet .quick-topup-paymode .tg-star-mode-icon {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  transform: none !important;
}

#topup-menu-sheet #quick-topup-paymode .tg-star-icon, #topup-menu-sheet .quick-topup-paymode .tg-star-icon {
  vertical-align: middle !important;
}

#advanced-panel {
  overflow: hidden !important;
  will-change: height !important;
}

#advanced-panel.open {
  overflow: visible !important;
}

.gift-grid {
  transform: translateZ(0);
}

.topbar {
  justify-content: flex-end !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  background-color: #182D20 !important;
  border-radius: 999px !important;
  padding: 3px !important;
  gap: 3px !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 4px 0 0 !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  line-height: 18px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transform: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border-radius: 50% !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  transform: none !important;
}

.balance-pill:hover .balance-pill-icon, .balance-pill:active .balance-pill-icon, .balance-pill:focus .balance-pill-icon, .balance-pill:focus-visible .balance-pill-icon {
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  background-image: none !important;
  opacity: 1 !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 18px !important;
  font-variant-numeric: tabular-nums;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  content: " ₽" !important;
  margin-left: 2px !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  opacity: 0.98 !important;
  transform: none !important;
  line-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
}

.balance-plus-btn svg {
  display: block;
  width: 9px !important;
  height: 9px !important;
}

.balance-plus-btn:hover, .balance-plus-btn:active, .balance-plus-btn:focus, .balance-plus-btn:focus-visible {
  background: var(--tg-accent,#2AAE5D) !important;
  outline: none !important;
  box-shadow: none !important;
}

#sticky-filters.advanced-open {
  --gp-adv-gap: var(--ui-stack-gap,10px);
  gap: var(--gp-adv-gap) !important;
  row-gap: var(--gp-adv-gap) !important;
  padding-bottom: var(--gp-adv-gap) !important;
}

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

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

#sticky-filters.advanced-open #advanced-panel .advanced-search, #sticky-filters.advanced-open #advanced-panel.open .advanced-search, #sticky-filters.advanced-open #advanced-panel.closing .advanced-search {
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
}

.modal,  .modal-list,  .gift-sheet,  .pay-sheet,  .tonkeeper-sheet,  .result-sheet {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

input, textarea, select, [contenteditable="true"] {
  touch-action: manipulation !important;
}

html.overlay-open .modal-list, body.overlay-open .modal-list, html.overlay-open .modal, body.overlay-open .modal {
  overflow-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

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

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

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 4px !important;
  gap: 4px !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 8px 0 0 !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  align-items: center !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  line-height: 1 !important;
}

.balance-plus-btn svg {
  width: 10px !important;
  height: 10px !important;
}

html body .topbar, html.tg-webapp-ios body .topbar, html.tg-webapp-android body .topbar, html.tg-phone body .topbar {
  justify-content: center !important;
}

html body #balance-widget, html body .topbar #balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  font-size: 14px !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn svg, html body #balance-plus-btn.balance-plus-btn svg, #balance-plus-btn#balance-plus-btn svg, #balance-plus-btn.balance-plus-btn svg, .balance-widget .balance-plus-btn svg, .balance-plus-btn svg {
  width: 12px !important;
  height: 12px !important;
}

html body .topbar, html.tg-webapp-ios body .topbar, html.tg-webapp-android body .topbar, html.tg-phone body .topbar {
  justify-content: flex-end !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 1px 8px !important;
  gap: 9px !important;
  background-color: #182D20 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 22px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  transform: none !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  font-size: 14px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  font-weight: 800 !important;
  transform: none !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  height: 22px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variant-numeric: tabular-nums;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  content: " ₽" !important;
  margin-left: 2px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  transform: none !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 2px !important;
  gap: 4px !important;
  background-color: #182D20 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  line-height: 22px !important;
  transform: none !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  font-size: 14px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  transform: none !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  content: " ₽" !important;
  margin-left: 2px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  transform: none !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn svg, html body #balance-plus-btn.balance-plus-btn svg, #balance-plus-btn#balance-plus-btn svg, #balance-plus-btn.balance-plus-btn svg, .balance-widget .balance-plus-btn svg, .balance-plus-btn svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 2px !important;
  gap: 4px !important;
  border-radius: 999px !important;
  background-color: #182D20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  line-height: 22px !important;
  transform: none !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  border-radius: 50% !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  transform: none !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  font-variant-numeric: tabular-nums;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  content: " ₽" !important;
  margin-left: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 22px !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  border-radius: 50% !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: none !important;
  transform: none !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 2px !important;
  gap: 4px !important;
  background-color: #182D20 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 22px !important;
  transform: none !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variant-numeric: tabular-nums;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  font-size: 14px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  height: 22px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  line-height: 22px !important;
  margin-left: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 2px !important;
  gap: 4px !important;
  background-color: #182D20 !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  line-height: 22px !important;
  transform: none !important;
  outline: none !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  transform: none !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  line-height: 22px !important;
  margin-left: 2px !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 50% !important;
  padding: 0 !important;
  transform: none !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  gap: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 22px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  transform: none !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  font-size: 13.5px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn svg, html body #balance-plus-btn.balance-plus-btn svg, #balance-plus-btn#balance-plus-btn svg, #balance-plus-btn.balance-plus-btn svg, .balance-widget .balance-plus-btn svg, .balance-plus-btn svg {
  width: 14px !important;
  height: 14px !important;
}

#sticky-filters.advanced-open, .sticky-filters.advanced-open {
  gap: var(--ui-stack-gap,10px) !important;
  row-gap: var(--ui-stack-gap,10px) !important;
  padding-bottom: var(--ui-stack-gap,10px) !important;
}

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

#sticky-filters.advanced-open .inline-reset-btn, #sticky-filters.advanced-open .inline-reset-btn.inline-reset-btn--visible, #sticky-filters.advanced-open #inline-reset-btn.inline-reset-btn--visible, .sticky-filters.advanced-open .inline-reset-btn, .sticky-filters.advanced-open .inline-reset-btn.inline-reset-btn--visible {
  margin: 0 !important;
}

#sticky-filters #advanced-panel.advanced-panel.open + #inline-reset-btn.inline-reset-btn--visible, #sticky-filters #advanced-panel.advanced-panel.open:focus-within + #inline-reset-btn.inline-reset-btn--visible, .sticky-filters #advanced-panel.advanced-panel.open + #inline-reset-btn.inline-reset-btn--visible, .sticky-filters #advanced-panel.advanced-panel.open:focus-within + #inline-reset-btn.inline-reset-btn--visible {
  margin-top: var(--ui-stack-gap,10px) !important;
}

@supports (top:env(safe-area-inset-top)) {
  #sticky-filters, .sticky-filters {
    top: env(safe-area-inset-top) !important;
  }
  html.tg-webapp #sticky-filters, html.tg-webapp .sticky-filters {
    top: 0 !important;
  }
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  padding-left: 6px !important;
  padding-right: 6px !important;
  gap: 6px !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  gap: 6px !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 2px !important;
  gap: 0 !important;
  display: inline-block !important;
  position: relative !important;
  box-sizing: border-box !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  line-height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  gap: 0 !important;
  position: relative !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  line-height: 26px !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  height: 26px !important;
  line-height: 26px !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  position: absolute !important;
  right: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  line-height: 20px !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn svg, html body #balance-plus-btn.balance-plus-btn svg, #balance-plus-btn#balance-plus-btn svg, #balance-plus-btn.balance-plus-btn svg, .balance-widget .balance-plus-btn svg, .balance-plus-btn svg {
  width: 11px !important;
  height: 11px !important;
}

html.overlay-open .modal-overlay::before,  html.overlay-open .gift-sheet-overlay::before,  html.overlay-open .pay-sheet-overlay::before,  html.overlay-open .tonkeeper-overlay::before,  html.overlay-open #payment-success-overlay::before,  html.overlay-open #payment-fail-overlay::before,  html.overlay-open #purchase-cancel-overlay::before,  html.overlay-open #price-change-overlay::before {
  top: 0 !important;
}

html.overlay-open.overlay-sticky-pinned .modal-overlay::before,  html.overlay-open.overlay-sticky-pinned .gift-sheet-overlay::before,  html.overlay-open.overlay-sticky-pinned .result-sheet-overlay::before,  html.overlay-open.overlay-sticky-pinned .pay-sheet-overlay::before,  html.overlay-open.overlay-sticky-pinned .tonkeeper-overlay::before,  html.overlay-open.overlay-sticky-pinned #payment-success-overlay::before,  html.overlay-open.overlay-sticky-pinned #payment-fail-overlay::before,  html.overlay-open.overlay-sticky-pinned #purchase-cancel-overlay::before,  html.overlay-open.overlay-sticky-pinned #price-change-overlay::before {
  inset: 0 !important;
  top: 0 !important;
}

html.overlay-open.overlay-sticky-pinned #sticky-filters, body.overlay-open.overlay-sticky-pinned #sticky-filters {
  z-index: 60 !important;
  pointer-events: none !important;
}

html.overlay-open.overlay-sticky-pinned .modal-overlay .modal {
  height: calc(var(--tg-viewport-height,100vh) - var(--overlay-top-offset,0px) - env(safe-area-inset-bottom,0px)) !important;
  max-height: calc(var(--tg-viewport-height,100vh) - var(--overlay-top-offset,0px) - env(safe-area-inset-bottom,0px)) !important;
}

.modal-overlay[aria-hidden="false"]:not(.closing)::before {
  opacity: 1 !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  background-color: #182D20 !important;
  border-radius: 999px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 4px !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  box-sizing: border-box !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  gap: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  transform: none !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 50% !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  position: static !important;
  transform: none !important;
  pointer-events: none !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variant-numeric: tabular-nums;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  content: " ₽" !important;
  margin-left: 2px !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--tg-accent,#2AAE5D) !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn svg, html body #balance-plus-btn.balance-plus-btn svg, #balance-plus-btn#balance-plus-btn svg, #balance-plus-btn.balance-plus-btn svg, .balance-widget .balance-plus-btn svg, .balance-plus-btn svg {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}

.topbar {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  justify-content: flex-end !important;
}

html body .topbar #balance-widget.balance-widget, html body #balance-widget.balance-widget, #balance-widget#balance-widget, #balance-widget.balance-widget, .topbar .balance-widget, .balance-widget {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 3px !important;
  gap: 4px !important;
  background-color: #182D20 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

html body .topbar #balance-pill.balance-pill, html body #balance-pill.balance-pill, #balance-pill#balance-pill, #balance-pill.balance-pill, .balance-widget .balance-pill, .balance-pill {
  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;
  padding: 0 !important;
  gap: 6px !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body .topbar #balance-pill .balance-pill-icon, html body #balance-pill .balance-pill-icon, #balance-pill .balance-pill-icon, .balance-pill .balance-pill-icon, .balance-pill-icon {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  min-height: 23px !important;
  max-width: 23px !important;
  max-height: 23px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  font-size: 15px !important;
}

html body .topbar #balance-plus-btn.balance-plus-btn, html body #balance-plus-btn.balance-plus-btn, #balance-plus-btn#balance-plus-btn, #balance-plus-btn.balance-plus-btn, .balance-widget .balance-plus-btn, .balance-plus-btn {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  min-height: 23px !important;
  max-width: 23px !important;
  max-height: 23px !important;
}

:root {
  --tg-top-inset-js: 0px;
  --tg-sticky-top: 0px;
}

html.tg-webapp.tg-phone {
  --tg-sticky-top: var(--tg-top-inset-js,0px);
}

html.tg-webapp-ios.tg-phone {
  --tg-sticky-top: var(--tg-top-inset-js,calc(env(safe-area-inset-top,0px) + 44px));
}

#sticky-filters, .sticky-filters {
  top: var(--tg-sticky-top,0px) !important;
  padding-top: var(--ui-stack-gap,10px) !important;
}

html.overlay-open.overlay-sticky-pinned #sticky-filters, body.overlay-open.overlay-sticky-pinned #sticky-filters {
  top: var(--tg-sticky-top,0px) !important;
}

#sticky-filters, .sticky-filters {
  padding-top: 0 !important;
}

#top-banner.top-promo-banner, .top-promo-banner {
  margin-bottom: 8px !important;
}

.filters-bar .filter-btn, #sticky-filters .filters-bar .filter-btn, .sticky-filters .filters-bar .filter-btn {
  overflow: hidden !important;
}

.filters-bar .filter-label, .filters-bar .filter-value, .filters-bar .filter-value-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

#sticky-filters .filter-value, #sticky-filters .filter-value-text, .sticky-filters .filter-value, .sticky-filters .filter-value-text {
  word-break: normal !important;
}

.filters-bar .filter-btn:not(#advanced-trigger)::before, .filters-bar .filter-btn:not(#advanced-trigger)::after, .filter-btn:not(#advanced-trigger)::before, .filter-btn:not(#advanced-trigger)::after {
  width: 7px !important;
  height: 7px !important;
  border-right-width: 1.5px !important;
  border-bottom-width: 1.5px !important;
  right: 12px !important;
  opacity: 0.7 !important;
}

.filters-bar .filter-btn:not(#advanced-trigger)::before, .filter-btn:not(#advanced-trigger)::before {
  top: 46% !important;
}

.filters-bar .filter-btn:not(#advanced-trigger)::after, .filter-btn:not(#advanced-trigger)::after {
  top: 54% !important;
}

:root {
  --gp-adv-trigger-w: 44px;
}

.filters-bar {
  grid-template-columns: 1fr 1fr 1fr var(--gp-adv-trigger-w) !important;
}

#advanced-trigger, .filters-bar #advanced-trigger {
  width: var(--gp-adv-trigger-w) !important;
  min-width: var(--gp-adv-trigger-w) !important;
  flex: 0 0 var(--gp-adv-trigger-w) !important;
}

#advanced-trigger.has-advanced::after, .filters-bar #advanced-trigger.has-advanced::after {
  top: 7px !important;
  right: 7px !important;
}

#advanced-panel.advanced-panel.closing .advanced-search, #advanced-panel.closing .advanced-search {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.filters-bar,  html.overlay-open .filters-bar,  body.overlay-open .filters-bar,  html.overlay-open #sticky-filters .filters-bar,  body.overlay-open #sticky-filters .filters-bar {
  grid-template-columns: 1fr 1fr 1fr var(--gp-adv-trigger-w) !important;
}

#advanced-trigger,  .filters-bar #advanced-trigger,  html.overlay-open #advanced-trigger,  body.overlay-open #advanced-trigger {
  width: var(--gp-adv-trigger-w) !important;
  min-width: var(--gp-adv-trigger-w) !important;
  max-width: var(--gp-adv-trigger-w) !important;
  flex: 0 0 var(--gp-adv-trigger-w) !important;
}

#advanced-trigger.has-advanced::after, .filters-bar #advanced-trigger.has-advanced::after, html.overlay-open #advanced-trigger.has-advanced::after, body.overlay-open #advanced-trigger.has-advanced::after {
  top: 6px !important;
  right: 6px !important;
}

@media (max-width:520px) {
  :root {
    --gp-adv-trigger-w: 44px;
  }
}

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

#advanced-panel.advanced-panel:not(.open):not(.closing), #sticky-filters #advanced-panel.advanced-panel:not(.open):not(.closing) {
  visibility: hidden !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel.closing, #sticky-filters #advanced-panel.advanced-panel.closing {
  visibility: visible !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel .advanced-search, #sticky-filters #advanced-panel.advanced-panel .advanced-search {
  transition: transform var(--adv-panel-ms,280ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)),opacity var(--adv-panel-ms,280ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
}

#advanced-panel.advanced-panel:not(.open):not(.closing) .advanced-search, #sticky-filters #advanced-panel.advanced-panel:not(.open):not(.closing) .advanced-search {
  opacity: 0 !important;
  transform: translate3d(0,8px,0) !important;
}

#advanced-panel.advanced-panel.open .advanced-search, #sticky-filters #advanced-panel.advanced-panel.open .advanced-search {
  opacity: 1 !important;
  transform: none !important;
}

#advanced-panel.advanced-panel.closing .advanced-search, #sticky-filters #advanced-panel.advanced-panel.closing .advanced-search, #advanced-panel.closing .advanced-search {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

:root {
  --gp-adv-ease: cubic-bezier(0.16,1,0.3,1);
  --gp-adv-in-ms: 220ms;
}

#advanced-panel.advanced-panel {
  transition: height var(--ui-menu-ms,280ms) var(--gp-adv-ease) !important;
  will-change: height !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel.open, #advanced-panel.advanced-panel.closing {
  visibility: visible !important;
  pointer-events: auto !important;
  margin-bottom: 0 !important;
}

#advanced-panel.advanced-panel:not(.open):not(.closing) {
  visibility: hidden !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel .advanced-search {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 0 !important;
  transform: translate3d(0,-6px,0) !important;
  transition: opacity var(--gp-adv-in-ms) var(--gp-adv-ease),transform var(--gp-adv-in-ms) var(--gp-adv-ease) !important;
  will-change: opacity,transform !important;
}

#advanced-panel.advanced-panel.open .advanced-search {
  opacity: 1 !important;
  transform: none !important;
}

#advanced-panel.advanced-panel.closing .advanced-search {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  position: relative !important;
  top: 2px !important;
}

#sticky-filters, .sticky-filters {
  --gp-adv-gap: 8px;
  padding-bottom: var(--gp-adv-gap) !important;
}

#sticky-filters #advanced-panel.open, #sticky-filters #advanced-panel.open:focus-within, #sticky-filters #advanced-panel.advanced-panel.open, #sticky-filters #advanced-panel.advanced-panel.open:focus-within, #sticky-filters #advanced-panel.advanced-panel.closing {
  margin-top: var(--gp-adv-gap) !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

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

#sticky-filters #advanced-panel .advanced-search {
  margin: 0 !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  position: relative !important;
  top: 0.14em !important;
  display: inline-block !important;
}

#sticky-filters,  .sticky-filters,  html.overlay-open #sticky-filters,  body.overlay-open #sticky-filters {
  --gp-vgap: 8px;
  padding-top: var(--gp-vgap) !important;
  padding-bottom: var(--gp-vgap) !important;
}

#sticky-filters .inline-reset-btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

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

#sticky-filters #advanced-panel.open + #inline-reset-btn.inline-reset-btn--visible,  #sticky-filters #advanced-panel.advanced-panel.open + #inline-reset-btn.inline-reset-btn--visible {
  margin-top: var(--ui-stack-gap,10px) !important;
}

#sticky-filters #advanced-panel.open,  #sticky-filters #advanced-panel.open:focus-within,  #sticky-filters #advanced-panel.advanced-panel.open,  #sticky-filters #advanced-panel.advanced-panel.open:focus-within {
  margin-top: var(--gp-vgap,8px) !important;
  margin-bottom: var(--gp-vgap,8px) !important;
}

#sticky-filters #advanced-panel:not(.open):not(.closing),  #sticky-filters #advanced-panel.advanced-panel:not(.open):not(.closing) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body .topbar #balance-amount.balance-pill-amount, html body #balance-amount.balance-pill-amount, #balance-amount#balance-amount, #balance-amount.balance-pill-amount, .balance-pill .balance-pill-amount, .balance-pill-amount {
  display: inline-block !important;
  line-height: 22px !important;
}

html body .topbar #balance-amount.balance-pill-amount::after, html body #balance-amount.balance-pill-amount::after, #balance-amount#balance-amount::after, #balance-amount.balance-pill-amount::after, .balance-pill .balance-pill-amount::after, .balance-pill-amount::after {
  content: "" !important;
  display: none !important;
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
}

#balance-widget, .balance-widget {
  margin-left: auto !important;
}

#payment-success-overlay .result-sheet, #payment-fail-overlay .result-sheet, #price-change-overlay .pay-sheet, #purchase-cancel-overlay .gift-sheet {
  box-sizing: border-box !important;
  width: calc(100% - (var(--app-gutter-x,12px) + var(--app-gutter-x,12px))) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#payment-success-overlay, #payment-fail-overlay, #price-change-overlay, #purchase-cancel-overlay {
  overflow: visible !important;
}

main {
  padding-left: var(--app-gutter-x,12px) !important;
  padding-right: var(--app-gutter-x,12px) !important;
}

.topbar, #ptr-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#sticky-filters,  .sticky-filters {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.modal-overlay, .gift-sheet-overlay, .result-sheet-overlay, .pay-sheet-overlay, .tonkeeper-overlay, #payment-success-overlay, #payment-fail-overlay, #purchase-cancel-overlay, #price-change-overlay {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.tonkeeper-sheet, .tonkeeper-sheet--confirm, #topup-menu-overlay .tonkeeper-sheet, #payment-confirm-overlay .tonkeeper-sheet {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 24px 24px 0 0 !important;
}

.tonkeeper-sheet, .tonkeeper-sheet--confirm {
  padding-bottom: calc(20px + env(safe-area-inset-bottom,0px) + var(--tg-keyboard-inset,0px)) !important;
}

.gift-sheet-overlay .gift-sheet, .gift-sheet-overlay .pay-sheet, .gift-sheet-overlay .result-sheet, #payment-success-overlay .result-sheet, #payment-fail-overlay .result-sheet, #price-change-overlay .pay-sheet, #purchase-cancel-overlay .gift-sheet, .pay-sheet, .result-sheet {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 24px 24px 0 0 !important;
}

.gift-sheet.result-sheet, #payment-success-sheet.gift-sheet.result-sheet, #payment-fail-sheet.gift-sheet.result-sheet {
  padding-bottom: calc(12px + env(safe-area-inset-bottom,0px) + var(--tg-keyboard-inset,0px)) !important;
}

#payment-success-overlay .result-sheet, #payment-fail-overlay .result-sheet, #price-change-overlay .pay-sheet, #purchase-cancel-overlay .gift-sheet {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.gift-sheet-buy-bar, .gift-buy-btn, .pay-action, .result-btn, .modal-btn, .tonkeeper-btn, #balance-topup-btn, #balance-plus-btn, #quick-topup-submit, #price-change-buy, #payment-fail-confirm, #payment-success-confirm {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

.gift-sheet-buy-bar {
  -webkit-user-select: none !important;
  user-select: none !important;
}

html body .topbar, html.tg-webapp-ios body .topbar, html.tg-webapp-android body .topbar, html.tg-phone body .topbar, html.tg-desktop body .topbar {
  justify-content: flex-end !important;
}

html body #balance-widget, html body .topbar #balance-widget, #balance-widget.balance-widget {
  margin-left: auto !important;
  margin-right: 0 !important;
}

#topup-menu-sheet, #topup-menu-sheet.tonkeeper-sheet, #payment-confirm-sheet, #payment-confirm-sheet.tonkeeper-sheet, #payment-success-sheet, #payment-fail-sheet, #price-change-sheet, #purchase-cancel-sheet {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#topup-menu-sheet, #topup-menu-sheet.tonkeeper-sheet {
  border-radius: 22px 22px 0 0 !important;
  max-height: var(--tg-viewport-stable-height,var(--tg-viewport-height,100vh)) !important;
  height: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 18px !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom) + var(--tg-keyboard-inset,0px)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#payment-success-sheet, #payment-fail-sheet, #price-change-sheet, #purchase-cancel-sheet {
  border-radius: 22px 22px 0 0 !important;
}

#topup-menu-overlay.tonkeeper-overlay, #payment-confirm-overlay.tonkeeper-overlay, .tonkeeper-overlay, .gift-sheet-overlay, .pay-sheet-overlay, .result-sheet-overlay, #payment-success-overlay, #payment-fail-overlay, #price-change-overlay, #purchase-cancel-overlay {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

#topup-menu-sheet .tonkeeper-purse {
  pointer-events: none !important;
}

#topup-menu-sheet #quick-topup-paymode, #topup-menu-sheet .quick-topup-paymode {
  z-index: 30 !important;
}

#topup-menu-sheet #quick-topup-paymode::before, #topup-menu-sheet .quick-topup-paymode::before {
  pointer-events: none !important;
}

#topup-menu-sheet #quick-topup-submit, #topup-menu-sheet #quick-topup-submit.tonkeeper-btn, #topup-menu-sheet .tonkeeper-btn#quick-topup-submit {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

:root {
  --gp-vgap: 8px;
}

#top-banner.top-promo-banner, .top-promo-banner {
  margin-top: var(--gp-vgap) !important;
  margin-bottom: 0 !important;
}

#sticky-filters,  .sticky-filters,  html.overlay-open #sticky-filters,  body.overlay-open #sticky-filters {
  padding-top: var(--gp-vgap) !important;
  padding-bottom: var(--gp-vgap) !important;
}

#sticky-filters #advanced-panel.advanced-panel {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: height 220ms cubic-bezier(0.2,0.9,0.2,1),margin-top 220ms cubic-bezier(0.2,0.9,0.2,1),margin-bottom 220ms cubic-bezier(0.2,0.9,0.2,1) !important;
}

#sticky-filters #advanced-panel.advanced-panel.open {
  margin-top: var(--gp-vgap) !important;
  margin-bottom: 0 !important;
}

#sticky-filters #advanced-panel.advanced-panel:not(.open):not(.closing) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#sticky-filters #inline-reset-btn.inline-reset-btn--visible {
  margin-top: var(--gp-vgap) !important;
  margin-bottom: 0 !important;
}

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

html.overlay-open, body.overlay-open {
  overflow: visible !important;
}

body.overlay-open {
  padding-right: 0 !important;
}

.toast.hiding {
  transform: translate3d(0,-140%,0) !important;
  visibility: visible !important;
}

#sticky-filters #advanced-panel.advanced-panel.open {
  margin-top: 12px !important;
}

#sticky-filters #inline-reset-btn.inline-reset-btn--visible {
  margin-top: 12px !important;
}

#top-banner.top-promo-banner, .top-promo-banner {
  margin-top: 0 !important;
}

#topup-menu-sheet, #topup-menu-sheet.tonkeeper-sheet, #payment-confirm-sheet, #payment-confirm-sheet.tonkeeper-sheet, #payment-confirm-sheet.tonkeeper-sheet--confirm {
  width: min(420px,calc(100% - 24px)) !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 22px !important;
}

#topup-menu-sheet, #topup-menu-sheet.tonkeeper-sheet, #payment-confirm-sheet, #payment-confirm-sheet.tonkeeper-sheet, #payment-confirm-sheet.tonkeeper-sheet--confirm {
  max-height: var(--tg-viewport-stable-height,var(--tg-viewport-height,100vh)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

#topup-menu-sheet, #topup-menu-sheet.tonkeeper-sheet, #payment-confirm-sheet, #payment-confirm-sheet.tonkeeper-sheet, #payment-confirm-sheet.tonkeeper-sheet--confirm {
  clip-path: inset(0 round 22px) !important;
}

#sticky-filters, .sticky-filters {
  --gp-vgap: 12px;
  padding-top: var(--gp-vgap) !important;
  padding-bottom: var(--gp-vgap) !important;
}

#sticky-filters #advanced-panel.advanced-panel.open, #sticky-filters #advanced-panel.open, .sticky-filters #advanced-panel.advanced-panel.open, .sticky-filters #advanced-panel.open, #sticky-filters.advanced-open #advanced-panel.advanced-panel.open, #sticky-filters.advanced-open #advanced-panel.open {
  margin-top: var(--gp-vgap) !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

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

html:not(.adv-input-focused) #advanced-panel.advanced-panel .advanced-search, html:not(.adv-input-focused) #sticky-filters #advanced-panel.advanced-panel .advanced-search, html:not(.adv-input-focused) .sticky-filters #advanced-panel.advanced-panel .advanced-search {
  transform: none !important;
  opacity: 0 !important;
  transition: opacity 180ms var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  will-change: opacity !important;
}

html:not(.adv-input-focused) #advanced-panel.advanced-panel.open .advanced-search, html:not(.adv-input-focused) #sticky-filters #advanced-panel.advanced-panel.open .advanced-search, html:not(.adv-input-focused) .sticky-filters #advanced-panel.advanced-panel.open .advanced-search {
  transform: none !important;
  opacity: 1 !important;
}

html:not(.adv-input-focused) #advanced-panel.advanced-panel.closing .advanced-search, html:not(.adv-input-focused) #sticky-filters #advanced-panel.advanced-panel.closing .advanced-search, html:not(.adv-input-focused) .sticky-filters #advanced-panel.advanced-panel.closing .advanced-search {
  transform: none !important;
  opacity: 0 !important;
}

html.adv-input-focused #advanced-panel .advanced-search, html.adv-input-focused #sticky-filters #advanced-panel .advanced-search, html.adv-input-focused .sticky-filters #advanced-panel .advanced-search {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
}

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

html.overlay-open #sticky-filters, body.overlay-open #sticky-filters, html.overlay-open .sticky-filters, body.overlay-open .sticky-filters {
  z-index: 5000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html.overlay-open:not(.overlay-sticky-pinned) #sticky-filters, body.overlay-open:not(.overlay-sticky-pinned) #sticky-filters, html.overlay-open:not(.overlay-sticky-pinned) .sticky-filters, body.overlay-open:not(.overlay-sticky-pinned) .sticky-filters {
  z-index: 5000 !important;
}

#gift-grid.gift-grid .gift-card {
  width: 100% !important;
  justify-self: center !important;
}

} #gift-grid.gift-grid, .gift-grid {
  grid-template-columns: repeat(auto-fit,minmax(210px,1fr)) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
}

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

.gift-grid > .gift-card:only-child {
  width: min(320px,100%) !important;
  justify-self: start !important;
}

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

#sticky-filters #advanced-panel.open + #inline-reset-btn.inline-reset-btn--visible, #sticky-filters #advanced-panel.open + .inline-reset-btn.inline-reset-btn--visible {
  margin-top: var(--ui-stack-gap,10px) !important;
}

#topup-menu-overlay.tonkeeper-overlay, #payment-confirm-overlay.tonkeeper-overlay {
  height: var(--tg-viewport-stable-height,var(--tg-viewport-height,100vh)) !important;
}

#topup-menu-overlay.tonkeeper-overlay, #payment-confirm-overlay.tonkeeper-overlay {
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + var(--tg-keyboard-inset,0px) + 12px) !important;
}

#topup-menu-sheet.tonkeeper-sheet, #payment-confirm-sheet.tonkeeper-sheet, #payment-confirm-sheet.tonkeeper-sheet--confirm {
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + 18px) !important;
}

#topup-menu-sheet .tonkeeper-btn,  #payment-confirm-sheet .tonkeeper-btn {
  height: 56px !important;
  min-height: 56px !important;
}

html.overlay-open #ptr-content, body.overlay-open #ptr-content, html.overlay-open #ptr-content.ptr-content, body.overlay-open #ptr-content.ptr-content {
  transform: none !important;
  will-change: auto !important;
}

html.overlay-open #sticky-filters, html.overlay-open .sticky-filters, body.overlay-open #sticky-filters, body.overlay-open .sticky-filters, html.overlay-open.overlay-sticky-pinned #sticky-filters, body.overlay-open.overlay-sticky-pinned #sticky-filters {
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  pointer-events: none !important;
  transform: none !important;
  will-change: auto !important;
  background: var(--bg-primary,#141414) !important;
}

html.overlay-open .topbar, body.overlay-open .topbar {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: var(--bg-primary,#141414) !important;
}

.modal-overlay, .gift-sheet-overlay, .tonkeeper-overlay, .pay-sheet-overlay, .result-sheet-overlay, #payment-success-overlay, #payment-fail-overlay, #purchase-cancel-overlay, #price-change-overlay {
  z-index: 1000 !important;
}

.modal-overlay .modal, .gift-sheet-overlay .gift-sheet, .gift-sheet-overlay .pay-sheet, .gift-sheet-overlay .result-sheet, .tonkeeper-overlay .tonkeeper-sheet {
  z-index: 1200 !important;
}

html.overlay-open, html.overlay-open body, body.overlay-open {
  overflow: visible !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  position: static !important;
}

html.overlay-open main, body.overlay-open main {
  overflow: visible !important;
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
}

html.overlay-open .topbar, body.overlay-open .topbar, html.overlay-open.overlay-sticky-pinned .topbar, body.overlay-open.overlay-sticky-pinned .topbar {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  will-change: auto !important;
}

html.overlay-open #sticky-filters, html.overlay-open .sticky-filters, body.overlay-open #sticky-filters, body.overlay-open .sticky-filters {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  will-change: auto !important;
}

html.overlay-open #ptr-content, body.overlay-open #ptr-content {
  transform: none !important;
  will-change: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html.overlay-open #gift-grid, body.overlay-open #gift-grid {
  overflow-anchor: none !important;
  transform: none !important;
}

html.overlay-open .filters-bar, body.overlay-open .filters-bar, html.overlay-open #advanced-panel, body.overlay-open #advanced-panel, html.overlay-open #inline-reset-btn, body.overlay-open #inline-reset-btn {
  transform: none !important;
}

html.overlay-open .balance-widget, body.overlay-open .balance-widget, html.overlay-open #balance-widget, body.overlay-open #balance-widget {
  position: relative !important;
  top: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.overlay-open.overlay-sticky-pinned #sticky-filters, body.overlay-open.overlay-sticky-pinned #sticky-filters {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

html.overlay-open.overlay-sticky-pinned .topbar, body.overlay-open.overlay-sticky-pinned .topbar {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

html.overlay-open main, body.overlay-open main, html.overlay-open.overlay-sticky-pinned main, body.overlay-open.overlay-sticky-pinned main {
  overflow: visible !important;
  position: relative !important;
  z-index: auto !important;
  transform: none !important;
}

html.overlay-open main, body.overlay-open main, html.overlay-open.overlay-sticky-pinned main, body.overlay-open.overlay-sticky-pinned main {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

html.overlay-open #ptr-content, body.overlay-open #ptr-content, html.overlay-open #ptr-content.ptr-content, body.overlay-open #ptr-content.ptr-content {
  overflow: visible !important;
}

html.overlay-open .topbar, body.overlay-open .topbar, html.overlay-open.overlay-sticky-pinned .topbar, body.overlay-open.overlay-sticky-pinned .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
  pointer-events: none !important;
}

html.overlay-open #balance-widget, body.overlay-open #balance-widget, html.overlay-open .balance-widget, body.overlay-open .balance-widget {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html.overlay-open, html.overlay-open body, body.overlay-open {
  overflow: hidden !important;
}

html.overlay-open #sticky-filters, body.overlay-open #sticky-filters, html.overlay-open .sticky-filters, body.overlay-open .sticky-filters {
  z-index: 60 !important;
  --gp-vgap: 12px !important;
}

html.overlay-open:not(.overlay-sticky-pinned) #sticky-filters, body.overlay-open:not(.overlay-sticky-pinned) #sticky-filters, html.overlay-open:not(.overlay-sticky-pinned) .sticky-filters, body.overlay-open:not(.overlay-sticky-pinned) .sticky-filters {
  z-index: 60 !important;
}

#topup-menu-overlay.tonkeeper-overlay, #payment-confirm-overlay.tonkeeper-overlay {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

#topup-menu-overlay .tonkeeper-sheet, #payment-confirm-overlay .tonkeeper-sheet {
  max-width: 440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#topup-menu-sheet.tonkeeper-sheet, #payment-confirm-sheet.tonkeeper-sheet, #payment-confirm-sheet.tonkeeper-sheet--confirm {
  min-height: 0 !important;
}

#topup-menu-sheet.tonkeeper-sheet, #payment-confirm-sheet.tonkeeper-sheet, #payment-confirm-sheet.tonkeeper-sheet--confirm {
  padding-bottom: 20px !important;
}

#topup-menu-overlay.tonkeeper-overlay, #payment-confirm-overlay.tonkeeper-overlay {
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + 12px) !important;
}

#topup-menu-overlay.tonkeeper-overlay.visible, #payment-confirm-overlay.tonkeeper-overlay.visible {
  transition: opacity var(--ui-menu-ms,360ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
}

#sticky-filters.advanced-open #advanced-panel.advanced-panel.open:focus-within, #sticky-filters.advanced-open #advanced-panel.advanced-panel.closing:focus-within, #sticky-filters.advanced-open #advanced-panel.open:focus-within, #sticky-filters.advanced-open #advanced-panel.closing:focus-within, .sticky-filters.advanced-open #advanced-panel.advanced-panel.open:focus-within, .sticky-filters.advanced-open #advanced-panel.advanced-panel.closing:focus-within, .sticky-filters.advanced-open #advanced-panel.open:focus-within, .sticky-filters.advanced-open #advanced-panel.closing:focus-within, #sticky-filters #advanced-panel.advanced-panel.open:focus-within, #sticky-filters #advanced-panel.advanced-panel.closing:focus-within {
  margin-top: var(--gp-vgap, 12px) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: none !important;
  will-change: auto !important;
}

#sticky-filters #advanced-panel .advanced-search, #sticky-filters #advanced-panel.open .advanced-search, #sticky-filters #advanced-panel.open:focus-within .advanced-search {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

#advanced-search-input {
  scroll-margin-top: 0 !important;
  scroll-margin-bottom: 0 !important;
}

/* Desktop/tablet grid: stretch cards to fill the full row width.
   The previous rule capped card width and left empty space on the right on wide screens. */
@media (min-width: 700px) {
  #gift-grid.gift-grid, .gift-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }
  #gift-grid.gift-grid > .gift-card, .gift-grid > .gift-card {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

html.tg-webapp-ios .modal-overlay.open, html.tg-webapp-ios .modal-overlay.closing {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0,0,0,0.55) !important;
}

html.tg-webapp-ios .modal-overlay {
  background: rgba(0,0,0,0.55) !important;
}

#error-state {
  display: none !important;
}

html.public-mode main {
  padding-top: calc(env(safe-area-inset-top,0px) + 8px) !important;
}

html.public-mode .top-promo-banner--photo {
  margin-top: 6px !important;
}

/*
  Advanced search panel ("Поиск по #номеру...")
  ------------------------------------------------
  The previous implementation mixed multiple height/transform animations and
  inline JS height calculations. On some devices it produced a "last-moment"
  redraw on open and an overshoot on close (touching the buttons above).

  We intentionally make the open/close behaviour instant and stable:
  - no height/margin animations
  - fixed open height equal to the input height
  - no transforms/opacity tricks
*/
#advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel {
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transition: none !important;
  will-change: auto !important;
}

#advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.open {
  height: 46px !important;
  max-height: 46px !important;
  margin-top: var(--sticky-stack-gap,10px) !important;
  margin-bottom: var(--sticky-stack-gap,10px) !important;
  pointer-events: auto !important;
}

#advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel.closing {
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel .advanced-search,
#sticky-filters #advanced-panel.advanced-panel .advanced-search,
.sticky-filters #advanced-panel.advanced-panel .advanced-search {
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
  pointer-events: auto !important;
}

/* --------------------------------------------------------------------------
 * Restored filter modals UI (ported from the legacy giftpay_fixed build)
 * - Fixes oversized / disproportionate icons & checkmarks in filter menus
 *   (Коллекция / Модель / Фон)
 * -------------------------------------------------------------------------- */

.item-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep the same readable spacing as in the reference GiftPay build */
  margin-right: 12px;
}

/* Collections / Models: show original art as-is (no tiny circle/square crop) */
.item-icon-default {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

/* Image icons */
.item-icon-default img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Fallback placeholder (no image_url) */
.item-icon-default > div {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

/* Backdrops keep a circle swatch */
.item-icon-backdrop {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Selection (checkbox) visuals */
.modal-item.selected .modal-check {
  border-color: var(--tg-accent);
  background: var(--tg-accent);
  box-shadow: none;
}

.modal-item.selected .modal-check-icon {
  opacity: 1;
}

/* Filter modals use the scale-in checkmark animation */
#collections-modal .modal-item.selected .modal-check,
#models-modal .modal-item.selected .modal-check,
#backdrops-modal .modal-item.selected .modal-check {
  background: var(--tg-accent) !important;
  border-color: var(--tg-accent) !important;
}

#collections-modal .modal-item.selected .modal-check-icon,
#models-modal .modal-item.selected .modal-check-icon,
#backdrops-modal .modal-item.selected .modal-check-icon {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Backdrops: circular icon */
#backdrops-modal .item-icon-backdrop {
  border-radius: 999px !important;
}

#backdrops-modal .item-icon-backdrop img,
#backdrops-modal .item-icon-backdrop > div {
  border-radius: 999px !important;
}

/* Backdrops list has slightly larger icon, as in the legacy build */
#backdrops-modal .item-icon {
  width: 52px !important;
  height: 52px !important;
}

/* --------------------------------------------------------------------------
 * Advanced search: restore smooth, non-janky open/close animation
 * -------------------------------------------------------------------------- */

#sticky-filters #advanced-panel .advanced-search,
.sticky-filters #advanced-panel .advanced-search {
  transform: translate3d(0,-10px,0) !important;
  opacity: 0 !important;
  transition:
    transform var(--ui-menu-ms,220ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)),
    opacity var(--ui-menu-ms,220ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
  will-change: transform, opacity !important;
}

#sticky-filters #advanced-panel.open .advanced-search,
.sticky-filters #advanced-panel.open .advanced-search {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
}

#sticky-filters #advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.closing .advanced-search {
  transform: translate3d(0,-10px,0) !important;
  opacity: 0 !important;
  transition:
    transform 160ms var(--ease-out,cubic-bezier(0.16,1,0.3,1)),
    opacity 160ms var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
}

#sticky-filters #advanced-panel[aria-hidden="true"]:not(.closing) .advanced-search,
.sticky-filters #advanced-panel[aria-hidden="true"]:not(.closing) .advanced-search {
  transform: translate3d(0,-10px,0) !important;
  opacity: 0 !important;
}


/* -------------------------------------------------------------------------- */
/* GiftPay parity fixes (v3)                                                   */
/* -------------------------------------------------------------------------- */

/* Modal lists (collections / models / backdrops) should use SF Pro Text */
#collections-modal .modal-item,
#models-modal .modal-item,
#backdrops-modal .modal-item,
#collections-modal .item-name,
#models-modal .item-name,
#backdrops-modal .item-name,
#collections-modal .price-value-modal,
#models-modal .price-value-modal,
#backdrops-modal .price-value-modal,
#collections-modal .price-label-modal,
#models-modal .price-label-modal,
#backdrops-modal .price-label-modal {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Ensure collections/models icons are not forced into tiny circles */
#collections-modal .item-icon.item-icon-default,
#models-modal .item-icon.item-icon-default {
  width: 42px !important;
  height: 42px !important;
}

#collections-modal .item-icon.item-icon-default img,
#models-modal .item-icon.item-icon-default img {
  object-fit: contain !important;
}

/* Backdrops keep a larger circular swatch */
#backdrops-modal .item-icon.item-icon-backdrop {
  width: 52px !important;
  height: 52px !important;
}

/* Readable icon ↔ text spacing inside modal lists */
#collections-modal .modal-item .item-icon,
#models-modal .modal-item .item-icon,
#backdrops-modal .modal-item .item-icon {
  margin-right: 12px !important;
}

/* =====================================================================
   GP FIX v8 – Sticky filters + advanced search: smooth, no layout jitter

   Исправляет:
   1) Дёргание карточек на “пиксели” при открытии/закрытии поиска.
   2) “Нижняя губа” (лишний отступ под фильтрами), которая лаганно растёт
      при открытии любого меню/модалки.
   3) Прилипание карточек к “Очистить фильтр” и резкие прыжки вниз/вверх.
   4) На телефонах (tg-phone) и при фокусе инпута не отключаем анимации.

   Ключевая идея:
   - Фиксируем отступы sticky-блока в любых состояниях (включая overlay-open).
   - Пространство между кнопками фильтров и поиском переносим ВНУТРЬ панели
     через .advanced-panel-gap, чтобы анимировалось ТОЛЬКО height (без margin/gap).

   Важно:
   - JS выставляет CSS-переменную --sticky-bottom-gap (в v8 она всегда >= --ui-stack-gap),
     поэтому карточки больше не “прилипают” к нижним элементам панели.
===================================================================== */

:root {
  --gp-adv-ms: 240ms;
  --gp-adv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sticky filters: держим padding стабильным во всех режимах (в т.ч. overlay-open) */
#sticky-filters,
.sticky-filters,
html.overlay-open #sticky-filters,
body.overlay-open #sticky-filters,
html.overlay-open .sticky-filters,
body.overlay-open .sticky-filters {
  /* Не даём legacy-правкам раздувать отступы и “нижнюю губу” */
  --gp-vgap: var(--ui-stack-gap, 10px) !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;

  padding-top: 6px !important;
  padding-bottom: var(--sticky-bottom-gap, var(--ui-stack-gap, 10px)) !important;

  transition: none !important;
  will-change: auto !important;
}

/* .advanced-open НЕ должен менять раскладку (flex-gap/padding/margins) */
#sticky-filters.advanced-open,
.sticky-filters.advanced-open,
html.overlay-open #sticky-filters.advanced-open,
body.overlay-open #sticky-filters.advanced-open,
html.overlay-open .sticky-filters.advanced-open,
body.overlay-open .sticky-filters.advanced-open {
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;

  padding-top: 6px !important;
  padding-bottom: var(--sticky-bottom-gap, var(--ui-stack-gap, 10px)) !important;
}

/* Reset button: один стабильный отступ сверху; снизу отступ даёт sticky padding */
#inline-reset-btn,
#sticky-filters #inline-reset-btn,
.sticky-filters #inline-reset-btn {
  margin-top: 0 !important;
  margin-bottom: 0 !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(--ui-stack-gap, 10px) !important;
  margin-bottom: 0 !important;
}

/* Advanced panel: анимируем ТОЛЬКО height. Никаких transform/margin-top/gap. */
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel {
  display: block !important;

  height: 0px !important;
  margin: 0 !important;
  padding: 0 !important;

  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;

  overflow: hidden !important;
  box-sizing: border-box !important;

  transition: height var(--gp-adv-ms) var(--gp-adv-ease) !important;
  will-change: height !important;

  /* Видимая во время анимации; полностью скрывается только через aria-hidden */
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Полностью скрытая (закрытая) панель: без хитбокса */
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing),
.sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing) {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* На всякий случай убираем любые layout-offset в open/closing/focus-within */
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel.open:focus-within,
#sticky-filters #advanced-panel.advanced-panel.closing:focus-within,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel.open:focus-within,
.sticky-filters #advanced-panel.advanced-panel.closing:focus-within {
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Внутренний gap: входит в scrollHeight → плавная высота без прыжков */
#sticky-filters #advanced-panel .advanced-panel-gap,
.sticky-filters #advanced-panel .advanced-panel-gap {
  height: var(--ui-stack-gap, 10px) !important;
  flex: 0 0 auto !important;
}

/* Поисковая строка: фиксированная высота + мягкая прозрачность (без transform) */
#sticky-filters #advanced-panel .advanced-search,
.sticky-filters #advanced-panel .advanced-search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  opacity: 0 !important;
  transition: opacity var(--gp-adv-ms) var(--gp-adv-ease) !important;

  pointer-events: none !important;
}

#sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open .advanced-search {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.closing .advanced-search {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile/focus: legacy блоки иногда убивают transition – возвращаем */
html.tg-phone #sticky-filters #advanced-panel.advanced-panel,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel,
html.adv-input-focused #sticky-filters #advanced-panel.advanced-panel,
html.adv-input-focused .sticky-filters #advanced-panel.advanced-panel {
  transition: height var(--gp-adv-ms) var(--gp-adv-ease) !important;
}

html.tg-phone #sticky-filters #advanced-panel .advanced-search,
html.tg-phone .sticky-filters #advanced-panel .advanced-search,
html.adv-input-focused #sticky-filters #advanced-panel .advanced-search,
html.adv-input-focused .sticky-filters #advanced-panel .advanced-search {
  transition: opacity var(--gp-adv-ms) var(--gp-adv-ease) !important;
}



/* =====================================================================
   GP FIX v9 – Animations & spacing polish
   - Fix 1px crop of advanced search (handled by app.js ceil), plus CSS guards
   - Ensure equal vertical spacing (filters → search → reset)
   - Restore smooth backdrop fades for overlays (some legacy blocks forced them off)
===================================================================== */

/* Filters bar: no extra margin (spacing is controlled by advanced-panel-gap + reset button) */
#sticky-filters .filters-bar,
.sticky-filters .filters-bar {
  margin-bottom: 0 !important;
}

/* Advanced search: never translate (legacy rules moved it by 8px and could clip) */
#sticky-filters #advanced-panel .advanced-search,
.sticky-filters #advanced-panel .advanced-search {
  transform: none !important;
  will-change: opacity;
}

/* Avoid paint containment clipping focus ring / border radius during height animation */
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel {
  contain: none !important;
}

/* Ensure the internal gap always participates in layout */
#sticky-filters #advanced-panel .advanced-panel-gap,
.sticky-filters #advanced-panel .advanced-panel-gap {
  display: block !important;
}

/* ---------------------------------------------------------------------
   Backdrops: smooth fade (legacy patch forced opacity=1 and transition=none)
--------------------------------------------------------------------- */
.modal-overlay::before,
.gift-sheet-overlay::before,
.result-sheet-overlay::before,
.pay-sheet-overlay::before,
.tonkeeper-overlay::before,
#payment-success-overlay::before,
#payment-fail-overlay::before,
#purchase-cancel-overlay::before,
#price-change-overlay::before {
  /* Keep the existing backdrop color variable, just restore fade */
  transition: opacity var(--ui-backdrop-ms, 180ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) !important;
  opacity: 0 !important;
}

.modal-overlay.open::before,
.gift-sheet-overlay.visible::before,
.pay-sheet-overlay.visible::before,
.tonkeeper-overlay.visible::before,
#payment-success-overlay.visible::before,
#payment-fail-overlay.visible::before,
#purchase-cancel-overlay.visible::before,
#price-change-overlay.visible::before {
  opacity: 1 !important;
}

.modal-overlay.closing::before,
.gift-sheet-overlay.closing::before,
.pay-sheet-overlay.closing::before,
.tonkeeper-overlay.closing::before,
#payment-success-overlay.closing::before,
#payment-fail-overlay.closing::before,
#purchase-cancel-overlay.closing::before,
#price-change-overlay.closing::before {
  opacity: 0 !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #sticky-filters #advanced-panel.advanced-panel,
  .sticky-filters #advanced-panel.advanced-panel {
    transition: none !important;
  }

  #sticky-filters #advanced-panel .advanced-search,
  .sticky-filters #advanced-panel .advanced-search {
    transition: none !important;
  }

  .modal-overlay::before,
  .gift-sheet-overlay::before,
  .result-sheet-overlay::before,
  .pay-sheet-overlay::before,
  .tonkeeper-overlay::before,
  #payment-success-overlay::before,
  #payment-fail-overlay::before,
  #purchase-cancel-overlay::before,
  #price-change-overlay::before {
    transition: none !important;
  }
}


/* =====================================================================
   GP FIX v10 – Advanced panel stability (no jumps) + anti-clipping
   - Keep search border fully visible (overflow visible when settled)
   - Keep layout stable during closing (avoid :has/.open flicker)
   - Restore smooth fade on filter modals when closing
===================================================================== */

/* When panel is fully open and settled, allow overflow so rounded border isn't clipped */
#sticky-filters #advanced-panel.advanced-panel.open.adv-settled,
.sticky-filters #advanced-panel.advanced-panel.open.adv-settled {
  overflow: visible !important;
}

/* Raise search bar above any sticky pseudo-elements */
#sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search {
  position: relative !important;
  z-index: 2 !important;
}

/* Keep box-model stable even if both classes are present */
#sticky-filters #advanced-panel.advanced-panel.open.closing,
.sticky-filters #advanced-panel.advanced-panel.open.closing {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset button: force stable margin regardless of adjacency selectors */
#sticky-filters #advanced-panel + #inline-reset-btn.inline-reset-btn--visible,
#sticky-filters #advanced-panel.open + #inline-reset-btn.inline-reset-btn--visible,
#sticky-filters #advanced-panel.closing + #inline-reset-btn.inline-reset-btn--visible,
#sticky-filters #advanced-panel.open.closing + #inline-reset-btn.inline-reset-btn--visible,
.sticky-filters #advanced-panel + #inline-reset-btn.inline-reset-btn--visible,
.sticky-filters #advanced-panel.open + #inline-reset-btn.inline-reset-btn--visible,
.sticky-filters #advanced-panel.closing + #inline-reset-btn.inline-reset-btn--visible,
.sticky-filters #advanced-panel.open.closing + #inline-reset-btn.inline-reset-btn--visible {
  margin-top: var(--ui-stack-gap, 10px) !important;
  margin-bottom: 0 !important;
}

/* Backdrop fade: do not kill transition on close (legacy had transition:none) */
#collections-modal.modal-overlay.closing::before,
#models-modal.modal-overlay.closing::before,
#backdrops-modal.modal-overlay.closing::before {
  transition: opacity var(--ui-backdrop-ms, 180ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}


/* =====================================================================
   GP FIX v11 – Advanced search field: ровный спавн + плавная анимация
   Исправляет:
   - Рваное появление/исчезание поля поиска по номеру
   - “Дорисовку” рамки/линии в конце анимации (из‑за клипа во время height-анимации)
   Важно: логика задержки схлопывания высоты реализована в app.js (setAdvancedPanelOpen).
===================================================================== */

:root {
  --gp-adv-h-ms: 240ms;
  --gp-adv-fade-ms: 260ms;
  --gp-adv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Height animation (panel) */
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel {
  transition: height var(--gp-adv-h-ms) var(--gp-adv-ease) !important;
}

/* Search field (content) – fully hidden until panel is settled to avoid border clipping */
#sticky-filters #advanced-panel .advanced-search,
.sticky-filters #advanced-panel .advanced-search {
  width: 100% !important;
  flex: 0 0 auto !important;

  display: flex !important;
  align-items: center !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: var(--tg-bg) !important;
  border: 1px solid var(--tg-border-subtle, rgba(255, 255, 255, 0.10)) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;

  transition:
    opacity var(--gp-adv-fade-ms) var(--gp-adv-ease),
    transform var(--gp-adv-fade-ms) var(--gp-adv-ease) !important;

  will-change: opacity, transform !important;
  pointer-events: none !important;
}

/* Only show when the panel is fully open and settled (no clipping, ровно) */
#sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* During close / hidden states keep it hidden */
#sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
.sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search {
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;
  pointer-events: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gp-adv-h-ms: 0ms;
    --gp-adv-fade-ms: 0ms;
  }
}


/* =====================================================================
   GP FIX v12 – Advanced search: корректный спавн без клипа + чистое закрытие

   Что исправляет:
   1) Поле «Поиск по #номеру…» не должно появляться «криво»/наполовину обрезанным.
      Причина была в том, что старые правила показывали .advanced-search сразу при .open,
      пока высота панели ещё анимируется (overflow:hidden) — из‑за этого рамка клипалась.
      Теперь поле принудительно скрыто до появления .adv-settled.

   2) Убираем ощущение «двойного» резкого исчезания:
      - JS снова схлопывает высоту сразу (без дополнительного таймера),
        а само поле плавно уходит по opacity/transform.
      - Не трогаем layout-классы раньше времени.

   Важно: selectors специально сделаны максимально конкретными, чтобы перебить старые
   правила вида “.open .advanced-search { opacity: 1 }”.
===================================================================== */

:root {
  --gp-adv-in-ms: 260ms;
  --gp-adv-out-ms: 180ms;
  --gp-adv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Height transition – явно, чтобы на tg-phone её не «съедали» legacy блоки */
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel {
  transition: height var(--gp-adv-h-ms, 240ms) var(--gp-adv-ease) !important;
}

/* Search field motion – плавно и одинаково на всех устройствах */
#sticky-filters #advanced-panel .advanced-search,
.sticky-filters #advanced-panel .advanced-search {
  transition-property: opacity, transform !important;
  transition-timing-function: var(--gp-adv-ease) !important;
  transition-duration: var(--gp-adv-in-ms), var(--gp-adv-in-ms) !important;
  transition-delay: 0ms, 0ms !important;
}

/* КЛЮЧ: даже если где-то выше есть “.open .advanced-search { opacity: 1 }”,
   мы запрещаем показывать поле пока панель НЕ settled (идёт анимация height). */
#sticky-filters #advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search {
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;
  pointer-events: none !important;
}

/* Показ только когда панель полностью открыта и зафиксировала высоту */
#sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

/* Закрытие: чуть быстрее (поле успевает «раствориться» пока панель схлопывается) */
#sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.closing .advanced-search {
  transition-duration: var(--gp-adv-out-ms), var(--gp-adv-out-ms) !important;
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;
  pointer-events: none !important;
}

/* На телефонах и при фокусе инпута – не даём отключать transition */
html.tg-phone #sticky-filters #advanced-panel.advanced-panel,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel,
html.adv-input-focused #sticky-filters #advanced-panel.advanced-panel,
html.adv-input-focused .sticky-filters #advanced-panel.advanced-panel {
  transition: height var(--gp-adv-h-ms, 240ms) var(--gp-adv-ease) !important;
}

html.tg-phone #sticky-filters #advanced-panel .advanced-search,
html.tg-phone .sticky-filters #advanced-panel .advanced-search,
html.adv-input-focused #sticky-filters #advanced-panel .advanced-search,
html.adv-input-focused .sticky-filters #advanced-panel .advanced-search {
  transition-property: opacity, transform !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gp-adv-h-ms: 0ms;
    --gp-adv-in-ms: 0ms;
    --gp-adv-out-ms: 0ms;
  }
}

/* =====================================================================
   GP FIX v13 – Advanced search: корректная вертикальная посадка

   Симптом:
   «Поиск по #номеру…» появляется ниже, чем должен.

   Причина:
   У фильтрового ряда (.filters-bar) уже есть margin-bottom (10px), но панель
   дополнительно добавляла отступ сверху (advanced-panel-gap + legacy padding-top).
   В сумме получался «двойной» зазор, из-за которого поле визуально «сползало» вниз.

   Решение:
   - Убираем legacy padding-top у панели при open.
   - Обнуляем advanced-panel-gap внутри sticky панели (оставляем расстояние
     ровно из margin-bottom у .filters-bar).
===================================================================== */

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

#sticky-filters #advanced-panel .advanced-panel-gap,
.sticky-filters #advanced-panel .advanced-panel-gap {
  height: 0 !important;
}

/* =====================================================================
   GP FIX v14 – Advanced search animations: smoother + less "pop"

   Задача:
   - Плавнее появление/исчезание поля "Поиск по #номеру…".
   - Не ждать полного окончания height-анимации (adv-settled), чтобы не было
     ощущения "пустота → резко появилось".
   - При этом избежать клипа рамки: делаем небольшой delay на fade-in, чтобы
     поле начинало проявляться, когда высота панели уже почти раскрыта.
===================================================================== */

:root {
  --gp-adv-h-ms: 320ms;
  --gp-adv-in-ms: 280ms;
  --gp-adv-out-ms: 220ms;
  --gp-adv-in-delay: 90ms;
  --gp-adv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Height animation */
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel {
  transition: height var(--gp-adv-h-ms) var(--gp-adv-ease) !important;
}

/* Search field motion */
#sticky-filters #advanced-panel .advanced-search,
.sticky-filters #advanced-panel .advanced-search {
  opacity: 0 !important;
  transform: translate3d(0, 4px, 0) !important;

  transition-property: opacity, transform !important;
  transition-duration: var(--gp-adv-in-ms), var(--gp-adv-in-ms) !important;
  transition-timing-function: var(--gp-adv-ease), var(--gp-adv-ease) !important;
  transition-delay: var(--gp-adv-in-delay), var(--gp-adv-in-delay) !important;

  will-change: opacity, transform !important;
  pointer-events: none !important;
}

/* Show as soon as .open появляется (с небольшим delay, чтобы не клипалось) */
#sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open .advanced-search {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

/* Override legacy guard: раньше поле показывалось только при .adv-settled */
#sticky-filters #advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

/* Close: без задержки, чуть быстрее */
#sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
.sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search {
  opacity: 0 !important;
  transform: translate3d(0, 4px, 0) !important;
  transition-duration: var(--gp-adv-out-ms), var(--gp-adv-out-ms) !important;
  transition-delay: 0ms, 0ms !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gp-adv-h-ms: 0ms;
    --gp-adv-in-ms: 0ms;
    --gp-adv-out-ms: 0ms;
    --gp-adv-in-delay: 0ms;
  }
}
/* =====================================================================
   GP FIX v16 – Advanced search ("Поиск по #номеру"): truly smooth open/close

   Problem observed:
   - A later patch hard-capped the panel with max-height: 46px / 0px and
     disabled transitions. This kills the close animation (it snaps shut) and
     creates the ugly "border being drawn" effect on open (content gets clipped).

   Fix:
   - Remove any max-height caps for ALL states (base/open/closing).
   - Let JS drive height with inline `height: ... !important` (already present).
   - Keep a single height transition on the panel.
   - Fade/slide the input in AFTER the panel has mostly opened (small delay),
     and fade it out immediately on close.
===================================================================== */

:root{
  /* Override previous tuning */
  --gp-adv-h-ms: 300ms;
  --gp-adv-in-ms: 240ms;
  --gp-adv-out-ms: 220ms;
  /* Start showing the input after panel height is ~60–70% opened */
  --gp-adv-in-delay: 160ms;
  --gp-adv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1) Panel: remove max-height clamps & ensure height transition is enabled */
#advanced-panel.advanced-panel,
#advanced-panel.advanced-panel.open,
#advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing{
  max-height: none !important;
  transition: height var(--gp-adv-h-ms) var(--gp-adv-ease) !important;
  will-change: height !important;
}

/* Keep spacing stable while opening/closing (optional but prevents micro-jumps) */
#advanced-panel.advanced-panel.open,
#advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing{
  margin-top: var(--ui-stack-gap, 10px) !important;
  margin-bottom: 0 !important;
}

/* Fully hidden state */
#advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing),
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing),
.sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing){
  height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2) Input row animation: specificity must beat the "no-animation" patch */
#advanced-panel.advanced-panel .advanced-search,
#sticky-filters #advanced-panel.advanced-panel .advanced-search,
.sticky-filters #advanced-panel.advanced-panel .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 10px, 0) !important;

  transition:
    opacity var(--gp-adv-in-ms) var(--gp-adv-ease),
    transform var(--gp-adv-in-ms) var(--gp-adv-ease) !important;
  transition-delay: var(--gp-adv-in-delay) !important;

  will-change: opacity, transform !important;
  pointer-events: none !important;
}

/* Visible state while open */
#advanced-panel.advanced-panel.open .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open .advanced-search{
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

/* Close: remove delay so it starts fading immediately */
#advanced-panel.advanced-panel.closing .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.closing .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 10px, 0) !important;
  transition-duration: var(--gp-adv-out-ms) !important;
  transition-delay: 0ms !important;
  pointer-events: none !important;
}

/* Safety: when already hidden, keep it hidden */
#advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
.sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 10px, 0) !important;
  transition-delay: 0ms !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --gp-adv-h-ms: 0ms;
    --gp-adv-in-ms: 0ms;
    --gp-adv-out-ms: 0ms;
    --gp-adv-in-delay: 0ms;
  }
}

/* =====================================================================
   GP FIX v20 – Smooth advanced search panel (no overlap, no late "last row")

   What this fixes (from your screenshots / repro):
   1) Close: the search row visually overlaps the filter buttons and then snaps away.
      Cause: legacy rules move the row UP (negative translateY) + margins/padding
      are applied outside the collapsing container, so the child can sit on top
      for a frame.
   2) Open: the bottom spacing/row appears late and pushes the cards.
      Cause: margins (or padding outside measured height) and the "settle" step
      rounding height by getBoundingClientRect/DPR caused a final 1px–Npx jump.

   Strategy:
   - Animate ONLY height on #advanced-panel.
   - Keep spacing INSIDE the panel (padding), so scrollHeight includes it.
   - Fade/slide the row DOWN (positive translate) so it never rides over buttons.
   - Use JS settle height based on scrollHeight (not getBoundingClientRect).
===================================================================== */

:root{
  --gp-adv-h-ms: 260ms;
  --gp-adv-in-ms: 180ms;
  --gp-adv-out-ms: 150ms;
  --gp-adv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Panel container (base/open/closing) – height-only animation */
#advanced-panel.advanced-panel,
#advanced-panel.advanced-panel.open,
#advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing{
  display: block !important;
  box-sizing: border-box !important;

  /* IMPORTANT: spacing is inside the height we animate */
  padding-top: 6px !important;
  padding-bottom: var(--ui-stack-gap, 10px) !important;
  margin: 0 !important;

  overflow: hidden !important;

  transition-property: height !important;
  transition-duration: var(--gp-adv-h-ms) !important;
  transition-timing-function: var(--gp-adv-ease) !important;
  transition-delay: 0ms !important;

  transform: none !important;
  will-change: height !important;
}

/* Closed state: no padding hitbox */
#advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing),
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing),
.sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing){
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Kill legacy external spacing that can finish late */
.sticky-filters .advanced-panel.open,
#sticky-filters .advanced-panel.open,
.sticky-filters #advanced-panel.open,
#sticky-filters #advanced-panel.open,
#advanced-panel.open,
#advanced-panel.advanced-panel.open{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Search row animation – move DOWN (never over the buttons) */
#advanced-panel.advanced-panel .advanced-search,
#sticky-filters #advanced-panel.advanced-panel .advanced-search,
.sticky-filters #advanced-panel.advanced-panel .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  transition:
    opacity var(--gp-adv-in-ms) var(--gp-adv-ease),
    transform var(--gp-adv-in-ms) var(--gp-adv-ease) !important;
  transition-delay: 0ms !important;
  will-change: opacity, transform !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel.open .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open .advanced-search{
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

#advanced-panel.advanced-panel.closing .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
#advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  transition-duration: var(--gp-adv-out-ms), var(--gp-adv-out-ms) !important;
  transition-delay: 0ms !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --gp-adv-h-ms: 0ms;
    --gp-adv-in-ms: 0ms;
    --gp-adv-out-ms: 0ms;
  }
}


/* =====================================================================
   GP FIX v20 – Advanced panel animation (search by number)

   Problems observed:
   1) Close: input visually overlaps filter buttons, then disappears abruptly.
   2) Open: the bottom "last line" (gap) appears late and pushes the product grid.

   Root causes:
   - Legacy CSS animates/changes margins/paddings and even uses translateY(-)
     on the input, so during height collapse it can slide over the buttons.
   - JS "settle" previously used getBoundingClientRect + DPR rounding, causing
     a ~1px snap at the end of the height transition.

   Fix summary:
   - Panel animates ONLY height.
   - No external margins during open/close (spacing is internal padding).
   - Input row fades/slides in/out immediately (no delay; no negative translate).
   - Hidden state removes padding and disables pointer-events.
===================================================================== */

:root{
  --gp-adv-h-ms: 260ms;
  --gp-adv-in-ms: 180ms;
  --gp-adv-out-ms: 150ms;
  --gp-adv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Panel: force height-only transition (override any "transition:none" patches) */
html.tg-phone #sticky-filters #advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel,
html.tg-phone #advanced-panel.advanced-panel,
#advanced-panel.advanced-panel{
  /* Kill the old margin-based spacing to prevent late pushes */
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  /* Closed padding must be 0 so it cannot overlap the buttons */
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
  will-change: height !important;

  transition-property: height !important;
  transition-duration: var(--gp-adv-h-ms) !important;
  transition-timing-function: var(--gp-adv-ease) !important;
  transition-delay: 0ms !important;

  transform: none !important;
  animation: none !important;
}

/* Open/closing: internal spacing only (included in scrollHeight, no late "row") */
html.tg-phone #sticky-filters #advanced-panel.advanced-panel.open,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
html.tg-phone #advanced-panel.advanced-panel.open,
html.tg-phone #advanced-panel.advanced-panel.closing,
#advanced-panel.advanced-panel.open,
#advanced-panel.advanced-panel.closing{
  padding-top: 6px !important;
  padding-bottom: var(--ui-stack-gap, 10px) !important;
}

/* Fully hidden: remove hitbox and any residual padding */
html.tg-phone #sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing),
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing),
html.tg-phone #advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing),
#advanced-panel.advanced-panel[aria-hidden="true"]:not(.closing){
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Remove legacy spacer element – spacing is handled by padding */
#advanced-panel.advanced-panel .advanced-panel-gap,
#sticky-filters #advanced-panel.advanced-panel .advanced-panel-gap,
.sticky-filters #advanced-panel.advanced-panel .advanced-panel-gap{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
}

/* Input row: immediate fade/slide (NO negative translate, NO delay) */
#advanced-panel.advanced-panel .advanced-search,
#sticky-filters #advanced-panel.advanced-panel .advanced-search,
.sticky-filters #advanced-panel.advanced-panel .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  transition:
    opacity var(--gp-adv-in-ms) var(--gp-adv-ease),
    transform var(--gp-adv-in-ms) var(--gp-adv-ease) !important;
  transition-delay: 0ms !important;
  will-change: opacity, transform !important;
  pointer-events: none !important;
}

#advanced-panel.advanced-panel.open .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open .advanced-search{
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

#advanced-panel.advanced-panel.closing .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
#advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  transition-duration: var(--gp-adv-out-ms), var(--gp-adv-out-ms) !important;
  transition-delay: 0ms !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --gp-adv-h-ms: 0ms;
    --gp-adv-in-ms: 0ms;
    --gp-adv-out-ms: 0ms;
  }
}


/* =====================================================================
   GP FIX v21 – Advanced search: smooth open/close WITHOUT margin jumps
   ---------------------------------------------------------------------
   Что исправляет (оба кейса из задачи):
   1) При закрытии панель больше не "подпрыгивает" вверх (и не наезжает на кнопки),
      потому что мы убираем любые внешние margin-top/margin-bottom хаком.
      Вся "воздушность" теперь живёт ВНУТРИ панели (padding), и схлопывается вместе
      с height-анимацией.

   2) При открытии поле больше не "дорисовывается поздно" (нет ожидания .adv-settled),
      и нет резкого дерганья карточек из-за доп.ступеньки в layout.

   Дополнительно:
   - Во время закрытия инпут не должен внезапно менять вид из-за :disabled –
     это теперь решено JS-патчем (см. app.js), а CSS держит pointer-events.
   - Кнопка "Очистить фильтр" не "щёлкает" display:none/block – вместо этого
     плавно анимируем max-height/opacity/transform.
===================================================================== */

:root{
  /* Unified tuning (keeps JS timers in sync via computed transitionDuration) */
  --gp-adv-h-ms: 260ms;
  --gp-adv-in-ms: 180ms;
  --gp-adv-out-ms: 160ms;
  --gp-adv-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Internal gap between filter row and the search input */
  --gp-adv-gap: var(--ui-stack-gap, 10px);
}

/* -------------------------
   Advanced panel (container)
-------------------------- */

/* Base + states: strictly height-transition, NO external margins */
#advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel{
  box-sizing: border-box !important;
  max-height: none !important;

  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  overflow: hidden !important;
  will-change: height !important;

  transition-property: height !important;
  transition-duration: var(--gp-adv-h-ms) !important;
  transition-timing-function: var(--gp-adv-ease) !important;
}

/* Some legacy blocks used #advanced-panel.open:not(.closing){ margin-top: ... }.
   We kill those explicitly with the same/higher specificity. */
#sticky-filters #advanced-panel.open:not(.closing),
#sticky-filters #advanced-panel.advanced-panel.open:not(.closing),
.sticky-filters #advanced-panel.open:not(.closing),
.sticky-filters #advanced-panel.advanced-panel.open:not(.closing),
#advanced-panel.open:not(.closing),
#advanced-panel.advanced-panel.open:not(.closing){
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Visible states: spacing lives INSIDE the panel */
#advanced-panel.advanced-panel.open,
#advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing,
#advanced-panel.open,
#advanced-panel.closing,
#sticky-filters #advanced-panel.open,
#sticky-filters #advanced-panel.closing,
.sticky-filters #advanced-panel.open,
.sticky-filters #advanced-panel.closing{
  padding-top: var(--gp-adv-gap) !important;
  padding-bottom: 0 !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* -------------------------
   Advanced search row (input)
-------------------------- */

/* Default: hidden (but in flow) */
#advanced-panel.advanced-panel .advanced-search,
#sticky-filters #advanced-panel.advanced-panel .advanced-search,
.sticky-filters #advanced-panel.advanced-panel .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;

  transition-property: opacity, transform !important;
  transition-duration: var(--gp-adv-in-ms), var(--gp-adv-in-ms) !important;
  transition-timing-function: var(--gp-adv-ease), var(--gp-adv-ease) !important;
  transition-delay: 0ms, 0ms !important;

  will-change: opacity, transform !important;
  pointer-events: none !important;
}

/* Show immediately when .open appears (NO waiting for .adv-settled) */
#advanced-panel.advanced-panel.open .advanced-search,
#advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search,
#advanced-panel.advanced-panel.open.adv-settled .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search{
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

/* Close / hidden: faster fade-out to avoid "double snap" */
#advanced-panel.advanced-panel.closing .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
#advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
#sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
.sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  transition-duration: var(--gp-adv-out-ms), var(--gp-adv-out-ms) !important;
  transition-delay: 0ms, 0ms !important;
  pointer-events: none !important;
}

/* -------------------------
   Inline reset button ("Очистить фильтр")
-------------------------- */

/* Animate instead of display:none snapping.
   JS already toggles class .inline-reset-btn--visible. */
#inline-reset-btn.inline-reset-btn,
#sticky-filters #inline-reset-btn.inline-reset-btn,
.sticky-filters #inline-reset-btn.inline-reset-btn{
  display: inline-flex !important; /* overrides base display:none */

  overflow: hidden !important;
  max-height: 0 !important;

  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  transition:
    max-height var(--gp-adv-h-ms) var(--gp-adv-ease),
    opacity var(--gp-adv-out-ms) var(--gp-adv-ease),
    transform var(--gp-adv-h-ms) var(--gp-adv-ease),
    margin-top var(--gp-adv-h-ms) var(--gp-adv-ease) !important;

  pointer-events: none !important;
  will-change: max-height, opacity, transform !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{
  max-height: 44px !important; /* a bit > 30px (button height) */
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;

  margin-top: var(--ui-stack-gap, 10px) !important;
  margin-bottom: 0 !important;

  pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --gp-adv-h-ms: 0ms;
    --gp-adv-in-ms: 0ms;
    --gp-adv-out-ms: 0ms;
  }
}


/* =====================================================================
   GP FIX v21.1 – Remove non-animatable "gap jump" in #sticky-filters.advanced-open
   Some legacy patches add `gap: 10px` to the sticky container. `gap` can't be
   animated and causes the "last line appears late / дергает карточки" effect.
   We keep gap at 0 and rely on the panel's own height + internal padding instead.
===================================================================== */

#sticky-filters.advanced-open,
.sticky-filters.advanced-open{
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* Legacy advanced-open rules also zero out padding on focus-within,
   which creates a micro-jump while the input is focused. Keep our padding. */
#sticky-filters.advanced-open #advanced-panel.open:focus-within,
#sticky-filters.advanced-open #advanced-panel.advanced-panel.open:focus-within,
#sticky-filters.advanced-open #advanced-panel.closing:focus-within,
#sticky-filters.advanced-open #advanced-panel.advanced-panel.closing:focus-within,
.sticky-filters.advanced-open #advanced-panel.open:focus-within,
.sticky-filters.advanced-open #advanced-panel.advanced-panel.open:focus-within,
.sticky-filters.advanced-open #advanced-panel.closing:focus-within,
.sticky-filters.advanced-open #advanced-panel.advanced-panel.closing:focus-within{
  padding-top: var(--gp-adv-gap) !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}


/* =====================================================================
   GP FIX v21.2 – tg-phone overrides
   A legacy block полностью отключал transitions на html.tg-phone, из-за чего
   закрытие/открытие выглядело резким. Возвращаем анимации с той же/бОльшей
   специфичностью.
===================================================================== */

html.tg-phone #advanced-panel.advanced-panel,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel{
  transition-property: height !important;
  transition-duration: var(--gp-adv-h-ms) !important;
  transition-timing-function: var(--gp-adv-ease) !important;
  will-change: height !important;
}

/* Search row on tg-phone: animate like everywhere */
html.tg-phone #advanced-panel.advanced-panel .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;

  transition-property: opacity, transform !important;
  transition-duration: var(--gp-adv-in-ms), var(--gp-adv-in-ms) !important;
  transition-timing-function: var(--gp-adv-ease), var(--gp-adv-ease) !important;
  transition-delay: 0ms, 0ms !important;

  will-change: opacity, transform !important;
  pointer-events: none !important;
}

html.tg-phone #advanced-panel.advanced-panel.open .advanced-search,
html.tg-phone #advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search,
html.tg-phone #advanced-panel.advanced-panel.open.adv-settled .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel.open:not(.adv-settled) .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel.open.adv-settled .advanced-search{
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

html.tg-phone #advanced-panel.advanced-panel.closing .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
html.tg-phone #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search{
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  transition-duration: var(--gp-adv-out-ms), var(--gp-adv-out-ms) !important;
  transition-delay: 0ms, 0ms !important;
  pointer-events: none !important;
}


/* =====================================================================
   GP FIX v22 – Advanced search: no phantom spacing, no late draw, no jitter

   Что исправляет (по фидбеку):
   - Лишнее пустое место под фильтрами в закрытом состоянии (его давал reset-btn,
     который в v21 был всегда display:flex и оставлял padding при max-height:0).
   - Поле поиска «стоит выше/криво» из‑за лишних/непредсказуемых отступов.
   - «Дорисовывание»/рывок на пару пикселей при открытии/закрытии.

   Ключ:
   - Возвращаем внутренний спейсер .advanced-panel-gap (он входит в scrollHeight
     и анимируется ВМЕСТЕ с height), вместо padding-top у панели.
   - Убираем translate-анимации у строки поиска (они давали визуальный наезд).
   - Reset-кнопку возвращаем к display:none когда она скрыта (без фантомной высоты).
===================================================================== */

:root{
  --gp-adv-gap: var(--ui-stack-gap, 10px);
  --gp-adv-h-ms: 260ms;
  --gp-adv-fade-ms: 180ms;
  --gp-adv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sticky container: gap не должен прыгать (gap не анимируется) */
#sticky-filters,
.sticky-filters{
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* Advanced panel: только height-анимация. НИКАКИХ padding (иначе height не схлопывается в 0). */
#advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel{
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  transform: none !important;

  transition-property: height !important;
  transition-duration: var(--gp-adv-h-ms) !important;
  transition-timing-function: var(--gp-adv-ease) !important;

  will-change: height !important;
}

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

/* Внутренний спейсер: участвует в scrollHeight => никаких «поздних дорисовок» */
#advanced-panel.advanced-panel .advanced-panel-gap,
#sticky-filters #advanced-panel.advanced-panel .advanced-panel-gap,
.sticky-filters #advanced-panel.advanced-panel .advanced-panel-gap{
  display: block !important;
  height: var(--gp-adv-gap) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Строка поиска: плавный fade без translate (translate давал наезд на кнопки) */
#advanced-panel.advanced-panel .advanced-search,
#sticky-filters #advanced-panel.advanced-panel .advanced-search,
.sticky-filters #advanced-panel.advanced-panel .advanced-search{
  transform: none !important;

  opacity: 0 !important;
  transition: opacity var(--gp-adv-fade-ms) var(--gp-adv-ease) !important;

  pointer-events: none !important;
}

#advanced-panel.advanced-panel.open .advanced-search,
#sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
.sticky-filters #advanced-panel.advanced-panel.open .advanced-search{
  opacity: 1 !important;
  pointer-events: auto !important;
}

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

/* Reset button: возвращаем поведение по умолчанию (display:none когда скрыта).
   В v21 она была всегда display:flex, из-за чего оставался фантомный отступ. */
#inline-reset-btn.inline-reset-btn,
#sticky-filters #inline-reset-btn.inline-reset-btn,
.sticky-filters #inline-reset-btn.inline-reset-btn{
  display: none !important;
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}

#inline-reset-btn.inline-reset-btn.inline-reset-btn--visible,
#sticky-filters #inline-reset-btn.inline-reset-btn.inline-reset-btn--visible,
.sticky-filters #inline-reset-btn.inline-reset-btn.inline-reset-btn--visible{
  display: inline-flex !important;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --gp-adv-h-ms: 0ms;
    --gp-adv-fade-ms: 0ms;
  }
}


/* v22 addendum: вертикальный зазор управляется ТОЛЬКО .advanced-panel-gap */
#sticky-filters .filters-bar,
.sticky-filters .filters-bar{
  margin-bottom: 0 !important;
}

/* v22 hard overrides: убираем padding-top даже в состояниях advanced-open/focus-within и на tg-phone */
#sticky-filters.advanced-open #advanced-panel.open,
#sticky-filters.advanced-open #advanced-panel.advanced-panel.open,
#sticky-filters.advanced-open #advanced-panel.open:focus-within,
#sticky-filters.advanced-open #advanced-panel.advanced-panel.open:focus-within,
#sticky-filters.advanced-open #advanced-panel.closing,
#sticky-filters.advanced-open #advanced-panel.advanced-panel.closing,
#sticky-filters.advanced-open #advanced-panel.closing:focus-within,
#sticky-filters.advanced-open #advanced-panel.advanced-panel.closing:focus-within,
.sticky-filters.advanced-open #advanced-panel.open,
.sticky-filters.advanced-open #advanced-panel.advanced-panel.open,
.sticky-filters.advanced-open #advanced-panel.open:focus-within,
.sticky-filters.advanced-open #advanced-panel.advanced-panel.open:focus-within,
.sticky-filters.advanced-open #advanced-panel.closing,
.sticky-filters.advanced-open #advanced-panel.advanced-panel.closing,
.sticky-filters.advanced-open #advanced-panel.closing:focus-within,
.sticky-filters.advanced-open #advanced-panel.advanced-panel.closing:focus-within,
html.tg-phone #sticky-filters.advanced-open #advanced-panel.open:focus-within,
html.tg-phone #sticky-filters.advanced-open #advanced-panel.advanced-panel.open:focus-within,
html.tg-phone .sticky-filters.advanced-open #advanced-panel.open:focus-within,
html.tg-phone .sticky-filters.advanced-open #advanced-panel.advanced-panel.open:focus-within{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

html.tg-phone #advanced-panel.advanced-panel .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel .advanced-search{
  transform: none !important;
  opacity: 0 !important;
  transition: opacity var(--gp-adv-fade-ms) var(--gp-adv-ease) !important;
  pointer-events: none !important;
}

html.tg-phone #advanced-panel.advanced-panel.open .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel.open .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel.open .advanced-search{
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.tg-phone #advanced-panel.advanced-panel.closing .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel.closing .advanced-search,
html.tg-phone #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel[aria-hidden="true"] .advanced-search{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* v22 safety: никаких transition-delay (тайминги в JS читаются из computed styles) */
#advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel,
html.tg-phone #advanced-panel.advanced-panel,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel{
  transition-delay: 0ms !important;
}

#advanced-panel.advanced-panel .advanced-search,
#sticky-filters #advanced-panel.advanced-panel .advanced-search,
.sticky-filters #advanced-panel.advanced-panel .advanced-search,
html.tg-phone #advanced-panel.advanced-panel .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel .advanced-search{
  transition-delay: 0ms !important;
}

/* v22 final: убираем любые padding у контейнера строки поиска (в некоторых прошлых фиксациях было padding-top:6px) */
#advanced-panel.advanced-panel .advanced-search,
#sticky-filters #advanced-panel.advanced-panel .advanced-search,
.sticky-filters #advanced-panel.advanced-panel .advanced-search,
html.tg-phone #advanced-panel.advanced-panel .advanced-search,
html.tg-phone #sticky-filters #advanced-panel.advanced-panel .advanced-search,
html.tg-phone .sticky-filters #advanced-panel.advanced-panel .advanced-search{
  padding: 0 !important;
}


/* =====================================================================
   GP PATCH v24.1 – UI polish (toast, spacing, advanced panel, symbols)
===================================================================== */

/* 1) Toast: smooth fade/slide in/out (no abrupt hide) */
#toast.toast.entering,
#toast.toast.hiding {
  animation: none !important;
}

.toast {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0,-140%,0) !important;

  transition:
    transform var(--toast-slide-ms, 280ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)) !important,
    opacity var(--toast-slide-ms, 280ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)) !important,
    visibility 0s linear var(--toast-slide-ms, 280ms) !important;
}

.toast.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0,0,0) !important;

  transition:
    transform var(--toast-slide-ms, 280ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)) !important,
    opacity var(--toast-slide-ms, 280ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)) !important,
    visibility 0s linear 0s !important;
}

.toast.hiding {
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(0,-140%,0) !important;
}

/* 2) Sticky filters: equal padding top/bottom */
#sticky-filters,
.sticky-filters,
#sticky-filters.advanced-open,
.sticky-filters.advanced-open,
html.overlay-open #sticky-filters,
body.overlay-open #sticky-filters,
html.overlay-open .sticky-filters,
body.overlay-open .sticky-filters,
html.overlay-open #sticky-filters.advanced-open,
body.overlay-open #sticky-filters.advanced-open,
html.overlay-open .sticky-filters.advanced-open,
body.overlay-open .sticky-filters.advanced-open {
  padding-top: var(--ui-stack-gap, 10px) !important;
}

/* 3) Advanced panel: remove “last line is drawn at the end” effect */
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel {
  overflow: visible !important;
}

/* 4) Advanced row: search + Symbols button in one line */
#advanced-panel .advanced-row {
  display: flex !important;
  gap: var(--ui-stack-gap, 10px) !important;
  align-items: stretch !important;
  width: 100% !important;
}

#advanced-panel .advanced-row .advanced-search {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#symbols-trigger.filter-btn.filter-btn--adv-inline {
  flex: 0 0 auto !important;
  width: 128px !important;

  height: 46px !important;
  min-height: 46px !important;

  padding: 10px 20px 10px 8px !important;
  border-radius: 18px !important;
}

/* Placeholder button in advanced filters row (keeps alignment with the Symbol filter button) */
.filter-btn--aux {
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


#symbols-trigger.filter-btn.filter-btn--adv-inline .filter-label {
  font-size: 11px !important;
  opacity: 0.78 !important;
}

#symbols-trigger.filter-btn.filter-btn--adv-inline .filter-value {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

/* When single-selected we reuse the same pill layout as in top filters */
#symbols-trigger.filter-btn.filter-btn--adv-inline.filter-btn--single {
  padding-left: 8px !important;
}

/* Symbols modal: a tiny bit tighter, prices are not shown */
#symbols-modal .modal-subtitle {
  opacity: 0.82 !important;
}


/* =====================================================================
   GP PATCH v24.2 – fixes requested (symbols button visibility + adv animation)
===================================================================== */

/* 3b) Advanced panel: remove paint containment too (otherwise it still clips and looks like it "draws" the last line) */
#advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel {
  overflow: visible !important;
  contain: none !important;
}


/* ===========================
   GP PATCH v24.3 (symbols button + adv panel polish)
   =========================== */

/* Ensure the new Symbols button is always visible (defensive) */
#symbols-trigger {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 6 !important;
}

/* Advanced panel: place Search + Symbols on one row */
#advanced-panel .advanced-row .advanced-search {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Symbols trigger sizing to match the search bar row */
#symbols-trigger.filter-btn.filter-btn--adv-inline {
  height: 46px !important;
  min-height: 46px !important;
  width: 128px !important;
  min-width: 128px !important;
  padding: 10px 20px 10px 8px !important;
  border-radius: 16px !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

/* Animate Symbols button together with the advanced search input */
#advanced-panel.advanced-panel:not(.open):not(.closing) #symbols-trigger {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 8px, 0) !important;
}

#advanced-panel.advanced-panel.open #symbols-trigger {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: transform var(--adv-panel-ms, 280ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity var(--adv-panel-ms, 280ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) !important;
  will-change: transform, opacity !important;
}

#advanced-panel.advanced-panel.closing #symbols-trigger {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 8px, 0) !important;
  transition: transform var(--adv-panel-ms, 280ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity var(--adv-panel-ms, 280ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) !important;
  will-change: transform, opacity !important;
}

/* Reduce the "late-drawn bottom line" effect: do not clip contents in open/closing states */
#advanced-panel.advanced-panel.open,
#advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing {
  overflow: visible !important;
  contain: none !important;
}


/* =========================
   GiftPay PATCH v24.8
   Fix: Symbols button placement + size
   - Put Search + Symbols in one row (2/3 + 1/3 like top filters)
   - Make Symbols button same height as other filter buttons (56px)
   - Never hide Symbols button via stale open/closing classes
   ========================= */

#advanced-panel .advanced-row{
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#advanced-panel .advanced-row .advanced-search{
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

#advanced-panel .advanced-row .advanced-search .search-input{
  min-width: 0 !important;
}

/* Symbols trigger: same sizing as other filter buttons */
#advanced-panel #symbols-trigger.filter-btn{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: 56px !important;
  min-height: 56px !important;

  padding: 10px 20px 10px 8px !important;
  border-radius: 18px !important;

  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Do NOT hide the Symbols button based on open/closing flags (they can desync in some WebViews) */
#advanced-panel.advanced-panel:not(.open):not(.closing) #symbols-trigger,
#advanced-panel.advanced-panel.open #symbols-trigger,
#advanced-panel.advanced-panel.closing #symbols-trigger{
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Optional: show a friendly hint while symbols are being fetched */
#symbols-list .modal-loading-hint{
  padding: 18px !important;
  text-align: center !important;
  color: var(--tg-text-mute) !important;
  font-size: 14px !important;
}


/* =========================
   GiftPay PATCH v24.9
   UI: Align "Символ" under "Фон" + add placeholder button under the arrow button
   Fix: make sure advanced controls (search/symbols) are REALLY hidden when the panel is closed
   ========================= */

/* Advanced row should follow the same grid as the top filters bar: 3 flexible columns + 56px icon column */
#sticky-filters #advanced-panel .advanced-row,
#advanced-panel .advanced-row{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 56px !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Search spans first two columns (so it matches the size of two filter buttons) */
#sticky-filters #advanced-panel .advanced-row .advanced-search,
#advanced-panel .advanced-row .advanced-search{
  grid-column: 1 / span 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

/* Symbols trigger sits exactly under the "Фон" button (3rd column) */
#sticky-filters #advanced-panel #symbols-trigger,
#advanced-panel #symbols-trigger{
  grid-column: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 18px !important;
}

/* Placeholder button sits under the arrow button (4th column) */
#sticky-filters #advanced-panel #aux-trigger,
#advanced-panel #aux-trigger{
  grid-column: 4 !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.82) !important;
  border-color: rgba(255,255,255,0.12) !important;
  overflow: hidden !important;
}

/* Aux button is intentionally empty: remove dropdown chevrons (filter-btn pseudo icons) */
#aux-trigger::before,
#aux-trigger::after{
  display: none !important;
  content: none !important;
}

/* Closed advanced panel must hide its contents (fix: "button doesn't disappear") */
#sticky-filters #advanced-panel[aria-hidden="true"]:not(.closing),
#advanced-panel[aria-hidden="true"]:not(.closing){
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#sticky-filters #advanced-panel[aria-hidden="true"]:not(.closing) .advanced-row,
#advanced-panel[aria-hidden="true"]:not(.closing) .advanced-row{
  display: none !important;
}

/* When open/closing, allow interaction/visibility */
#sticky-filters #advanced-panel.open .advanced-row,
#sticky-filters #advanced-panel.closing .advanced-row,
#advanced-panel.open .advanced-row,
#advanced-panel.closing .advanced-row{
  display: grid !important;
}


/* =========================
   GiftPay PATCH v25
   Fixes:
   - "Floating" controls while closing Advanced panel (overflow must clip)
   - Search field height: 56px (same as filter buttons)
   - Bottom row alignment: aux placeholder matches arrow button size/radius
   ========================= */

/* 1) NEVER allow advanced panel content to render outside of its animated height */
#advanced-panel.advanced-panel,
#advanced-panel.advanced-panel.open,
#advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing{
  overflow: hidden !important;
}

/* 2) Search input must be the same height as buttons (56px) */
#advanced-panel .advanced-row .advanced-search .search-input,
#sticky-filters #advanced-panel .advanced-row .advanced-search .search-input{
  height: 56px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  padding-top: 17px !important;
  padding-bottom: 17px !important;
}

/* 3) Aux placeholder should visually match the arrow (square button) */
#advanced-panel #aux-trigger,
#sticky-filters #advanced-panel #aux-trigger{
  border-radius: 12px !important;
}


/* =========================
   GiftPay PATCH v26

   Что исправляет по вашему фидбеку:
   1) Нижний ряд (поиск / символ / плейсхолдер) выравнивается ПИКСЕЛЬ‑В‑ПИКСЕЛЬ
      под верхним рядом (Коллекция / Модель / Фон / стрелка).
   2) Убирает «позднее расширение» снизу при открытии доп. меню (дерганье в конце).
   3) Поле «Поиск по #номеру…» по высоте = кнопкам (56px), как и остальные.

   Принцип:
   - Единая сетка для .filters-bar и .advanced-row (одни и те же колонки/отступы).
   - Никаких display:none для строки в закрытом состоянии (чтобы scrollHeight был стабильным).
   - Никаких паддингов/гепов, которые включаются ТОЛЬКО в advanced-open (они и давали скачок).
========================= */

/* 0) Зафиксировать поведение контейнера при advanced-open: без поздних отступов снизу */
#sticky-filters,
.sticky-filters{
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  padding-bottom: var(--gp-adv-gap, var(--ui-stack-gap, 10px)) !important;
  transition: none !important;
  will-change: auto !important;
}

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

/* 1) Единая математика колонок/гапов для верхнего и нижнего рядов */
#sticky-filters,
.sticky-filters{
  --gp-filter-cols: 1fr 1fr 1fr var(--gp-adv-trigger-w, 56px);
  /* Держим такой же gap, как у верхней панели фильтров */
  --gp-filter-gap: 8px;
}

#sticky-filters .filters-bar,
.sticky-filters .filters-bar{
  grid-template-columns: var(--gp-filter-cols) !important;
  gap: var(--gp-filter-gap) !important;
  margin-bottom: 0 !important;
}

/* Кнопка-стрелка: ширина из той же переменной, что и колонка */
#advanced-trigger,
.filters-bar #advanced-trigger{
  width: var(--gp-adv-trigger-w, 56px) !important;
  min-width: var(--gp-adv-trigger-w, 56px) !important;
  flex: 0 0 var(--gp-adv-trigger-w, 56px) !important;
  height: 56px !important;
  min-height: 56px !important;
}

/* 2) Advanced panel: без маржинов/паддингов, только height + внутренний спейсер */
#advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel{
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
  transition-property: height !important;
}

/* На всякий случай фиксируем open/closing состояния (некоторые старые правила
   добавляли margin-top/bottom только в .open и давали скачок в конце). */
#advanced-panel.advanced-panel.open,
#advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing{
  margin: 0 !important;
  padding: 0 !important;
}

/* Спейсер между рядами внутри панели (он входит в scrollHeight => без рывков) */
#advanced-panel.advanced-panel .advanced-panel-gap,
#sticky-filters #advanced-panel.advanced-panel .advanced-panel-gap,
.sticky-filters #advanced-panel.advanced-panel .advanced-panel-gap{
  display: block !important;
  height: var(--gp-filter-gap) !important;
}

/* 3) Нижний ряд: такая же сетка, как у верхнего */
#advanced-panel .advanced-row,
#sticky-filters #advanced-panel .advanced-row,
.sticky-filters #advanced-panel .advanced-row{
  display: grid !important;
  grid-template-columns: var(--gp-filter-cols) !important;
  gap: var(--gp-filter-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
}

/* Закрыто: просто не даём клики (высота всё равно 0 и всё обрезано overflow:hidden) */
#advanced-panel[aria-hidden="true"] .advanced-row,
#sticky-filters #advanced-panel[aria-hidden="true"] .advanced-row,
.sticky-filters #advanced-panel[aria-hidden="true"] .advanced-row{
  pointer-events: none !important;
}

#advanced-panel.open .advanced-row,
#advanced-panel.closing .advanced-row,
#sticky-filters #advanced-panel.open .advanced-row,
#sticky-filters #advanced-panel.closing .advanced-row,
.sticky-filters #advanced-panel.open .advanced-row,
.sticky-filters #advanced-panel.closing .advanced-row{
  pointer-events: auto !important;
}

/* 4) Поиск: высота как у кнопок и ровно под Коллекция+Модель */
#advanced-panel .advanced-row .advanced-search,
#sticky-filters #advanced-panel .advanced-row .advanced-search,
.sticky-filters #advanced-panel .advanced-row .advanced-search{
  grid-column: 1 / span 2 !important;
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 18px !important;
}

#advanced-panel .advanced-row .advanced-search .search-input,
#sticky-filters #advanced-panel .advanced-row .advanced-search .search-input,
.sticky-filters #advanced-panel .advanced-row .advanced-search .search-input{
  height: 56px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 56px !important;
}

#advanced-panel .advanced-row .advanced-search .search-icon,
#sticky-filters #advanced-panel .advanced-row .advanced-search .search-icon,
.sticky-filters #advanced-panel .advanced-row .advanced-search .search-icon,
#advanced-panel .advanced-row .advanced-search .search-clear,
#sticky-filters #advanced-panel .advanced-row .advanced-search .search-clear,
.sticky-filters #advanced-panel .advanced-row .advanced-search .search-clear{
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* 5) Символ: строго в 3-й колонке (под «Фон») */
#advanced-panel #symbols-trigger,
#sticky-filters #advanced-panel #symbols-trigger,
.sticky-filters #advanced-panel #symbols-trigger{
  grid-column: 3 !important;
  height: 56px !important;
  min-height: 56px !important;
}

/* 6) Кнопка сортировки: 4-я колонка (под стрелкой) */
#advanced-panel #aux-trigger,
#sticky-filters #advanced-panel #aux-trigger,
.sticky-filters #advanced-panel #aux-trigger{
  grid-column: 4 !important;
  width: var(--gp-adv-trigger-w, 56px) !important;
  min-width: var(--gp-adv-trigger-w, 56px) !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ВАЖНО: убираем прошлые фиксы, которые ломали стабильность scrollHeight */
#advanced-panel[aria-hidden="true"]:not(.closing),
#sticky-filters #advanced-panel[aria-hidden="true"]:not(.closing){
  visibility: visible !important;
}

#sticky-filters #advanced-panel[aria-hidden="true"]:not(.closing) .advanced-row,
#advanced-panel[aria-hidden="true"]:not(.closing) .advanced-row{
  display: grid !important;
}





/* =========================
   GiftPay PATCH v27
   Fixes per feedback:
   - NO end-jump when Advanced menu finishes opening/closing
     (class .advanced-open is toggled at the end of the animation => must not change layout)
   - Bottom row (Поиск / Символ / пустая кнопка) aligned pixel-perfect under top row
   - "Символ" button typography/padding matches other filter buttons 1:1
   - Empty aux button is oval
   ========================= */

/* 1) .advanced-open must NOT change layout (it is toggled on transition end) */
#sticky-filters,
#sticky-filters.advanced-open,
.sticky-filters,
.sticky-filters.advanced-open,
html.overlay-open #sticky-filters,
body.overlay-open #sticky-filters,
html.overlay-open #sticky-filters.advanced-open,
body.overlay-open #sticky-filters.advanced-open,
html.overlay-open .sticky-filters,
body.overlay-open .sticky-filters,
html.overlay-open .sticky-filters.advanced-open,
body.overlay-open .sticky-filters.advanced-open{
  padding-top: 6px !important;   /* keep identical in all states */
  padding-bottom: var(--sticky-bottom-gap, var(--ui-stack-gap, 10px)) !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* 2) Prevent any "last-frame" overflow changes (no visual size pop) */
#advanced-panel.advanced-panel.open.adv-settled,
#sticky-filters #advanced-panel.advanced-panel.open.adv-settled,
.sticky-filters #advanced-panel.advanced-panel.open.adv-settled{
  overflow: hidden !important;
  contain: none !important;
}

/* 3) "Символ" must look exactly like other filter buttons (same padding + font sizes) */
#symbols-trigger.filter-btn{
  padding: 10px 20px 10px 8px !important;
  border-radius: 18px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  row-gap: 2px !important;
  height: 56px !important;
  min-height: 56px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
}

#symbols-trigger.filter-btn .filter-label{
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
}

#symbols-trigger.filter-btn .filter-value{
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

/* Disable any legacy "slide-in" transforms that can look like a size jump */
#advanced-panel.advanced-panel:not(.open):not(.closing) #symbols-trigger,
#advanced-panel.advanced-panel.open #symbols-trigger,
#advanced-panel.advanced-panel.closing #symbols-trigger,
#advanced-panel.advanced-panel.open:not(.adv-settled) #symbols-trigger{
  transform: none !important;
  transition: none !important;
}

/* 4) Empty aux button: oval */
#aux-trigger{
  border-radius: 999px !important;
}

/* 5) Search input: same height as buttons, vertically centered */
#advanced-panel .advanced-row .advanced-search{
  height: 56px !important;
  min-height: 56px !important;
}

#advanced-panel .advanced-row .advanced-search .search-input{
  height: 56px !important;
  min-height: 56px !important;
  line-height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* v27 hotfix: outrank legacy selectors that used #symbols-trigger.filter-btn.filter-btn--adv-inline */
#sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline,
#advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline{
  padding: 10px 20px 10px 8px !important;
  border-radius: 18px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  row-gap: 2px !important;
  height: 56px !important;
  min-height: 56px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
}

#sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline .filter-label,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline .filter-label,
#advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline .filter-label{
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
}

#sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline .filter-value,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline .filter-value,
#advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline .filter-value{
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

/* v27 hotfix: aux button oval must outrank #advanced-panel #aux-trigger rules */
#sticky-filters #advanced-panel #aux-trigger,
.sticky-filters #advanced-panel #aux-trigger,
#advanced-panel #aux-trigger{
  border-radius: 999px !important;
}


/* =========================
   GiftPay PATCH v28
   Fixes per feedback:
   1) Gift card max size: prevent a single card from stretching to full width on desktop.
   2) Filter buttons: icon + text vertically centered in single-line mode.
   3) "Символ" button paddings/typography match other filter buttons 1:1.
   ========================= */

/* (1) Gift grid: keep a sane max width for cards on wide screens.
   - When there are few results (even 1), auto-fit + 1fr makes the card stretch.
   - Use a capped track size on >=700px so cards never grow beyond ~260px.
*/
@media (min-width: 700px) {
  #gift-grid.gift-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 260px)) !important;
    justify-content: start !important;
    justify-items: start !important;
    align-content: start !important;
  }

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

/* (2) Single-line filter buttons: always center content by height.
   Some scoped overrides (esp. for #symbols-trigger) were forcing align-items:flex-start
   even in .filter-btn--single, which made the icon/text look "crooked".
*/
.filter-btn.filter-btn--single {
  align-items: center !important;
  justify-content: flex-start !important;
  row-gap: 0 !important;
}

.filter-btn.filter-btn--single .filter-value,
.filter-btn.filter-btn--single .filter-value-pill {
  align-items: center !important;
}

/* Make preview images behave the same everywhere (remove inline-image baseline shift) */
.filter-value-icon img {
  display: block !important;
}

/* (3) "Символ" button: match top filters padding + typography exactly.
   Top bar buttons effectively use:
   - padding: 10px 36px 10px 10px (right padding reserves space for chevrons)
   - label: 12px/1.2 500
   - value: 14px/1.2 600
*/
#sticky-filters #advanced-panel #symbols-trigger.filter-btn,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn,
#advanced-panel #symbols-trigger.filter-btn {
  padding: 10px 36px 10px 10px !important;
  padding-right: 36px !important;
  padding-left: 10px !important;
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 18px !important;
}

#sticky-filters #advanced-panel #symbols-trigger.filter-btn .filter-label,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn .filter-label,
#advanced-panel #symbols-trigger.filter-btn .filter-label {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

#sticky-filters #advanced-panel #symbols-trigger.filter-btn .filter-value,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn .filter-value,
#advanced-panel #symbols-trigger.filter-btn .filter-value,
#sticky-filters #advanced-panel #symbols-trigger.filter-btn .filter-value-text,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn .filter-value-text,
#advanced-panel #symbols-trigger.filter-btn .filter-value-text {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

/* Ensure "Символ" centers correctly in single-line mode too (override legacy flex-start) */
#sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--single,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--single,
#advanced-panel #symbols-trigger.filter-btn.filter-btn--single {
  align-items: center !important;
}


/* =========================
   GiftPay PATCH v29
   По фидбеку: унифицируем ИКОНКУ + ТЕКСТ в кнопках фильтров.
   - одинаковый размер превью
   - визуально одинаковая "рамка" для всех (и картинка, и цветной фон)
   - ровное вертикальное центрирование
   - нормальный (не мелкий) размер текста
   ========================= */

:root {
  --gp-filter-pill-icon: 30px;
  --gp-filter-pill-icon-radius: 10px;
  --gp-filter-pill-font: 14px;
}

html.tg-phone {
  --gp-filter-pill-icon: 28px;
  --gp-filter-pill-icon-radius: 10px;
  --gp-filter-pill-font: 13px;
}

/* (A) Top filter buttons + advanced filter button ("Символ") */
#sticky-filters .filter-btn .filter-value,
.sticky-filters .filter-btn .filter-value,
.filters-bar .filter-btn .filter-value {
  font-size: var(--gp-filter-pill-font) !important;
  line-height: 1.2 !important;
}

#sticky-filters .filter-btn .filter-value-text,
.sticky-filters .filter-btn .filter-value-text,
.filters-bar .filter-btn .filter-value-text {
  font-size: var(--gp-filter-pill-font) !important;
  line-height: 1.2 !important;
}

/* Square preview (collections/models/symbols) */
#sticky-filters .filter-value-icon,
.sticky-filters .filter-value-icon,
.filters-bar .filter-value-icon {
  width: var(--gp-filter-pill-icon) !important;
  height: var(--gp-filter-pill-icon) !important;
  border-radius: var(--gp-filter-pill-icon-radius) !important;
  /* no grey squares behind the preview; keep inline bg for fallback initials */
  background: transparent;
  border: none;
  overflow: hidden;
}

#sticky-filters .filter-value-icon img,
.sticky-filters .filter-value-icon img,
.filters-bar .filter-value-icon img {
  width: 100% !important;
  height: 100% !important;
  /* show the whole image, no crop/zoom */
  object-fit: contain !important;
  border-radius: 0 !important;
  display: block !important;
  transform: none !important;
}

/* Color preview (backdrops) — делаем таким же по размеру, как и квадратные */
#sticky-filters .filter-value-backdrop-dot,
.sticky-filters .filter-value-backdrop-dot,
.filters-bar .filter-value-backdrop-dot {
  width: var(--gp-filter-pill-icon) !important;
  height: var(--gp-filter-pill-icon) !important;
  border-radius: 999px !important;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* Ровный gap между иконкой и текстом */
#sticky-filters .filter-value-pill,
.sticky-filters .filter-value-pill,
.filters-bar .filter-value-pill {
  gap: 10px !important;
}

/* Стопроцентное центрирование по высоте в single-mode */
.filter-btn.filter-btn--single .filter-value,
.filter-btn.filter-btn--single .filter-value-pill {
  align-items: center !important;
}

/* (B) Modal lists: делаем превью более "живыми" и одинаковыми по заполнению */
#collections-modal .item-icon.item-icon-default,
#models-modal .item-icon.item-icon-default,
#symbols-modal .item-icon.item-icon-default {
  /* no "square" plates behind images in lists */
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

#collections-modal .item-icon.item-icon-default img,
#models-modal .item-icon.item-icon-default img,
#symbols-modal .item-icon.item-icon-default img {
  object-fit: contain !important;
}


/* =========================================================
   GiftPay PATCH v30 – unify pill visuals (NO ellipsis, NO squares, NO crop)

   Requests:
   - Перенос строк как у "Символ" (без сокращений с "...")
   - Одинаковый размер текста/иконок во всех кнопках
   - Убрать квадраты/фон под превью (коллекции/модели/символы/фоны)
   - Убрать обрезание превью (object-fit: contain)
   ========================================================= */

:root {
  /* One size for all filter pills (matches the reference feel on tg-phone too) */
  --gp-pill-icon: 28px;
  --gp-pill-line: 1.15;
}

/* -----------------------------
   1) TEXT: wrap to multiple lines (no "...")
   ----------------------------- */

/* Allow wrapping in all filter buttons (top bar + advanced) */
.filter-value,
.filters-bar .filter-value,
#advanced-panel .filter-value {
  white-space: normal !important;
  text-overflow: clip !important;
}

/* Main value text: wrap, keep tidy (up to 2 lines, no ellipsis) */
.filter-value-text,
.filters-bar .filter-value-text,
#advanced-panel .filter-value-text {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: var(--gp-pill-line) !important;

  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;

  display: block !important;
  min-width: 0 !important;

  /* keep the same compact, аккуратный pill height like on the Symbols button */
  max-height: calc(2 * 1em * var(--gp-pill-line)) !important;
}

/* Prevent weird flex shrinking that re-introduces truncation */
.filter-value-pill {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* -----------------------------
   2) ICONS: remove square backgrounds + remove crop
   ----------------------------- */

/* Filter pills: no grey squares/borders behind images */
.filter-value-icon {
  width: var(--gp-pill-icon) !important;
  height: var(--gp-pill-icon) !important;
  border-radius: 10px !important;

  /* don't paint a background plate; keep inline bg (fallback initials) if present */
  border: none !important;

  overflow: visible !important;
  box-shadow: none !important;
}

/* Images inside pills: show full art, no crop/zoom */
.filter-value-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Backdrop dot (same size as other icons, never clipped) */
.filter-value-backdrop-dot {
  width: var(--gp-pill-icon) !important;
  height: var(--gp-pill-icon) !important;
  border-radius: 999px !important;

  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Keep vertical centering reliable even when text wraps to 2 lines */
.filter-value,
.filter-value-pill {
  align-items: center !important;
}

/* Slightly increase left padding so round dots never touch the top-left radius */
.filters-bar .filter-btn,
#advanced-panel #symbols-trigger.filter-btn {
  padding-left: 10px !important;
}

/* -----------------------------
   3) MODALS: remove icon squares + remove crop (collections/models/symbols)
   ----------------------------- */

#collections-modal .item-icon.item-icon-default,
#models-modal .item-icon.item-icon-default,
#symbols-modal .item-icon.item-icon-default {
  /* keep inline bg if any, but remove the default plate */
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

#collections-modal .item-icon.item-icon-default img,
#models-modal .item-icon.item-icon-default img,
#symbols-modal .item-icon.item-icon-default img {
  object-fit: contain !important;
  transform: none !important;
}

/* =====================================================================
   GiftPay PATCH v31
   Fix: no clipping in filter buttons (icons/text/backdrop dot)
   - Apply Symbol-style wrapping to ALL filter buttons
   - Remove ellipsis (do not shorten words)
   - Remove any overflow clipping that was cutting icons/text/dots
   - Make Symbols trigger look identical to the 3 top filters (same rounding/inner layout)
   ===================================================================== */

:root{
  /* Make previews “идеальный размер”, not tiny */
  --filter-preview-size: 28px !important;
  --filter-preview-gap: 10px !important;
}

/* 1) Buttons: stop clipping by rounded corners + give more breathing room */
#sticky-filters .filters-bar .filter-btn,
.sticky-filters .filters-bar .filter-btn,
.filters-bar .filter-btn,
#advanced-panel #symbols-trigger.filter-btn{
  overflow: visible !important;
}

/* Top 3 filter buttons */
#sticky-filters .filters-bar .filter-btn:not(#advanced-trigger),
.sticky-filters .filters-bar .filter-btn:not(#advanced-trigger),
.filters-bar .filter-btn:not(#advanced-trigger){
  height: auto !important;
  min-height: 56px !important;
  padding: 10px 40px 10px 12px !important; /* extra right padding for chevron */
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

/* Advanced trigger (arrow button): keep square and stretch with the row */
#sticky-filters .filters-bar #advanced-trigger,
.sticky-filters .filters-bar #advanced-trigger,
.filters-bar #advanced-trigger{
  height: 100% !important;
  min-height: 56px !important;
  align-self: stretch !important;
  overflow: visible !important;
  border-radius: 18px !important;
}

/* Symbols button must look like the other 3 */
#advanced-panel #symbols-trigger.filter-btn,
#advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline,
#sticky-filters #advanced-panel #symbols-trigger.filter-btn,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn{
  height: auto !important;
  min-height: 56px !important;
  padding: 10px 40px 10px 12px !important;
  border-radius: 18px !important;
  align-items: center !important;
}

/* 2) Text: wrap everywhere, no ellipsis, no hidden overflow */
#sticky-filters .filters-bar .filter-label,
#sticky-filters .filters-bar .filter-value,
#sticky-filters .filters-bar .filter-value-text,
.sticky-filters .filters-bar .filter-label,
.sticky-filters .filters-bar .filter-value,
.sticky-filters .filters-bar .filter-value-text,
.filters-bar .filter-label,
.filters-bar .filter-value,
.filters-bar .filter-value-text,
#advanced-panel #symbols-trigger .filter-label,
#advanced-panel #symbols-trigger .filter-value,
#advanced-panel #symbols-trigger .filter-value-text{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Keep label tidy; value can wrap to multiple lines */
.filters-bar .filter-label,
#advanced-panel #symbols-trigger .filter-label{
  line-height: 1.2 !important;
}

.filters-bar .filter-value,
#advanced-panel #symbols-trigger .filter-value{
  line-height: 1.15 !important;
}

.filters-bar .filter-value-pill,
#advanced-panel #symbols-trigger .filter-value-pill{
  display: flex !important;
  align-items: center !important;
  gap: var(--filter-preview-gap) !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.filters-bar .filter-value-text,
#advanced-panel #symbols-trigger .filter-value-text{
  display: block !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Icons / backdrops: same size everywhere, no squares, no crop */
#sticky-filters .filters-bar .filter-value-icon,
.sticky-filters .filters-bar .filter-value-icon,
.filters-bar .filter-value-icon,
#advanced-panel #symbols-trigger .filter-value-icon{
  width: var(--filter-preview-size) !important;
  height: var(--filter-preview-size) !important;
  flex: 0 0 var(--filter-preview-size) !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  border-radius: 10px !important;
  overflow: visible !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#sticky-filters .filters-bar .filter-value-icon img,
.sticky-filters .filters-bar .filter-value-icon img,
.filters-bar .filter-value-icon img,
#advanced-panel #symbols-trigger .filter-value-icon img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* Backdrop dot: remove outlines that made it look cropped */
#sticky-filters .filters-bar .filter-value-backdrop-dot,
.sticky-filters .filters-bar .filter-value-backdrop-dot,
.filters-bar .filter-value-backdrop-dot,
#advanced-panel #symbols-trigger .filter-value-backdrop-dot,
.filter-value-backdrop-dot{
  width: var(--filter-preview-size) !important;
  height: var(--filter-preview-size) !important;
  flex: 0 0 var(--filter-preview-size) !important;

  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;

  border-radius: 999px !important;
  overflow: visible !important;
}

/* Ensure the chevron never overlaps text */
.filters-bar .filter-btn::before,
.filters-bar .filter-btn::after,
#advanced-panel #symbols-trigger.filter-btn::before,
#advanced-panel #symbols-trigger.filter-btn::after{
  right: 14px !important;
}

/* =====================================================================
   GiftPay PATCH v32
   Fixes (per feedback):
   1) Do NOT break words inside filter values ("Electri\nc");
      If text doesn't fit — use "…".
   2) Unify grey shades for ALL filter buttons (match --tg-bg-elevated).
      (Exception: disabled Models button can be darker.)
   3) Align left padding for the "Символ" button to match "Фон".
   ===================================================================== */

/* 2) Unify button backgrounds (match reference grey = --tg-bg-elevated) */
.filters-bar .filter-btn,
#sticky-filters .filters-bar .filter-btn,
.sticky-filters .filters-bar .filter-btn,
#advanced-panel #symbols-trigger.filter-btn {
  background: var(--tg-bg-elevated) !important;
}

/* Arrow button + aux placeholder should NOT have a different grey */
#advanced-trigger,
#aux-trigger {
  background: var(--tg-bg-elevated) !important;
  border: 1px solid var(--tg-border-subtle) !important;
  border-radius: 18px !important;
  color: var(--tg-text) !important;
}

#advanced-trigger:hover,
#aux-trigger:hover {
  background: var(--tg-bg-elevated-soft) !important;
  border-color: var(--tg-border) !important;
}

/* Disabled Models button: allow it to be visibly darker (not just opacity) */
#models-trigger:disabled {
  opacity: 1 !important;
  background: #1f1f1f !important;
}

/* 3) Padding alignment: "Символ" should start like "Фон" (not glued to the edge) */
#advanced-panel #symbols-trigger.filter-btn,
#sticky-filters #advanced-panel #symbols-trigger.filter-btn,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn {
  padding-left: 12px !important;
}

/* Some legacy patches forced 8px in single-mode */
#symbols-trigger.filter-btn.filter-btn--adv-inline.filter-btn--single {
  padding-left: 12px !important;
}

/* 1) Text: wrap only at natural break points; never break inside words.
      If the value still doesn't fit — show ellipsis. */
.filters-bar .filter-label,
#advanced-panel #symbols-trigger .filter-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Value container can be multi-line, but WITHOUT breaking words */
.filters-bar .filter-value,
.filters-bar .filter-value-text,
#advanced-panel #symbols-trigger .filter-value,
#advanced-panel #symbols-trigger .filter-value-text {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Multi-line ellipsis (up to 2 lines): behaves well for multi-word names,
   and avoids mid-word wraps like "Electri" + "c". */
.filters-bar .filter-value-text,
#advanced-panel #symbols-trigger .filter-value-text {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* =====================================================================
   GiftPay PATCH v33
   Fixes:
   1) Never split words (no "Aquar" + "ium").
      - Multi-word: wrap only on spaces.
      - Single long word: show "...".
   2) Mobile padding: top/bottom must be equal for filter buttons.
   3) Advanced arrow button: when advanced panel is open -> white button.
   ===================================================================== */

/* 1) Strong override vs legacy rules that forced mid-word wraps */
#sticky-filters .filters-bar .filter-label,
#sticky-filters .filters-bar .filter-value,
#sticky-filters .filters-bar .filter-value-text,
.sticky-filters .filters-bar .filter-label,
.sticky-filters .filters-bar .filter-value,
.sticky-filters .filters-bar .filter-value-text,
#advanced-panel .filter-label,
#advanced-panel .filter-value,
#advanced-panel .filter-value-text,
#advanced-panel #symbols-trigger .filter-label,
#advanced-panel #symbols-trigger .filter-value,
#advanced-panel #symbols-trigger .filter-value-text {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Multi-word clamp (2 lines) without breaking words */
.gp-multiword-clamp {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* Single word: force 1 line, no wrap (JS inserts "...") */
.gp-oneword-ellipsis {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: block !important;
}

/* 2) Mobile padding: ровно сверху/снизу (без 9/11px перекоса) */
@media (max-width: 520px) {
  #sticky-filters .filters-bar .filter-btn:not(#advanced-trigger),
  .sticky-filters .filters-bar .filter-btn:not(#advanced-trigger) {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* 3) Arrow button becomes white when advanced panel is open */
#advanced-trigger.active,
#sticky-filters #advanced-trigger.active,
.sticky-filters #advanced-trigger.active {
  background: rgba(255,255,255,0.92) !important;
  color: rgba(0,0,0,0.86) !important;
  border: none !important;
  box-shadow: none !important;
}




/* =====================================================================
   GiftPay PATCH v34
   Fixes (per screenshots):
   1) Каталог без пустого места справа (grid всегда заполняет ширину).
   2) "Символ" — такой же отступ/выравнивание, как у "Фон".
   3) Текст в фильтрах НЕ лезет на стрелки/кнопки — только с "...".
   ===================================================================== */

/* 1) Grid: keep fluid columns on wide screens (no right-side пустота) */
@media (min-width: 700px) {
  #gift-grid.gift-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  /* Allow cards to stretch when there is more horizontal room */
  #gift-grid.gift-grid > .gift-card:not(:only-child) {
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Keep single card sane (do not stretch to full width) */
#gift-grid.gift-grid > .gift-card:only-child {
  width: min(260px, 100%) !important;
  max-width: 260px !important;
  justify-self: start !important;
}

/* 2) Symbols trigger: align indent with the top filters */
#advanced-panel #symbols-trigger.filter-btn,
#sticky-filters #advanced-panel #symbols-trigger.filter-btn,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn,
#advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline {
  padding: 10px 20px 10px 8px !important; /* same baseline as top filters */
  align-items: flex-start !important;
}

#advanced-panel #symbols-trigger .filter-label,
#advanced-panel #symbols-trigger .filter-value {
  width: 100% !important;
  text-align: left !important;
}

/* 3) Stop any bleed onto arrows/chevrons: clip inside button, keep ellipsis */
#sticky-filters .filters-bar .filter-btn,
.sticky-filters .filters-bar .filter-btn,
.filters-bar .filter-btn,
#advanced-panel #symbols-trigger.filter-btn {
  overflow: hidden !important;
}

.filters-bar .filter-value,
.filters-bar .filter-value-pill,
#advanced-panel #symbols-trigger .filter-value,
#advanced-panel #symbols-trigger .filter-value-pill {
  min-width: 0 !important;
  max-width: 100% !important;
}

.filters-bar .filter-value-text,
#advanced-panel #symbols-trigger .filter-value-text {
  max-width: 100% !important;
}

/* 3b) Grid columns must be shrinkable: otherwise long values push into the arrow column */
#sticky-filters,
.sticky-filters {
  --gp-filter-cols: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) var(--gp-adv-trigger-w, 56px);
}


/* =====================================================================
   GiftPay PATCH v35
   Fixes:
   2) "Символ" — одинаковые отступы/выравнивание с остальными фильтрами.
   3) Значения фильтров НЕ заходят на шевроны/стрелки: всегда обрезаем с "...".
   ===================================================================== */

/* Make filter columns shrinkable (prevents text forcing min-content width) */
#sticky-filters,
.sticky-filters{
  --gp-filter-cols: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) var(--gp-adv-trigger-w, 56px) !important;
}

/* Reserve space for chevrons on ALL filter buttons (including mobile rules) */
#sticky-filters .filters-bar .filter-btn:not(#advanced-trigger),
.sticky-filters .filters-bar .filter-btn:not(#advanced-trigger),
.filters-bar .filter-btn:not(#advanced-trigger){
  padding-left: 10px !important;
  padding-right: 36px !important;
  overflow: hidden !important; /* nothing may draw outside */
}

/* Chevron position: keep it inside the reserved padding */
#sticky-filters .filters-bar .filter-btn:not(#advanced-trigger)::before,
#sticky-filters .filters-bar .filter-btn:not(#advanced-trigger)::after,
.sticky-filters .filters-bar .filter-btn:not(#advanced-trigger)::before,
.sticky-filters .filters-bar .filter-btn:not(#advanced-trigger)::after,
.filters-bar .filter-btn:not(#advanced-trigger)::before,
.filters-bar .filter-btn:not(#advanced-trigger)::after{
  right: 14px !important;
}

/* 2) Symbols trigger must match other filter buttons (same padding + left alignment) */
#advanced-panel #symbols-trigger.filter-btn,
#sticky-filters #advanced-panel #symbols-trigger.filter-btn,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn{
  padding: 10px 36px 10px 10px !important;
  align-items: flex-start !important;
  overflow: hidden !important;
}

#advanced-panel #symbols-trigger .filter-label,
#advanced-panel #symbols-trigger .filter-value,
#advanced-panel #symbols-trigger .filter-value-text{
  width: 100% !important;
  text-align: left !important;
}

/* 3) Hard-stop for overflow + proper ellipsis on labels/values */
#sticky-filters .filters-bar .filter-label,
#sticky-filters .filters-bar .filter-value,
#sticky-filters .filters-bar .filter-value-text,
.sticky-filters .filters-bar .filter-label,
.sticky-filters .filters-bar .filter-value,
.sticky-filters .filters-bar .filter-value-text,
.filters-bar .filter-label,
.filters-bar .filter-value,
.filters-bar .filter-value-text,
#advanced-panel #symbols-trigger .filter-label,
#advanced-panel #symbols-trigger .filter-value,
#advanced-panel #symbols-trigger .filter-value-text{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Ensure flex children can actually shrink for ellipsis */
#sticky-filters .filters-bar .filter-value,
.sticky-filters .filters-bar .filter-value,
.filters-bar .filter-value,
#advanced-panel #symbols-trigger .filter-value{
  min-width: 0 !important;
}

#sticky-filters .filters-bar .filter-value-pill,
.sticky-filters .filters-bar .filter-value-pill,
.filters-bar .filter-value-pill,
#advanced-panel #symbols-trigger .filter-value-pill{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#sticky-filters .filters-bar .filter-btn--single .filter-value,
.sticky-filters .filters-bar .filter-btn--single .filter-value,
.filters-bar .filter-btn--single .filter-value{
  min-width: 0 !important;
  overflow: hidden !important;
}

#sticky-filters .filters-bar .filter-btn--single .filter-value-text,
.sticky-filters .filters-bar .filter-btn--single .filter-value-text,
.filters-bar .filter-btn--single .filter-value-text{
  min-width: 0 !important;
  max-width: 100% !important;
}


/* =====================================================================
   GiftPay PATCH v37
   Fixes:
   1) "Символ" — убрать искусственный сдвиг значения (должно быть 1-в-1 с верхними фильтрами).
   2) "Модель" при недоступности (когда коллекция не выбрана) — серый disabled вид (фон + текст).
   ===================================================================== */

/* 1) Remove legacy left-nudge inside Symbols value line */
#advanced-panel #symbols-trigger .filter-value,
#sticky-filters #advanced-panel #symbols-trigger .filter-value,
.sticky-filters #advanced-panel #symbols-trigger .filter-value,
#advanced-panel #symbols-trigger .filter-value-text,
#sticky-filters #advanced-panel #symbols-trigger .filter-value-text,
.sticky-filters #advanced-panel #symbols-trigger .filter-value-text{
  padding-left: 0 !important;
}

/* 2) Disabled Models button: clearly greyed out (when Collection isn't selected) */
#models-trigger:disabled{
  opacity: 1 !important;
  background: #1f1f1f !important;
  border-color: rgba(255,255,255,0.06) !important;
}

#models-trigger:disabled .filter-label{
  color: rgba(255,255,255,0.35) !important;
}

#models-trigger:disabled .filter-value,
#models-trigger:disabled .filter-value-text{
  color: rgba(255,255,255,0.45) !important;
}


/* =====================================================================
   GiftPay PATCH v38
   Fixes:
   - "Символ": паддинги/типографика 1-в-1 как у верхних фильтров (побеждает все legacy-правила).
   - "Модель" disabled: чуть темнее серый фон по фидбеку.
   ===================================================================== */

/* Symbols trigger — fully mirror .filter-btn baseline */
#advanced-panel #symbols-trigger.filter-btn,
#sticky-filters #advanced-panel #symbols-trigger.filter-btn,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn,
#advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline,
#sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline,
.sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline{
  padding: 10px 20px 10px 8px !important;
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 18px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  row-gap: 2px !important;
}

/* Make sure label/value sizing matches top filters */
#advanced-panel #symbols-trigger .filter-label,
#sticky-filters #advanced-panel #symbols-trigger .filter-label,
.sticky-filters #advanced-panel #symbols-trigger .filter-label{
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
}

#advanced-panel #symbols-trigger .filter-value,
#sticky-filters #advanced-panel #symbols-trigger .filter-value,
.sticky-filters #advanced-panel #symbols-trigger .filter-value{
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

/* Models disabled — slightly darker */
#models-trigger:disabled{
  background: #1a1a1a !important;
}

/* =====================================================================
   v40 — Sort button + bottom sheet (Price range + sorting)
   ===================================================================== */

/* Enable aux-trigger (was a placeholder) */
#aux-trigger{
  pointer-events: auto !important;
  user-select: none !important;
  border: none !important;
  box-shadow: none !important;
}


#aux-trigger:active{
  transform: scale(0.96) translateZ(0) !important;
}

#aux-trigger:focus-visible{
  outline: none !important;
  outline-offset: 0 !important;
}


#aux-trigger .aux-sort-icon{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  color: var(--tg-text, #f2f3f5) !important;
}

/* Sheet overlay */
.gp-sort-overlay{
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ui-menu-ms,260ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1));
}

.gp-sort-overlay.visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.gp-sort-open main{
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
  touch-action: none !important;
}

.gp-sort-sheet{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #282727;
  border-radius: 26px 26px 0 0;
  padding-top: 8px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  box-shadow: 0 -18px 60px rgba(0,0,0,0.55);
  transform: translate3d(0,100%,0);
  transition: transform var(--ui-menu-ms,260ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1));
  will-change: transform;
  max-height: calc(var(--tg-viewport-height,100vh) - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gp-sort-overlay.visible .gp-sort-sheet{
  transform: none;
}

.gp-sort-handle{
  width: 46px;
  height: 4px;
  border-radius: 999px;
  margin: 6px auto 12px;
  background: rgba(255,255,255,0.28);
}

.gp-sort-price-title{
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  margin: 0 0 8px;
}


.gp-sort-price-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.gp-sort-price-head .gp-sort-price-title{
  margin: 0;
}

.gp-sort-price-reset{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 900;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.gp-sort-price-reset:active{
  transform: scale(0.98);
}

.gp-sort-reset{
  width: 100%;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  margin-top: 12px;
  font-weight: 900;
  font-size: 15px;
  color: var(--tg-text, #f2f3f5);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.gp-sort-reset:active{
  transform: scale(0.99);
}


.gp-sort-price-row{
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 10px;
}

.gp-price-field{
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px 12px;
}

.gp-price-input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--tg-text, #f2f3f5);
  font-size: 15px;
  font-weight: 900;
  padding-right: 26px;
}

/* Hide number spinners */
.gp-price-input::-webkit-outer-spin-button,
.gp-price-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.gp-price-input[type=number]{
  -moz-appearance: textfield;
}

.gp-price-unit{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
}

.gp-sort-list{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.gp-sort-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
  background: transparent;
  border: 0;
  color: var(--tg-text, #f2f3f5);
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}


.gp-sort-text{
  flex: 1 1 auto;
}

.gp-sort-arrow{
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,0.55);
}

.gp-sort-item + .gp-sort-item{
  border-top: 1px solid rgba(255,255,255,0.06);
}

.gp-sort-radio{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.34);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
}

.gp-sort-radio::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 0;
}

.gp-sort-item.is-selected .gp-sort-radio{
  border-color: var(--tg-accent, #2AAE5D);
  background: var(--tg-accent, #2AAE5D);
}

.gp-sort-item.is-selected .gp-sort-radio::after{
  opacity: 1;
}

.gp-sort-apply{
  width: 100%;
  height: 52px;
  border-radius: 16px;
  border: 0;
  margin-top: 14px;
  font-weight: 900;
  font-size: 16px;
  color: var(--tg-button-text, #fff);
  background: var(--tg-accent, #2AAE5D);
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.gp-sort-apply:active{
  transform: scale(0.99);
}

/* Hide cards outside the selected price range */
.gift-card.gp-hidden{
  display: none !important;
}



/* =====================================================================
   GiftPay PATCH v33 (UI)
   1) Remove border around the Advanced (chevron) button.
   2) Symbols modal must look identical to other filter modals:
      - same background
      - search field with magnifier + border
      - square (not round) checkboxes
   ===================================================================== */

#advanced-trigger{
  border-color: transparent !important;
}

/* Symbols modal: same layout/styling as collections/models/backdrops */
#symbols-modal .modal{
  background: #282727 !important;
}

#symbols-modal .modal-header{
  padding: 18px 18px 12px !important;
}

#symbols-modal .modal-search{
  padding: 0 18px 10px !important;
}

#symbols-modal .modal-search .search-input{
  height: 46px !important;
  border-radius: 16px !important;
  background-color: var(--tg-bg-elevated) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  padding-left: 44px !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' stroke='rgba(148,155,164,1)' stroke-width='2' fill='none'/%3E%3Cline x1='15' y1='15' x2='20' y2='20' stroke='rgba(148,155,164,1)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 16px 50% !important;
  background-size: 16px 16px !important;

  color: rgba(255,255,255,0.92) !important;
  font-size: 15px !important;
}

#symbols-modal .modal-item{
  padding: 12px 18px !important;
  min-height: 74px !important;
  align-items: center !important;
}

#symbols-modal .item-name{
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#symbols-modal .modal-footer{
  border-top: none !important;
  padding: 14px 18px calc(14px + 0px) !important;
  background: transparent !important;
}

/* Symbols modal checkbox: make it square like the other modals */
#symbols-modal .modal-check{
  background: transparent !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  border: 1.6px solid rgba(255,255,255,0.22) !important;
  box-shadow: none !important;
  margin-right: 12px !important;
  border-width: 1.6px !important;
  transition: background-color 220ms var(--ease-out),border-color 220ms var(--ease-out) !important;
}

#symbols-modal .modal-check-icon{
  width: 15px !important;
  height: 11px !important;
  transform: scale(0) !important;
  transition: transform 180ms var(--ease-out) !important;
  opacity: 1 !important;
}

#symbols-modal .modal-item.selected .modal-check{
  background: var(--tg-accent) !important;
  border-color: var(--tg-accent) !important;
}

#symbols-modal .modal-item.selected .modal-check-icon{
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PATCH v6: Sort sheet + Symbols modal UI parity fixes
   - Sort sheet: same footer buttons layout (side-by-side), remove grey handle,
     make "Сброс цены" look like a real button, and match open/close animations.
   - Symbols modal: make overlay + buttons behave/look exactly like other filter modals.
   ───────────────────────────────────────────────────────────────────────────── */

/* Sort sheet: allow close animation (visibility delayed until opacity finishes). */
.gp-sort-overlay {
  transition:
    opacity var(--ui-menu-ms,260ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    visibility 0s linear var(--ui-menu-ms,260ms) !important;
}

.gp-sort-overlay.visible {
  transition:
    opacity var(--ui-menu-ms,260ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
    visibility 0s !important;
}

/* Sort sheet: make layout match modal patterns (scrollable body + fixed footer). */
.gp-sort-sheet {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.gp-sort-body {
  padding: 8px 18px 12px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.gp-sort-footer.modal-footer {
  border-top: none !important;
  background: transparent !important;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Sort sheet footer buttons: match filter modals (shape + height). */
.gp-sort-sheet .modal-btn {
  border-radius: 14px !important;
  height: 54px !important;
}

/* "Сброс цены" must look like an actual button (accent/green). */
.gp-sort-price-reset {
  background-color: var(--tg-accent) !important;
  background-image: var(--gp-accent-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
}

.gp-sort-price-reset:hover,
.gp-sort-price-reset:active {
  background-color: var(--tg-accent) !important;
  background-image: var(--gp-accent-bg) !important;
}

/* Symbols modal: make it behave like other filter modals (overlay + buttons). */
#symbols-modal.modal-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  opacity: 1 !important;
  transition: none !important;
}

#symbols-modal.modal-overlay::before {
  content: "" !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity var(--ui-menu-ms,280ms) var(--ease-out,cubic-bezier(0.16,1,0.3,1)) !important;
}

#symbols-modal.modal-overlay.open,
#symbols-modal.modal-overlay.closing {
  opacity: 1 !important;
}

#symbols-modal.modal-overlay.open::before {
  opacity: 1 !important;
}

#symbols-modal.modal-overlay.closing::before {
  opacity: 0 !important;
  transition: none !important;
}

#symbols-modal .modal-btn {
  border-radius: 14px !important;
  height: 54px !important;
}

html.tg-phone #symbols-modal .modal {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 26px 26px 0 0 !important;
}

/* PATCH v6.1: Sort overlay should match other slide-in menus (no blur, dim via ::before, no sheet fade). */
.gp-sort-overlay {
  opacity: 1 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.gp-sort-overlay::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--ui-menu-ms,260ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
}

.gp-sort-overlay.visible::before {
  opacity: 1 !important;
}

/* PATCH v6.2: Ensure Symbols modal slide animation + geometry fully matches other filter modals. */
#symbols-modal .modal {
  background: #282727 !important;
  height: calc(100% - 4px) !important;
  max-height: calc(100% - 4px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  transform: translate3d(0,100%,0) !important;
  transition: transform var(--ui-menu-ms,260ms) var(--ease-out,cubic-bezier(0.22,1,0.36,1)) !important;
  will-change: transform !important;
}

/* PATCH v6.3: Fix Symbols modal not opening (ID selector overrides generic open rule). */
#symbols-modal.modal-overlay.open .modal {
  transform: none !important;
}

#symbols-modal.modal-overlay.closing .modal {
  transform: translate3d(0,100%,0) !important;
}


/* =====================================================================
   PATCH v8 (UI polish)
   1) Sort sheet: remove arrow glyphs, add standard close (X) in header.
   2) Inputs: outline-only everywhere (no background fill).
   3) Price reset button: compact, ghost style (moved inside price section).
   ===================================================================== */

/* Sort sheet header spacing to match other filter modals */
.gp-sort-header.modal-header{
  padding: 18px 18px 12px !important;
}

/* Price reset: compact ghost button */
.gp-sort-price-reset{
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.88) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.gp-sort-price-reset:active{
  transform: scale(0.98) !important;
  opacity: 0.92 !important;
}

/* Price fields: outline only */
.gp-price-field{
  background: transparent !important;
  background-color: transparent !important;
}

/* Global: remove fill on inputs (keep borders/icons) */
.search-input,
.modal-search .search-input,
.balance-modal-input-wrap .search-input,
.tonkeeper-input,
.gp-price-input{
  background-color: transparent !important;
}

/* Wrapper search bar should not look "filled" */
.advanced-search{
  background: transparent !important;
  background-color: transparent !important;
}

/* Balance topup input: ensure visible outline */
.balance-modal-input-wrap .search-input{
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Symbols / other modal searches: keep magnifier icon but remove fill */
#collections-modal .modal-search .search-input,
#models-modal .modal-search .search-input,
#backdrops-modal .modal-search .search-input,
#symbols-modal .modal-search .search-input{
  background-color: transparent !important;
}



/* Generic form controls: no fill */
input, textarea, select{
  background-color: transparent !important;
}


/* =====================================================================
   GiftPay PATCH v9 (UI fixes per screenshots)
   1) Sort sheet: remove divider lines, make "Сбросить цену" green by default,
      and keep the close (X) on the right side of the header.
   2) Arrow button: remove hover outline.
   ===================================================================== */

/* Sort sheet header: keep close button in-flow on the right */
.gp-sort-header.modal-header{
  border-bottom: none !important;
}

.gp-sort-header .modal-title-wrap{
  padding-right: 0 !important; /* close button is not absolute here */
}

.gp-sort-header .modal-close-btn{
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-left: 12px !important;
  flex: 0 0 auto !important;
}

/* Remove white divider lines inside the sort options list */
.gp-sort-list{
  border-top: none !important;
  border-bottom: none !important;
}

.gp-sort-item + .gp-sort-item{
  border-top: none !important;
}

/* Reset price button: green, no outline/border */
.gp-sort-price-reset{
  background: var(--tg-accent, #2AAE5D) !important;
  background-image: var(--gp-accent-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

.gp-sort-price-reset:hover,
.gp-sort-price-reset:active,
.gp-sort-price-reset:focus,
.gp-sort-price-reset:focus-visible{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Arrow button (advanced trigger): no hover outline */
#advanced-trigger:hover,
#advanced-trigger:focus,
#advanced-trigger:focus-visible{
  border-color: var(--tg-border-subtle) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Also prevent any focus ring on aux (sort) icon button */
#aux-trigger:hover,
#aux-trigger:focus,
#aux-trigger:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* =====================================================================
   GP UI PATCH v30 – spacing parity + tg-phone truncation + topup input outline
   Fixes:
   1) Equal vertical spacing (banner ↔ filters ↔ search ↔ reset ↔ grid)
   2) tg-phone: more room + reliable ellipsis (Bunny..., placeholder)
   3) Topup input: restore visible outline
===================================================================== */

:root{ --gp-vgap: 8px; }

/* Equal vertical rhythm around banner / filters / reset / grid */
#top-banner.top-promo-banner,
.top-promo-banner{
  margin-bottom: var(--gp-vgap) !important;
}

#sticky-filters,
.sticky-filters{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: var(--gp-vgap) !important; /* space before grid */
}

/* Use a shared grid template (overrides old fixed 1fr/1fr/1fr) */
#sticky-filters .filters-bar,
.sticky-filters .filters-bar,
.filters-bar{
  margin-bottom: 0 !important;
  grid-template-columns: var(--gp-filter-cols, 1fr 1fr 1fr 56px) !important;
}

/* Controls distance between filters row and search row */
#advanced-panel .advanced-panel-gap,
#sticky-filters #advanced-panel .advanced-panel-gap,
.sticky-filters #advanced-panel .advanced-panel-gap{
  height: var(--gp-vgap) !important;
}

/* Distance between search row and reset button */
#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-vgap) !important;
  margin-bottom: 0 !important;
}

/* tg-phone: give 1st/2nd columns more width so texts are not eaten */
html.tg-phone #sticky-filters,
html.tg-phone .sticky-filters{
  --gp-filter-cols: 1.35fr 1.35fr 0.9fr 56px;
}

@media (max-width: 420px){
  #sticky-filters,
  .sticky-filters{
    --gp-filter-cols: 1.35fr 1.35fr 0.9fr 56px;
  }

  /* A bit less padding inside the search input to fit the full placeholder */
  #advanced-search-input.search-input,
  #advanced-panel .advanced-search .search-input,
  #sticky-filters #advanced-panel .advanced-search .search-input,
  .sticky-filters #advanced-panel .advanced-search .search-input{
    padding-left: 30px !important;
    padding-right: 28px !important;
  }
}

/* iOS/phone: make ellipsis reliable for selected values */
.filters-bar .filter-btn--single .filter-value,
.filters-bar .filter-btn--single .filter-value-pill,
.filters-bar .filter-btn--single .filter-value-text{
  min-width: 0 !important;
}

.filters-bar .filter-value-text{
  display: block !important;
}

/* Topup sheet: restore input outline */
#topup-menu-sheet .tonkeeper-input{
  border: 1px solid rgba(255,255,255,0.12) !important;
}

#topup-menu-sheet .tonkeeper-input:focus{
  border: 1px solid rgba(42,174,93,0.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(42,174,93,0.16) !important;
}

/* v30.1: Advanced row uses the same columns; prevent panel from adding extra vertical margins */
#advanced-panel.advanced-panel,
#sticky-filters #advanced-panel.advanced-panel,
.sticky-filters #advanced-panel.advanced-panel,
#advanced-panel.advanced-panel.open,
#advanced-panel.advanced-panel.closing,
#sticky-filters #advanced-panel.advanced-panel.open,
#sticky-filters #advanced-panel.advanced-panel.closing,
.sticky-filters #advanced-panel.advanced-panel.open,
.sticky-filters #advanced-panel.advanced-panel.closing{
  margin-bottom: 0 !important;
}

#advanced-panel .advanced-row,
#sticky-filters #advanced-panel .advanced-row,
.sticky-filters #advanced-panel .advanced-row{
  grid-template-columns: var(--gp-filter-cols, 1fr 1fr 1fr 56px) !important;
  gap: var(--gp-filter-gap, 8px) !important;
}

/*
  ============================================================================
  HARD FIX: prevent global spacing “wobble” when ANY overlay/menu opens.

  Symptom: opening/closing modals/menus toggles `.overlay-open` on <html>/<body>,
  which (via earlier legacy rules) changes CSS vars / margins / overflow and
  makes the whole layout “breathe” (distances grow/shrink).

  Goal: overlay state must NOT change the layout behind the overlay.
  ============================================================================
*/

/* 1) Never let `.overlay-open` change document overflow model (no scrollbar/layout shifts) */
html.overlay-open,
html.overlay-open body,
body.overlay-open{
  overflow: hidden !important;
}

html.overlay-open main,
body.overlay-open main{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

/* 2) Freeze the spacing variable used across the sticky filters block */
html, body{
  /* single source of truth for compact layout */
  --gp-vgap-stable: 8px;
}

#sticky-filters,
.sticky-filters,
#sticky-filters.advanced-open,
.sticky-filters.advanced-open,
html.overlay-open #sticky-filters,
body.overlay-open #sticky-filters,
html.overlay-open .sticky-filters,
body.overlay-open .sticky-filters,
html.overlay-open #sticky-filters.advanced-open,
body.overlay-open #sticky-filters.advanced-open,
html.overlay-open .sticky-filters.advanced-open,
body.overlay-open .sticky-filters.advanced-open{
  --gp-vgap: var(--gp-vgap-stable) !important;
  padding-top: var(--gp-vgap) !important;
  padding-bottom: var(--gp-vgap) !important;
}

/* 3) Prevent background (sticky filters) transitions from animating when overlays open/close */
html.overlay-open #sticky-filters,
body.overlay-open #sticky-filters,
html.overlay-open .sticky-filters,
body.overlay-open .sticky-filters{
  transition: none !important;
}

html.overlay-open #sticky-filters *,
body.overlay-open #sticky-filters *,
html.overlay-open .sticky-filters *,
body.overlay-open .sticky-filters *{
  transition: none !important;
}