/* Category page product cards: match the Homepage (#homePageQuickTabs) card
   design exactly, on both desktop and mobile. Both contexts render the same
   _ProductBox.cshtml partial — Homepage additionally pins the picture to a
   fixed 160px height with square image corners, drops top/bottom padding on
   .product-item, and adds a hover shadow. Mirror all of that here so
   category cards match 1:1 at every breakpoint. */

.category-page .product-grid {
    padding: 15px !important;
}

@media (min-width: 1201px) {
    .category-page .product-grid .item-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .category-page .product-grid {
        padding: 40px !important;
    }
}

.category-page .item-box .picture {
    padding: 0 !important;
    height: 160px !important;
}

.category-page .item-box .picture img,
.category-page .item-box .picture .swiper,
.category-page .item-box .picture .swiper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
}

.category-page .item-box {
    overflow: hidden !important;
}

.category-page .product-item {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.category-page .product-grid .item-box:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
}

.product-grid .item-box .buttons .ajax-cart-button-wrapper button {
    width: auto !important;
    padding: 9px !important;
}

/* Homepage's Add To Cart button stays sized to its content instead of
   stretching to fill the row (a ≤480px rule elsewhere sets flex:1 on it,
   which made the category card's button balloon to fill the remaining
   row width). Give it breathing room instead of a bare content-only box. */
@media (max-width: 767px) {
    .category-page .product-box-add-to-cart-button {
        flex: 0 1 auto !important;
        padding: 0 18px !important;
    }
}