/* Countdown Timer — a flash-sale strip, a card, a band or a progress bar.
 *
 * The looks differ in four ways only: the layout, what surrounds each number,
 * where the unit names sit, and whether the title has a band of its own. Each
 * is a class on the root and every colour and size is a custom property, so
 * the Liquid writes the same markup for all of them and the script only turns
 * the numbers over.
 *
 * Sizes that have to fit are capped against the block's own width with
 * container query units, not the screen's. The same block can fill a
 * full-width section or sit in a 400px product column on a desktop, and only
 * its own width says how much room four boxes have.
 */

.pb-cd {
  margin-block: var(--pb-cd-st, 0) var(--pb-cd-sb, 0);
  container-type: inline-size;
  font-family: inherit;
}
.pb-cd[hidden] { display: none; }

/* A set length is only known once the script has read when this shopper
   arrived. Until then the card keeps its space but stays unseen, rather than
   showing the full length and jumping to the real one. */
.pb-cd[data-wait] .pb-cd__card { visibility: hidden; }

.pb-cd__card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--pb-cd-py, 18px) var(--pb-cd-px, 20px);
  color: var(--pb-cd-tc, #fff);
  background-color: var(--pb-cd-bg, #e8625b);
  background-image: var(--pb-cd-img, none), var(--pb-cd-grad, none);
  background-position: center;
  background-size: cover;
  border: 2px var(--pb-cd-b, none) var(--pb-cd-bc, #fff);
  border-radius: var(--pb-cd-r, 8px);
}

/* ── the band ────────────────────────────────────────────────────────── */

.pb-cd--band .pb-cd__card { padding-top: 0; }
.pb-cd__band {
  margin: 0 calc(var(--pb-cd-px, 20px) * -1) var(--pb-cd-g, 20px);
  padding: 0.45em var(--pb-cd-px, 20px);
  overflow: hidden;
  font-size: var(--pb-cd-ts, 20px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--pb-cd-tc, #fff);
  background: var(--pb-cd-band, #e85d5d);
}
.pb-cd__bt { display: inline-flex; align-items: center; gap: 0.35em; }

/* Scrolling: the title twelve times in a track as wide as its content, moved
   left by exactly half of it — six copies — so the loop has no seam and
   nothing is measured at runtime. Only the first copy is read out. */
.pb-cd__band--run { padding-inline: 0; text-align: start; }
.pb-cd__track {
  display: flex;
  width: max-content;
  animation: pb-cd-marquee var(--pb-cd-speed, 16s) linear infinite;
}
.pb-cd__track .pb-cd__bt { flex: 0 0 auto; padding-inline-end: 2.5em; white-space: nowrap; }
@keyframes pb-cd-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ── the parts ───────────────────────────────────────────────────────── */

.pb-cd__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pb-cd-g, 20px);
}
/* Room for the close cross on both sides, so a centred layout stays centred. */
.pb-cd--x .pb-cd__in { padding-inline: 26px; }

.pb-cd__text { min-width: 0; }
.pb-cd__title {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  font-size: var(--pb-cd-ts, 20px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--pb-cd-tc, #fff);
}
.pb-cd__ico { flex: 0 0 auto; width: 1.2em; height: 1.2em; object-fit: contain; }
.pb-cd__sub { margin: 0.15em 0 0; font-size: var(--pb-cd-ss, 15px); line-height: 1.35; color: var(--pb-cd-sc, #ffe8dc); }

/* Side by side: the words lean on the timer, right-aligned against it. */
.pb-cd--row .pb-cd__text { text-align: end; }
.pb-cd--row .pb-cd__title { justify-content: flex-end; }

.pb-cd--stack .pb-cd__in { flex-direction: column; text-align: center; }
.pb-cd--stack .pb-cd__title { justify-content: center; }

/* One line: the title and the subtitle run on like a sentence into the clock. */
.pb-cd--inline .pb-cd__in { gap: 0.5em var(--pb-cd-g, 20px); }
.pb-cd--inline .pb-cd__text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 0.4em; }
.pb-cd--inline .pb-cd__sub { margin: 0; }

/* Where side by side has no room it becomes stacked — decided by the block's
   own width, so a narrow product column gets it on a desktop screen too. */
@container (max-width: 640px) {
  .pb-cd--row .pb-cd__in { flex-direction: column; }
  .pb-cd--row .pb-cd__text { text-align: center; }
  .pb-cd--row .pb-cd__title { justify-content: center; }
}

/* ── the numbers ─────────────────────────────────────────────────────── */

.pb-cd__timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.3em;
  font-variant-numeric: tabular-nums;
}
.pb-cd__u { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.pb-cd__n {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: min(var(--pb-cd-ns, 26px), 9cqi);
  font-weight: 700;
  line-height: 1;
  color: var(--pb-cd-nc, #fff);
}
.pb-cd__l {
  margin-top: 0.35em;
  font-size: var(--pb-cd-ls, 12px);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--pb-cd-lc, #ffe8dc);
}
/* The colon lines up with the numbers, not with the numbers and their names. */
.pb-cd__sep {
  display: flex;
  align-items: center;
  height: min(var(--pb-cd-ns, 26px), 9cqi);
  font-size: calc(min(var(--pb-cd-ns, 26px), 9cqi) * 0.8);
  font-weight: 700;
  line-height: 1;
  color: var(--pb-cd-nc, #fff);
}
.pb-cd--nosep .pb-cd__sep { display: none; }
.pb-cd--nosep .pb-cd__timer { gap: 0.6em; }

/* A box or a circle holds the number — or, with the names inside, the whole
   unit. Capped at 15% of the block's width, so four of them with their colons
   and the card's padding still fit a 300px column. */
.pb-cd--box-square:not(.pb-cd--lab-inside) .pb-cd__n,
.pb-cd--box-circle:not(.pb-cd--lab-inside) .pb-cd__n,
.pb-cd--box-square.pb-cd--lab-inside .pb-cd__u,
.pb-cd--box-circle.pb-cd--lab-inside .pb-cd__u {
  justify-content: center;
  width: min(var(--pb-cd-bs, 60px), 15cqi);
  height: min(var(--pb-cd-bs, 60px), 15cqi);
  background: var(--pb-cd-bf, transparent);
  border: 2px var(--pb-cd-bb, dashed) var(--pb-cd-bbc, #fff);
  border-radius: var(--pb-cd-br, 6px);
}
.pb-cd--box-circle:not(.pb-cd--lab-inside) .pb-cd__n,
.pb-cd--box-circle.pb-cd--lab-inside .pb-cd__u { border-radius: 50%; }
.pb-cd--box-square .pb-cd__n,
.pb-cd--box-circle .pb-cd__n { font-size: min(var(--pb-cd-ns, 26px), 6cqi); }
.pb-cd--box-square .pb-cd__sep,
.pb-cd--box-circle .pb-cd__sep {
  height: min(var(--pb-cd-bs, 60px), 15cqi);
  font-size: calc(min(var(--pb-cd-ns, 26px), 6cqi) * 0.8);
}
.pb-cd--lab-inside .pb-cd__l { margin-top: 0.2em; }

/* Units the merchant chose not to show, with the colon that followed them. */
.pb-cd--u-hms [data-u="d"],
.pb-cd--u-hms [data-u="d"] + .pb-cd__sep,
.pb-cd--u-ms [data-u="d"],
.pb-cd--u-ms [data-u="d"] + .pb-cd__sep,
.pb-cd--u-ms [data-u="h"],
.pb-cd--u-ms [data-u="h"] + .pb-cd__sep,
.pb-cd[data-nodays] [data-u="d"],
.pb-cd[data-nodays] [data-u="d"] + .pb-cd__sep { display: none; }

/* ── the progress bar ────────────────────────────────────────────────── */

/* The words on the left, the time on the right, the bar underneath. The clock
   is compact here whatever the number settings say: no box, no names. */
.pb-cd--bar .pb-cd__in { flex-wrap: nowrap; justify-content: space-between; gap: 0.75em; }
.pb-cd--bar .pb-cd__text { text-align: start; }
.pb-cd--bar .pb-cd__title { font-weight: 400; }
.pb-cd.pb-cd--bar .pb-cd__u,
.pb-cd.pb-cd--bar .pb-cd__n {
  width: auto;
  height: auto;
  background: none;
  border: 0;
  font-size: var(--pb-cd-ns, 15px);
}
.pb-cd.pb-cd--bar .pb-cd__sep { height: auto; font-size: var(--pb-cd-ns, 15px); }
.pb-cd--bar .pb-cd__l { display: none; }
.pb-cd--bar .pb-cd__timer { gap: 0.1em; }

.pb-cd__bar {
  height: var(--pb-cd-bh, 8px);
  margin-top: 0.65em;
  overflow: hidden;
  border-radius: 999px;
  background: var(--pb-cd-track, color-mix(in srgb, var(--pb-cd-fill, #fff) 25%, transparent));
}
.pb-cd__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pb-cd-fill, #fff);
  transition: width 1s linear;
}

/* ── when it is over ─────────────────────────────────────────────────── */

.pb-cd__end { display: none; margin: 0; font-size: var(--pb-cd-ss, 15px); font-weight: 600; color: var(--pb-cd-tc, #fff); }
.pb-cd[data-ended] .pb-cd__end { display: block; }
.pb-cd[data-ended] .pb-cd__timer,
.pb-cd[data-ended] .pb-cd__code,
.pb-cd[data-ended] .pb-cd__bar { display: none; }

/* ── button, coupon, close ───────────────────────────────────────────── */

.pb-cd__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.6em 1.2em;
  font-size: var(--pb-cd-cs, 15px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: var(--pb-cd-cf, #fff);
  background: var(--pb-cd-cb, #111);
  border-radius: var(--pb-cd-cr, 4px);
  transition: filter 0.2s ease;
}

/* The coupon borrows the title's colour and a dashed edge, the way a code
   printed on a flyer would look. One tap copies it. */
.pb-cd__code {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 0.5em 0.9em;
  font: inherit;
  font-size: var(--pb-cd-cs, 15px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--pb-cd-tc, #fff);
  background: transparent;
  border: 2px dashed color-mix(in srgb, currentColor 70%, transparent);
  border-radius: var(--pb-cd-cr, 4px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Two bordered squares for "copy", one bent border for "copied". */
.pb-cd__copy { position: relative; flex: 0 0 auto; width: 0.85em; height: 0.85em; }
.pb-cd__copy::before,
.pb-cd__copy::after {
  content: "";
  position: absolute;
  width: 0.58em;
  height: 0.58em;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.pb-cd__copy::before { left: 0; bottom: 0; }
.pb-cd__copy::after { right: 0; top: 0; }
.pb-cd__code[data-done] .pb-cd__copy::after { display: none; }
.pb-cd__code[data-done] .pb-cd__copy::before {
  left: 50%;
  bottom: 55%;
  width: 0.3em;
  height: 0.6em;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  transform: translate(-50%, 45%) rotate(40deg);
}

.pb-cd__x {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  color: var(--pb-cd-tc, #fff);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.pb-cd__x::before,
.pb-cd__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
}
.pb-cd__x::after { transform: rotate(-45deg); }
/* On a band the cross sits over the title — a scrolling one runs straight
   through it — so it wears the band's colour and the words pass beneath. */
.pb-cd--band .pb-cd__x { background: var(--pb-cd-band, #e85d5d); }

@media (hover: hover) {
  .pb-cd__cta:hover { filter: brightness(1.12); }
  .pb-cd__x:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
  .pb-cd--band .pb-cd__x:hover { background: color-mix(in srgb, var(--pb-cd-band, #e85d5d) 80%, #000); }
}
.pb-cd__cta:focus-visible,
.pb-cd__code:focus-visible,
.pb-cd__x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.pb-cd__hint {
  margin: 0.75em 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.8;
}

/* The band holds still and shows its title once; the bar stops gliding. */
@media (prefers-reduced-motion: reduce) {
  .pb-cd__track { width: auto; justify-content: center; animation: none; }
  .pb-cd__track .pb-cd__bt[aria-hidden] { display: none; }
  .pb-cd__track .pb-cd__bt { padding-inline-end: 0; }
  .pb-cd__fill { transition: none; }
}