/* === 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 Mega menu products === */
.mega-inner.has-products{grid-template-columns:1fr 1fr 1fr minmax(200px,1.2fr)}
.mega-products{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mega-prod{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color var(--tap),box-shadow var(--tap)}
.mega-prod:hover{border-color:var(--navy);box-shadow:var(--shadow-1)}
.mega-prod img{width:52px;height:52px;object-fit:contain;background:#f5f6f8;flex:0 0 52px}
.mega-prod strong{display:block;font-size:12px;font-weight:700;line-height:1.3}
.mega-prod span{font-size:11px;color:var(--muted);font-weight:700}
.mega-col-visual a{display:flex;align-items:center;gap:8px}
.mega-col-visual img{width:36px;height:36px;border-radius:6px;object-fit:cover;background:#f5f6f8}

/* === 3 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}