/* Printblur product card standard. Loaded last in layouts/head.blade.php (after @yield('css')),
   so it wins over theme/module CSS loaded in body. Prefixed with body + !important on purpose. */

/* 1. Card title: 2 lines, 14px/20px, #222, no capitalize */
body h2.product-title,
body .product-item-box h3.product-title,
body h3.featured-product-title,
body .available-product-title,
body a.md-product-title,
body .explore-bestseller-title-box,
body .bought-together-title a,
body a.cart-sidebar-product-item-link .product-title,
body #mini-cart-header .product-item-wrapp .product-info .product-title,
body .topsale-product-title,
body .wishlist-title,
body .nr-popular-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
    color: #222 !important;
    text-transform: none !important;
    min-height: 40px !important;
    max-height: 40px !important;
    height: auto !important;
}

body a.product-link-title,
body a.product-title,
body a.featured-product-title,
body a.available-product-link,
body a.md-product-title,
body a.explore-bestseller-title-box,
body a.topsale-product-title,
body a.cart-sidebar-product-item-link,
body .bought-together-title a {
    color: #222 !important;
}

/* The wrapping links share the title class (mobile listing a.product-title, home a.featured-product-title)
   and inherit a 1-line clamp from theme CSS; make them plain blocks so the heading inside does the clamping. */
body .product-item-box a.product-title,
body a.featured-product-title {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: none !important;
    max-height: none !important;
    text-transform: none !important;
}
/* Mini cart drawer (mini-cart-header.js): the link around span.product-title is what mini-shopping.css sizes at 16px */
body #mini-cart-header .product-info a.cart-sidebar-product-item-link {
    display: block !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
}

/* 2. layout.css (max-width:767px) body .md-product-title { -webkit-line-clamp: 1 !important } */
@media (max-width: 767px) {
    body a.md-product-title {
        -webkit-line-clamp: 2 !important;
    }
}

/* Hover on PC only */
@media (min-width: 1181px) and (hover: hover) {
    body a.product-link-title:hover h2.product-title,
    body .product-item-box:hover h2.product-title,
    body a.featured-product-title:hover h3.featured-product-title,
    body .featured-product-item:hover h3.featured-product-title,
    body a.available-product-link:hover .available-product-title,
    body a.md-product-title:hover,
    body a.explore-bestseller-title-box:hover,
    body a.topsale-product-title:hover,
    body a.cart-sidebar-product-item-link:hover .product-title,
    body .bought-together-title a:hover {
        color: #a7165c !important;
        text-decoration: underline !important;
    }
}

/* 3. PDP boxes before Swiper init: product.css reserves 630px for 2 rows with 1-line titles;
   titles are now 40px instead of 18px -> +22px per row. */
body .available-list-product-top:not(.swiper-initialized) .swiper-wrapper,
body .available-list-product-bottom:not(.swiper-initialized) .swiper-wrapper {
    height: 674px !important;
}

/* 4. Spacing: image -> title 6px, title -> next block 2px */
body .list-product .product-item-box a.product-link-title {
    margin-bottom: -4px !important; /* .product-item-box has grid-gap 6px -> net 2px */
}
body .product-item-box a.product-title {
    padding: 6px 0 2px !important;
}
body .featured-product-title-box {
    margin-top: 2px !important; /* .featured-product-link already has margin-bottom 4px -> 6px */
    margin-bottom: 2px !important;
}
body .explore-best-seller-list .explore-bestseller-title-box {
    margin: 6px 0 2px !important;
}

/* 5. Prices: strike-through grey, %OFF text on #fef1d3 darker orange, Explore price red like other boxes */
body .product-high-price,
body .featured-product-high-price,
body .available-product-high-price,
body .explore-best-seller-list .explore-bestseller-high-price {
    color: #6b6b6b !important;
}
body .sale-off,
body .list-product .sale-off-box,
body .explore-best-seller-list .sale-off-box {
    color: #b43d00 !important;
    white-space: nowrap !important;
}
body .price-sale-text .sale-off {
    color: #258635 !important; /* flash sale keeps green */
}
body .explore-best-seller-list .explore-bestseller-price {
    color: #c52c29 !important;
}

/* 7. Listing (desktop theme, .product-item-box is a flex column): push price block to the bottom
   so prices line up when a card has no rating row. Mobile theme uses .product-price-box -> unaffected. */
body .list-product .product-item-box > .price-contain,
body .list-product .product-item-box > .product-price {
    margin-top: auto !important;
}