.promotions {
  grid-template-columns: minmax(0, 179fr) minmax(0, 170fr);
  gap: 2px;
}

.offer-stack {
  grid-template-rows: 64px 60px;
  gap: 6px;
}

.promotion-component {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}

.promotion-component img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

@media (max-width: 340px) {
  .promotions {
    grid-template-columns: minmax(0, 179fr) minmax(0, 170fr);
  }

  .offer-stack {
    display: grid;
  }
}

.product-card--component {
  position: relative;
  display: block;
  width: 100%;
  height: 132px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: none;
}

.product-card--component .product-photo {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 82px;
  height: 82px;
  border-radius: 6px;
}

.product-card--component .product-info {
  position: absolute;
  left: 102px;
  top: 14px;
  width: 154px;
  height: 82px;
}

.product-card--component .product-info h3 {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.product-card--component .tags {
  position: absolute;
  left: 0;
  top: 24px;
  margin: 0;
}

.product-card--component .product-info > p {
  position: absolute;
  left: 0;
  top: 44px;
  margin: 0;
  font-size: 10px;
  line-height: 10px;
}

.product-card--component .price {
  position: absolute;
  left: 0;
  top: 60px;
  height: 20px;
  align-items: flex-end;
}

.product-card--component .price strong {
  font-size: 20px;
  line-height: 20px;
}

.product-card--component .more {
  right: 12px;
  top: 7px;
}

.product-card--component .buy {
  right: 12px;
  top: 68px;
}

.product-card--component .orders {
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  height: 14px;
}

.product-card--component .orders em {
  margin-left: auto;
}

.product-card-svg {
  position: relative;
  width: 100%;
  height: 132px;
  overflow: hidden;
  border-radius: 8px;
}

.product-card-svg > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.product-card-buy-overlay {
  position: absolute;
  right: 12px;
  top: 68px;
  width: 56px;
  height: 28px;
  padding: 0;
  border-radius: 53px;
  background: transparent;
}

.hero {
  height: 148px;
  touch-action: pan-y;
  cursor: grab;
}

.hero.is-dragging {
  cursor: grabbing;
}

.banner-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 320ms ease;
  will-change: transform;
}

.banner-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.hero > .banner-pagination-state {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 6px;
  width: 22px;
  height: 5px;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
}

.status-time {
  display: block;
  width: 95px;
  height: 22px;
  object-fit: contain;
}

.search-box {
  position: relative;
  padding: 0;
  gap: 0;
  background: transparent;
  box-shadow: none;
}

.search-visual {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 322px;
  height: 72px;
  max-width: none;
  pointer-events: none;
}

.search-box .search-hotspot {
  position: absolute;
  top: 0;
  height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
}

.search-city-hotspot {
  left: 12px;
  width: 82px;
}

.search-query-hotspot {
  left: 96px;
  width: 140px;
}

.search-submit-hotspot {
  right: 4px;
  width: 48px;
}

.tab-active-art {
  display: none;
  height: 25px;
  width: auto;
}

.tabs button.active .tab-label {
  display: none;
}

.tabs button.active .tab-active-art {
  display: block;
}

.tabs button.active:after {
  display: none;
}

.tabs-viewport {
  position: relative;
  margin: 0 12px;
  overflow: hidden;
}

.tabs {
  gap: 12px;
  cursor: grab;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px 0 10px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: pan-x;
}

.tabs.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs button {
  flex: 0 0 auto;
}

.bottom-nav .nav-icon {
  display: block;
  width: 28px;
  height: 45px;
  object-fit: contain;
}

.bottom-nav .nav-icon-active {
  display: none;
}

.bottom-nav .nav-icon[hidden] { display: none !important; }

.bottom-nav button.active .nav-icon-active {
  display: block;
}

.bottom-nav button.active .nav-icon-default {
  display: none;
}

/* Bottom navigation liquid reveal. The original 28x45 SVGs remain the exact
   settled artwork; animation is clipped to their upper 28px icon region. */
.bottom-nav button { position:relative; }
.bottom-nav button .nav-liquid-icon,
.bottom-nav button .nav-active-icon,
.bottom-nav button .nav-default-icon,
.bottom-nav button .nav-default-label,
.bottom-nav button .nav-active-label {
  position:absolute;
  left:50%;
  top:0;
  width:28px;
  height:45px;
  transform:translateX(-50%);
  pointer-events:none;
}
.bottom-nav button .nav-liquid-icon { height:28px; display:none; overflow:visible; }
.bottom-nav button .nav-active-icon,
.bottom-nav button .nav-default-icon { display:none; clip-path:inset(0 0 17px 0); }
.bottom-nav button .nav-default-label,
.bottom-nav button .nav-active-label {
  display:none;
  clip-path:inset(32px 0 0 0);
  animation:none!important;
  transition:none!important;
  will-change:auto;
}
.bottom-nav button[data-motion-state="animating"] .nav-static-default { display:none; }
.bottom-nav button[data-motion-state="animating"] .nav-static-active { display:none; }
.bottom-nav button[data-motion-state="animating"] .nav-liquid-icon,
.bottom-nav button[data-motion-state="animating"] .nav-default-icon,
.bottom-nav button[data-motion-state="animating"] .nav-active-label { display:block; }
.bottom-nav button[data-motion-state="selected"] .nav-active-icon,
.bottom-nav button[data-motion-state="selected"] .nav-active-label { display:block; }
.bottom-nav button[data-motion-state="selected"] .nav-static-default { display:none; }
.bottom-nav button[data-motion-state="unselected"] .nav-default-icon,
.bottom-nav button[data-motion-state="unselected"] .nav-default-label { display:block; }
.bottom-nav button[data-motion-state="unselected"] .nav-static-active { display:none; }
.bottom-nav button[data-motion-state="unselected"] .nav-static-default { display:none; }
.nav-liquid-base { fill:rgba(0,0,0,.15); }
.nav-liquid-a { fill:#c0adff; }
.nav-liquid-b { fill:#9d79ff; }
.nav-liquid-final { fill:#916aff; }
.nav-liquid-detail { will-change:transform; }
.nav-liquid-layer { will-change:clip-path; }
.app-shell {
  width: 375px;
  max-width: none;
  height: 812px;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.page-scroll {
  position: absolute;
  top: 98px;
  right: 0;
  bottom: 90px;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  touch-action: none;
  cursor: grab;
}

.page-scroll > main {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.page-scroll::-webkit-scrollbar {
  display: none;
}

.page-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}

.bottom-nav {
  position: absolute;
  background: #fff;
}

.topbar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  background:
    radial-gradient(ellipse at 8% -18%, rgba(226, 218, 255, 0.72) 0%, rgba(238, 233, 255, 0.34) 42%, transparent 72%),
    radial-gradient(ellipse at 92% -12%, rgba(255, 225, 244, 0.72) 0%, rgba(255, 239, 248, 0.34) 44%, transparent 74%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}

.device-stage { position:relative; width:375px; height:812px; margin:auto; }
.device-frame { display:none; }
@media (min-width:700px) and (min-height:850px) {
  html,body { height:100%; }
  body { display:grid; place-items:center; overflow:hidden; }
  .device-stage { width:475px; height:903px; transform:scale(.9); }
  .device-stage .app-shell { position:absolute; z-index:1; left:57px; top:44px; }
  .device-frame { position:absolute; z-index:2; inset:0; display:block; width:475px; height:903px; object-fit:fill; mix-blend-mode:multiply; pointer-events:none; user-select:none; }
}
@media (min-width:700px) and (min-height:930px) {
  .device-stage { transform:none; }
}