/* =========================================================================
   Back Market-style product-card polish — loaded LAST on metro home so it
   overrides bm-home-v4.css / backmarket-home.css where needed.

   Goal: homepage product cards visually identical to backmarket.com — clean
   white card with light border, compact image area (not square), bold dark
   title, gray variant subtitle, star+count rating (always visible), big bold
   price + small strikethrough old price. NO marketing pills.

   All data + functionality untouched.
   ========================================================================= */

/* --- Hide marketing badges Back Market does not show on grid cards --- */
.bm-home .bm-pcard .bm-pcard-badges,
div.bm-pcard .bm-pcard-badges { display: none !important; }

.bm-home .bm-pcard .bm-pcard-body .platform-promise-badge,
div.bm-pcard .bm-pcard-body .platform-promise-badge { display: none !important; }

.bm-home .bm-pcard .bm-pcard-body .product-card-trust,
div.bm-pcard .bm-pcard-body .product-card-trust { display: none !important; }

/* --- Card container — compact, clean, hairline border --- */
.bm-home .bm-pcard,
div.bm-pcard {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 14px 14px 16px !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.bm-home .bm-pcard:hover,
div.bm-pcard:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
    border-color: #d1d5db !important;
}

/* --- Image area — Back Market is roughly 4:3, not square. Shorter image = shorter card --- */
.bm-home .bm-pcard .bm-pcard-media,
.bm-pcard .bm-pcard-media {
    background: #ffffff !important;
    border-radius: 8px !important;
    aspect-ratio: auto !important;
    height: 180px !important;
    margin-bottom: 12px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
@media (min-width: 1280px) {
    .bm-home .bm-pcard .bm-pcard-media,
    .bm-pcard .bm-pcard-media { height: 200px !important; }
}
@media (max-width: 991px) {
    .bm-home .bm-pcard .bm-pcard-media,
    .bm-pcard .bm-pcard-media { height: 170px !important; }
}
@media (max-width: 575px) {
    .bm-home .bm-pcard .bm-pcard-media,
    .bm-pcard .bm-pcard-media { height: 140px !important; }
}
.bm-home .bm-pcard .bm-pcard-img,
.bm-pcard .bm-pcard-img {
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* --- Body: tight column with no trailing whitespace --- */
.bm-home .bm-pcard .bm-pcard-body,
.bm-pcard .bm-pcard-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Title --- */
.bm-home .bm-pcard .bm-pcard-title,
.bm-pcard .bm-pcard-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0a1230 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
    -webkit-line-clamp: 2;
    max-height: 2.6em;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
}
.bm-home .bm-pcard .bm-pcard-title a,
.bm-pcard .bm-pcard-title a {
    color: #0a1230 !important;
    text-decoration: none !important;
}

/* --- Subtitle (variant / brand line) --- */
.bm-home .bm-pcard .bm-pcard-subtitle,
.bm-pcard .bm-pcard-subtitle {
    font-size: 13px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    min-height: 0 !important;
}
.bm-pcard-subtitle.is-empty { display: none !important; }

/* --- Rating row — ALWAYS visible (even when 0.0/5 (0)) --- */
.bm-home .bm-pcard .bm-pcard-rating,
.bm-pcard .bm-pcard-rating,
.bm-pcard-rating.is-empty {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 6px !important;
    font-size: 12.5px !important;
    color: #4b5563 !important;
    line-height: 1.2 !important;
}
.bm-pcard-rating .bm-stars {
    display: inline-flex !important;
    gap: 1px !important;
}
.bm-pcard-rating .bm-stars i {
    font-size: 13px !important;
    line-height: 1 !important;
    color: #f5a623 !important;
}
.bm-pcard-rating .bm-stars i.la-star:not(.active):not(.half) {
    color: #e5e7eb !important;
}
.bm-pcard-rating .bm-rating-num {
    font-weight: 600 !important;
    color: #111827 !important;
}
.bm-pcard-rating .bm-rating-count {
    color: #6b7280 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(107, 114, 128, 0.3) !important;
    text-underline-offset: 2px !important;
}

/* --- Price block --- */
.bm-home .bm-pcard .bm-pcard-pricing,
.bm-pcard .bm-pcard-pricing {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: 8px !important;
    gap: 1px !important;
}
.bm-home .bm-pcard .bm-pcard-price,
.bm-pcard .bm-pcard-price,
span.bm-pcard-price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0a1230 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    order: 1 !important;
}
.bm-home .bm-pcard .bm-pcard-price-old,
.bm-pcard .bm-pcard-price-old,
del.bm-pcard-price-old,
.bm-pcard-price-old .bm-pcard-price-num {
    font-size: 12px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    order: 2 !important;
}

@media (min-width: 1280px) {
    .bm-home .bm-pcard .bm-pcard-price,
    .bm-pcard .bm-pcard-price { font-size: 22px !important; }
    .bm-home .bm-pcard .bm-pcard-title,
    .bm-pcard .bm-pcard-title { font-size: 16px !important; }
}
@media (max-width: 575px) {
    .bm-home .bm-pcard,
    .bm-pcard { padding: 12px 12px 14px !important; border-radius: 12px !important; }
    .bm-home .bm-pcard .bm-pcard-title,
    .bm-pcard .bm-pcard-title { font-size: 14px !important; }
    .bm-home .bm-pcard .bm-pcard-price,
    .bm-pcard .bm-pcard-price { font-size: 17px !important; }
}

/* --- Hover quick-add CTA visual --- */
.bm-pcard-cta { border-radius: 12px !important; }

/* --- Defensive: remove any min-height inheritance that would stretch the card --- */
.bm-home .aiz-carousel .slick-slide .carousel-box .bm-pcard,
.bm-home .aiz-carousel .slick-slide .bm-pcard {
    min-height: 0 !important;
}