/* ============================================================================
   GIFT-DEADLINE ENGINE
   Append to styles.css, or keep as its own file and load it after styles.css.
   No !important anywhere — every rule here targets its own pdl- prefix, so
   nothing in the existing sheet has to be out-argued.
   ========================================================================== */

/* ---- the announcement bar ------------------------------------------------
   The bar's HEIGHT IS RESERVED HERE, not by JavaScript, and its markup ships
   in the page with a sentence that is true before any script runs. That is
   what makes this zero-layout-shift: the space is never empty and nothing is
   inserted above the header after paint. min-height rather than height, so a
   long occasion name on a 360px screen wraps instead of clipping. */
.pdl-bar{
  position:relative;z-index:60;
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;
  min-height:52px;padding:12px 18px;
  text-align:center;
  font-family:Inter,system-ui,sans-serif;
  font-size:15px;line-height:1.3;font-weight:600;
  color:#cfdcea;
  /* Not flat navy. A deadline that looks like a cookie notice gets read like
     one — the hairline of brand colour along the top is what stops the eye. */
  background:linear-gradient(180deg,#0b1726,#060f19);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
}
.pdl-bar:before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#7C3AED,#ff4b51,#ffb027);
}
.pdl-bar[hidden]{display:none}
.pdl-msg{min-width:0;letter-spacing:-.005em}
/* The two words that matter — the date and the occasion — carry the weight.
   Everything else stays quiet so they have something to be louder than. */
.pdl-msg b{color:#fff;font-weight:800;font-size:16px;letter-spacing:-.01em}

/* ---- the clock ------------------------------------------------------------
   FOUR LIT TILES. The old version was one monospaced pill reading
   "12d 4h 09m 51s" — accurate, and completely ignorable, because that is
   what a system readout looks like and people have learned to skip those.
   The information has not changed; what changed is that it now looks like
   the most alive thing on the page, which it is: nothing else up there moves
   while you watch it.

   The glow is built from two layers that do different jobs. The text-shadow
   makes the digit itself look lit from within, and the box-shadow throws
   that light onto the dark bar around it — a neon tube and the wall behind
   it. One without the other reads as "blurry text" or "a box with a halo";
   together they read as neon.

   Every colour here comes from the two custom properties, which the tier
   rules below re-point. So calm/warm/hot is a two-line change rather than
   fifteen, and the glow can never drift out of step with the bar it sits on. */
.pdl-bar{
  --pdl-glow:#7ee6f5;      /* the light the tube throws */
  --pdl-ring:rgba(126,230,245,.55);
}
.pdl-clock{
  /* ── THE CLOCK IS CHRISTMAS GREEN, WHATEVER THE BAR IS DOING ──────────
     The tube colour is driven by two custom properties set on .pdl-bar, one
     pair per urgency tier — calm, warm, then the red you see on the last
     day. Setting them again HERE, on the clock itself, means every tile,
     label and colon inherits green from its nearest ancestor instead, and
     the rest of the bar keeps its tier colour untouched: the rule along the
     top, the button and the bold words in the sentence still go from navy
     to coral as the deadline closes.

     Nothing is lost by taking the colour off the clock. The file already
     refuses to let colour be the only signal — the sentence itself changes
     at every tier — so urgency is still legible to somebody who cannot tell
     the navy from the coral, and now to somebody looking only at the clock.

     Luminous rather than deep. A tube is read by the light it throws, and
     the forest green of a wreath (#165B33) throws none on a dark bar; this
     is that green turned up until it glows, which is what the hue is for
     here. ────────────────────────────────────────────────────────────── */
  --pdl-glow:#2BD96B;
  --pdl-ring:rgba(43,217,107,.6);

  flex:0 0 auto;
  display:inline-flex;align-items:flex-end;gap:5px;
  padding:0;border:0;background:none;
}
.pdl-clock[hidden]{display:none}

.pdl-unit{display:flex;flex-direction:column;align-items:center;gap:4px}

.pdl-num{
  display:block;min-width:2.05ch;
  padding:7px 9px 6px;border-radius:10px;
  font:900 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.02em;
  /* Tabular figures, or the whole bar twitches once a second as the digits
     change width — which reads as a page fault, not as urgency. */
  font-variant-numeric:tabular-nums;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  box-shadow:
    inset 0 0 0 1px var(--pdl-ring),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 12px -6px var(--pdl-glow),
    0 0 16px -2px var(--pdl-glow),
    0 0 40px -12px var(--pdl-glow);
  text-shadow:
    0 0 6px var(--pdl-glow),
    0 0 16px var(--pdl-glow),
    0 0 34px var(--pdl-glow);
}

/* Small, quiet, and spelled out. "02 : 11 : 49 : 03" with no labels is a
   riddle — four numbers in a row could be anything, and the one people
   actually need is "days". */
.pdl-lab{
  font:800 8.5px/1 Inter,system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--pdl-glow);opacity:.72;
}

/* The colons sit level with the digits, not the labels, so the row reads as
   a clock rather than as four separate badges. */
.pdl-sep{
  align-self:flex-start;margin-top:9px;
  font:900 15px/1 ui-monospace,monospace;
  color:var(--pdl-glow);opacity:.8;
  text-shadow:0 0 10px var(--pdl-glow);
  animation:pdl-blink 2s steps(1,end) infinite;
}
@keyframes pdl-blink{0%,55%{opacity:.8}56%,100%{opacity:.22}}

/* ONE FLASH ON THE TILE THAT CHANGED, which 59 seconds out of 60 is only
   the seconds. Animating the whole clock every tick would be a strobe; this
   is a candle guttering, and the eye catches it without being dragged to it. */
@keyframes pdl-tick{
  0%  {transform:translateY(-1px) scale(1.055);filter:brightness(1.55)}
  100%{transform:none;filter:none}
}
.pdl-num.is-tick{animation:pdl-tick .42s cubic-bezier(.2,.9,.25,1)}

.pdl-cta{
  flex:0 0 auto;
  color:#fff;text-decoration:none;font-weight:800;font-size:14px;
  padding:10px 18px;border-radius:999px;
  background:#7C3AED;
  box-shadow:0 6px 18px -6px rgba(124,58,237,.9);
  transition:background .18s ease,transform .18s ease;
}
.pdl-cta:hover,.pdl-cta:focus-visible{background:#6D28D9;transform:translateY(-1px)}

/* ---- the three temperatures ---------------------------------------------
   Calm, warm, then hot. The colour is never the only signal — the sentence
   itself changes at each tier — so this still reads correctly to anyone who
   cannot tell the navy from the coral. */
.pdl-bar.is-plenty{
  background:linear-gradient(180deg,#0b1726,#060f19);color:#cfdcea;
  --pdl-glow:#7ee6f5;                       /* PONCHI cyan — calm, still lit */
  --pdl-ring:rgba(126,230,245,.5);
}

/* ---- ONE CLOCK, ONE COLOUR ----------------------------------------------
   The calm tier used to light the four tiles in four brand colours — purple,
   cyan, pink, amber — and urgency then SUBTRACTED, collapsing them into one
   amber at "soon" and one red at "last chance".

   The clock is Christmas green now, at every tier, so those four rules are
   gone rather than left to fight the one that sets it: they are more
   specific than .pdl-clock and would have quietly won back the calm state,
   which is most visitors, most of the year — the exact case nobody would
   have thought to check.

   What that subtraction was signalling has not been lost. It was never
   carried by colour alone: the sentence on the bar changes at every tier,
   the rule along the top, the button and the bold words still go from navy
   through amber to coral, and on the last day the tube is driven harder —
   same green, more of it. See .is-last-chance .pdl-num below. */
.pdl-bar.is-soon{
  background:linear-gradient(180deg,#2a1c05,#190f02);
  border-bottom-color:rgba(255,176,39,.5);
  color:#ffe0ad;
  --pdl-glow:#ffb027;
  --pdl-ring:rgba(255,176,39,.6);
}
.pdl-bar.is-soon:before{background:#ffb027}
.pdl-bar.is-last-chance{
  background:linear-gradient(180deg,#3a0a0f,#220609);
  border-bottom-color:rgba(255,75,81,.6);
  color:#ffd3d5;
  --pdl-glow:#ff5a5f;
  --pdl-ring:rgba(255,90,95,.7);
}
.pdl-bar.is-last-chance:before{background:#ff4b51}
.pdl-bar.is-last-chance .pdl-cta{background:#ff4b51;box-shadow:0 6px 18px -6px rgba(255,75,81,.95)}
.pdl-bar.is-last-chance .pdl-cta:hover{background:#ff6f50}
.pdl-bar.is-last-chance .pdl-msg b{color:#ff8f72}
/* On the last day the tube is simply driven harder. Same colour, more of it
   — a brighter version of a thing you have already learned to read beats a
   new signal you have to work out. */
.pdl-bar.is-last-chance .pdl-num{
  box-shadow:
    inset 0 0 0 1px var(--pdl-ring),
    inset 0 1px 0 rgba(255,255,255,.26),
    0 0 20px -3px var(--pdl-glow),
    0 0 48px -10px var(--pdl-glow);
}
.pdl-bar.is-last-chance .pdl-lab{opacity:.95}

/* ---- which editions the date belongs to -----------------------------------
   The bar's date is the SLOWEST physical edition's date. Printed on its own
   with no subject it reads as a deadline for the whole shop — which pushes a
   Holo Card buyer who still has eight weeks, and tells the Legacy buyer
   nothing about why October closes a December gift.

   Its own full-width line rather than more words in the sentence: the
   sentence, the clock and the button already fill the row, and a fourth
   thing squeezed in beside them is what turns a bar into a mess. flex-basis
   100% in a wrapping centred row is all it takes — no second container, no
   change to how the bar lays out at any other width.

   Set small, in caps, at about half the weight of the sentence above it. It
   is a footnote; the moment it competes with the date it has failed. */
.pdl-eds{
  flex:0 0 100%;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:7px;margin-top:-1px;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.pdl-eds[hidden]{display:none}
.pdl-eds-k{opacity:.55;letter-spacing:.22em;font-weight:800}
/* One pill per edition, lit from the same two custom properties as the clock
   tiles, so the chips follow calm → warm → hot without a rule of their own. */
.pdl-ed{
  padding:4px 11px;border-radius:999px;
  border:1px solid var(--pdl-ring);
  background:rgba(255,255,255,.05);
  color:#fff;letter-spacing:.11em;
  box-shadow:0 0 16px -10px var(--pdl-glow);
  white-space:nowrap;
}
/* The middots are in the markup for the no-CSS case, where chips are just
   words in a row and need separating. With this stylesheet the pills do
   that job and the dots are noise. */
.pdl-eds-dot{display:none}
.pdl-eds-rest{
  opacity:.48;font-weight:600;letter-spacing:.06em;text-transform:none;
  font-size:11px;padding-left:9px;margin-left:2px;
  border-left:1px solid rgba(255,255,255,.18);
}

/* ---- the shimmer along the top -------------------------------------------
   The three-colour hairline was already there and already PONCHI; it just
   sat still. Drifting it turns a line into a light, which is the whole
   difference between a banner people scroll past and one they look at once.
   Deliberately slow — eighteen seconds for a full pass — because anything
   quicker competes with the clock, and only one thing on a bar this size is
   allowed to be the moving one. */
.pdl-bar:before{
  background:linear-gradient(90deg,#7C3AED,#ff4b51,#ffb027,#7ee6f5,#7C3AED);
  background-size:300% 100%;
  animation:pdl-drift 18s linear infinite;
}
@keyframes pdl-drift{0%{background-position:0% 0}100%{background-position:300% 0}}

/* The pulse only ever runs in the last-chance window, and only for visitors
   who have not asked for less movement. See the reduced-motion block below —
   it switches to a static border rather than simply removing the signal. */
@keyframes pdl-pulse{
  0%,100%{box-shadow:inset 0 -2px 0 rgba(255,75,81,.55)}
  50%    {box-shadow:inset 0 -2px 0 rgba(255,75,81,1)}
}
.pdl-bar.is-last-chance{animation:pdl-pulse 2.4s ease-in-out infinite}

/* ---- the line under each edition price ---------------------------------- */
.pdl-card-note{
  margin:6px 0 0;
  font:700 11.5px/1.45 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
  color:#9fb0c4;
}
.pdl-card-note.is-soon{color:#ffb027}
.pdl-card-note.is-last-chance{color:#ff6f50}
.pdl-card-note.is-digital{color:#7ee6f5}
/* The rescue line is the only one that gets a box: during a last-chance window
   it stops being a footnote and becomes the offer. */
.pdl-card-note.is-rescue{
  display:inline-block;margin-top:8px;padding:6px 10px;border-radius:999px;
  color:#0b0e14;background:#7ee6f5;font-weight:800;
}
/* A card selling a LATER occasion than the rest of the site is not urgent, it
   is simply honest — so it is quiet, never red. */
.pdl-card-note.is-rolled{color:#9fb0c4;font-weight:600}

/* ---- the reminder in the order flow ------------------------------------- */
.pdl-create{
  margin:0 0 12px;padding:11px 14px;border-radius:14px;
  font:600 12.8px/1.5 Inter,system-ui,sans-serif;
  color:#cdd9e6;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}
.pdl-create[hidden]{display:none}
.pdl-create.is-soon{color:#ffd79a;background:rgba(255,176,39,.08);border-color:rgba(255,176,39,.34)}
.pdl-create.is-last-chance{color:#ffc9cb;background:rgba(255,75,81,.09);border-color:rgba(255,75,81,.42)}
.pdl-create.is-digital{color:#7ee6f5;background:rgba(126,230,245,.07);border-color:rgba(126,230,245,.3)}

/* ---- screen readers ------------------------------------------------------
   The live region carries a calm once-a-minute summary; the ticking clock is
   hidden from assistive tech entirely. A per-second live region is not an
   accessibility feature, it is a denial of service on a screen reader. */
.pdl-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- small screens -------------------------------------------------------
   At 360px the sentence, the clock and the button cannot share a line. The
   button is the first to go: someone who reads the deadline can scroll to any
   of the twenty other ways to start an order. */
@media (max-width:620px){
  .pdl-bar{font-size:13.5px;gap:10px;padding:10px 12px;min-height:46px}
  .pdl-msg b{font-size:14.5px}
  /* The button goes, not the deadline. Someone who has read the date can
     start an order from any of the twenty other places that offer it. */
  .pdl-cta{display:none}
  /* THE CLOCK DOES NOT SHRINK MUCH, and on a phone it is usually the only
     thing on its own line — which makes it the most visible element on the
     screen, exactly as it should be. Most of this traffic is a parent on a
     phone; a countdown they have to squint at is one they ignore. */
  .pdl-clock{gap:4px}
  .pdl-num{font-size:17px;padding:6px 7px 5px;border-radius:9px}
  .pdl-lab{font-size:8px;letter-spacing:.12em}
  .pdl-sep{font-size:13px;margin-top:7px}
  /* The chips stay — WHICH editions is the half of the message a phone is
     most likely to need, since the visitor cannot see the edition cards
     while reading the bar. What goes is the scaffolding around them: the
     "applies to" kicker and the trailing note are both things the four
     names already imply. */
  .pdl-eds{gap:5px;font-size:9.5px;letter-spacing:.1em;margin-top:1px}
  .pdl-ed{padding:3px 8px;letter-spacing:.07em}
  .pdl-eds-k,.pdl-eds-rest{display:none}
}
@media (max-width:380px){
  .pdl-bar{font-size:12.5px;gap:8px}
  .pdl-msg b{font-size:13.5px}
  /* Belt and braces against a long locale date pushing the bar wide. */
  .pdl-msg{overflow-wrap:anywhere}
  .pdl-num{font-size:15.5px;padding:5px 6px 4px}
  .pdl-lab{font-size:7.5px;letter-spacing:.1em}
  .pdl-eds{gap:4px;font-size:9px}
  .pdl-ed{padding:3px 7px}
}

/* ---- reduced motion ------------------------------------------------------
   The urgency is kept, the movement is not. Someone who has asked their
   operating system for less animation still deserves to know it is the last
   day — so the pulse becomes a solid line rather than disappearing. */
@media (prefers-reduced-motion:reduce){
  .pdl-bar.is-last-chance{
    animation:none;
    box-shadow:inset 0 -2px 0 rgba(255,75,81,.9);
  }
  .pdl-cta{transition:none}
  /* THE LIGHT STAYS, THE MOVEMENT GOES. Someone who asked their operating
     system for less animation has not asked to be kept in the dark about a
     deadline — so the glow, the colour and the tiles are all untouched and
     only the things that move are stopped. The per-tick flash is also
     suppressed in JavaScript, so a reduced-motion visitor never even gets
     the class applied. */
  .pdl-bar:before{animation:none}
  .pdl-sep{animation:none;opacity:.5}
  .pdl-num.is-tick{animation:none}
}

/* ---- printing ------------------------------------------------------------ */
@media print{ .pdl-bar{display:none} }

@media(max-width:620px){.pdl-eds{width:100%;flex-wrap:wrap;justify-content:center;gap:6px}.pdl-eds-k{display:block;flex-basis:100%;opacity:1;font-size:10px;line-height:1.5;margin-top:3px}.pdl-eds-rest{display:block;flex-basis:100%;border-left:0;padding-left:0;margin:3px 0 0;font-size:11px;line-height:1.5;opacity:1;color:#e4c6c8;white-space:normal}.pth-home .pdl-clock{box-sizing:border-box;padding-right:62px;max-width:100%}}