/* A thin custom layer over Bootstrap 5: the shelf-edge price ticket and a
   couple of brand touches. Everything else is stock Bootstrap. */

:root {
  --win: #1E7A46;
  --offer: #D34727;
}

.brand { font-weight: 700; letter-spacing: -.02em; }
.brand span { color: var(--win); }

.eyebrow {
  font-family: var(--bs-font-monospace);
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bs-secondary-color); margin: 0;
}
.saving-flag { color: var(--win); }

/* Store chips */
.store-chip {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 1px solid var(--bs-border-color); border-radius: 999px;
  padding: .4rem .8rem; user-select: none; background: #fff; font-size: .9rem;
}
.store-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.store-chip input { position: absolute; opacity: 0; pointer-events: none; }
.store-chip.on { border-color: var(--bs-dark); font-weight: 600; }
.store-chip:focus-within { outline: 2px solid var(--win); outline-offset: 2px; }
.store-chip .kind {
  font-family: var(--bs-font-monospace); font-size: .62rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bs-secondary-color);
}

/* Item rows */
.item-row { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.item-row:last-child { border-bottom: 0; }
.item-row .name { font-weight: 500; }
.item-row .meta { font-family: var(--bs-font-monospace); font-size: .78rem; color: var(--bs-secondary-color); margin-left: auto; }

/* Store heading inside the plan */
.store-tab { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; border-bottom: 2px solid; padding-bottom: .2rem; }
.store-tab .dot { width: 11px; height: 11px; border-radius: 50%; }

/* Shelf-edge ticket — the signature element */
.ticket {
  display: grid; grid-template-columns: 6px 1fr auto; align-items: center;
  border: 1px solid var(--bs-border-color); border-radius: .25rem;
  margin-top: .55rem; overflow: hidden; background: #fff;
}
.ticket .edge { align-self: stretch; }
.ticket .body { padding: .6rem .8rem; }
.ticket .name { font-weight: 600; }
.ticket .sub { font-family: var(--bs-font-monospace); font-size: .76rem; color: var(--bs-secondary-color); }
.ticket .price { text-align: right; padding: .6rem .8rem; }
.ticket .price .now { font-family: var(--bs-font-monospace); font-weight: 600; font-size: 1.1rem; }
.ticket .price .unit { font-family: var(--bs-font-monospace); font-size: .72rem; color: var(--bs-secondary-color); }
.ticket .price .was { font-family: var(--bs-font-monospace); font-size: .72rem; color: var(--bs-secondary-color); text-decoration: line-through; }
.tag-offer {
  display: inline-block; font-family: var(--bs-font-monospace); font-size: .6rem;
  letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--offer);
  border-radius: 3px; padding: .05rem .35rem; margin-left: .35rem; vertical-align: 1px;
}
.run-note {
  background: rgba(30,122,70,.07); border: 1px solid rgba(30,122,70,.3);
  border-radius: .25rem; padding: .5rem .7rem; font-size: .9rem; margin-top: .5rem;
}
.feed-note { font-family: var(--bs-font-monospace); font-size: .72rem; color: var(--bs-secondary-color); margin-top: .9rem; }