/* Compare Products page — dedicated stylesheet (was inline styles + the
 * .woocommerce-account-scoped b2b-billing-table, which never matched here
 * since this is a standalone page, not an account tab). Reuses the shared
 * --b2b-* tokens from product-order.css (loaded first) rather than
 * redefining them, so this page stays visually consistent with the rest of
 * the platform. */

.b2b-compare-page {
    max-width: 1200px;
    margin: 0 auto;
}

.b2b-compare-page .b2b-card {
    padding: 0;
    overflow: hidden;
}

.b2b-compare-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--b2b-border);
}

.b2b-compare-page__title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 800;
    color: var(--b2b-text);
    letter-spacing: -0.01em;
}

.b2b-compare-page__subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--b2b-muted);
}

.b2b-compare-page__clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #fff;
    border: 1px solid var(--b2b-border);
    border-radius: 8px;
    color: var(--b2b-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.b2b-compare-page__clear:hover {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fef2f2;
}

/* ── Highlight-differences toggle ─────────────────────────────────────── */

.b2b-compare-page__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--b2b-text);
    cursor: pointer;
    user-select: none;
    padding: 0 28px 18px;
}

.b2b-compare-page__toggle input {
    appearance: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--b2b-border);
    position: relative;
    cursor: pointer;
    transition: background-color .15s ease;
    flex-shrink: 0;
}

.b2b-compare-page__toggle input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform .15s ease;
}

.b2b-compare-page__toggle input:checked {
    background: var(--b2b-blue);
}

.b2b-compare-page__toggle input:checked::after {
    transform: translateX(14px);
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.b2b-compare-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.b2b-compare-table {
    /* min-width, not width:100% -- with table-layout:fixed, width:100%
       forces the table to fit its container by proportionally squeezing
       every column's actual <col> width, ignoring the real 180px/260px
       (or the mobile 96px/150px) values entirely. That's why a 2nd
       product still got visually clipped/chopped on narrow screens
       (reported 2026-08-16) even after those columns were narrowed --
       the table was never actually wider than the viewport, so
       .b2b-compare-table__scroll's overflow-x:auto had nothing to
       scroll. min-width (sum of the real column widths, kept in sync
       with the col widths below and at each breakpoint) lets the table
       genuinely exceed the viewport when there isn't room, which is
       what makes the horizontal scroll -- and therefore a fully visible,
       unclipped 2nd product -- actually work. */
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.b2b-compare-table col.b2b-compare-table__label-col {
    width: 180px;
}

.b2b-compare-table col.b2b-compare-table__product-col {
    width: 260px;
}

.b2b-compare-table th,
.b2b-compare-table td {
    padding: 14px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--b2b-border);
    font-size: 14px;
    color: var(--b2b-text);
}

.b2b-compare-table thead th {
    background: var(--b2b-panel);
    vertical-align: top;
    border-bottom: 2px solid var(--b2b-border);
}

/* Sticky first column (row labels) — the table can get wide with 3-4
 * products, so the label stays visible while scrolling horizontally. */
.b2b-compare-table th.b2b-compare-table__row-label,
.b2b-compare-table td.b2b-compare-table__row-label {
    position: sticky;
    left: 0;
    background: var(--b2b-panel);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--b2b-muted);
    z-index: 1;
    border-right: 1px solid var(--b2b-border);
}

.b2b-compare-table tbody tr:nth-child(even) td.b2b-compare-table__row-label {
    background: var(--b2b-panel);
}

.b2b-compare-table thead th.b2b-compare-table__row-label {
    z-index: 2;
}

.b2b-compare-table tbody tr:hover td:not(.b2b-compare-table__row-label) {
    background: #fafbfd;
}

/* Difference highlighting — a row whose values differ across products gets
 * a subtle left accent + tint on the row label, so a scanning eye lands on
 * what's actually different without reading every cell. Off by default,
 * toggleable, since some shoppers want a plain reference table instead. */
.b2b-compare-table--highlight tr[data-differs="1"] td.b2b-compare-table__row-label {
    color: var(--b2b-blue-dark);
    background: #eef4ff;
    box-shadow: inset 3px 0 0 var(--b2b-blue);
}

/* ── Product header cell ──────────────────────────────────────────────── */

.b2b-compare-product {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.b2b-compare-product__remove {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--b2b-border);
    background: #fff;
    color: var(--b2b-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .1s ease;
}

.b2b-compare-product__remove:hover {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fef2f2;
}

.b2b-compare-product__remove:active {
    transform: scale(0.92);
}

.b2b-compare-product__img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--b2b-border);
}

.b2b-compare-product__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}

.b2b-compare-product__img:hover img {
    transform: scale(1.04);
}

.b2b-compare-product__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--b2b-text);
    text-decoration: none;
    line-height: 1.35;
}

.b2b-compare-product__name:hover {
    color: var(--b2b-blue);
}

.b2b-compare-product__brand {
    font-size: 12px;
    color: var(--b2b-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.b2b-compare-product__price {
    font-size: 20px;
    font-weight: 800;
    color: var(--b2b-text);
}

.b2b-compare-product__price small {
    font-size: 12px;
    font-weight: 600;
    color: var(--b2b-muted);
}

.b2b-compare-product__price--low {
    color: var(--b2b-success);
}

.b2b-compare-product__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--b2b-blue);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, transform .1s ease;
}

.b2b-compare-product__cta:hover {
    background: var(--b2b-blue-dark);
    color: #fff;
}

.b2b-compare-product__cta:active {
    transform: scale(0.98);
}

/* ── Cell content helpers ─────────────────────────────────────────────── */

.b2b-compare-table__empty-val {
    color: #c2c8d2;
}

.b2b-compare-table__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.b2b-compare-table__chip {
    display: inline-block;
    padding: 3px 9px;
    background: var(--b2b-panel);
    border: 1px solid var(--b2b-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--b2b-text);
    white-space: nowrap;
}

.b2b-compare-table__chip--more {
    color: var(--b2b-muted);
    font-weight: 600;
}

.b2b-compare-table__count {
    font-size: 12px;
    color: var(--b2b-muted);
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

/* ── Loading skeleton ──────────────────────────────────────────────────── */

.b2b-compare-skeleton {
    padding: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.b2b-compare-skeleton__card {
    border: 1px solid var(--b2b-border);
    border-radius: 10px;
    padding: 16px;
}

.b2b-compare-skeleton__block {
    background: linear-gradient(90deg, var(--b2b-panel) 25%, #eef1f6 37%, var(--b2b-panel) 63%);
    background-size: 400% 100%;
    animation: b2b-skeleton-shimmer 1.4s ease infinite;
    border-radius: 8px;
}

.b2b-compare-skeleton__img { width: 100%; aspect-ratio: 1; margin-bottom: 12px; }
.b2b-compare-skeleton__line { height: 12px; margin-bottom: 8px; }
.b2b-compare-skeleton__line--w60 { width: 60%; }
.b2b-compare-skeleton__line--w40 { width: 40%; }

@keyframes b2b-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── Empty state ───────────────────────────────────────────────────────── */

.b2b-compare-empty {
    padding: 64px 28px;
    text-align: center;
}

.b2b-compare-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--b2b-panel);
    color: var(--b2b-blue);
}

.b2b-compare-empty__icon svg {
    width: 26px;
    height: 26px;
}

.b2b-compare-empty__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--b2b-text);
}

.b2b-compare-empty__body {
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--b2b-muted);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.b2b-compare-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    background: var(--b2b-blue);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease;
}

.b2b-compare-empty__cta:hover {
    background: var(--b2b-blue-dark);
    color: #fff;
}

/* ── Error state ───────────────────────────────────────────────────────── */

.b2b-compare-error {
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #b91c1c;
    font-size: 14px;
    margin: 24px 28px;
}

/* ── Toast (remove confirmation) ──────────────────────────────────────── */

.b2b-compare-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--b2b-text);
    color: #fff;
    padding: 11px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10000;
}

.b2b-compare-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Row fade-in ───────────────────────────────────────────────────────── */

.b2b-compare-table tbody tr,
.b2b-compare-page__toggle {
    animation: b2b-compare-fade-in .25s ease both;
}

@keyframes b2b-compare-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .b2b-compare-table tbody tr,
    .b2b-compare-page__toggle,
    .b2b-compare-product__img img,
    .b2b-compare-skeleton__block {
        animation: none;
        transition: none;
    }
}

/* ── Responsive: tablet ────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .b2b-compare-table col.b2b-compare-table__label-col { width: 140px; }
    .b2b-compare-table col.b2b-compare-table__product-col { width: 200px; }
    .b2b-compare-table th, .b2b-compare-table td { padding: 12px 16px; }
}

/* ── Responsive: mobile — keep products side by side, matching the desktop
   table's own layout, per Victoria's explicit request (2026-08-16): the
   previous approach here stacked each attribute row into its own card with
   products listed one below another, which made comparing two products
   visually difficult since they were no longer next to each other at all.
   Columns narrow further and the table scrolls horizontally within its own
   scroll container (already the desktop pattern at .b2b-compare-table__
   scroll) instead of collapsing to a single-column stacked layout. ────── */

@media (max-width: 640px) {
    .b2b-compare-page__head {
        flex-direction: column;
        padding: 20px 18px 16px;
    }

    .b2b-compare-page__toggle {
        padding: 0 18px 16px;
    }

    .b2b-compare-table col.b2b-compare-table__label-col { width: 96px; }
    .b2b-compare-table col.b2b-compare-table__product-col { width: 150px; }
    .b2b-compare-table th, .b2b-compare-table td { padding: 10px 12px; font-size: 13px; }
}