.ec-productRole__countdown { margin: 16px 0; }
.countdown-expired {
  display: inline-flex; align-items: center; gap: 8px;
  background: #f0f0f0; color: #888; border: 1px solid #ccc;
  border-radius: 6px; padding: 10px 16px; font-size: .95rem;
}
.countdown-timer {
  background: #fff8e1; border: 1px solid #ffcc00;
  border-radius: 8px; padding: 14px 18px; display: inline-block;
}
.countdown-timer__label  { font-size: .85rem; color: #555; margin: 0 0 8px; }
.countdown-timer__units  { display: flex; align-items: center; gap: 6px; }
.countdown-timer__unit   { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.countdown-timer__value  { font-size: 2rem; font-weight: 700; color: #d32f2f; line-height: 1; }
.countdown-timer__name   { font-size: .7rem; color: #777; margin-top: 2px; }
.countdown-timer__sep    { font-size: 1.5rem; font-weight: 700; color: #d32f2f; padding-bottom: 10px; }
.countdown-timer__warning{ font-size: .8rem; color: #e65100; margin: 10px 0 0; }
.countdown-timer.is-warning { background: #fff3e0; border-color: #ff9800; }
.countdown-timer.is-warning .countdown-timer__value,
.countdown-timer.is-warning .countdown-timer__sep { color: #e65100; }
.countdown-timer.is-urgent  { background: #ffebee; border-color: #d32f2f; animation: pulse 1s infinite; }
.countdown-timer.is-urgent .countdown-timer__value,
.countdown-timer.is-urgent .countdown-timer__sep  { color: #b71c1c; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(211,47,47,.4); }
  50%     { box-shadow: 0 0 0 6px rgba(211,47,47,0); }
}
@media (max-width: 480px) {
  .countdown-timer { width: 100%; }
  .countdown-timer__value { font-size: 1.6rem; }
  .countdown-timer__unit  { min-width: 42px; }
}
.countdown-timer--compact {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 2px; padding: 6px 10px; font-size: .85rem;
}
.countdown-timer--compact .countdown-timer__label { font-size: .75rem; margin-right: 4px; }
.countdown-timer--compact .countdown-timer__value { font-size: 1.1rem; min-width: auto; }
.countdown-timer--compact .countdown-timer__name  { font-size: .65rem; }
.countdown-timer--compact .countdown-timer__sep   { font-size: 1rem; padding-bottom: 4px; }