/*
 * BM.Market — product comparison page (catalog/product_compare/index).
 *
 * Brings the page into the storefront design language:
 *  - top bar with "Clear All" (.bm-chip-clear, same as the filter sidebar) and
 *    the "Drukāt" print button (.bm-btn-outline, the showcase secondary button);
 *  - each product column header is a mini product-card: image, uppercase
 *    category label (.bm-card-cat), name, price, a yellow "Pirkt" CTA
 *    (.bm-card-cart-btn) with the remove-× beside it, and the wishlist ♥ pinned
 *    to the top-right corner (like the card's quick-actions);
 *  - the table itself is a bordered/rounded panel ("the block"), and the
 *    attribute rows use the product-specification look (zebra rows, bold label
 *    column) mirroring .prose table from spec-table.css;
 *  - a "Turpināt iepirkšanos" button under the table links back to the home page.
 *
 * Plain CSS on design tokens (tokens.css) — not Tailwind utilities, so it
 * survives the purge and needs no theme rebuild. Shared components
 * (.bm-card-cart-btn, .bm-card-cat, .bm-chip-clear, .bm-btn-outline) live in
 * product-card.css, which is global.
 */

.bm-compare { margin-top: 4px; }

/* ---- Top bar: Clear All (left) + Print (right) ---- */
.bm-compare-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.bm-compare-top .bm-chip-clear { padding-left: 0; }

/* ---- Panel wrapper ("the block"): rounded, bordered, scrolls horizontally ---- */
.bm-compare-panel {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    overflow-x: auto;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Auto layout + per-column min-widths: with many products (limit is 5) the
   columns keep their minimum width and the whole panel scrolls horizontally
   (overflow-x on .bm-compare-panel) instead of squeezing the cards — the old
   table-layout:fixed + width:100% compressed columns until buttons overflowed. */
.bm-compare-table {
    width: 100%;
    border-collapse: collapse;
}
.bm-compare-table th,
.bm-compare-table td {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    border-right: 1px solid var(--color-border, #e5e7eb);
    vertical-align: top;
    text-align: left;
}
/* the panel border already draws the outer edge */
.bm-compare-table tr > *:last-child { border-right: 0; }
.bm-compare-table tbody tr:last-child > * { border-bottom: 0; }

/* Label (first) column — the spec name, like product-specifications. */
.bm-compare-table th[scope="row"] {
    width: 200px;
    min-width: 200px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
}

/* ---- Product header row (mini cards) ---- */
.bm-compare-table .bm-compare-productcell {
    width: 260px;
    min-width: 260px;
    padding: 0;
    background: #fff;
    /* height reference so the card's height:100% resolves to the (equalised)
       row height — lets the actions row sit at the cell's bottom edge across
       columns regardless of name length. Cell renders taller than 1px. */
    height: 1px;
}
.bm-compare-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}
/* Wishlist ♥ — top-right corner quick-action (product-card language). */
.bm-cmp-fav {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111111;
    cursor: pointer;
    transition: color .2s ease;
}
/* Match the product-card quick-action: colour change only, never a background. */
.bm-cmp-fav:hover { color: var(--color-link, #1d4ed8); background: transparent; }
.bm-cmp-fav svg { width: 20px; height: 20px; }

.bm-cmp-image {
    display: block;
    margin: 4px auto 12px;
    max-width: 160px;
}
.bm-cmp-image img { margin: 0 auto; }

/* reuse .bm-card-cat (uppercase muted label) from product-card.css */
.bm-compare-card .bm-card-cat { margin: 0 0 6px; }

.bm-cmp-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: #111111;
    transition: color .15s;
}
.bm-cmp-name:hover { color: var(--color-link, #1d4ed8); }

/* Price sits directly above the Buy button: margin-top:auto pushes the
   price + actions group to the bottom of the (equalised) card. */
.bm-cmp-price { margin: auto 0 12px; font-size: 18px; font-weight: 700; color: #111111; }
/* Sale pricing, identical to the product card: bold black regular price, red
   special price, struck-through grey old price (Magento renders the same
   price-box markup here as on the card). */
.bm-cmp-price .price-box { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0; }
.bm-cmp-price .price { font-size: 18px; font-weight: 700; color: #111111; }
.bm-cmp-price .special-price .price,
.bm-cmp-price .minimal-price .price { color: var(--color-sale, #E30613); font-weight: 700; }
.bm-cmp-price .old-price .price {
    font-size: 15px;
    font-weight: 500;
    color: #6B7280;
    text-decoration: line-through;
}

/* Action row: yellow "Pirkt" CTA takes the width, remove-× sits beside it. */
.bm-cmp-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 0;
}
.bm-cmp-actions form { flex: 1 1 auto; display: flex; }
.bm-cmp-actions .bm-card-cart-btn { width: 100%; height: 44px; }
.bm-cmp-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: var(--color-fg-secondary, #6b7280);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.bm-cmp-remove:hover { border-color: #E30613; color: #E30613; background: #fff; }
.bm-cmp-remove svg { width: 18px; height: 18px; }

/* ---- Attribute rows — product-specifications look (zebra + bold labels) ---- */
.bm-compare-table .bm-cmp-attr td {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}
/* zebra striping across the whole attribute row (label + values) */
.bm-compare-table .bm-cmp-attr:nth-of-type(odd) td { background: #f9fafb; }
.bm-compare-table .bm-cmp-attr:nth-of-type(odd) th[scope="row"] { background: #f3f4f6; }
.bm-compare-table .bm-cmp-attr td .price { font-weight: 600; }
.bm-compare-table .bm-cmp-attr td p { margin: 0 0 .5em; }
.bm-compare-table .bm-cmp-attr td p:last-child { margin-bottom: 0; }

/* Review-score row */
.bm-compare-table .bm-cmp-reviews td { padding: 12px 16px; }

/* ---- Footer: continue shopping (back to home) ---- */
.bm-compare-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

/* ---- Empty state ---- */
.bm-compare-empty {
    padding: 28px 20px;
    font-size: 15px;
    color: var(--color-fg-secondary, #6b7280);
}

@media (max-width: 640px) {
    .bm-compare-table th[scope="row"] { width: 140px; min-width: 140px; padding: 12px; }
    .bm-compare-table .bm-compare-productcell { width: 210px; min-width: 210px; }
}

/* Phones: the buy button is icon-only (no text) — the narrow columns can't
   comfortably fit "Pirkt" next to the remove button. */
@media (max-width: 767.98px) {
    .bm-cmp-actions .bm-card-cart-btn span { display: none; }
    .bm-cmp-actions .bm-card-cart-btn { gap: 0; }
}