/* ---------- CONTAINERS ---------- */

.shop-container {
  max-width: 72rem; /* max-w-6xl */
  margin-left: auto;
  margin-right: auto; /* mx-auto */
  padding: 3rem; /* p-12 */
}

.product-grid-wrapper {
  margin-left: auto;
  margin-right: auto; /* mx-auto */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; /* py-2 */
}

.product-grid {
  display: flex; /* flex */
  align-items: center; /* items-center */
  flex-wrap: wrap; /* flex-wrap */
}

/* ---------- PRODUCT CARD ---------- */

.product-item {
  flex-shrink: 0; /* flex-shrink-0 */
  width: 100%; /* w-full */
}

/* Medium screens (md) */
@media (min-width: 768px) {
  .product-item {
    width: 33.333333%; /* md:w-1/3 */
    padding: 0.5rem; /* md:p-2 */
  }
}

/* Extra large screens (xl) */
@media (min-width: 1280px) {
  .product-item {
    width: 25%; /* xl:w-1/4 */
  }
}

/* ---------- PRODUCT IMAGE LINK ---------- */

.product-link {
  display: block; /* block */
  aspect-ratio: 1 / 1; /* aspect-square */
  background-color: #f3f4f6; /* bg-gray-100 */
  border-radius: 0.75rem; /* rounded-xl */
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem; /* rounded-xl */
  transition: box-shadow 0.2s ease;
}

.product-image:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1); /* hover:shadow-lg */
}

/* ---------- TEXT ---------- */

.product-name {
  padding-top: 0.75rem; /* pt-3 */
}

.product-price {
  padding-top: 0.25rem; /* pt-1 */
  color: #9ca3af; /* text-gray-400 */
}