/* The add to cart button: a light pill on a black page that closes up into a counter, minus, number and plus. At
   one the minus is a bin. */
:root {
  --page: #000000;          /* the page */
  --pill: #f5f2ec;          /* the pill */
  --ink: #101010;           /* the text, and the plus */
  --soft: #e4dfd6;          /* the minus */
  --bin: #d8402f;           /* the bin */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

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

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

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.cart {
  position: relative;
}

/* ---------------------------------------------------------------- the pill: its width is set by the script */
.cart__pill {
  position: relative;
  height: 64px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--ink);
  box-shadow: 0 18px 40px -22px rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.cart button {
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.cart button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -5px;
}

.cart__add {
  position: absolute;
  inset: 0 auto 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  height: 100%;
  padding: 0 36px 0 30px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.cart__add:focus-visible {
  outline-offset: -6px;
}

.cart__bag {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* the counter: minus, number, plus */
.cart__stepper {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  height: 100%;
  padding: 0 10px;
  visibility: hidden;
}

.cart__minus,
.cart__plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

.cart__minus {
  background: var(--soft);
  color: var(--ink);
}

.cart__plus {
  background: var(--ink);
  color: var(--pill);
}

.cart__plus[aria-disabled='true'] {
  opacity: 0.35;
  cursor: default;
}

.cart__minus svg,
.cart__plus svg {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart__bin {
  stroke: var(--bin);
  stroke-width: 1.9;
  opacity: 0;
}

.cart__count {
  display: inline-flex;
  justify-content: center;
  min-width: 36px;
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.slot {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 4px 0;
  margin: -4px 0;
}

.slot > span {
  display: inline-block;
}

.slot > span + span {
  position: absolute;
  left: 0;
  top: 4px;
}

/* the +1 that rises out of the counter */
.cart__pop {
  position: absolute;
  left: 50%;
  top: -6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pill);
  opacity: 0;
  pointer-events: none;
  translate: -50% 0;
}