/*
 * BM.Market — customer sidebar widgets (Recently Ordered / My Wishlist /
 * Compare Products). Extracted from account.css so the exact same styling can
 * load wherever these blocks appear: the account pages AND the catalog category
 * / search-results pages (logged-in users see the widgets at the bottom there).
 *
 * Not loaded globally on purpose — .bm-cmp-name / .bm-cmp-remove are also used
 * (with different sizing) by the comparison PAGE (compare.css); loading this on
 * that page would clash. It is scoped to the handles that actually render the
 * widgets (customer_account, catalog_category_view, catalogsearch_result_index).
 */

/* ============ Sidebar: Recently ordered ================================== */
.block-reorder input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; border-radius: 4px; }
.block-reorder .btn-primary {
    height: 40px;
    border: none;
    border-radius: 8px;
    background: var(--color-cta);
    color: #111;
    font-weight: 600;
    transition: background .2s;
}
.block-reorder .btn-primary:hover { background: var(--color-cta-hover); color: #111; }

/* ============ Sidebar: Compare products ==================================
   Name hovers blue (site-wide convention); remove icon matches the wishlist
   mini-card remove (muted, red on hover). */
.bm-cmp-name:hover { color: var(--color-primary); }
.bm-cmp-remove { color: var(--color-fg-muted); transition: color .15s; }
.bm-cmp-remove:hover { color: #E30613; }

/* ============ Sidebar: My wishlist mini-cards ============================= */
.bm-swl-item {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 4px 12px;
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    transition: box-shadow .2s ease;
}
.bm-swl-item:hover { box-shadow: 0 10px 22px -12px rgba(15,23,42,.2); }
/* Photo cell (the <a>): centre the image within the 56px column, both axes. */
.bm-swl-item > a:first-child { grid-row: span 2; align-self: center; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; }
.bm-swl-photo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.bm-swl-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-fg);
    padding-right: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bm-swl-name:hover { color: var(--color-primary); }
.bm-swl-price { font-size: 14px; font-weight: 700; color: var(--color-fg); }
.bm-swl-cart {
    grid-column: 1 / -1;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: var(--color-cta);
    color: #111;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition: background .2s;
}
.bm-swl-cart:hover { background: var(--color-cta-hover); }
.bm-swl-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--color-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s;
}
.bm-swl-remove:hover { color: #E30613; }
/* "Go to Wish List" / "Compare" — standard outline. Font matches the
   Recently-ordered "View All" ghost button (14px). */
.bm-swl-goto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    color: var(--color-fg);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .15s, color .15s;
}
.bm-swl-goto:hover { border-color: var(--color-marine-300); color: var(--color-primary); }

/* "Remove All" in the Compare widget: same 14px as View All / the outline
   buttons (the global .bm-chip-clear is 13px — bump only inside the widget). */
.compare-widget .bm-chip-clear { font-size: 14px; }