/* Components: wordmark, button, badges, the shelf, tickets, sticker, device,
   product cards, mascot, aisle sign, icons. All colour comes from tokens.css. */

/* ---------- Wordmark ---------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-weight: 900;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}

.wordmark__f {
  color: var(--teal-text);
}

/* ---------- Button ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--teal);
  color: var(--on-teal);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color 160ms ease;
}

.button:hover {
  background: var(--teal-strong);
  color: var(--on-teal);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.35);
}

.button:active {
  transform: translateY(0);
}

/* ---------- Store badges ---------- */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  border-radius: 9px;
  transition:
    transform var(--dur) var(--ease-out),
    filter var(--dur) var(--ease-out);
}

.badge img {
  height: 54px;
  width: auto;
}

/* The Play badge's artwork carries its own transparent margin; a little taller keeps the two visually equal. */
.badge[data-store='android'] img {
  height: 62px;
  margin: -4px;
}

a.badge:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.25));
}

/* On a phone, its own store leads and the other steps down a size. */
html[data-platform='ios'] .badges [data-store='android'] img {
  height: 50px;
}

html[data-platform='android'] .badges [data-store='ios'] img {
  height: 44px;
}

/* A store that is not live yet shows a paper ticket in the badge's place. The
   official badge artwork is only used once the app can actually be downloaded. */
.badge--soon {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  height: 54px;
  padding: 4px var(--space-4) 0;
  border-radius: 6px 6px 10px 10px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: var(--shadow-ticket);
  cursor: default;
  line-height: 1.1;
}

/* The same rail lip as every shelf-edge ticket, in sticker yellow. */
.badge--soon::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: 6px 6px 0 0;
  background: var(--sticker);
}

.badge__big {
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.badge__small {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-ink-3);
  white-space: nowrap;
}

.badges__note {
  margin-top: var(--space-3);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* ---------- The shelf (a fridge shelf: white top, glass edge) ---------- */
.shelf {
  --top-h: 10px;
  --edge-h: 22px;
  --overhang: 56px;
  --item-gap: clamp(1rem, 3vw, 2rem);
  position: relative;
  padding-bottom: var(--overhang);
}

.shelf__items {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--item-gap);
  padding-inline: clamp(0.75rem, 4%, 2rem);
  margin-bottom: calc(var(--top-h) * -0.55);
}

.shelf__board {
  position: relative;
  z-index: 1;
  height: calc(var(--top-h) + var(--edge-h));
}

.shelf__board::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--top-h);
  background: var(--shelf-top);
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 -1px 0 var(--shelf-edge-dark);
}

.shelf__board::after {
  content: '';
  position: absolute;
  inset: var(--top-h) 0 0 0;
  background: linear-gradient(180deg, var(--shelf-edge), var(--shelf-edge-dark));
  border-radius: 0 0 4px 4px;
  box-shadow: 0 18px 30px -14px var(--shelf-shadow);
}

.shelf__tickets {
  position: absolute;
  z-index: 3;
  left: clamp(0.75rem, 6%, 3rem);
  right: clamp(0.75rem, 6%, 3rem);
  top: calc(100% - var(--overhang) - var(--edge-h) + 7px);
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shelf--right .shelf__tickets {
  justify-content: flex-end;
}

.shelf__tickets--spread {
  justify-content: space-between;
}

/* ---------- Shelf-edge ticket ---------- */
.ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 9rem;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-radius: 6px 6px 10px 10px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: var(--shadow-ticket);
  line-height: 1.15;
}

/* The rail the ticket slides into: a teal lip across its top edge. */
.ticket::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: 6px 6px 0 0;
  background: var(--ticket-rail);
}

/* Room for the sticker that sits on a ticket's top-right corner. */
.ticket--stickered {
  padding-right: 3.75rem;
}

.ticket__big {
  font-size: var(--ticket-big);
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.ticket__small {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-ink-3);
  white-space: nowrap;
}

.ticket--bin {
  background: var(--bin);
  color: var(--on-bin);
}

.ticket--bin .ticket__big {
  color: var(--bin-value);
}

.ticket--bin .ticket__small {
  color: var(--on-bin-muted);
}

/* ---------- The "use first" sticker ---------- */
.sticker {
  position: absolute;
  top: -16px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--sticker);
  color: var(--on-sticker);
  font-size: 0.6875rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-8deg);
  box-shadow:
    0 2px 3px rgba(15, 23, 42, 0.18),
    0 8px 14px -8px rgba(15, 23, 42, 0.35);
}

@keyframes slap {
  from {
    transform: rotate(-16deg) scale(1.9) translate(6px, -10px);
  }

  to {
    transform: rotate(-8deg) scale(1) translate(0, 0);
  }
}

/* ---------- Device (a real screenshot in a phone frame) ---------- */
.device {
  --w: 300px;
  --pad: calc(var(--w) * 0.028);
  flex: none;
  width: var(--w);
  margin: 0;
  padding: var(--pad);
  border-radius: calc(var(--w) * 0.15);
  background: var(--bezel);
  box-shadow:
    inset 0 0 0 1px var(--bezel-edge),
    var(--shadow-device);
}

.device img {
  width: 100%;
  aspect-ratio: 1320 / 2868;
  object-fit: cover;
  border-radius: calc(var(--w) * 0.15 - var(--pad));
  background: #f8fafc;
}

.device--android {
  border-radius: calc(var(--w) * 0.09);
}

.device--android img {
  aspect-ratio: 1080 / 2400;
  border-radius: calc(var(--w) * 0.09 - var(--pad));
}

.device--sm {
  --w: 240px;
}

/* The detection screen gets one scan pass when it arrives (see motion). */
.device--scan {
  position: relative;
  overflow: hidden;
}

.device--scan::after {
  content: '';
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: var(--pad);
  height: 18%;
  border-radius: calc(var(--w) * 0.15 - var(--pad));
  background: linear-gradient(180deg, rgba(45, 212, 191, 0) 0%, rgba(45, 212, 191, 0.28) 70%, rgba(45, 212, 191, 0.75) 100%);
  transform: translateY(-120%);
  pointer-events: none;
}

/* ---------- Product card (an item standing on the shelf) ---------- */
.product {
  position: relative;
  flex: none;
  width: 9.75rem;
  padding: var(--space-4) var(--space-4) var(--space-4);
  border-radius: var(--radius-xl) var(--radius-xl) 6px 6px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: var(--shadow-ticket);
}

.product__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
  border-radius: 12px;
  background: #f0fdfa;
  color: #0f766e;
}

.product__name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.product__date {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--paper-ink-2);
}

.product__date--soon {
  color: #c2410c;
}

.product__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #15803d;
  vertical-align: 1px;
}

.product__dot--soon {
  background: #ea580c;
}

.product__dot--ok {
  background: #0d9488;
}

/* ---------- Mascot ---------- */
.mascot {
  flex: none;
  width: var(--mascot-w, 160px);
  margin-bottom: calc(var(--mascot-w, 160px) * -0.085);
}

.mascot svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Fridgey hops when its shelf arrives (see motion). Pivot: bottom centre of the body. */
.mascot--hops svg {
  transform-origin: 50% 90%;
}

@keyframes hop {
  0% {
    transform: none;
  }

  28% {
    transform: translateY(-9%) scale(0.96, 1.05);
  }

  52% {
    transform: translateY(0) scale(1.06, 0.94);
  }

  72% {
    transform: translateY(-3%) scale(0.99, 1.01);
  }

  100% {
    transform: none;
  }
}

/* Resting pose: open eyes and the open smile. The other parts exist for the
   flourish (see site.css) and are hidden until motion plays them. The door
   swings on its left hinge (x 54, y 59 in the 240 box). */
.mascot__eyes,
.m-eyes-open {
  transform-box: fill-box;
  transform-origin: center;
}

.m-eyes-closed,
.m-mouth-o,
.m-mouth-smile,
.m-shine,
.m-orange {
  opacity: 0;
}

.m-door {
  transform-box: view-box;
  transform-origin: 54px 59px;
}

.m-body {
  transform-box: view-box;
  transform-origin: 120px 216px;
}

.m-orange {
  transform: translate(176px, 2px);
}

.m-shine {
  transform-box: fill-box;
  transform-origin: center;
}

/* Idle blink, only when motion is on; the hero's starts after its flourish. */
html.motion .mascot__eyes,
html.motion .m-eyes-open {
  animation: blink 6.5s steps(1, end) infinite;
  animation-delay: var(--blink-delay, 1.2s);
}

@keyframes blink {
  0%,
  96%,
  100% {
    transform: scaleY(1);
  }

  97%,
  99% {
    transform: scaleY(0.08);
  }
}

/* A spoken nudge, in the app's own words. */
.bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: 14rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--paper);
  color: var(--paper-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  box-shadow: var(--shadow-ticket);
  transform: translateX(-50%);
}

.bubble::after {
  content: '';
  position: absolute;
  left: calc(50% - 8px);
  bottom: -7px;
  width: 16px;
  height: 16px;
  background: var(--paper);
  border-radius: 3px;
  transform: rotate(45deg);
}

.mascot--speaks {
  position: relative;
  z-index: 3;
}

/* ---------- Aisle sign (section heading) ---------- */
/* Each wrapped line is its own plate (clone), so the line box must be tall
   enough that the next plate never paints over this line's descenders. */
.sign {
  display: inline;
  padding: 0.06em 0.32em;
  border-radius: 0.28em;
  background: var(--teal);
  color: var(--on-teal);
  font-size: var(--sign);
  line-height: 1.32;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.course--teal .sign {
  background: var(--on-teal);
  color: var(--paper);
}

.course--bin .sign {
  background: var(--bin-value);
  color: var(--on-gold);
}

/* ---------- Icons (Tabler, stroke 2) ---------- */
.icon-sprite {
  display: none;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checklist {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-weight: 600;
  color: var(--ink-2);
}

.checklist .icon {
  margin-top: 0.2em;
  color: var(--teal-text);
}

.course--bin .checklist li {
  color: var(--on-bin-muted);
}

.course--bin .checklist .icon {
  color: var(--bin-eaten);
}