/* Shipping Info — one bar: when it arrives on the left, where it ships from
 * on the right.
 *
 * No script. The date is worked out in Liquid and printed; nothing here has to
 * wait for JavaScript to know what it says.
 *
 * The flags are drawn here rather than typed as emoji. A flag emoji is two
 * regional-indicator letters, and Windows has no font that joins them — a
 * shopper on Windows Chrome sees "FR", not a French flag. These are a few
 * rectangles each, they cost the Liquid budget nothing, and they look the same
 * everywhere.
 */

.pb-shi {
  font-family: inherit;
  margin-block: var(--pb-shi-st, 0) var(--pb-shi-sb, 0);
}

.pb-shi__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: var(--pb-shi-py, 12px) var(--pb-shi-px, 14px);
  background: var(--pb-shi-bg, #f3f4f6);
  color: var(--pb-shi-fg, #374151);
  font-size: var(--pb-shi-fs, 13px);
  line-height: 1.4;
  border-radius: var(--pb-shi-r, 8px);
}

.pb-shi--bare .pb-shi__bar { background: none; padding-inline: 0; }
.pb-shi--dotted .pb-shi__bar { border: 1px dashed color-mix(in srgb, var(--pb-shi-fg, #374151) 30%, transparent); }
.pb-shi--solid .pb-shi__bar { border: 1px solid color-mix(in srgb, var(--pb-shi-fg, #374151) 22%, transparent); }

/* Stacked puts the region under the date instead of across from it. */
.pb-shi--stack .pb-shi__bar { flex-direction: column; align-items: flex-start; }

.pb-shi__when,
.pb-shi__where { display: flex; align-items: center; gap: 0.55em; min-width: 0; }

.pb-shi__b { color: var(--pb-shi-bold, #111827); font-weight: 600; }

/* ── the dot ─────────────────────────────────────────────────────────── */

.pb-shi__dot {
  position: relative;
  flex: 0 0 auto;
  width: var(--pb-shi-ds, 9px);
  height: var(--pb-shi-ds, 9px);
  border-radius: 50%;
  background: var(--pb-shi-dc, #6b7280);
}

/* The ring is a second shadow rather than a second element, so the pulse
   costs no markup and nothing moves in the layout while it runs. */
.pb-shi--pulse .pb-shi__dot { animation: pb-shi-pulse 2s ease-out infinite; }
@keyframes pb-shi-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pb-shi-dc, #6b7280) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-shi--pulse .pb-shi__dot { animation: none; }
}

/* ── the flag ────────────────────────────────────────────────────────── */

.pb-shi__flag {
  flex: 0 0 auto;
  width: calc(var(--pb-shi-fs, 13px) * 1.55);
  aspect-ratio: 3 / 2;
  border-radius: 2px;
  background: var(--pb-shi-flag) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px #00000022;
}
img.pb-shi__flag { object-fit: cover; box-shadow: none; width: auto; height: calc(var(--pb-shi-fs, 13px) * 1.05); aspect-ratio: auto; max-width: calc(var(--pb-shi-fs, 13px) * 2.6); }

/* Bands first, because most flags are only bands. */
.pb-shi__flag--fr { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%230055A4'/%3E%3Crect x='2' width='1' height='2' fill='%23EF4135'/%3E%3C/svg%3E"); }
.pb-shi__flag--it { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='2' width='1' height='2' fill='%23CE2B37'/%3E%3C/svg%3E"); }
.pb-shi__flag--ie { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%23169B62'/%3E%3Crect x='2' width='1' height='2' fill='%23FF883E'/%3E%3C/svg%3E"); }
.pb-shi__flag--be { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23FAE042'/%3E%3Crect width='1' height='2' fill='%23000'/%3E%3Crect x='2' width='1' height='2' fill='%23ED2939'/%3E%3C/svg%3E"); }
.pb-shi__flag--ro { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23FCD116'/%3E%3Crect width='1' height='2' fill='%23002B7F'/%3E%3Crect x='2' width='1' height='2' fill='%23CE1126'/%3E%3C/svg%3E"); }
.pb-shi__flag--de { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%23FFCE00'/%3E%3Crect width='3' height='2' fill='%23D00'/%3E%3Crect width='3' height='1'/%3E%3C/svg%3E"); }
.pb-shi__flag--nl { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%2321468B'/%3E%3Crect width='3' height='2' fill='%23fff'/%3E%3Crect width='3' height='1' fill='%23AE1C28'/%3E%3C/svg%3E"); }
.pb-shi__flag--at { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%23ED2939'/%3E%3Crect y='1' width='3' height='1' fill='%23fff'/%3E%3C/svg%3E"); }
.pb-shi__flag--pl { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect width='2' height='2' fill='%23DC143C'/%3E%3Crect width='2' height='1' fill='%23fff'/%3E%3C/svg%3E"); }
.pb-shi__flag--es { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3Crect width='4' height='3' fill='%23AA151B'/%3E%3Crect y='0.75' width='4' height='1.5' fill='%23F1BF00'/%3E%3C/svg%3E"); }
.pb-shi__flag--pt { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23DA291C'/%3E%3Crect width='2' height='3' fill='%23046A38'/%3E%3Ccircle cx='2' cy='1.5' r='0.62' fill='%23FFE900'/%3E%3C/svg%3E"); }
.pb-shi__flag--ch { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Crect width='6' height='6' fill='%23D52B1E'/%3E%3Crect x='2.4' y='1.2' width='1.2' height='3.6' fill='%23fff'/%3E%3Crect x='1.2' y='2.4' width='3.6' height='1.2' fill='%23fff'/%3E%3C/svg%3E"); }
.pb-shi__flag--dk { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 28'%3E%3Crect width='37' height='28' fill='%23C8102E'/%3E%3Crect x='12' width='4' height='28' fill='%23fff'/%3E%3Crect y='12' width='37' height='4' fill='%23fff'/%3E%3C/svg%3E"); }
.pb-shi__flag--se { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 28'%3E%3Crect width='37' height='28' fill='%23006AA7'/%3E%3Crect x='12' width='4' height='28' fill='%23FECC00'/%3E%3Crect y='12' width='37' height='4' fill='%23FECC00'/%3E%3C/svg%3E"); }
.pb-shi__flag--no { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 28'%3E%3Crect width='37' height='28' fill='%23BA0C2F'/%3E%3Crect x='11' width='6' height='28' fill='%23fff'/%3E%3Crect y='11' width='37' height='6' fill='%23fff'/%3E%3Crect x='12.5' width='3' height='28' fill='%2300205B'/%3E%3Crect y='12.5' width='37' height='3' fill='%2300205B'/%3E%3C/svg%3E"); }
.pb-shi__flag--fi { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 28'%3E%3Crect width='37' height='28' fill='%23fff'/%3E%3Crect x='11' width='5' height='28' fill='%23003580'/%3E%3Crect y='11.5' width='37' height='5' fill='%23003580'/%3E%3C/svg%3E"); }
.pb-shi__flag--jp { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23fff'/%3E%3Ccircle cx='1.5' cy='1' r='0.6' fill='%23BC002D'/%3E%3C/svg%3E"); }
.pb-shi__flag--us { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 26'%3E%3Crect width='39' height='26' fill='%23B22234'/%3E%3Cg fill='%23fff'%3E%3Crect y='2' width='39' height='2'/%3E%3Crect y='6' width='39' height='2'/%3E%3Crect y='10' width='39' height='2'/%3E%3Crect y='14' width='39' height='2'/%3E%3Crect y='18' width='39' height='2'/%3E%3Crect y='22' width='39' height='2'/%3E%3C/g%3E%3Crect width='16' height='14' fill='%233C3B6E'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3Ccircle cx='8' cy='3' r='1'/%3E%3Ccircle cx='13' cy='3' r='1'/%3E%3Ccircle cx='5.5' cy='7' r='1'/%3E%3Ccircle cx='10.5' cy='7' r='1'/%3E%3Ccircle cx='3' cy='11' r='1'/%3E%3Ccircle cx='8' cy='11' r='1'/%3E%3Ccircle cx='13' cy='11' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
.pb-shi__flag--gb { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='%23C8102E' stroke-width='3.5'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.pb-shi__flag--ca { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Crect width='48' height='24' fill='%23fff'/%3E%3Crect width='12' height='24' fill='%23D80621'/%3E%3Crect x='36' width='12' height='24' fill='%23D80621'/%3E%3Cpath d='M24 5l1.6 3.4 3.4-1-1.4 3.2 3.4 1.6-3 1.6.7 3.2-3-1.2-1.7 3.2-1.7-3.2-3 1.2.7-3.2-3-1.6 3.4-1.6-1.4-3.2 3.4 1z' fill='%23D80621'/%3E%3C/svg%3E"); }
.pb-shi__flag--au { --pb-shi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0 30 15M30 0 0 15' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M15 0v15M0 7.5h30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M15 0v15M0 7.5h30' stroke='%23C8102E' stroke-width='3'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='15' cy='22' r='2'/%3E%3Ccircle cx='44' cy='8' r='1.6'/%3E%3Ccircle cx='50' cy='14' r='1.6'/%3E%3Ccircle cx='44' cy='21' r='1.6'/%3E%3Ccircle cx='38' cy='14' r='1.6'/%3E%3Ccircle cx='47' cy='17' r='1'/%3E%3C/g%3E%3C/svg%3E"); }

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

@media (max-width: 600px) {
  .pb-shi__bar { flex-direction: column; align-items: flex-start; }
}