/* ==========================================================================
   05 Fleet · Refuel bay · 06 Savings · 07 Proof · 08 FAQ · Final · Footer
   Manifest drawer · Toast
   ========================================================================== */

/* ---------- Shared shop controls: light by default, dark inside .fleet and the product page ---------- */

:root {
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: var(--line);
  --ring: var(--accent);
}
.fleet,
.pdp__hero {
  --fg: var(--on-orbit);
  --fg-2: var(--on-orbit-2);
  --fg-3: var(--on-orbit-2);
  --rule: color-mix(in oklch, var(--on-orbit) 16%, transparent);
  --ring: var(--quell);
}

.flightcard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.flightcard > div {
  padding-block: var(--s-3);
  padding-inline: 0 var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.flightcard > div:nth-child(even) {
  padding-inline-start: var(--s-4);
  border-inline-start: 1px solid var(--rule);
}
.flightcard dt {
  color: var(--fg-3);
}
.flightcard dd {
  color: var(--fg);
  font-weight: 650;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.variants {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.variants legend {
  float: left;
  float: inline-start;
  margin-inline-end: var(--s-3);
  color: var(--fg-3);
}
.variants label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-2) var(--s-4);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 200ms var(--ease-out);
}
.variants input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.variants .swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sw, var(--sand));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 18%, transparent);
}
.variants label:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--ring);
}
.variants label:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.price .label {
  color: var(--fg-3);
}
.price__num {
  color: var(--fg);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stepper {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--fg);
}
.stepper button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.stepper button:hover {
  background: color-mix(in oklch, currentColor 10%, transparent);
}
.stepper input,
.stepper output {
  width: 2.6ch;
  text-align: center;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* ---------- 05 · Shop (dark, over a NASA photograph of Doha at night) ---------- */

.fleet {
  position: relative;
  background: var(--orbit);
  color: var(--on-orbit);
  overflow: clip;
  isolation: isolate;
}
.fleet__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.fleet__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.fleet__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--orbit) 0%, rgb(7 15 31 / 0.5) 22%, rgb(7 15 31 / 0.8) 60%, var(--orbit) 100%);
}
.fleet .section-head .label,
.fleet .body {
  color: var(--on-orbit-2);
}
.fleet__credit {
  position: absolute;
  inset-inline-end: var(--gutter);
  bottom: var(--s-3);
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--on-orbit-2);
  opacity: 0.6;
}

.missions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--s-8);
  border-top: 1px solid var(--rule);
}
.missions button {
  position: relative;
  display: grid;
  gap: 2px;
  text-align: start;
  padding-block: var(--s-4) var(--s-5);
  padding-inline: 0 var(--s-4);
  min-height: 44px;
  color: var(--fg-3);
  transition: color 250ms var(--ease-out);
}
.missions button::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: var(--s-4);
  top: -1px;
  height: 3px;
  background: var(--quell);
  transform: scaleX(0);
  transform-origin: var(--start);
  transition: transform 500ms var(--ease-out);
}
.missions button[aria-selected="true"],
.missions button:hover {
  color: var(--fg);
}
.missions button[aria-selected="true"]::before {
  transform: scaleX(1);
}
.missions__name {
  font-size: clamp(1.05rem, 0.8rem + 0.8vw, 1.4rem);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.1;
}
.missions__product {
  font-size: var(--text-sm);
}
@media (max-width: 760px) {
  .missions {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .missions::-webkit-scrollbar {
    display: none;
  }
  .missions button {
    scroll-snap-align: start;
  }
}

.mission {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: center;
  margin-top: var(--s-6);
}

/* Product reveal: a blue spotlight with a glowing horizon, like the edge of the Earth from orbit */
.mission__stage {
  position: relative;
  display: block;
  aspect-ratio: 1 / 0.9;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  isolation: isolate;
  color: var(--on-orbit);
  text-decoration: none;
  background: radial-gradient(52% 55% at 50% 50%, oklch(0.42 0.11 244) 0%, oklch(0.27 0.075 250) 48%, oklch(0.18 0.045 258) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--quell) 20%, transparent);
}
.mission__stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -25%;
  right: -25%;
  top: 78%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(60% 40% at 50% 0%, color-mix(in oklch, var(--quell) 26%, transparent), transparent 70%);
  box-shadow:
    0 -1px 0 color-mix(in oklch, var(--quell) 55%, transparent),
    0 -18px 40px -20px color-mix(in oklch, var(--quell) 60%, transparent);
}
.mission__halo {
  position: absolute;
  z-index: 1;
  inset: 10% 18% 20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--quell) 22%, transparent), transparent 72%);
}
.mission__img {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 13%;
  width: auto;
  height: 72%;
  max-width: 84%;
  object-fit: contain;
  translate: -50% 0;
  filter: drop-shadow(0 30px 28px rgb(0 0 0 / 0.5)) drop-shadow(0 0 30px color-mix(in oklch, var(--quell) 32%, transparent));
  transition:
    opacity 450ms var(--ease-out),
    transform 700ms var(--ease-out),
    filter 450ms var(--ease-out);
}
.mission__stage:hover .mission__img {
  transform: translateY(-6px);
}
.mission__img.is-leaving {
  opacity: 0;
  transform: translateY(-18px);
  filter: blur(8px);
}
.mission__img.is-entering {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
}
.mission__code {
  position: absolute;
  z-index: 3;
  inset-inline-start: var(--s-5);
  top: var(--s-5);
  color: var(--on-orbit-2);
}
.mission__badge {
  position: absolute;
  z-index: 3;
  inset-inline-end: var(--s-5);
  top: var(--s-5);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--on-orbit);
  color: var(--ink);
}
.mission__badge:empty {
  display: none;
}
.mission__view {
  position: absolute;
  z-index: 3;
  inset-inline-end: var(--s-4);
  bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(3 8 18 / 0.55);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--on-orbit) 25%, transparent);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background-color 200ms var(--ease-out);
}
.mission__view svg {
  width: 16px;
  height: 16px;
}
.mission__stage:hover .mission__view {
  background: var(--accent);
  box-shadow: none;
}

.mission__info {
  display: grid;
  gap: var(--s-4);
  align-content: center;
}
.mission__kicker {
  color: var(--quell);
  font-weight: 600;
}
.mission__title a {
  color: inherit;
  text-decoration: none;
}
.mission__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.mission__tagline {
  color: var(--fg-2);
  max-width: 46ch;
}
.mission__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding-top: var(--s-2);
}
.mission__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.mission__refill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--rule);
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.mission__refill button {
  min-height: 44px;
  color: var(--quell);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 960px) {
  .mission {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

/* Replacement filters: a light shelf inside the dark section */
.refuel {
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: var(--line);
  margin-top: var(--s-9);
  padding: var(--s-6);
  border-radius: calc(var(--radius) * 2);
  background: var(--paper);
  color: var(--ink);
}
.refuel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.refuel__head p {
  color: var(--ink-2);
  max-width: 48ch;
}
.refuel__rail {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(210px, 20vw, 240px);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-3);
  scrollbar-color: var(--sand-deep) transparent;
}
.part {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--sand);
}
.part__img {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.part__img img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.part__name {
  font-weight: 750;
  font-stretch: 108%;
  line-height: 1.25;
}
.part__meta {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.45;
}
.part__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.part__price {
  font-weight: 800;
  font-stretch: 112%;
}
.part__price .label {
  margin-inline-end: 4px;
  color: var(--ink-3);
}
.add-round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  transition:
    background-color 200ms var(--ease-out),
    transform 200ms var(--ease-out);
}
.add-round:hover {
  background: var(--accent-press);
}
.add-round:active {
  transform: scale(0.94);
}
.add-round svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 760px) {
  .refuel {
    padding: var(--s-5) var(--s-4);
  }
}

/* ---------- 06 · Savings ---------- */

.savings {
  background: var(--sand);
}
.savings__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--s-7) var(--s-8);
  align-items: start;
}
.savings__intro {
  display: grid;
  gap: var(--s-5);
}
.savings__intro .label {
  color: var(--ink-2);
}

.calc {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-4);
}
.calc__field {
  display: grid;
  gap: var(--s-2);
  border: 0;
  margin: 0;
  padding: 0;
}
.calc__field .label,
.calc__field legend {
  color: var(--ink-2);
  padding: 0;
  margin-bottom: var(--s-2);
}
.stepper--lg {
  justify-self: start;
  background: var(--paper);
}
.stepper--lg input {
  width: 3ch;
  font-size: 1.3rem;
}
.seg {
  display: inline-flex;
  justify-self: start;
  padding: 4px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg label {
  position: relative;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 var(--s-4);
  border-radius: 999px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.seg input {
  position: absolute;
  opacity: 0;
}
.seg label:has(input:checked) {
  background: var(--ink);
  color: var(--paper);
}
.seg label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.money {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  justify-self: start;
  min-height: 52px;
  padding: 0 var(--s-4);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.money:focus-within {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.money input {
  width: 6ch;
  border: 0;
  background: transparent;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.calc__hint {
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.receipt {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--paper);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 30px 60px -40px color-mix(in oklch, var(--ink) 50%, transparent);
  --tooth: 12px;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tooth)) 100%;
  padding-bottom: calc(var(--s-6) + var(--tooth));
}
.receipt__title {
  display: flex;
  justify-content: space-between;
  color: var(--ink-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed var(--line);
}
.receipt__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.receipt__row span:last-child {
  color: var(--ink);
  font-weight: 650;
}
.bars {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block: 1px dashed var(--line);
}
.bar {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: center;
  gap: var(--s-3);
}
.bar__track {
  height: 14px;
  border-radius: 999px;
  background: var(--sand);
  overflow: hidden;
}
.bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ink-3);
  transform-origin: var(--start);
  transform: scaleX(var(--w, 0));
  transition: transform 700ms var(--ease-out);
}
.bar--quell .bar__fill {
  background: var(--quell-deep);
}
.bar .num {
  font-weight: 700;
  min-width: 8ch;
  text-align: end;
}
.receipt__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-top: var(--s-2);
}
.receipt__total span:first-child {
  font-weight: 700;
}
.receipt__total .num {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  color: var(--quell-deep);
}
.receipt__note {
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.5;
}
.receipt .btn {
  justify-self: start;
  margin-top: var(--s-2);
}

@media (max-width: 960px) {
  .savings__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .receipt {
    padding-inline: var(--s-4);
  }
  .bar {
    grid-template-columns: 1fr auto;
  }
  .bar__track {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* ---------- 07 · Proof ---------- */

.proof {
  background: var(--paper);
}
.proof__list {
  list-style: none;
  margin-top: var(--s-8);
  border-top: 2px solid var(--ink);
}
.proof__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr);
  gap: var(--s-4) var(--s-5);
  align-items: baseline;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
  transition: background-color 250ms var(--ease-out);
}
.proof__row:hover {
  background: color-mix(in oklch, var(--sand) 60%, transparent);
}
.proof__row .label {
  color: var(--ink-3);
}
.proof__row h3 {
  font-size: var(--text-lg);
  font-stretch: 115%;
  font-weight: 800;
  line-height: 1.15;
}
.proof__row p {
  color: var(--ink-2);
  max-width: 56ch;
}
.proof__src {
  justify-self: end;
  font-size: var(--text-sm);
  text-align: end;
}
.proof__src a {
  color: var(--quell-deep);
  font-weight: 600;
}

.proof__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
  margin-top: var(--s-7);
}
.proof__marks figure {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.proof__marks img {
  height: 72px;
  width: auto;
}
.proof__marks figcaption {
  font-size: var(--text-sm);
  color: var(--ink-2);
  max-width: 24ch;
}

@media (max-width: 860px) {
  .proof__row {
    grid-template-columns: 2.5rem 1fr;
  }
  .proof__row p,
  .proof__src {
    grid-column: 2;
  }
  .proof__src {
    justify-self: start;
    text-align: start;
  }
}

/* ---------- 08 · FAQ ---------- */

.faq {
  background: var(--paper);
  padding-top: 0;
}
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-7);
  padding-top: var(--s-9);
  border-top: 1px solid var(--line);
}
.faq__intro {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.faq__intro .label {
  color: var(--ink-2);
}
.faq__intro p {
  color: var(--ink-2);
}

.qa {
  border-bottom: 1px solid var(--line);
}
.qa summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 72px;
  padding-block: var(--s-3);
  cursor: pointer;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 700;
  font-stretch: 108%;
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa__icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 250ms var(--ease-out), transform 400ms var(--ease-out);
}
.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
}
.qa__icon::after {
  rotate: 90deg;
  transition: rotate 400ms var(--ease-out);
}
.qa[open] .qa__icon {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}
.qa[open] .qa__icon::after {
  rotate: 0deg;
}
.qa__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms var(--ease-out);
}
.qa[open] .qa__body {
  grid-template-rows: 1fr;
}
.qa__body > div {
  overflow: hidden;
}
.qa__body p {
  padding-bottom: var(--s-5);
  color: var(--ink-2);
  max-width: 64ch;
}
.qa__body a {
  color: var(--quell-deep);
  font-weight: 600;
}

@media (max-width: 860px) {
  .faq__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Final CTA (drenched brand blue) ---------- */

.final {
  position: relative;
  background: var(--accent);
  color: var(--on-accent);
  overflow: clip;
}
.final__inner {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--s-7);
  align-items: center;
}
.final__count {
  display: flex;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.final__count span {
  opacity: 0.3;
  transition: opacity 200ms var(--ease-out);
}
.final__count span.is-on {
  opacity: 1;
}
.final__title {
  font-size: clamp(3rem, 1rem + 8vw, 9rem);
  font-stretch: 125%;
  font-weight: 850;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.final__title .line {
  display: block;
  overflow: hidden;
}
.final__title .line > span {
  display: inline-block;
  transform: translateY(var(--line-rise));
  transition: transform 1000ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.final.is-go .final__title .line > span {
  transform: none;
}
.final__lead {
  margin-top: var(--s-5);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: color-mix(in oklch, var(--on-accent) 88%, transparent);
}
.final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.final__patch {
  justify-self: center;
  width: min(100%, 360px);
  aspect-ratio: 1;
}
.final__patch svg,
.final__patch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.final__patch svg {
  animation: spin 60s linear infinite;
}
.final__patch .patch-core {
  animation: spin 60s linear infinite reverse;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.patch-bg {
  fill: var(--ink);
}
.patch-inner {
  fill: var(--paper);
}
.patch-line {
  fill: none;
  stroke: var(--quell);
  stroke-width: 1.5;
}
.patch-text {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.16em;
  fill: var(--paper);
}
.patch-small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  fill: var(--ink);
}
@media (max-width: 860px) {
  .final__inner {
    grid-template-columns: 1fr;
  }
  .final__patch {
    width: 220px;
    justify-self: start;
    order: -1;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--orbit);
  color: var(--on-orbit-2);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--text-sm);
}
.site-footer a {
  color: var(--on-orbit);
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr));
  gap: var(--s-6);
}
.footer__brand img {
  width: 150px;
  height: auto;
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--s-3);
}
.footer__brand p {
  margin-top: var(--s-4);
  max-width: 36ch;
}
.site-footer h2 {
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-orbit-2);
  margin-bottom: var(--s-4);
}
.site-footer ul {
  list-style: none;
  display: grid;
  gap: var(--s-2);
}
.site-footer address {
  font-style: normal;
  line-height: 1.8;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--orbit-line);
  font-size: var(--text-xs);
}
.footer__legal p {
  max-width: 80ch;
}
@media (max-width: 860px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* ---------- Manifest drawer ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: color-mix(in oklch, var(--orbit) 55%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms var(--ease-out), visibility 0s 350ms;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 350ms var(--ease-out);
}

.drawer {
  position: fixed;
  z-index: var(--z-drawer);
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  width: min(460px, 100vw);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--paper);
  box-shadow: calc(-30px * var(--flip)) 0 60px -40px color-mix(in oklch, var(--ink) 70%, transparent);
  transform: translateX(calc(104% * var(--flip)));
  visibility: hidden;
  transition: transform 520ms var(--ease-out), visibility 0s 520ms;
}
.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 520ms var(--ease-out);
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 {
  font-size: var(--text-xl);
  font-stretch: 120%;
}
.drawer__eyebrow {
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
}
.icon-btn:hover {
  background: var(--sand);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}

.drawer__body {
  overflow-y: auto;
  padding: var(--s-2) var(--s-5);
}
.line-items {
  list-style: none;
}
.line-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--s-3) var(--s-4);
  align-items: center;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.line-item__img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--sand);
  display: grid;
  place-items: center;
}
.line-item__img img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.line-item__name {
  font-weight: 700;
  line-height: 1.25;
}
.line-item__meta {
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.line-item__controls {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.line-item__controls .stepper {
  transform-origin: var(--start);
}
.line-item__remove {
  font-size: var(--text-sm);
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
}
.line-item__price {
  font-weight: 800;
  font-stretch: 110%;
  align-self: start;
}

.drawer__empty {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
  padding-block: var(--s-8);
}
.drawer__empty svg {
  width: 64px;
  height: 64px;
  color: var(--ink-3);
}
.drawer__empty p {
  color: var(--ink-2);
  max-width: 32ch;
}

.drawer__foot {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--sand);
}
.drawer__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.drawer__total > span:first-child {
  font-weight: 650;
}
.drawer__total .num {
  font-size: 1.8rem;
  font-weight: 800;
  font-stretch: 118%;
}
.drawer__note {
  font-size: var(--text-xs);
  color: var(--ink-2);
  line-height: 1.5;
}
.drawer__foot .btn {
  width: 100%;
}

/* ---------- Toast & fly-to-manifest ---------- */

.toast {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: var(--s-5);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: calc(100vw - 2rem);
  padding-block: var(--s-2);
  padding-inline: var(--s-5) var(--s-2);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-sm);
  box-shadow: 0 20px 40px -20px color-mix(in oklch, var(--ink) 80%, transparent);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out);
}
.toast.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.toast .btn {
  min-height: 40px;
}

.fly {
  position: fixed;
  z-index: var(--z-toast);
  pointer-events: none;
  object-fit: contain;
  border-radius: 50%;
  background: var(--paper);
  transition:
    transform 750ms cubic-bezier(0.5, 0, 0.2, 1),
    opacity 750ms var(--ease-in-out);
}

/* ---------- Prices not confirmed yet: quoted on WhatsApp ---------- */

.price__ask {
  font-size: var(--text-lg);
  font-weight: 750;
  font-stretch: 110%;
  line-height: 1.2;
}
.part__ask,
.line-item__price--ask {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink-2);
}
.drawer__quote {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ---------- Offers: tags and discounted prices ---------- */

.offer-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 750;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}
.offer-tag--sale {
  background: var(--sale);
  color: oklch(0.985 0.004 30);
}
.offer-tag--hot {
  background: var(--signal);
  color: oklch(0.2 0.04 40);
}
.offer-tag--new {
  background: var(--quell);
  color: var(--orbit);
}
.offer-tag--award {
  background: var(--on-orbit);
  color: var(--ink);
}

.price__was {
  color: var(--fg-3, var(--ink-3));
  font-size: var(--text-lg);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in oklch, var(--sale) 75%, transparent);
}
.is-sale {
  color: var(--sale);
}
[data-theme="dark"] .is-sale {
  color: var(--sale-bright);
}
.refuel .is-sale {
  color: var(--sale);
}

/* Shop tabs, stage, shelf and cart */
.missions__tag {
  position: absolute;
  top: var(--s-4);
  inset-inline-end: var(--s-4);
}
.mission__badge {
  padding: 0;
  background: none;
}
.mission__badge .offer-tag {
  min-height: 30px;
  padding: 6px 13px;
  font-size: 0.875rem;
}
.part {
  position: relative;
}
.part__tag {
  position: absolute;
  z-index: 1;
  top: var(--s-3);
  inset-inline-start: var(--s-3);
}
.part__price .price__was {
  margin-inline-start: 6px;
  font-size: var(--text-sm);
}
.line-item__meta s {
  margin-inline-start: 6px;
}
.receipt__row s {
  margin-inline-end: 8px;
  color: var(--ink-3);
  font-weight: 500;
}
.drawer__saved {
  color: var(--sale);
  font-size: var(--text-sm);
  font-weight: 700;
}


/* Portfolio copy: the footer shows the text wordmark instead of a logo image. */
.footer__brand .brand__word {
  display: inline-block;
  font-size: 1.5rem;
}
.footer__brand .brand__word span {
  color: var(--quell);
}