/* === 1 Announcement bar === */
.anno.is-dismissed{display:none !important}
.anno-close{width:34px;height:34px;border:0;background:transparent;color:#fff;opacity:.75;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;flex-shrink:0}
.anno-close:hover{opacity:1;background:rgba(255,255,255,.1)}

/* === 2 Card hover 2nd image — see clean-pcard.blade.php (@once styles) === */

/* === 4 Swatches on card (16px, RTL, tooltip) === */
.pc-swatches{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin-top:6px;
  direction:rtl;
}
.pc-swatch{
  position:relative;
  flex:0 0 16px;
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid transparent;
  box-shadow:0 0 0 1px var(--line) inset;
  cursor:pointer;
  padding:0;
  background:var(--swatch, #ccc);
}
.pc-swatch.is-on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.pc-swatch[data-label]::after{
  content:attr(data-label);
  position:absolute;
  bottom:calc(100% + 6px);
  inset-inline-start:50%;
  transform:translateX(-50%);
  padding:4px 8px;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  color:#fff;
  background:var(--ink);
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:12;
}
.pc-swatch:hover::after,
.pc-swatch:focus-visible::after{opacity:1}
.pc-swatches-more{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  line-height:16px;
  padding-inline:2px;
  user-select:none;
  pointer-events:none;
}

/* === 5 Quick-add === */
.pc-quick-add{position:absolute;bottom:10px;inset-inline-start:10px;width:40px;height:40px;border-radius:999px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.pc:hover .pc-quick-add{opacity:1;transform:translateY(0)}
.pc-quick-add:hover{background:var(--teal-2)}
@media (hover:none){.pc-quick-add{opacity:1;transform:none}}

/* === 6 Hero slider (home) === */
/* Hero slider rules live in main.css (avoid duplicate / will-change scroll bugs) */

/* === 8 Predictive search — styles in css/store/main.css === */

/* === 9 Category filters === */
.cat-range{margin-top:10px}
.cat-range input[type=range]{width:100%;accent-color:var(--navy)}
.cat-range-values{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px;font-weight:600}