.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 28px; }
.product-card { display: flex; min-width: 0; flex-direction: column; gap: 8px; color: var(--foreground); }
.product-card[hidden] { display: none; }
.product-card-image { display: flex; aspect-ratio: 1; align-items: center; justify-content: center; overflow: hidden; border-radius: 14px; background: var(--muted); }
.product-card-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product-card-details { display: flex; flex-direction: column; gap: 4px; }
.product-card-brand { font-size: 12px; font-weight: 700; line-height: 1.333333; }
.product-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; color: var(--foreground); text-decoration: none; }
.product-card-login { font-size: 14px; line-height: 1.428571; color: var(--muted-foreground); text-decoration: underline; }
.product-card-pack { font-size: 12px; line-height: 1.333333; color: var(--muted-foreground); }
.product-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #26834750 transparent; padding-bottom: 12px; }
.product-track > .product-card { flex: 0 0 calc((100% - 12px) / 2); scroll-snap-align: start; }
@media(min-width:768px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  .product-card { gap: 10px; }
  .product-card-brand { font-size: 13px; line-height: 1.5; }
  .product-card-name { font-size: 14px; }
  .product-track { gap: 24px; }
  .product-track > .product-card { flex-basis: calc((100% - 72px) / 4); }
}

@media(min-width:768px) and (max-width:1023px) {
  #best-sellers .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #promotions .product-track > .product-card { flex-basis: calc((100% - 48px) / 3); }
}
@media(min-width:1024px) {
  #best-sellers .product-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  #promotions .product-track > .product-card { flex-basis: calc((100% - 120px) / 6); }
}