/* ====== Sitewide Sale Banner ====== */
.cav-sale-banner {
  background: #b3261e;
  color: #fff;
  text-align: center;
  font: 600 15px/1.35 Arial, sans-serif;
  padding: 10px 16px;
  letter-spacing: .01em;
  position: fixed;
  top: calc(var(--cav-sale-nav-height, 0px) + 6px);
  left: 0;
  right: 0;
  /* Must be above the navbar (1000) AND its internal elements (1001/1002) */
  z-index: 1003;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.cav-sale-banner strong { font-weight: 800; margin-right: 8px; }
.cav-sale-banner span   { font-weight: 400; margin-left: 4px; }

/* Push page body down so content never hides under the banner.
   This stylesheet is only injected when the sale is active, so the
   selector needs no JS class — it fires on first CSS parse, before
   any JS runs, eliminating the layout-shift "jump". */
body:has(.cav-sale-banner) {
  --cav-sale-banner-height: 41px;
  padding-top: var(--cav-sale-banner-height) !important;
}

/* ====== Product image price tag — sale dual-price variant ====== */
/* Tag background is white/near-white so use dark-on-white color scheme */
.product-image-price-tag .cav-sale-original-price {
  text-decoration: line-through;
  color: rgba(11,36,71,0.45);   /* muted navy — readable on white */
  font-weight: 400;
  margin-right: 5px;
  font-style: normal;
}
.product-image-price-tag .cav-sale-new-price {
  color: #b3261e;               /* sale red — stands out on white */
  font-weight: 800;
}

/* ====== Inline price strikethrough on price elements ====== */
.cav-sale-original {
  color: #777;
  text-decoration: line-through;
  margin-right: 6px;
  font-weight: 400;
}
.cav-sale-price { color: #b3261e; font-weight: 800; }
.sitewide-discount-row { color: #237a43; font-weight: 600; }

/* ====== Product card / image badge ====== */
.cav-sale-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: #b3261e;
  color: #fff;
  border-radius: 3px;
  padding: 6px 8px;
  font: 800 12px/1 Arial, sans-serif;
  letter-spacing: .03em;
}

@media (max-width: 600px) {
  .cav-sale-banner { font-size: 13px; padding: 9px 10px; }
  .cav-sale-banner span { display: block; margin: 2px 0 0; }
  .cav-sale-badge { top: 6px; left: 6px; font-size: 11px; padding: 5px 6px; }
  body.cav-sale-active { --cav-sale-banner-height: 52px; }
}

/* Hide banner when mobile nav is open so it doesn't cover the menu */
body:has(#mobile-menu.active) .cav-sale-banner { display: none; }