/* The price on a product card, and the panel behind the i.

   Three layouts, chosen with the layout attribute:
     inline   sits in a line of text, next to a title or a short line
     line     its own row, with a hairline above it
     chip     a quiet pill, for a card with a busy picture

   The card already carries a picture, a title and a button, so the price
   states itself at the size of a strong price and gets out of the way. */

.tcbp {
  --p-navy: #123e7d;
  --p-ink: #1b222c;
  --p-amber: #ffd662;
  --p-soft: #6b7482;
  --p-line: #e4e8ef;
  --p-wash: #f4f7fc;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  font-family: inherit;
  line-height: 1.25;
  vertical-align: baseline;
}

.tcbp, .tcbp * {
  box-sizing: border-box;
  text-transform: none;
  font-style: normal;
  letter-spacing: normal;
}

/* ---- the three parts of the figure ---- */

.tcbp-label {
  font-size: 0.82em;
  font-weight: 500;
  color: var(--p-soft);
}

.tcbp-amount {
  font-size: 1.32em;
  font-weight: 750;
  color: var(--p-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}

.tcbp-to {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--p-soft);
  margin: 0 -1px;
}

/* a range carries two figures, so each one is set a little smaller than a
   single price would be and the pair reads as one statement */
.tcbp--range .tcbp-amount { font-size: 1.2em; }
.tcbp--line.tcbp--range .tcbp-amount { font-size: 1.34em; }
.tcbp--chip.tcbp--range .tcbp-amount { font-size: 1.14em; }

.tcbp-unit {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--p-soft);
}

.tcbp-total {
  flex-basis: 100%;
  font-size: 0.78em;
  color: var(--p-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- layout one, inline with a line of text ---- */

.tcbp--inline { margin-left: 0.35em; }

/* a hairline between the sentence and the price, for when they crowd */
.tcbp--sep::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 1.05em;
  margin-right: 0.5em;
  background: var(--p-line);
}

/* ---- layout two, its own row ---- */

.tcbp--line {
  display: flex;
  width: 100%;
  margin: 0.55em 0 0;
  padding: 0.55em 0 0;
  border-top: 1px solid var(--p-line);
}

.tcbp--line .tcbp-amount { font-size: 1.5em; }

/* ---- layout three, a quiet pill ---- */

.tcbp--chip {
  gap: 0 5px;
  margin: 0.5em 0 0;
  padding: 5px 11px 6px;
  border: 1px solid var(--p-line);
  border-radius: 999px;
  background: var(--p-wash);
}

.tcbp--chip .tcbp-amount { font-size: 1.22em; }

/* ---- the i ---- */

.tcbp-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  min-width: 21px;
  min-height: 21px;
  margin: 0 0 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--p-wash);
  color: var(--p-navy);
  line-height: 0;
  cursor: pointer;
  align-self: center;
  flex: 0 0 auto;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(18, 62, 125, .16);
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  -webkit-appearance: none;
  appearance: none;
}

.tcbp-i:hover,
.tcbp-i[aria-expanded="true"] {
  background: #dde8f8;
  box-shadow: inset 0 0 0 1px rgba(18, 62, 125, .34);
}

.tcbp-i:active { transform: scale(.94); }
.tcbp-i:focus-visible { outline: 2px solid var(--p-navy); outline-offset: 2px; }

.tcbp-i-g { display: block; width: 13px; height: 13px; }

/* ---- the panel ---- */

/* The panel is lifted out of the card and placed in a layer of its own, because
   a card almost always clips what sticks out of it. Its position is set by the
   script, measured against the i. */
.tcbp-pop {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 310px;
  max-width: calc(100vw - 24px);
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 14px 16px 15px;
  border: 1px solid var(--p-line, #e4e8ef);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 34, 60, .06), 0 14px 34px rgba(18, 34, 60, .16);
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--p-ink, #1b222c);
  /* the panel is its own island now, so it carries the colors with it */
  --p-navy: #123e7d;
  --p-ink: #1b222c;
  --p-amber: #ffd662;
  --p-soft: #6b7482;
  --p-line: #e4e8ef;
  --p-wash: #f4f7fc;
}

.tcbp-pop span, .tcbp-pop a, .tcbp-pop button { font-weight: 400; }

.tcbp-pop[hidden] { display: none; }

/* only a panel taller than the room it has scrolls inside itself. The arrow
   would be clipped by that scrolling, so it steps aside in that case. */
.tcbp-pop.is-scroll { overflow-y: auto; overscroll-behavior: contain; }
.tcbp-pop.is-scroll::before,
.tcbp-pop.is-scroll::after { display: none; }

/* the arrow. Upward is the normal direction, so it points down from the foot of
   the panel. The script sets where along the edge it sits. */
.tcbp-pop::before,
.tcbp-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tcbp-arrow, 24px);
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--p-line);
}

.tcbp-pop::after {
  border-width: 7px;
  border-top-color: #fff;
}

/* no room above, so it drops below instead */
.tcbp-pop.is-down::before,
.tcbp-pop.is-down::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
}

.tcbp-pop.is-down::before { border-bottom-color: var(--p-line); }
.tcbp-pop.is-down::after { border-bottom-color: #fff; }

.tcbp-pop-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tcbp-pop .tcbp-pop-h {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--p-navy);
  letter-spacing: -0.004em;
}

.tcbp-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: -3px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #9aa6b6;
  line-height: 0;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .16s ease, background-color .16s ease;
}

.tcbp-x:hover { color: var(--p-ink); background: var(--p-wash); }
.tcbp-x:focus-visible { outline: 2px solid var(--p-navy); outline-offset: 1px; }

.tcbp-pop-p {
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--p-soft);
}

.tcbp-pop .tcbp-sub {
  font-size: 11.6px;
  font-weight: 600;
  color: var(--p-soft);
  letter-spacing: .01em;
  margin-top: 1px;
}

.tcbp-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--p-line);
  padding-top: 2px;
}

.tcbp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  border-bottom: 1px solid #f2f5f9;
  font-size: 12.8px;
}

.tcbp-row:last-child { border-bottom: 0; }

.tcbp-rows--ladder .tcbp-row b { font-variant-numeric: tabular-nums; color: var(--p-navy); }

/* a line the product wrote itself, with no label */
.tcbp-pop .tcbp-row--note {
  display: block;
  color: var(--p-soft);
  line-height: 1.5;
}
.tcbp-row em { font-style: normal; color: var(--p-soft); flex: 0 0 auto; }
.tcbp-pop .tcbp-row b { color: var(--p-ink); text-align: right; font-weight: 600; }

.tcbp-pop .tcbp-pop-a {
  display: block;
  margin-top: 3px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--p-amber);
  color: var(--p-navy);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color .16s ease;
}

.tcbp-pop-a:hover,
.tcbp-pop-a:focus { background: #ffcc3f; color: var(--p-navy); text-decoration: none; }



/* on a phone the panel takes the width it can get */
@media (max-width: 420px) {
  .tcbp-pop { width: calc(100vw - 24px); }
}