/*----------------------------------------
    Equal-height product grids
        - Opt-in via .q2u-eq-products on the row
        - Square media so cards line up regardless
          of each photo's aspect ratio
-----------------------------------------*/

/* Only ever target card wrappers — a bare `> *` also matches non-rendered
   siblings such as <style>, forcing their contents to display as text. */

.q2u-eq-products > .product-wrap,
.q2u-eq-products > * > .product-wrap {
    display: flex;
    width: 100%;
}

.q2u-eq-products .product {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.q2u-eq-products .product-media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    margin: 0;
    background-color: #fff;
}

.q2u-eq-products .product-media > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.q2u-eq-products .product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hover: matches the category tiles — card lifts, shadow deepens, photo eases in */

.q2u-eq-products .product {
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.q2u-eq-products .product-wrap:hover .product {
    transform: translateY(-4px);
    border-color: #e3d9bb;
    box-shadow: 0 16px 34px rgba(51, 51, 51, 0.16);
}

.q2u-eq-products .product-media img {
    transition: transform 0.6s, opacity 0.4s;
}

.q2u-eq-products .product-wrap:hover .product-media img {
    transform: scale(1.06);
}

.q2u-eq-products .product-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Push the price block to a common baseline across the row */

.q2u-eq-products .product-pa-wrapper {
    margin-top: auto;
    padding-top: 0.6rem;
}

.q2u-eq-products .product-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Breathing room under a product grid. Both blocks that use this class
   (Best sellers, Recently viewed) end flush with whatever follows —
   including the footer when they are the last section on the page. */

.q2u-eq-products {
    padding-bottom: 5rem;
}

@media (max-width: 767px) {
    .q2u-eq-products {
        padding-bottom: 3rem;
    }
}