.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.app-body {
  display: flex;
  flex-direction: column;
  min-height: var(--vh);
  min-height: 100dvh;
}

.app-main {
  flex: 1;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--sp-4));
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

@media (min-width: 960px) {
  .app-main {
    padding-bottom: var(--sp-8);
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}

@media (min-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}