/* The basket with a goal: a dark basket on a black page, the goal in green and then gold. */
:root {
  --page: #000000;          /* the page */
  --panel: #101014;         /* the basket */
  --edge: #212128;
  --row: #17171d;
  --ink: #f3f2ee;
  --muted: #8d8c95;
  --fill: #59d39a;          /* the bar on its way */
  --gold: #f3c94e;          /* the bar at the goal */
  --remove: #e5533f;
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Nunito Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* the basket hangs from the top: rows coming and going move its bottom, never its heading */
.stage {
  min-height: 100svh;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: max(24px, 8vh) 12px 24px;
}

.basket {
  width: min(410px, 100%);
  padding: 22px 18px 18px;
  border: 1px solid var(--edge);
  border-radius: 28px;
  background: var(--panel);
}

.basket__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
}

.basket__title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.basket__count {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* ---------------------------------------------------------------- the goal */
.goal {
  margin-top: 16px;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: #15151b;
}

.goal__text {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 650;
}

.goal__text strong {
  color: var(--fill);
}

.goal.is-done .goal__text strong {
  color: var(--gold);
}

.goal__track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: #26262e;
}

.goal__fill {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--fill);
  transform-origin: 0 50%;
  transition: background-color 0.4s;
}

.goal.is-done .goal__fill {
  background: var(--gold);
}

.goal__van {
  position: absolute;
  top: -18px;
  left: 0;
  width: 30px;
  height: 20px;
  margin-left: -15px;
  fill: #f3f2ee;
  stroke: #15151b;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- the products */
.items {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

/* the red shows only while a row is being dragged or is going: left under a row at rest, it would bleed through the
   rounded corners as a thin red edge */
.item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.item.is-open {
  background: var(--remove);
}

/* under the row, the red that says remove */
.item__under {
  position: absolute;
  inset: 0 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.item__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--row);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.item__pic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #22222a;
}

.item__name {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
}

.item__kind {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.item__price {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.qty {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: #22222a;
}

.qty button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .qty button:hover {
    background: #2e2e37;
  }
}

.qty svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.qty__n {
  display: inline-block;
  min-width: 20px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.qty__n span {
  display: inline-block;
}

/* ---------------------------------------------------------------- the suggestion */
.extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 0 4px;
}

.extra[hidden] {
  display: none;
}

.extra__label {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.extra__add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px dashed #3a3a45;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: 700 13.5px 'Nunito Sans Variable', system-ui, sans-serif;
  cursor: pointer;
}

.extra__add svg {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #22222a;
}

/* ---------------------------------------------------------------- the foot */
.basket__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 4px 0;
  border-top: 1px solid var(--edge);
}

.basket__total {
  display: grid;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.basket__total strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.basket__go {
  padding: 12px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: #121216;
  font: 800 15px 'Nunito Sans Variable', system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.basket__go:active {
  transform: scale(0.95);
}

.qty button:focus-visible,
.extra__add:focus-visible,
.basket__go:focus-visible,
.item__row:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

html[data-using='pointer'] .qty button:focus-visible,
html[data-using='pointer'] .extra__add:focus-visible,
html[data-using='pointer'] .basket__go:focus-visible,
html[data-using='pointer'] .item__row:focus-visible {
  outline: none;
}

/* the picture on its way from the suggestion into the basket */
.flyer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  border-radius: 10px;
  pointer-events: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}