/* Collapse toggle */
.sts-compare-bar { position:fixed; left:0; right:0; bottom:0; z-index:9999; }
.sts-compare-bar__toggle {
  position:absolute; left:16px; top:-22px; width:28px; height:28px; border-radius:999px;
  border:1px solid #ddd; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); cursor:pointer;
  transform: rotate(0deg); transition: transform .2s ease;
}
.sts-compare-bar.is-collapsed .sts-compare-bar__toggle {  }

/* Header card in compare table */
.head-card { text-align:center; }
.head-card__img img { width:110px; height:auto; object-fit:contain; display:inline-block; }
.head-card__name { font-weight:600; margin:6px 0; }
.head-card__rm { margin-top:6px; }

/* Group rows */
.group-head td {
  background:#f1f5f9;
  font-weight:700;
  padding:10px;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-align:center;
  
}

/* Highlighting */
.sts-compare-table tr.is-different { background:#fff9f2; }   /* light orange for differences */
.sts-compare-table tr.is-similar   { background:#f2fff2; }   /* light green for similarities */


.sts-compare-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.sts-hl-btns{display:inline-flex;gap:8px}
.sts-hl-btn{border:1px solid #d0d7de;background:#fff;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer}
.sts-hl-btn.is-active{background:#0d6efd;border-color:#0d6efd;color:#fff}
.sts-compare-table .group-head{background:#f6f8fa;font-weight:700}
.sts-compare-table tr.is-different{background:#fff7e6}
.sts-compare-table tr.is-similar{background:#e9fbe9}



/* Compare button – theme-friendly */
.button.sts-add-compare{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px; font-weight:600; line-height:1;
  padding:.4rem .8rem; transition:.15s ease;
}
.button.sts-add-compare .ti-control-shuffle{ font-size:1rem; }

/* Active (in list or on PDP) */
.button.sts-add-compare.is-active,
.button.sts-add-compare[aria-pressed="true"]{
  color:#fff; background:#0d6efd; border-color:#0d6efd;  /* bootstrap-ish primary */
}
.button.sts-add-compare.is-active:hover{ filter:brightness(.96); }

/* If the theme groups buttons on cards */
.groups-button .sts-add-compare{ order:0; margin-right:8px; }

/* Optional small counter badge for header icon */
.sts-compare-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .5rem; border:1px solid #e9ecef; border-radius:999px;
}
.sts-compare-pill .sts-compare-count{
  min-width:1.25rem; text-align:center; font-weight:700;
}



/* Add FA icon before the label without needing an <i> tag */
.sts-add-compare.has-fa:before{
  content:"\f074"; /* shuffle/random */
  font-family:"FontAwesome";
  font-weight:900;            /* FA6/5 solid weight; ignored by FA4 */
  display:inline-block;
  margin-right:.5rem;
  line-height:0;
}

/* Optional: different icon when active (checkmark) */
.sts-add-compare.has-fa[aria-pressed="true"]:before{
  content:"\f00c"; /* check icon */
}


button.sts-add-compare {color: #fff !important;
  background: #1b75bc !important;
  border: #166db3 solid !important;}
  
  
  /* Compare header cell */
.sts-compare-root .head-card{
  text-align:center;
  vertical-align:top;
  padding:18px 12px;
  background:#fafbfc;
}

/* Product thumbnail */
.sts-compare-root .head-card__img{
  display:block;
  width:100%;
  max-width:110px;
  margin:0 auto 10px;
}
.sts-compare-root .head-card__img img{
  display:block;
  width:100%;
  height:100px;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.06);
  background:#fff;
}

/* Title */
.sts-compare-root .head-card__name{
  display:block;
  margin:6px 0 12px;
  font-size:16px;
  line-height:1.35;
  font-weight:600;         /* lighter than heavy bold */
  color:#333;
  text-decoration:none;
  text-wrap:balance;       /* nicer line breaks (supported browsers) */
}
.sts-compare-root .head-card__name:hover{ text-decoration:underline; }

/* Outline “Remove” button */
.sts-compare-root .head-card__rm.button{
  display:inline-block;
  margin-top:6px;
  padding:8px 18px;
  background:#fff;
  border:2px solid #e53935;
  color:#e53935;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.07);
  font-weight:600;
  cursor:pointer;
  appearance:none;
}
.sts-compare-root .head-card__rm.button:hover{
  background:#ffecec;
  border-color:#d32f2f;
}

/* Subtle divider between columns */
.sts-compare-root th.head-card + th.head-card{
  border-left:1px solid #eceff1;
}
/* Simple, professional PDF button */
.sts-compare-print{
  display:inline-flex;
  align-items:center;
  padding:.55rem 1rem;
  border-radius:.5rem;
  font-weight:600;
  text-decoration:none !important; /* keep it button-like */
}
.sts-compare-print .fa{ margin-inline-end:.5rem; font-size:1.05em; }

/* Subtle polish */
.sts-compare-print:hover{ box-shadow:0 .25rem .75rem rgba(0,0,0,.08); }
.sts-compare-print:focus{ outline:0; box-shadow:0 0 0 .2rem rgba(13,110,253,.25); } /* matches Bootstrap primary */