/* 17 Great Finds, live auction countdown chip (2026-09-15). States are set by live-countdown.js. */
.hero-live{gap:12px;padding:6px 7px 6px 14px;font-size:14px;max-width:calc(100vw - 40px)}
.hero-live .live-dot{position:relative}
.hl-copy{display:inline-flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.hl-kicker{font-weight:750;color:var(--deep)}
.hl-sale{font-weight:550;color:#454b57;overflow:hidden;text-overflow:ellipsis}
.hl-extra{font-weight:550;color:#454b57}
@media(max-width:640px){.hl-extra{display:none!important}}
.hl-clock{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;background:var(--deep);color:#fff;flex:none}
.hl-clock b{font:750 15px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hero-live .ta{margin-right:6px}

/* closes tomorrow */
.hero-live.is-soon{border-color:#F1D9A6;background:#FFFCF4}
.hero-live.is-soon .live-dot{background:#D98E04;box-shadow:0 0 0 4px #D98E0424}
.hero-live.is-soon .hl-kicker{color:#8A5A00}
/* closing today */
.hero-live.is-today{border-color:#F3C9B8;background:#FFF8F5}
.hero-live.is-today .live-dot{background:#E2542B;box-shadow:0 0 0 4px #E2542B24}
.hero-live.is-today .hl-kicker{color:#B23A14}
.hero-live.is-today .hl-clock{background:#262262}
/* final hour and closing now */
.hero-live.is-final,.hero-live.is-closing{border-color:#F0B7A3;background:#FFF3EE}
.hero-live.is-final .live-dot,.hero-live.is-closing .live-dot{background:#D4380D;box-shadow:0 0 0 4px #D4380D29}
.hero-live.is-final .hl-kicker,.hero-live.is-closing .hl-kicker{color:#A82C08}
.hero-live.is-final .hl-clock,.hero-live.is-closing .hl-clock{background:#C2410C}
.hero-live.is-quiet .hl-clock{display:none}

/* a soft pulse ring on the dot when a sale closes today, only while the chip is on screen */
.hero-live.is-seen:is(.is-today,.is-final,.is-closing) .live-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;color:#E2542B;opacity:0;animation:hl-pulse 1.8s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes hl-pulse{0%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}

/* auction rows closing within a day */
.countdown.is-urgent{color:#B23A14;background:#FFF1EB;border-color:#F6CDBD;font-variant-numeric:tabular-nums}

@media (hover:hover) and (pointer:fine){
  .hero-live.is-today:hover,.hero-live.is-final:hover,.hero-live.is-closing:hover{border-color:#E9A088}
}
/* phones (2026-10-02, Kyle: "this is messed up"): the name no longer fits beside the clock, and the wrapped
   clock floated centered under it. Now one tidy row: dot | small label over the sale name | clock pill. */
@media(max-width:640px){
  .hero-live{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;
    width:100%;max-width:440px;padding:10px 10px 10px 16px;border-radius:20px;text-align:left}
  .hl-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:normal}
  .hl-kicker{font-size:clamp(9.5px,2.75vw,11px);font-weight:700;letter-spacing:.045em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
  .hl-sale{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
  .hl-clock{height:36px;padding:0 13px}
  .hl-clock b{font-size:14.5px}
  .hero-live .ta{display:none}
}
@media(prefers-reduced-motion:reduce){.hero-live .live-dot::after{animation:none!important;display:none}}