/* Shipping Timeline block.
 *
 * Every per-instance value — colours, sizes, dash pattern, speed — rides on the
 * root element as an inline custom property, so this file stays static and can
 * be a stylesheet asset rather than a <style> tag rendered per block.
 */
.pb-tl {
  box-sizing: border-box;
  display: block;
  margin: 0.875rem 0;
  padding: var(--pb-tl-pad) var(--pb-tl-pad-x, 0);
  /* Transparent unless the merchant paints it, so by default the block sits on
     whatever the section behind it already is. */
  background: var(--pb-tl-bg, transparent);
  border-radius: var(--pb-tl-radius, 0);
  /* The merchant's font when they picked one, the theme's when they did not. */
  font-family: var(--pb-tl-font, inherit);
}
.pb-tl *,
.pb-tl *::before,
.pb-tl *::after { box-sizing: border-box; }

/* The sprite is a definition, not a picture. Taken out of the flow entirely so
   it cannot add a stray line box above the timeline. */
.pb-tl__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pb-tl__deadline {
  /* Themes give paragraphs margins; a left one here would push the line off
     centre the same way. */
  margin: 0 0 calc(var(--pb-tl-pad) + 4px) !important;
  font-size: var(--pb-tl-deadline-size);
  line-height: 1.4;
  color: var(--pb-tl-label);
}
.pb-tl--align-left .pb-tl__deadline { text-align: left; }
.pb-tl--align-center .pb-tl__deadline { text-align: center; }
.pb-tl--align-right .pb-tl__deadline { text-align: right; }

.pb-tl__countdown {
  color: var(--pb-tl-accent);
  font-weight: 700;
  white-space: nowrap;
}
/* Nothing to say until the script has worked out the time. Without this the
   line would render as a bare "If you order within" for a frame. */
.pb-tl__countdown:empty { display: none; }

/* The list resets are !important on purpose, and only these.
 *
 * This block is dropped into someone else's theme, and almost every theme
 * styles lists inside product content — `.product__description ol {
 * padding-left: 2rem }` and the like. Two classes beat our one, and that rule
 * pads the left only: the row shifts right, the first node ends up further from
 * the edge than the last, and the block reads as off-centre while measuring
 * perfectly symmetric on its own. Nothing else here is forced; these three
 * carry the layout. */
.pb-tl__steps {
  position: relative;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* The dashes.
 *
 * One line across the whole row, laid behind the nodes, rather than a segment
 * between each pair: a segment restarts the pattern at its own left edge, so
 * the rhythm broke at every node and each stretch looked like a different line.
 * A single background cannot do that — the dashes stay in step from the first
 * node to the last, and there is one animation instead of three.
 *
 * It is drawn as a repeating background and not a dashed border because a
 * border cannot be animated. One loop moves the pattern by exactly one
 * dash-and-gap, so the restart is invisible.
 */
.pb-tl__track {
  position: absolute;
  top: calc(var(--pb-tl-node) / 2 - 1px);
  left: calc(var(--pb-tl-node) / 2);
  right: calc(var(--pb-tl-node) / 2);
  height: 2px;
  background-image: linear-gradient(
    to right,
    var(--pb-tl-line) 0,
    var(--pb-tl-line) var(--pb-tl-dash),
    transparent var(--pb-tl-dash),
    transparent calc(var(--pb-tl-dash) + var(--pb-tl-gap))
  );
  background-size: calc(var(--pb-tl-dash) + var(--pb-tl-gap)) 2px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}

.pb-tl--march .pb-tl__track { animation: pb-tl-march var(--pb-tl-speed) linear infinite; }

@keyframes pb-tl-march {
  to { background-position: calc(var(--pb-tl-dash) + var(--pb-tl-gap)) 50%; }
}

/* Each step is only as wide as its node, spaced apart by `space-between`, so
   the nodes land at even intervals across the whole width — the first on the
   left edge and the last on the right, rather than a third of the container
   going to margins. The words are wider than the node and simply overflow it,
   centred on it, which is what keeps every label under the thing it names. */
.pb-tl__step {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  width: var(--pb-tl-node);
  /* Without this a step grows to its widest label instead of staying its node
     wide: a flex item's automatic minimum size is its content, so a long date
     pushed the whole row past the container and the last node was clipped off
     the end. The words are meant to overflow the box, not inflate it. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
/* Every step centres its words on its node, the two ends included. Hanging the
   ends' words inward instead lined them up by their edges, so a label and the
   date under it drifted apart by the difference in their widths — a short
   "Today" under a longer "Ordered" sat visibly off to one side, and the row
   read as leaning. What the ends need is not a different alignment but a
   narrower cap: room to centre without leaving the block. The padding is that
   room, and a label wider than it wraps, which is what the reference does too.
   By type, not by position: the track is the list's first child, so
   :first-child would match that and never a step. */
.pb-tl__step:first-of-type .pb-tl__label,
.pb-tl__step:first-of-type .pb-tl__date,
.pb-tl__step:last-of-type .pb-tl__label,
.pb-tl__step:last-of-type .pb-tl__date {
  max-width: max(8ch, calc(var(--pb-tl-node) + var(--pb-tl-pad-x, 0px) * 2));
}

/* Capped in characters rather than pixels so the wrap point follows the text
   size: a long date breaks over two lines the way it should instead of running
   into the next step. */
.pb-tl__label,
.pb-tl__date {
  width: max-content;
  max-width: 16ch;
}

/* The node sits on top of the track and hides it where it passes: that is what
   turns one long line into the gaps between the steps. */
.pb-tl__node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-bottom: 6px;
  width: var(--pb-tl-node);
  height: var(--pb-tl-node);
  border-radius: 50%;
  background: var(--pb-tl-node-bg);
  color: var(--pb-tl-node-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The glyphs live here rather than as a sprite in the Liquid: the extension may
   ship only 100 KiB of Liquid in total and the artwork was two of them, while a
   stylesheet is an asset and costs nothing against that. Each is a mask, not a
   picture, so the colour is still the merchant's setting and not baked in. */
.pb-tl__glyph {
  width: 52%;
  height: 52%;
  flex: 0 0 auto;
  display: block;
  background-color: var(--pb-tl-node-ink);
  -webkit-mask: var(--pb-tl-glyph) center / contain no-repeat;
  mask: var(--pb-tl-glyph) center / contain no-repeat;
}
.pb-tl__icon--bag { --pb-tl-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%207h12l-1%2013H7L6%207Z%22%2F%3E%20%3Cpath%20d%3D%22M9%207V5.5a3%203%200%200%201%206%200V7%22%2F%3E%3C%2Fsvg%3E"); }
.pb-tl__icon--clipboard { --pb-tl-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204h6v3H9z%22%2F%3E%20%3Cpath%20d%3D%22M15%205.5h2A1.5%201.5%200%200%201%2018.5%207v11A1.5%201.5%200%200%201%2017%2019.5H7A1.5%201.5%200%200%201%205.5%2018V7A1.5%201.5%200%200%201%207%205.5h2%22%2F%3E%20%3Cpath%20d%3D%22M9%2012h6M9%2015.5h4%22%2F%3E%3C%2Fsvg%3E"); }
.pb-tl__icon--truck { --pb-tl-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%208h7.5v7.5H6.5z%22%2F%3E%20%3Cpath%20d%3D%22M14%2010.5h3.2l2.8%202.9v2.1H14z%22%2F%3E%20%3Ccircle%20cx%3D%229.5%22%20cy%3D%2217.5%22%20r%3D%221.5%22%2F%3E%20%3Ccircle%20cx%3D%2217%22%20cy%3D%2217.5%22%20r%3D%221.5%22%2F%3E%20%3Cpath%20d%3D%22M1.5%2010.5h3.5M1%2013.5h4%22%2F%3E%3C%2Fsvg%3E"); }
.pb-tl__icon--box { --pb-tl-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.5%2020%208v8l-8%204.5L4%2016V8l8-4.5Z%22%2F%3E%20%3Cpath%20d%3D%22m4%208%208%204.5L20%208M12%2012.5v8%22%2F%3E%3C%2Fsvg%3E"); }
.pb-tl__icon--pin { --pb-tl-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s6-5.7%206-10a6%206%200%201%200-12%200c0%204.3%206%2010%206%2010Z%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2211%22%20r%3D%222.2%22%2F%3E%3C%2Fsvg%3E"); }
.pb-tl__icon--check { --pb-tl-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%20%3Cpath%20d%3D%22m8.5%2012%202.5%202.5%204.5-5%22%2F%3E%3C%2Fsvg%3E"); }
.pb-tl__icon--clock { --pb-tl-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%20%3Cpath%20d%3D%22M12%207.5V12l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.pb-tl__icon--gift { --pb-tl-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2010.5h15v9h-15z%22%2F%3E%20%3Cpath%20d%3D%22M3.5%207.5h17v3h-17zM12%207.5v12%22%2F%3E%20%3Cpath%20d%3D%22M12%207.5S10.5%204%208.75%204a2%202%200%200%200%200%203.5M12%207.5S13.5%204%2015.25%204a2%202%200%200%201%200%203.5%22%2F%3E%3C%2Fsvg%3E"); }
.pb-tl__icon--home { --pb-tl-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011%2012%204.5%2020%2011v8.5h-5v-5H9v5H4V11Z%22%2F%3E%3C%2Fsvg%3E"); }

/* A merchant's own icon, drawn as they uploaded it: no stroke or fill of ours
   over it, because it may well be a logo or a coloured mark. */
.pb-tl__icon {
  width: 58%;
  height: 58%;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}

.pb-tl__label {
  font-size: var(--pb-tl-label-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--pb-tl-label);
}
.pb-tl__date {
  font-size: var(--pb-tl-date-size);
  line-height: 1.35;
  color: var(--pb-tl-date);
}

/* Under 480px four columns of text cannot share a phone screen, so the words
   shrink rather than the nodes, which are the part that has to stay legible. */
@media (max-width: 480px) {
  .pb-tl__step { gap: 4px; }
  .pb-tl__label { font-size: calc(var(--pb-tl-label-size) * 0.85); }
  .pb-tl__date { font-size: calc(var(--pb-tl-date-size) * 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .pb-tl--march .pb-tl__track { animation: none; }
}