.compare-floating-bar {
    background: #fff;
    border-top: 1px solid #dfe7ed;
    bottom: 0;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .14);
    left: 0;
    padding: .75rem 0;
    position: fixed;
    right: 0;
    z-index: 1040;
}

.compare-floating-bar__inner,
.compare-floating-bar__products,
.compare-floating-bar__items,
.compare-floating-bar__actions,
.compare-floating-bar__item {
    align-items: center;
    display: flex;
}

.compare-floating-bar__inner {
    gap: 1rem;
    justify-content: space-between;
}

.compare-floating-bar__products {
    gap: .85rem;
    min-width: 0;
}

.compare-floating-bar__label {
    color: #0f172a;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

.compare-floating-bar__items {
    gap: .55rem;
    min-width: 0;
    overflow-x: auto;
    padding: .15rem;
}

.compare-floating-bar__item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: .55rem;
    gap: .45rem;
    min-width: 11rem;
    padding: .35rem;
    position: relative;
}

.compare-floating-bar__image {
    align-items: center;
    display: flex;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    justify-content: center;
}

.compare-floating-bar__image img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.compare-floating-bar__name {
    color: #334155;
    display: -webkit-box;
    font-size: .75rem;
    line-height: 1.3;
    overflow: hidden;
    padding-right: 1.1rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.compare-floating-bar__remove,
.compare-floating-bar__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    display: inline-flex;
    justify-content: center;
    padding: 0;
}

.compare-floating-bar__remove {
    color: #dc2626;
    height: 1rem;
    position: absolute;
    right: .2rem;
    top: .2rem;
    width: 1rem;
}

.compare-floating-bar__remove svg { height: .9rem; width: .9rem; }

.compare-floating-bar__actions { flex: 0 0 auto; gap: .45rem; }

.compare-floating-bar__toggle {
    border: 1px solid #dbe5ec;
    border-radius: .4rem;
    color: #475569;
    height: 2rem;
    width: 2rem;
}

.compare-floating-bar__toggle:hover { color: var(--tp-theme-primary, #0989ff); }

.compare-floating-bar__collapsed {
    align-items: center;
    background: #0f172a;
    border: 0;
    border-radius: 999px;
    bottom: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .28);
    color: #fff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 700;
    gap: .45rem;
    padding: .7rem 1rem;
    position: fixed;
    right: 1rem;
    z-index: 1041;
}

.compare-floating-bar__collapsed svg { height: 1rem; width: 1rem; }

@media (max-width: 991px) {
    .compare-floating-bar__inner { align-items: flex-start; flex-direction: column; }
    .compare-floating-bar__products { width: 100%; }
    .compare-floating-bar__items { flex: 1; }
    .compare-floating-bar__actions { align-self: flex-end; }
}

@media (max-width: 575px) {
    .compare-floating-bar { padding: .6rem 0; }
    .compare-floating-bar__item { min-width: 9.5rem; }
    .compare-floating-bar__actions .btn { font-size: .75rem; }
    .compare-floating-bar__collapsed { bottom: 4.5rem; right: .75rem; }
}