/* Product Grid — WooCommerce product cards on a dark background */

.product-grid__list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
}

.product-grid__item {
   display: flex;
   flex-direction: column;
   background-color: #1a1a1a;
   border-radius: 2px;
   overflow: hidden;
   transition: transform 0.25s ease;
   border: 1px solid #5C403F;
}

.product-grid__item:hover {
   transform: translateY(-2px);
}

.product-grid__media {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 28px 24px;
}

.product-grid__media img {
   display: block;
   width: 100%;
   height: 260px;
   object-fit: contain;
}

.product-grid__body {
   display: flex;
   flex-direction: column;
   padding: 0 24px 24px;
}

.product-grid__title {
   margin: 0 0 16px;
   font-size: 18px;
   line-height: 1.4;
   font-weight: 700;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.product-grid__title a {
   color: #fff;
   text-decoration: none;
}

.product-grid__title a:hover {
   text-decoration: underline;
   color: #fff;
}

.product-grid__divider {
   display: block;
   width: 100%;
   height: 1px;
   background-color: rgba(255, 255, 255, 0.2);
   margin-bottom: 16px;
}

.product-grid__view-details {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   justify-content: space-between;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.5px;
   color: rgba(255, 255, 255, 0.85);
   text-decoration: none;
}

.product-grid__view-details-arrow {
   color: #e2231a;
   transition: transform 0.25s ease;
}

.product-grid__view-details:hover {
   color: #fff;
}

.product-grid__view-details:hover .product-grid__view-details-arrow {
   transform: translateX(4px);
}

/* Small tablet */
@media (min-width: 480px) {

   .product-grid__list--cols-2,
   .product-grid__list--cols-3,
   .product-grid__list--cols-4,
   .product-grid__list--cols-5 {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Tablet */
@media (min-width: 768px) {

   .product-grid__list--cols-3,
   .product-grid__list--cols-4,
   .product-grid__list--cols-5 {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* Desktop */
@media (min-width: 1024px) {
   .product-grid__list--cols-2 {
      grid-template-columns: repeat(2, 1fr);
   }

   .product-grid__list--cols-3 {
      grid-template-columns: repeat(3, 1fr);
   }

   .product-grid__list--cols-4 {
      grid-template-columns: repeat(4, 1fr);
   }

   .product-grid__list--cols-5 {
      grid-template-columns: repeat(5, 1fr);
   }
}