/* ============================================================
   Product Grid Compact — High-Conversion Smart Card Layout
   Eliminates dead vertical space, fixes 2-line title clamp,
   tightens thumbnail height (165px), and standardizes a
   uniform 34px B2B Add to Quote action button.
   ============================================================ */

/* ✅ EQUAL HEIGHT CARDS & COMPACT PADDING */
.ps-product.ps-product--grid-compact {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 8px 10px 10px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.ps-product.ps-product--grid-compact:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* ✅ COMPACT THUMBNAIL: 165px max height with object-fit contain */
.ps-product.ps-product--grid-compact .ps-product__thumbnail {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 165px !important;
    max-height: 165px !important;
    aspect-ratio: auto !important;
    padding: 4px !important;
    margin: 0 0 6px 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}
.ps-product.ps-product--grid-compact .ps-product__thumbnail a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
.ps-product.ps-product--grid-compact .ps-product__thumbnail img {
    max-height: 155px !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    position: static !important;
}

/* ✅ CONTAINER & CONTENT: Zero artificial min-height */
.ps-product.ps-product--grid-compact .ps-product__container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ps-product.ps-product--grid-compact .ps-product__content,
.ps-shopping-product .ps-product--grid-compact .ps-product__content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ✅ FULL PRODUCT TITLE DISPLAY (Natural wrap, no ellipsis truncation) */
.ps-product.ps-product--grid-compact .ps-product__title,
.ps-product.ps-product--grid-compact a.ps-product__title,
.ps-product.ps-product--grid-compact .ps-product__title a,
.ps-product .ps-product__title,
.ps-product a.ps-product__title,
.ps-product .ps-product__title a {
    --max-lines: initial !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    color: #0f172a !important;
}
.ps-product.ps-product--grid-compact .ps-product__title:hover,
.ps-product.ps-product--grid-compact a.ps-product__title:hover,
.ps-product.ps-product--grid-compact .ps-product__title a:hover {
    color: var(--color-1st, #0D7BE0) !important;
}

/* ✅ SKU */
.ps-product.ps-product--grid-compact .ps-product__sku {
    font-size: 11px !important;
    color: #64748b !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    margin: 0 0 3px 0 !important;
}

/* ✅ RATING: Tight 2px margin */
.ps-product.ps-product--grid-compact .rating_wrap {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    min-height: 16px !important;
    line-height: 1 !important;
}
.ps-product.ps-product--grid-compact .rating_wrap .rating {
    font-size: 11px !important;
}
.ps-product.ps-product--grid-compact .rating_wrap .rating_num {
    font-size: 11px !important;
    color: #64748b !important;
}

/* ✅ PRICE DISPLAY (When active on retail or enabled B2B products) */
.ps-product.ps-product--grid-compact .ps-product__price {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 2px 0 1px 0 !important;
    line-height: 1.25 !important;
}
.ps-product.ps-product--grid-compact .ps-product__price del {
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}
.ps-product.ps-product--grid-compact .ps-product__savings {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #16a34a !important;
    line-height: 1.2 !important;
    margin: 0 0 2px 0 !important;
}

/* ✅ SHOPPING ACTIONS & BUTTON: Compact 34px button pinned neatly to bottom */
.ps-product.ps-product--grid-compact .ps-product__shopping.compact {
    margin-top: auto !important;
    padding: 6px 0 0 0 !important;
}
.ps-product.ps-product--grid-compact .ps-product__shopping.compact .add-to-quote-button,
.ps-product.ps-product--grid-compact .ps-product__shopping.compact .ps-btn {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 6px !important;
    background: var(--sv-blue, #0c5f9c) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
}
.ps-product.ps-product--grid-compact .ps-product__shopping.compact .add-to-quote-button:hover,
.ps-product.ps-product--grid-compact .ps-product__shopping.compact .ps-btn:hover {
    background: #094a7a !important;
    color: #fff !important;
}
.ps-product.ps-product--grid-compact .ps-product__shopping.compact .add-to-quote-button i,
.ps-product.ps-product--grid-compact .ps-product__shopping.compact .ps-btn i {
    font-size: 12px !important;
}

/* ✅ EQUAL HEIGHT GRID: Bootstrap columns stretch to match row height */
.ps-shopping-product .row { display: flex; flex-wrap: wrap; }
.ps-shopping-product .row > [class*="col-"] { display: flex; margin-bottom: 16px; }
.ps-shopping-product .row > [class*="col-"] .ps-product,
.ps-section--products-tabbed .row > [class*="col-"] .ps-product,
.ps-product-list .row > [class*="col-"] .ps-product,
.related-products .row > [class*="col-"] .ps-product { width: 100%; }

/* ✅ BUTTON LOADING SPINNER: Visual feedback for Add to Cart */
.button-loading, .btn-loading { cursor: default; color: transparent !important; position: relative; pointer-events: none; }
.button-loading:before, .btn-loading:before { content: ""; position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; border-bottom-color: transparent; animation: button-loading-spinner .7s linear infinite; }
.button-loading i, .btn-loading i { color: transparent !important; }
@keyframes button-loading-spinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ✅ TABLET TILES: Tighten spacing for tablets (768px-991px) */
@media (max-width: 991px) {
    .ps-product.ps-product--grid-compact .ps-product__thumbnail { height: 150px !important; max-height: 150px !important; }
    .ps-product.ps-product--grid-compact .ps-product__thumbnail img { max-height: 140px !important; }
    .ps-product.ps-product--grid-compact .ps-product__title { margin-bottom: 2px !important; }
    .ps-product.ps-product--grid-compact .ps-product__title a { font-size: 13px !important; line-height: 1.3 !important; }
    .ps-product.ps-product--grid-compact .ps-product__sku { font-size: 10.5px !important; margin-bottom: 2px !important; }
    .ps-shopping-product .row > [class*="col-"] { margin-bottom: 14px; }
}
/* ✅ MOBILE TILES: Aggressive tightening for phones (≤767px) */
@media (max-width: 767px) {
    .ps-product.ps-product--grid-compact .ps-product__thumbnail { height: 135px !important; max-height: 135px !important; }
    .ps-product.ps-product--grid-compact .ps-product__thumbnail img { max-height: 125px !important; }
    .ps-product.ps-product--grid-compact .ps-product__title a { font-size: 12.5px !important; line-height: 1.25 !important; }
    .ps-product.ps-product--grid-compact .ps-product__sku { font-size: 10px !important; margin-bottom: 2px !important; }
    .ps-product.ps-product--grid-compact .ps-product__shopping.compact .add-to-quote-button,
    .ps-product.ps-product--grid-compact .ps-product__shopping.compact .ps-btn { min-height: 30px !important; height: 30px !important; font-size: 11px !important; padding: 0 8px !important; }
    .ps-shopping-product .row > [class*="col-"] { margin-bottom: 10px; }
}
/* ✅ ULTRA-SMALL PHONE TILES: Maximum compactness (≤480px) */
@media (max-width: 480px) {
    .ps-product.ps-product--grid-compact { padding: 6px 8px 8px !important; }
    .ps-product.ps-product--grid-compact .ps-product__thumbnail { height: 115px !important; max-height: 115px !important; }
    .ps-product.ps-product--grid-compact .ps-product__thumbnail img { max-height: 105px !important; }
    .ps-product.ps-product--grid-compact .ps-product__title a { font-size: 12px !important; line-height: 1.2 !important; }
    .ps-product.ps-product--grid-compact .ps-product__sku { font-size: 9.5px !important; }
    .ps-shopping-product .row > [class*="col-"] { margin-bottom: 8px; }
}