/* Ajustes visuales de la entrega v57. */
.homepage-announcement[hidden],
.beauty-videos[hidden],
.store-reviews[hidden],
.empty-state[hidden],
.load-more[hidden] {
  display: none !important;
}

.categories {
  flex-wrap: wrap;
  overflow: visible;
  padding: 24px 0 30px;
}

.category {
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.category:hover {
  transform: translateY(-1px);
}

.products-grid {
  align-items: stretch;
}

.card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.product-image {
  height: 235px;
  padding: 12px;
  background: #fff;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.product-name {
  min-height: 44px;
  line-height: 1.35;
}

.card-bottom {
  margin-top: auto;
  padding-top: 4px;
}

.main-product-image {
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: clamp(14px, 2vw, 28px);
  background: #fff;
}

.main-product-image img,
.image-thumbnail img {
  object-fit: contain;
  object-position: center;
}

.image-thumbnails {
  padding-bottom: 3px;
}

.quantity-picker button,
.quantity-picker output {
  color: #27131d;
  -webkit-text-fill-color: #27131d;
}

@media (max-width: 850px) {
  .categories {
    flex-wrap: nowrap;
    margin-right: -24px;
    padding-right: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

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

  .category {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .product-image {
    height: 190px;
    padding: 10px;
  }
}

@media (max-width: 620px) {
  .categories {
    margin-right: -16px;
    padding-right: 16px;
  }

  .product-image {
    height: 158px;
    padding: 8px;
  }

  .product-name {
    min-height: 36px;
  }

  .main-product-image {
    min-height: 0;
  }
}

@media (max-width: 390px) {
  .products-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-image {
    height: 260px;
    padding: 14px;
  }

  .product-name {
    min-height: 0;
    font-size: 14px;
  }
}