/* ==========================================
   BISMON v18.8 — Square 1:1 + flexible title (up to 5 lines)
   Date: 2026-05-16
   
   Fixes from v18.7:
   - aspect-ratio: 4/3 → 1/1 (back to square — matches 700x700 source)
   - object-fit: cover → contain (no crop even if some images aren't 1:1)
   - Title line-clamp: 4 → 5 (more room for long product names)
   - Tighter spacing to compensate for taller title area
   ========================================== */

/* ===== 0. EXPAND CONTAINER on product pages only ===== */
.page-header > .container,
.section-content-block > .container {
    max-width: 1400px !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ===== 1. RESET .p-mobile (parent wrapper) — min-width keeps single cards normal ===== */
.col-lg-8.col-12 .p-mobile,
.col-lg-8 .p-mobile.bm-card-wrapper,
.col-md-4.p-mobile.bm-card-wrapper,
.col-md-3.p-mobile.bm-card-wrapper,
.col-md-6.p-mobile.bm-card-wrapper,
.p-mobile.bm-card-wrapper {
    width: 23.5% !important;
    max-width: 280px !important;
    min-width: 220px !important;
    flex: 0 0 23.5% !important;
    margin: 0.75% !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

.p-mobile.bm-card-wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

.bm-card-wrapper .img-resize3::after,
.bm-card-wrapper::after {
    display: none !important;
    content: none !important;
}

/* ===== 2. .bm-card ===== */
.bm-card-wrapper .bm-card {
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 0 !important;
}

.bm-card-wrapper .bm-card:hover {
    border-color: #00D4AA !important;
    box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15) !important;
    transform: translateY(-2px) !important;
}

.bm-card-wrapper .bm-card-image > a::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
}

/* ===== 3. Image — SQUARE 1:1 + contain (no crop, full image always) ===== */
.bm-card-wrapper .bm-card-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;            /* SQUARE — matches 700x700 source */
    height: auto !important;
    overflow: hidden !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
}

.bm-card-wrapper .bm-card-image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bm-card-wrapper .bm-card .bm-card-image img,
.bm-card-wrapper.product-detail-card .bm-card-image img,
.p-mobile.product-detail-card .bm-card-image img,
div.bm-card-wrapper div.bm-card-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;            /* CONTAIN — show full image, no crop */
    object-position: center !important;
    display: block !important;
    transition: transform 0.4s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.bm-card-wrapper .bm-card:hover .bm-card-image img {
    transform: scale(1.04) !important;
}

@supports not (aspect-ratio: 1 / 1) {
    .bm-card-wrapper .bm-card-image {
        height: 0 !important;
        padding-bottom: 100% !important;
    }
    .bm-card-wrapper .bm-card-image a {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
}

/* ===== 4. Card Body — tight padding ===== */
.bm-card-wrapper .bm-card-body {
    padding: 10px 12px 12px !important;
    display: block !important;
    flex: none !important;
}

/* ===== 5. Title — UP TO 5 lines (flexible) ===== */
.bm-card-wrapper .bm-card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    min-height: 34px !important;                /* 2 lines minimum */
    max-height: 88px !important;                /* 5 lines maximum (5 × 17.6) */
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;            /* CHANGED 4 → 5 */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #333 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.bm-card-wrapper .bm-card-title a {
    color: #333 !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 3 !important;
}

.bm-card-wrapper .bm-card:hover .bm-card-title a {
    color: #00B894 !important;
}

/* ===== 6. Details block ===== */
.bm-card-wrapper .bm-card-details {
    font-size: 11px !important;
    color: #666 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

.bm-card-wrapper .bm-card-details .bm-row {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

.bm-card-wrapper .bm-card-details .bm-row .bm-label {
    display: none !important;
}

.bm-card-wrapper .bm-card-details .bm-row:nth-child(2) {
    display: none !important;
}

.bm-card-wrapper .bm-card-details .bm-row:nth-child(1) {
    margin: 0 0 5px 0 !important;
}

.bm-card-wrapper .bm-pn-badge {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    background: #E1F5EE !important;
    color: #085041 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

.bm-card-wrapper .bm-card-details .bm-row:nth-child(3) {
    margin: 0 !important;
    line-height: 1 !important;
}

.bm-card-wrapper .bm-price {
    color: #d4441a !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    display: inline-block !important;
}

.bm-card-wrapper .bm-dealer-note {
    font-size: 9px !important;
    color: #999 !important;
    font-style: italic !important;
    margin: 1px 0 5px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

.bm-card-wrapper .bm-card-details .bm-row:nth-child(5),
.bm-card-wrapper .bm-card-details .bm-row:nth-child(6) {
    display: inline !important;
    font-size: 10px !important;
    color: #888 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.bm-card-wrapper .bm-card-details .bm-row:nth-child(6)::before {
    content: ' • ' !important;
    color: #ccc !important;
    margin: 0 4px !important;
}

.bm-card-wrapper .bm-warranty {
    color: #1d9e75 !important;
    font-weight: 500 !important;
}

/* ===== 7. Hide bottom button ===== */
.bm-card-wrapper .bm-card-button {
    display: none !important;
}

/* ===== 8. RESPONSIVE ===== */

@media (max-width: 1400px) {
    .page-header > .container,
    .section-content-block > .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 1100px) {
    .col-lg-8.col-12 .p-mobile.bm-card-wrapper,
    .p-mobile.bm-card-wrapper {
        width: 31.5% !important;
        max-width: 320px !important;
        flex: 0 0 31.5% !important;
        margin: 0.83% !important;
    }
}

@media (max-width: 768px) {
    .col-lg-8.col-12 .p-mobile.bm-card-wrapper,
    .p-mobile.bm-card-wrapper {
        width: 48% !important;
        max-width: 48% !important;
        min-width: 0 !important;
        flex: 0 0 48% !important;
        margin: 1% !important;
    }
    
    .bm-card-wrapper .bm-card-title {
        font-size: 12px !important;
    }
    
    .bm-card-wrapper .bm-price {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .bm-card-wrapper .bm-card-body {
        padding: 8px 10px 10px !important;
    }
}

/* ===== 9. Force grid container to flex ===== */
.col-lg-8.col-12,
div[class="col-lg-8 col-12"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
}