/*
 * Gumbuli Theme — Product Card Fix
 * ─────────────────────────────────
 * Makes all product cards the same height and truncates
 * long product names with an ellipsis (…).
 *
 * HOW TO ADD THIS:
 *   Option A) Paste the contents into your theme's custom CSS
 *             (Admin → Appearance → Custom CSS)
 *   Option B) @import or  this file in your theme layout
 *   Option C) Add to public/themes/gumbuli/css/ and enqueue it
 */

/* ── 1. Equal-height cards in any slider / grid ─────────────────── */

/* The owl-carousel items need to stretch to fill */
.owl-stage {
    display: flex !important;
    align-items: stretch !important;
}

.owl-item {
    display: flex !important;
    align-items: stretch !important;
}

/* The card wrapper must be full height */
.owl-item .ps-product,
.owl-item > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* For grid layouts (non-carousel) */
.ps-layout--grid .ps-product,
.ps-shop-items .ps-product,
.row .ps-product,
[class*="col-"] .ps-product {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Inner container stretches */
.ps-product__container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Push price to the bottom so all cards align */
.ps-product__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ps-product__meta {
    margin-top: auto;
}


/* ── 2. Truncate long product names ─────────────────────────────── */

/* Primary product name link */
.ps-product__title,
.ps-product .ps-product__title a,
.ps-product h5 a,
.ps-product h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* show max 2 lines, then … */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;

    /* Keep a consistent height for 2 lines */
    min-height: 2.6em;
    line-height: 1.3em;
}

/* If you want only 1 line (single-line truncation), use this instead: */
/*
.ps-product__title,
.ps-product .ps-product__title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}
*/


/* ── 3. Fixed image height so photos don't make cards uneven ────── */

.ps-product__thumbnail {
    overflow: hidden;
    position: relative;
    /* Adjust this value to match your preferred image height */
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
}

.ps-product__thumbnail img,
.ps-product__thumbnail .ps-product__overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* or "cover" if you prefer cropped/filled images */
    object-position: center;
}


/* ── 4. Ensure the "New" / badge doesn't affect layout ──────────── */

.ps-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    pointer-events: none;
}


/* ── 5. Consistent padding inside each card ─────────────────────── */

.ps-product__info {
    padding: 10px 10px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}