/*  ===== CODE MODIFICATION =====
 *  File name    : commons/css/products-v2.css (web root /var/www/html)
 *  Dev name     : Denish Faldu
 *  Date         : 2026-10-23
 *  Section      : whole file (new)
 *  Purpose      : Improve functionality
 *  Current      : Product list used dead X5 CSS links + products.css (Bootstrap 3); product details had its
 *                 own style block with our 10-10 warm colors.
 *  Modification : Styles for the product list (banner + card grid) and product details (image card,
 *                 Read more box, price box, Add to cart) on stand_v2. Client theme, mobile first.
 *  Related code : app/views/products/index.php, app/views/products/getone.php, /commons/js/products-v2.js
 *  ============================= */
/*  ===== CODE MODIFICATION =====
 *  File name    : commons/css/products-v2.css (web root /var/www/html)
 *  Dev name     : Denish Faldu
 *  Date         : 2026-10-23
 *  Section      : .ci-product-img, .ci-product-name / .ci-product-heading, 768px media query
 *  Purpose      : Correct an error
 *  Current      : Image box was square (aspect-ratio 1/1); with big portrait thumbnails a card became very
 *                 tall on desktop (user test 2026-10-23).
 *  Modification : Image box fixed height 140px (phone) / 180px (tablet+desktop), image contained inside;
 *                 name and heading max 2 lines -> equal, compact cards.
 *  Related code : app/views/products/index.php
 *  ============================= */

/* ---------- Product list ---------- */
.ci-products-banner {
    margin: -1.5rem 0 1.5rem;
}

.ci-products-banner img {
    display: block;
    max-height: 360px;
    object-fit: cover;
    width: 100%;
}

.ci-product-card {
    color: var(--ci-text);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.75rem;
    text-decoration: none;
    transition: var(--ci-transition);
}

.ci-product-card:hover,
.ci-product-card:focus {
    border-color: var(--ci-primary);
    box-shadow: 0 6px 18px rgba(59, 78, 248, 0.15);
    color: var(--ci-text);
    transform: translateY(-2px);
}

/* Updated 2026-10-23 Denish Faldu: fixed image box height (thumbnails are big portrait/landscape files) */
.ci-product-img {
    align-items: center;
    background: var(--ci-white);
    display: flex;
    height: 140px;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.ci-product-img img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.ci-product-name {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* Updated 2026-10-23 Denish Faldu: name 2 lines max, heading 2 lines max -> all cards the same height */
.ci-product-name,
.ci-product-heading {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ci-product-heading {
    color: var(--ci-muted);
    flex: 1;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.ci-product-price {
    color: var(--ci-heading);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

@media (min-width: 768px) {
    .ci-product-card {
        padding: 1rem;
    }

    .ci-product-img {
        height: 180px;
    }

    .ci-product-name {
        font-size: 1.1rem;
    }
}

/* ---------- Product details ---------- */
.ci-pd .ci-back {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-decoration: none;
}

.ci-pd-card {
    height: 100%;
}

.ci-pd-img {
    margin: 0 auto;
    max-height: 460px;
    max-width: 100%;
    object-fit: contain;
}

.ci-pd .carousel-indicators {
    margin-bottom: 0;
}

.ci-pd-name {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .ci-pd-name {
        font-size: 1.85rem;
    }
}

.ci-pd-text .product-details-label {
    margin-bottom: 0.75rem;
}

.ci-pd-text h2,
.ci-pd-text h3 {
    font-size: 1.05rem;
    margin: 0.9rem 0 0.4rem;
}

.ci-pd-text ul {
    margin: 0.4rem 0 0.6rem;
    padding-left: 1.25rem;
}

/* Read more / Read less (products-v2.js) */
.ci-pd-readbox {
    max-height: 320px;
    overflow: hidden;
    position: relative;
}

.ci-pd-readbox::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ci-white));
    bottom: 0;
    content: "";
    height: 70px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.ci-pd-readbox.open {
    max-height: none;
}

.ci-pd-readbox.open::after {
    display: none;
}

.ci-pd-readmore {
    background: none;
    border: 0;
    color: var(--ci-primary);
    font-weight: 700;
    margin: 0.5rem 0;
    padding: 0;
}

.ci-pd-readmore:hover {
    text-decoration: underline;
}

.ci-pd-price {
    background: var(--ci-primary-soft);
    border-radius: var(--ci-radius);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
}

.ci-pd-price .product-details-label {
    color: var(--ci-muted);
    font-weight: 600;
}

.ci-pd-price .product-details-price {
    color: var(--ci-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    width: 100%;
}

.ci-pd-btn {
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    width: 100%;
}

@media (min-width: 576px) {
    .ci-pd-btn {
        width: auto;
    }
}

.ci-pd-missing .ci-card {
    margin: 2rem auto;
    max-width: 640px;
    text-align: center;
}