/**
 * Claue V2 — Product Compare page styles (P15)
 *
 * The breadcrumbs and "Compare Products" title are themed by the shared
 * .cl-listing chrome (.cl-listing .cl-breadcrumbs / .cl-listing
 * .cl-category-title in category-clean.css) — opted into via the cl-listing
 * body marker set by catalog_product_compare_index.xml. This file only owns
 * the EMPTY-state message.
 *
 * Scope: every rule is prefixed with .cl-page-compare because the
 * .message.info.empty selector is shared with empty wishlist / cart /
 * mini-cart. Un-scoped rules would restyle those pages too.
 *
 * Goal: replace the bare Luma amber "You have no items to compare." box with a
 * centered, themed empty state (icon + message), matching the centered
 * empty-state idiom used by the 404 and search-no-results pages.
 */

/* ── Page container ── */
.cl-page-compare .column.main {
    padding-bottom: var(--cl-space-3xl);
}

/* ── Empty state ──
   Reset the Luma amber info box and rebuild as a centered card. The verified
   markup is <div class="message info empty"><div>text</div></div>. */
.cl-page-compare .message.info.empty {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--cl-text);
    margin: 0 auto;
    padding: var(--cl-space-3xl) var(--cl-container-padding);
    max-width: 520px;
    text-align: center;
    font-size: var(--cl-font-size-lg);
    line-height: var(--cl-line-height);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Suppress the default Luma warning-triangle glyph (Luma renders it on the
   first child's ::before; the ::after reset is a harmless belt-and-suspenders). */
.cl-page-compare .message.info.empty > *:first-child::before,
.cl-page-compare .message.info.empty::after {
    content: none;
    display: none;
}

/* Compare/scale icon (lucide "scale") rendered above the message. */
.cl-page-compare .message.info.empty::before {
    content: "";
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 0 var(--cl-space-lg);
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23cfcfcf'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m16%2016%203-8%203%208c-.87.65-1.92%201-3%201s-2.13-.35-3-1Z'/%3E%3Cpath%20d='m2%2016%203-8%203%208c-.87.65-1.92%201-3%201s-2.13-.35-3-1Z'/%3E%3Cpath%20d='M7%2021h10'/%3E%3Cpath%20d='M12%203v18'/%3E%3Cpath%20d='M3%207h2c2%200%205-1%207-2%202%201%205%202%207%202h2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cl-page-compare .message.info.empty > div,
.cl-page-compare .message.info.empty > span {
    font-size: var(--cl-font-size-lg);
    color: var(--cl-text);
    line-height: var(--cl-line-height);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cl-page-compare .message.info.empty {
        padding: var(--cl-space-2xl) var(--cl-space-md);
    }

    .cl-page-compare .message.info.empty::before {
        width: 60px;
        height: 60px;
    }
}