/* Shared emphasis for the live promotion, with the existing countdown hooks. */
.sale-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flash-sale .flash-sale__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 32px;
  align-items: stretch;
}

.flash-sale .eyebrow,
.sale-countdown-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flash-sale .flash-sale__header h2 {
  font-size: clamp(56px, 9vw, 112px);
}

.flash-sale__subtitle {
  margin: 16px 0 0;
  color: var(--white);
  font-size: clamp(16px, 2vw, 22px);
}

.flash-sale__countdown {
  min-width: 0;
  padding: clamp(14px, 3vw, 32px);
  background: var(--aubergine);
  border: 1px solid rgba(112, 224, 210, 0.3);
}

.sale-countdown-label {
  margin: 0 0 18px;
  color: var(--aqua);
  font: 700 12px/1.4 var(--utility);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.flash-sale .flash-timer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(3px, 1.4vw, 20px);
  width: 100%;
}

.flash-sale .flash-timer__block {
  min-width: 0;
  gap: 12px;
}

.flash-sale .flash-timer__digit {
  min-width: 0;
  width: 100%;
  height: clamp(76px, 13vw, 168px);
  font-size: clamp(36px, 9vw, 112px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  box-shadow: none;
  animation: none;
}

.flash-sale .flash-timer__label {
  font-size: clamp(10px, 1.4vw, 13px);
  color: var(--white);
}

.flash-sale .flash-timer__sep {
  font-size: clamp(24px, 4vw, 48px);
  margin-bottom: 26px;
}

.flash-sale .flash-product__badge,
body[data-page="flash-sale"] .discount-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--aqua);
  color: var(--obsidian);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--utility);
  letter-spacing: -0.04em;
}

.flash-product__badge .sale-icon,
.discount-badge .sale-icon {
  width: 32px;
  height: 32px;
}

.flash-product__badge strong,
.discount-badge strong {
  font: 700 clamp(36px, 4vw, 52px)/1 var(--utility);
}

.sale-discount-label {
  align-self: flex-end;
  margin-bottom: 3px;
  font: 700 14px/1 var(--utility);
  letter-spacing: 0.08em;
}

.flash-sale .flash-product__price {
  font-size: clamp(28px, 3vw, 36px);
}

.flash-sale .flash-product__save {
  padding: 8px 10px;
  font-size: 12px;
}

body[data-page="flash-sale"] .sale-countdown-label {
  margin-top: 30px;
  margin-bottom: 12px;
}

body[data-page="flash-sale"] .timer-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  width: min(100%, 980px);
  max-width: 100%;
  padding: clamp(12px, 3vw, 28px);
  gap: clamp(6px, 2vw, 24px);
  margin: 0;
  overflow: visible;
  background: var(--aubergine);
  border: 1px solid rgba(112, 224, 210, 0.3);
}

body[data-page="flash-sale"] .timer-container .timer-block {
  min-width: 0;
  padding: clamp(12px, 2vw, 24px) 4px;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="flash-sale"] .timer-container .timer-value {
  font: 700 clamp(40px, 9vw, 112px)/1 var(--utility) !important;
  letter-spacing: -0.06em;
  text-shadow: none;
}

body[data-page="flash-sale"] .timer-container .timer-label {
  margin-top: 14px;
  color: var(--white) !important;
}

body[data-page="flash-sale"] .timer-container > div:not(.timer-block) {
  font-size: clamp(24px, 4vw, 48px) !important;
  color: var(--aqua) !important;
  animation: none;
}

@media (max-width: 560px) {
  .flash-sale .flash-sale__header { gap: 24px; }
  .flash-sale .flash-product__badge { margin-bottom: 12px; }
  .flash-sale__subtitle { line-height: 1.5; }
}
