/* Home / Best Products — latest Figma 1430:2911.
   Both columns sit inside the shared, symmetric section padding. */
.best_product.home_best_products {
  display: block;
  height: auto;
  min-height: 0;
  padding: var(--y-layout-section-space) var(--home-gutter);
  background: var(--y-color-surface-default);
}
.home_best_products_layout {
  display: grid;
  grid-template-columns: minmax(0, 631fr) minmax(0, 880fr);
  width: 100%;
  max-width: 1607px;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
/* Figma's 631 × 692 film slot keeps its own ratio, not the copy's height. */
.home_best_products_film { position: relative; width: 100%; min-width: 0; min-height: 0; aspect-ratio: 631 / 692; overflow: hidden; background: var(--y-color-surface-soft); }
.home_best_products_film video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.home_best_products_content {
  display: flex;
  min-width: 0;
  padding: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--y-space-64);
}
.home_best_products_heading { text-align: left; }
.home_best_products_heading h2 { margin: 0 0 var(--y-space-24); color: var(--y-color-text-accent); }
.home_best_products_heading p { max-width: 650px; margin: 0; color: var(--y-color-text-primary); word-break: keep-all; }

.home_best_products .home_best_products_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  gap: var(--y-space-32);
  align-items: start;
}
.home_best_product_card { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: var(--y-space-24); color: var(--y-color-text-primary); text-align: center; text-decoration: none; }
/* Keep the established 261px card width but use a calmer, shorter image
   stage; all three cards retain one baseline and one stage size. */
.home_best_product_image { display: flex; align-items: flex-end; justify-content: center; width: min(100%, 261px); aspect-ratio: 261 / 340; overflow: hidden; }
.home_best_product_image img { display: block; width: auto; height: 82%; max-width: 100%; object-fit: contain; transition: transform 450ms cubic-bezier(.22,1,.36,1); }
.home_best_product_card:nth-child(2) .home_best_product_image img { height: 72%; }
.home_best_product_card:nth-child(3) .home_best_product_image img { height: 70%; }
/* The supplied photographs have a white square canvas. The old 455px image
   height scaled a square source far beyond its narrow card, magnifying the
   bottles and clipping their sides. Fit to the shorter shared stage. */
.home_best_products .home_best_product_image img.product_photo_ai {
  width: auto;
  height: min(72%, 250px);
  max-width: none;
  aspect-ratio: 1;
  object-fit: contain;
}
.home_best_product_card:hover img, .home_best_product_card:focus-visible img { transform: translateY(-6px); }
/* Product-name type and internal spacing come from the shared y_product_name
   role in figma-typography.css. */

/* Tablet: the same padded section, stacking film above products. */
@media (max-width: 1024px) {
  .home_best_products_layout { display: flex; flex-direction: column; gap: var(--y-layout-section-space); }
  .home_best_products_film { aspect-ratio: 16 / 9; }
  .home_best_products_content { width: 100%; padding: 0; justify-content: flex-start; gap: var(--y-space-48); }
}

/* Phones: the three products become a swipeable row inside the gutter. */
@media (max-width: 520px) {
  .home_best_products_film { aspect-ratio: 4 / 3; }
  .home_best_products .home_best_products_grid {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: var(--y-space-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--home-gutter);
    scrollbar-width: none;
  }
  .home_best_products .home_best_products_grid::-webkit-scrollbar { display: none; }
  .home_best_product_card { flex: 0 0 62%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .home_best_product_image img { transition: none; } }