.pc-compare{
  position:absolute;top:10px;inset-inline-start:10px;width:34px;height:34px;border-radius:999px;
  background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);opacity:0;transition:opacity .18s,background .18s,color .18s;
  z-index:4;cursor:pointer;padding:0;
}
.pc:hover .pc-compare,.pc-compare.is-on,.pc-compare:focus-visible{opacity:1}
@media (hover: none) {
  .pc-compare { opacity: 1 !important; width: 44px; height: 44px; }
}
.pc-compare.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pc-compare svg{pointer-events:none}

.compare-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:95;
  background:var(--navy);color:#fff;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 28px rgba(14,22,38,.22);
  direction:rtl;
}
.compare-bar__inner{
  max-width:var(--wrap,1200px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.compare-bar__link{
  color:#fff;font-weight:800;font-size:15px;text-decoration:none;letter-spacing:.2px;
}
.compare-bar__link:hover{color:var(--teal-2)}
.compare-bar__clear{
  background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;
  padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.compare-bar__clear:hover{border-color:#fff}

.cmp-shell{padding:28px 0 72px}
.cmp-head{margin-bottom:24px}
.cmp-head h1{font-size:clamp(24px,3vw,32px);font-weight:900;margin:0 0 8px}
.cmp-head p{margin:0;color:var(--muted);font-size:14px}
.cmp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cmp-btn{
  background:var(--ink);color:#fff;border:0;padding:10px 18px;font-weight:800;font-size:12.5px;
  letter-spacing:.3px;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
}
.cmp-btn.is-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}

.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding-bottom:8px}
.cmp-table{width:100%;min-width:640px;border-collapse:collapse;direction:rtl}
.cmp-table th,.cmp-table td{
  border:1px solid var(--line);padding:14px 12px;vertical-align:middle;text-align:center;font-size:13.5px;
}
.cmp-table th.cmp-label{
  text-align:start;font-weight:800;background:var(--bg);color:var(--ink);min-width:120px;white-space:nowrap;
}
.cmp-table thead th.cmp-label{background:transparent;border-top:0}
.cmp-prod-head{min-width:150px;max-width:190px}
.cmp-prod-head img{width:100px;height:100px;object-fit:contain;display:block;margin:0 auto 8px;background:#fff}
.cmp-prod-head .cmp-name{font-weight:800;font-size:13px;line-height:1.35;display:block;color:var(--ink);text-decoration:none}
.cmp-prod-head .cmp-name:hover{color:var(--teal-2)}
.cmp-remove{
  margin-top:8px;background:transparent;border:0;color:var(--muted);font-size:11.5px;font-weight:700;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.cmp-remove:hover{color:var(--ink)}
.cmp-price{font-weight:900;font-size:16px}
.cmp-stock.in{color:var(--teal-2);font-weight:800}
.cmp-stock.out{color:#c44;font-weight:800}
.cmp-rating{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.cmp-rating .stars{color:#f5a623;letter-spacing:1px;font-size:14px}
.cmp-rating .avg{font-weight:800}
.cmp-rating .cnt{color:var(--muted);font-size:12px}
.cmp-empty{
  text-align:center;padding:56px 20px;background:var(--bg);border:1px dashed var(--line);
}
.cmp-empty h2{font-size:20px;margin:0 0 8px}
.cmp-empty p{color:var(--muted);margin:0 0 18px}

@media (min-width:768px){
  .compare-bar{display:none}
}