/* CJS — homepage "Biggest price drops right now" band.
   Markup: cjs_price_drops_home_render() in lib/cjs_price_drops.php, emitted by the
   cjsHomePriceDrops panel (includes/display/cjsHomePriceDrops.php) from
   templates/Infinity/default.html. Same curated data as /pages/Price-Drops.html.

   Design notes (Impeccable polish, 2026-10-24): one dark, red-tinted surface with
   no gradients, glows or textures; the site's own voices (Open Sans heading,
   Open Sans body, red #cd1e24 CTA like the Trending cards); warm neutrals derived
   from the brand red rather than cool greys; drawn SVG arrow, no glyph icons; the
   only motion is the card hover. The urgency is the real "Dropped 5 hours ago ·
   was around £47.85 for the last 2 weeks" line, so there are no timers or hype. */

.cjs-hd { position:relative; margin:0 0 34px; padding:38px 0 42px; color:#fff; background:#1a1315;
  border-top:1px solid #2b2124; border-bottom:1px solid #2b2124;
  font-family:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.cjs-hd-inner { max-width:1480px; margin:0 auto; padding:0 18px; box-sizing:border-box; }
.cjs-hd a, .cjs-hd a:hover { text-decoration:none !important; }
.cjs-hd ::selection { background:#cd1e24; color:#fff; }
.cjs-hd a:focus-visible, .cjs-hd .cjs-hd-cta:focus-visible { outline:2px solid #fff; outline-offset:3px; border-radius:4px; }
.cjs-hd-card a:focus-visible { outline-color:#cd1e24; }

/* ---- Header row ---- */
.cjs-hd-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:22px; }
.cjs-hd-head-main { min-width:0; }
.cjs-hd h2 { margin:0 0 8px; font-family:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-weight:700;
  font-size:clamp(22px, 2vw, 27px); line-height:1.15; letter-spacing:-.01em; color:#fff; text-align:left; text-wrap:balance; }
.cjs-hd-sub { margin:0; max-width:62ch; font-size:14px; line-height:1.55; color:#d8c9cc; text-align:left; text-wrap:pretty; }
.cjs-hd-all { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:4px 0; min-height:44px; box-sizing:border-box;
  color:#fff; font-weight:600; font-size:14px; line-height:1.3;
  text-decoration:underline !important; text-decoration-color:#cd1e24; text-decoration-thickness:2px; text-underline-offset:5px; }
.cjs-hd-all:hover { color:#fff; text-decoration-color:#fff; }
.cjs-hd-all svg { width:16px; height:16px; flex:0 0 16px; }
.cjs-hd-all-bottom { display:none; }

/* ---- Cards ---- */
.cjs-hd-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; }
.cjs-hd-grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.cjs-hd-grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:1020px; }
.cjs-hd-card { position:relative; display:flex; flex-direction:column; min-width:0; background:#fff; color:#1a1315;
  border:1px solid #e6dfe0; border-radius:8px; overflow:hidden; box-shadow:0 1px 2px rgba(26,19,21,.18);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1); }
.cjs-hd-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px -10px rgba(26,19,21,.55); }
.cjs-hd-badge { position:absolute; top:10px; left:10px; z-index:2; background:#cd1e24; color:#fff; font-size:13px; font-weight:700;
  line-height:1; padding:6px 8px; border-radius:4px; font-variant-numeric:tabular-nums; }
.cjs-hd-img { height:168px; padding:18px 18px 8px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; background:#fff; }
.cjs-hd-img a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.cjs-hd-img img { max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important;
  object-fit:contain; border:0; border-radius:4px; }
.cjs-hd-body { display:flex; flex-direction:column; gap:6px; padding:8px 16px 16px; flex:1; }
.cjs-hd-chip { align-self:flex-start; display:inline-block; font-size:11px; font-weight:700; line-height:1.4; padding:3px 8px; border-radius:4px;
  white-space:nowrap; background:#f1ecec; color:#4a3f41; }
.cjs-hd-chip-new_supplier { background:#e8eef8; color:#2a4d8f; }
.cjs-hd-chip-lowest_60d, .cjs-hd-chip-below_usual { background:#e9f5ec; color:#1f6b3a; }
.cjs-hd-chip-back_in_stock { background:#fbeee2; color:#9a4a12; }
.cjs-hd-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em;
  color:#1a1315; font-size:14px; font-weight:600; line-height:1.35; text-align:left; }
.cjs-hd-name:hover { color:#cd1e24; }
.cjs-hd-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; font-variant-numeric:tabular-nums; }
.cjs-hd-was { color:#7a6c6f; font-size:13px; font-weight:600; text-decoration:line-through; text-decoration-color:#a89a9d; }
.cjs-hd-now { font-size:22px; font-weight:800; color:#1a1315; letter-spacing:-.01em; line-height:1.1; }
.cjs-hd-save { font-size:12.5px; font-weight:700; color:#1f6b3a; }
.cjs-hd-when { font-size:12.5px; line-height:1.45; color:#5e5255; padding-top:8px; border-top:1px solid #ece6e7; text-align:left; }
.cjs-hd-cta { display:flex; align-items:center; justify-content:center; margin-top:8px; min-height:40px; border-radius:4px;
  background:#cd1e24; color:#fff; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; transition:background .15s; }
.cjs-hd-cta:hover { background:#b3161c; color:#fff; }

/* ---- RTL (Hebrew) ---- */
.cjs-hd[dir="rtl"] h2, .cjs-hd[dir="rtl"] .cjs-hd-sub, .cjs-hd[dir="rtl"] .cjs-hd-name, .cjs-hd[dir="rtl"] .cjs-hd-when { text-align:right; }
.cjs-hd[dir="rtl"] .cjs-hd-badge { left:auto; right:10px; }
.cjs-hd[dir="rtl"] .cjs-hd-all svg { transform:scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .cjs-hd-card, .cjs-hd-card:hover { transform:none; transition:none; }
}

/* ---- Tablet / small laptop: swipe rail ---- */
@media (max-width: 1200px) {
  .cjs-hd-grid, .cjs-hd-grid-4, .cjs-hd-grid-3 { display:flex; max-width:none; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; padding:4px 2px 14px; margin:0 -2px; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:#5e5255 transparent; }
  .cjs-hd-grid::-webkit-scrollbar { height:6px; }
  .cjs-hd-grid::-webkit-scrollbar-thumb { background:#5e5255; border-radius:3px; }
  .cjs-hd-card { flex:0 0 240px; scroll-snap-align:start; }
}

/* ---- Phone ---- */
@media (max-width: 767px) {
  .cjs-hd { padding:28px 0; margin-bottom:26px; }
  .cjs-hd-inner { padding:0 14px; }
  .cjs-hd-head { display:block; margin-bottom:14px; }
  .cjs-hd-head > .cjs-hd-all { display:none; }
  .cjs-hd h2 { font-size:22px; }
  .cjs-hd-sub { font-size:13.5px; }
  .cjs-hd-card { flex-basis:min(72vw, 250px); }
  .cjs-hd-img { height:150px; }
  .cjs-hd-now { font-size:21px; }
  .cjs-hd-all-bottom { display:flex; justify-content:center; margin-top:14px; width:100%; min-height:44px; padding:0 18px;
    border:1px solid #5e5255; border-radius:4px; text-decoration:none !important; }
  .cjs-hd-all-bottom:hover { border-color:#fff; }
}