/*
 * Gigglori product-card equal-height / CTA alignment fix
 * 2026-08-26
 *
 * This stylesheet is already loaded globally by includes/header.php.
 * Layout only: no PHP, cart, checkout, pricing, product or payment logic changes.
 */

/* =========================================================
   ALL STANDARD PRODUCT CARDS
   Cart recommendations / Shop / Wishlist / related rails
   ========================================================= */

.product-grid,
.catalogue-grid,
.horizontal-products,
.collection-products {
    align-items: stretch;
}

/* Make every card fill the height provided by its grid/rail row. */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    min-width: 0;
}

/* Image area keeps its existing design and never affects text alignment. */
.product-card .product-media {
    flex: 0 0 auto;
    min-height: 0;
}

/* The information area becomes a vertical flex column. */
.product-card .product-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/* Keep brand / stock row at a consistent height. */
.product-card .product-meta {
    flex: 0 0 auto;
    min-height: 16px;
}

/*
 * Product names always reserve exactly two lines.
 * Long titles are clamped instead of pushing price/buttons down.
 */
.product-card .product-info h3 {
    display: block;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    margin: 8px 0 5px;
    overflow: hidden;
}

.product-card .product-info h3 a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Rating row always occupies the same vertical space. */
.product-card .rating-row {
    flex: 0 0 auto;
    min-height: 20px;
    margin: 6px 0;
}

/* Prices line up across cards. */
.product-card .price {
    flex: 0 0 auto;
    min-height: 26px;
    margin-top: 7px;
}

.product-card .price strong,
.product-card .old-price {
    white-space: nowrap;
}

/* Delivery row reserves a consistent area on normal cards. */
.product-card .delivery-note {
    flex: 0 0 auto;
    min-height: 28px;
    margin: 7px 0 12px;
    line-height: 1.25;
}

/*
 * Put every CTA at the bottom of the card.
 * Covers both:
 * - <form class="card-cart"> Add to cart
 * - <a class="btn"> Choose options
 */
.product-card .product-info > form.card-cart,
.product-card .product-info > .btn {
    width: 100%;
    margin-top: auto;
}

.product-card .card-cart {
    display: block;
    width: 100%;
}

.product-card .card-cart .btn,
.product-card .product-info > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-bottom: 0;
    text-align: center;
}

/* =========================================================
   COMPACT CARDS
   Cart "You may also like" and other horizontal rails
   ========================================================= */

.product-card.compact-card .product-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.product-card.compact-card .product-info h3 {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}

/* Existing compact design hides delivery text. Do not reserve a blank gap. */
.product-card.compact-card .delivery-note {
    display: none;
    min-height: 0;
    margin: 0;
}

.product-card.compact-card .card-cart .btn,
.product-card.compact-card .product-info > .btn {
    min-height: 42px;
}

/* =========================================================
   CATALOGUE-SPECIFIC IMAGE SAFETY
   Preserve the previous catalogue fix.
   ========================================================= */

.catalogue-grid .product-card {
    overflow: hidden;
}

.catalogue-grid .product-media {
    background: #fff;
}

.catalogue-grid .product-image {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}

.catalogue-grid .product-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
    .product-card .product-info h3 {
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        font-size: 13px;
        line-height: 1.45;
    }

    .product-card .price strong {
        font-size: 16px;
    }

    .product-card .delivery-note {
        min-height: 30px;
        font-size: 9px;
    }

    .product-card .card-cart .btn,
    .product-card .product-info > .btn {
        min-height: 42px;
        font-size: 11px;
    }

    .product-card.compact-card .product-info h3 {
        height: 38px;
        min-height: 38px;
        max-height: 38px;
    }
}