/* PCMP1: the compare bar, the prompts, the card toggle and the compare page. Colours come from the theme variables (theme.css) and
   Bootstrap's, so every theme works. Nothing here relies on colour alone: a differing row also carries a marker and visually hidden text. */
.pc-compare { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0; min-height: 24px; cursor: pointer; }
.pc-compare .form-check-input { margin: 0; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; cursor: pointer; }
.pc-compare .form-check-label { cursor: pointer; }

/* ---- the bar ---- */
.cmp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1031; background: var(--th-card-bg, var(--bs-body-bg)); color: var(--bs-body-color);
    border-top: 2px solid var(--bs-emphasis-color); box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .18); padding-bottom: env(safe-area-inset-bottom); }
.cmp-bar[hidden] { display: none; }
@media (max-width: 991.98px) { .cmp-bar { bottom: calc(3.5rem + env(safe-area-inset-bottom)); padding-bottom: 0; } }
.cmp-bar-inner { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.cmp-items { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.cmp-item { display: flex; align-items: center; gap: .4rem; min-width: 0; flex: 1 1 0; max-width: 24rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .25rem .25rem .25rem .4rem; background: var(--bs-tertiary-bg); }
.cmp-item img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; background: #fff; border-radius: .25rem; }
.cmp-name { min-width: 0; font-size: .8rem; line-height: 1.2; color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cmp-name:hover { text-decoration: underline; }
.cmp-remove { flex: 0 0 auto; border: 0; background: transparent; color: inherit; font-size: 1.4rem; line-height: 1; min-width: 44px; min-height: 44px; border-radius: .5rem; }
.cmp-remove:hover, .cmp-remove:focus-visible { background: var(--bs-secondary-bg); }
.cmp-more { margin: 0; font-size: .875rem; flex: 0 1 auto; }
.cmp-more-link { font-weight: 600; }
.cmp-go { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 575.98px) {
    .cmp-bar-inner { gap: .25rem .5rem; }
    .cmp-go { width: 100%; justify-content: center; }
    .cmp-item { padding-right: 0; }
}
body.cmp-bar-on { padding-bottom: calc(var(--cmp-bar-h, 4.5rem) + 3.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { body.cmp-bar-on { padding-bottom: var(--cmp-bar-h, 4.5rem); } }

/* ---- the prompts ---- */
.cmp-dialog { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: 1.25rem; max-width: min(28rem, calc(100vw - 2rem)); background: var(--th-card-bg, var(--bs-body-bg)); color: var(--bs-body-color); }
.cmp-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.cmp-dlg-title { font-size: 1.1rem; margin: 0 0 .5rem; }
.cmp-dlg-text { margin: 0 0 1rem; }
.cmp-dlg-actions { display: flex; flex-direction: column; gap: .5rem; }
.cmp-dlg-actions .btn { min-height: 44px; text-align: left; overflow-wrap: anywhere; }

/* ---- the product-page button ---- */
.cmp-pdp.active { background: var(--bs-secondary-bg); border-color: var(--bs-emphasis-color); font-weight: 600; }

/* ---- the compare page ---- */
.cmp-page h1 { overflow-wrap: anywhere; }
.cmp-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.cmp-table th, .cmp-table td { vertical-align: top; padding: .5rem; border-bottom: 1px solid var(--bs-border-color); overflow-wrap: anywhere; word-break: break-word; }
.cmp-table .cmp-label { width: 30%; font-weight: 400; color: var(--bs-secondary-color); text-align: left; }
.cmp-table.cmp-two .cmp-label { width: 26%; }
.cmp-head { position: sticky; top: 0; z-index: 20; background: var(--th-card-bg, var(--bs-body-bg)); }
.cmp-head th, .cmp-head td { border-bottom: 2px solid var(--bs-border-color); font-weight: 600; text-align: center; padding-top: .5rem; padding-bottom: .5rem; }
.cmp-head img { display: block; margin: 0 auto .25rem; width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: .375rem; }
.cmp-head .cmp-short { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; line-height: 1.2; }
.cmp-head .cmp-headprice { font-size: .95rem; margin-top: .125rem; }
.cmp-photo img { display: block; margin: 0 auto; width: 100%; max-width: 280px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: .5rem; }
.cmp-price { font-size: 1.25rem; font-weight: 700; }
.cmp-old { color: var(--bs-secondary-color); font-size: .85rem; }
.cmp-table td { text-align: center; }
.cmp-table td.cmp-text { text-align: left; }
.cmp-spec-row.cmp-differs th, .cmp-spec-row.cmp-differs td { background: var(--bs-warning-bg-subtle, rgba(255, 193, 7, .15)); }
.cmp-spec-row.cmp-differs .cmp-label { color: var(--bs-body-color); font-weight: 600; }
.cmp-mark { display: inline-block; margin-right: .25rem; font-weight: 700; }
.cmp-only-diff .cmp-spec-row:not(.cmp-differs) { display: none; }
.cmp-switch[hidden] { display: none; }
.cmp-fit[data-state="fits"] { color: var(--bs-success); font-weight: 600; }
.cmp-links a { font-size: .85rem; }
@media (max-width: 575.98px) {
    .cmp-table th, .cmp-table td { padding: .35rem .3rem; font-size: .85rem; }
    .cmp-table .cmp-label, .cmp-table.cmp-two .cmp-label { width: 24%; font-size: .75rem; }
    .cmp-price { font-size: 1rem; }
    .cmp-head img { width: 44px; height: 44px; }
}
.cmp-with-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }