/* AquaSnack — vending machine
   The machine is one chassis holding three bays: the tank the products float in,
   the tray they drop into underneath it, and the till beside them both.
   Cards follow the Figma frames "Product Information" and "Frutiger Aero Information". */

:root {
  --deep: #032a4d;
  --mid: #0a6ca8;
  --shallow: #2ea9dd;
  --surface: #8fe2f7;

  /* Both Figma frames are 380px wide; every card measure below is expressed in
     em against that width, so the whole card scales as one piece. The till is
     sized around the card rather than the other way round. */
  --card-w: clamp(244px, 23vw, 344px);
  --card-em: calc(var(--card-w) * 16 / 380);

  --bay-gap: clamp(10px, 1.1vw, 18px);
  --chute-h: clamp(104px, 15vh, 152px);
  --shell: #0b2f4d;            /* recessed housing around every bay */

  --ink: #0c2947;              /* Frutiger Aero card headings */
  --glass: rgba(255, 255, 255, 0.2);
  --glass-line: rgba(255, 255, 255, 0.45);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #0d3a55;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.6vw, 28px);
  background: radial-gradient(120% 90% at 50% 0%, #dff6fd 0%, #a8e2f2 30%, #4a9fc0 66%, #12435c 100%);
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- The room ---------- */

.room {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.room__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.room__glow--a {
  top: -10%;
  left: 18%;
  width: 46vw;
  height: 46vw;
  background: rgba(103, 232, 249, 0.42);
}

.room__glow--b {
  bottom: -14%;
  right: 12%;
  width: 40vw;
  height: 40vw;
  background: rgba(45, 212, 191, 0.32);
}

/* ---------- Chassis ---------- */

.machine {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bay-gap);
  width: min(100%, 1480px);
  height: min(100%, 980px);
  max-height: 100%;
  padding: clamp(10px, 1.3vw, 20px);
  border-radius: clamp(24px, 2.6vw, 44px);
  border: 3px solid #7dd3fc;
  background: linear-gradient(180deg, #bbf7d0 0%, #a5f3fc 6%, #38bdf8 20%, #06b6d4 50%, #0891b2 85%, #0e7490 100%);
  box-shadow:
    0 35px 70px -15px rgba(6, 44, 58, 0.75),
    inset 0 0 0 3px rgba(255, 255, 255, 0.9),
    inset 0 5px 12px rgba(255, 255, 255, 0.7),
    inset 0 -12px 24px rgba(0, 0, 0, 0.35),
    0 0 45px rgba(56, 189, 248, 0.5);
}

/* Light catching the top edge of the moulding */
.machine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  filter: blur(1px);
}

/* ---------- Banner ---------- */

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 26px);
  flex: none;
  padding: clamp(6px, 0.7vw, 11px) clamp(12px, 1.4vw, 20px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(6, 30, 52, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.banner__brand {
  display: flex;
  align-items: baseline;
  gap: clamp(7px, 0.9vw, 12px);
  min-width: 0;
  overflow: hidden;
}

.banner__lamp {
  align-self: center;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 10px #67e8f9;
}

.banner__logo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(3, 42, 77, 0.6);
}

.banner__model {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(9px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(165, 243, 252, 0.78);
  white-space: nowrap;
}

/* ---------- Variant picker ---------- */

.banner__variant {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(7px, 0.9vw, 12px);
}

.banner__variant-label {
  font-size: clamp(9px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.select {
  position: relative;
  display: inline-flex;
  max-width: 52vw;
}

.select__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0.55em 2.6em 0.55em 1.1em;
  font-family: inherit;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 600;
  color: #fff;
  text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(3, 42, 77, 0.45);
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.1) 46%, rgba(255, 255, 255, 0.24) 100%),
    rgba(6, 74, 124, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -8px 16px rgba(0, 120, 175, 0.2),
    0 6px 16px rgba(3, 42, 77, 0.35);
}

/* The popup list is drawn by the OS, so it only takes plain colours. */
.select__input option {
  color: var(--ink);
  background: #eaf7ff;
  font-weight: 600;
}

.select__input:hover { border-color: rgba(255, 255, 255, 0.7); }

.select__input:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.select__chevron {
  position: absolute;
  top: 50%;
  right: 1.05em;
  width: 0;
  height: 0;
  border-left: 0.32em solid transparent;
  border-right: 0.32em solid transparent;
  border-top: 0.36em solid rgba(255, 255, 255, 0.92);
  font-size: clamp(11px, 1.05vw, 14px);
  transform: translateY(-40%);
  filter: drop-shadow(0 1px 3px rgba(3, 42, 77, 0.5));
  pointer-events: none;
}

/* ---------- Bays ---------- */

.machine__bays {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--bay-gap);
  flex: 1;
  min-height: 0;
}

/* Sections 1 and 2 stack, and share one coordinate space for the falling product */
.bay {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bay-gap);
  min-width: 0;
  min-height: 0;
}

/* ================================================================
   Section 1 — the tank
   ================================================================ */

.tank {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overflow: clip;              /* not a scroll container: focus() cannot pan it */
  border-radius: clamp(16px, 1.8vw, 30px);
  border: 3px solid rgba(255, 255, 255, 0.65);
  background: radial-gradient(ellipse at 50% 30%, #38bdf8 0%, #0284c7 45%, #0369a1 75%, #073b54 100%);
  box-shadow:
    inset 0 16px 30px rgba(0, 0, 0, 0.6),
    inset 0 -12px 25px rgba(0, 0, 0, 0.45),
    inset 10px 0 20px rgba(0, 0, 0, 0.35),
    inset -10px 0 20px rgba(0, 0, 0, 0.35),
    0 0 25px rgba(56, 189, 248, 0.4);
  cursor: default;
}

/* ---------- Water background ---------- */

.water {
  position: absolute;
  inset: 0;
  overflow: hidden;            /* keeps the oversized rays and caustics inside */
  background:
    radial-gradient(110% 46% at 50% -14%, rgba(226, 252, 255, 0.62) 0%, rgba(143, 226, 247, 0) 62%),
    linear-gradient(180deg, var(--surface) 0%, var(--shallow) 16%, var(--mid) 46%, var(--deep) 92%);
}

.water::after {
  /* subtle vignette so the tank reads as depth */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 50% 38%, rgba(0, 0, 0, 0) 38%, rgba(2, 24, 45, 0.5) 100%);
  pointer-events: none;
}

.ray {
  position: absolute;
  top: -20%;
  width: 26%;
  height: 150%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  filter: blur(22px);
  opacity: 0.4;
  transform-origin: top center;
  mix-blend-mode: screen;
}

.ray--1 { left: 6%;  transform: rotate(9deg); }
.ray--2 { left: 42%; width: 18%; transform: rotate(-6deg); }
.ray--3 { left: 74%; width: 22%; transform: rotate(12deg); }

.caustics {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 70%) 10% 20% / 28% 22%,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%) 70% 40% / 22% 18%,
    radial-gradient(closest-side, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 70%) 40% 70% / 32% 26%;
  background-repeat: no-repeat;
  filter: blur(10px);
  opacity: 0.45;
  mix-blend-mode: screen;
}

/* The pane of glass across the front of the tank */
.tank__glare {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.14) 20%,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0) 66%,
    rgba(255, 255, 255, 0.1) 78%,
    transparent 100%);
}

/* ---------- Bubble layers ---------- */

.deco,
.bubbles,
.fx {
  position: absolute;
  inset: 0;
}

.deco    { z-index: 2; pointer-events: none; }  /* water texture, behind the products */
.bubbles { z-index: 3; }
.fx      { z-index: 6; pointer-events: none; }  /* droplets and rings above everything */

/* The dispensed product travels across both bays, so it lives outside the tank */
.catch {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.bubble {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  will-change: transform;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.02) 42%),
    radial-gradient(circle at 68% 76%, rgba(150, 235, 255, 0.34) 0%, rgba(150, 235, 255, 0) 48%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.38) 88%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.26),
    inset -6px -10px 22px rgba(0, 120, 175, 0.18),
    0 8px 22px rgba(3, 42, 77, 0.16);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.machine.is-busy .bubble { cursor: default; }

.bubble:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.bubble__shine {
  position: absolute;
  top: 12%;
  left: 16%;
  width: 26%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  filter: blur(2px);
  transform: rotate(-24deg);
}

.bubble__item {
  font-size: 1em;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(3, 42, 77, 0.35));
  pointer-events: none;
}

/* A cancelled product rides one of these back up into the water */
.bubble--return { pointer-events: none; }

/* Water texture: far smaller than a product bubble, and never clickable */
.bubble--deco {
  pointer-events: none;
  opacity: 0.4;
  filter: blur(1.5px);
}

/* ---------- Pop effects ---------- */

.ring {
  position: absolute;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.droplet {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(190, 240, 255, 0.65));
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.ripple {
  position: absolute;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.drop {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 10px 14px rgba(2, 24, 45, 0.45));
  will-change: transform;
}

/* ---------- Hint ---------- */

.hint {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 1.6vh, 20px);
  z-index: 7;
  margin: 0;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: clamp(11px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(4, 40, 70, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ================================================================
   Section 2 — the collection tray
   ================================================================ */

.chute {
  flex: none;
  height: var(--chute-h);
  display: flex;
  flex-direction: column;
  padding: clamp(5px, 0.6vw, 9px);
  border-radius: clamp(14px, 1.5vw, 24px);
  border: 3px solid #334155;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    inset 0 12px 18px rgba(0, 0, 0, 0.9),
    inset 0 0 10px rgba(0, 0, 0, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.3);
}

.chute__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  padding: 0 clamp(6px, 0.7vw, 10px) clamp(3px, 0.4vw, 6px);
  font-size: clamp(8px, 0.72vw, 10px);
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.chute__label { color: #67e8f9; }
.chute__status { color: #94a3b8; }
.chute__status.is-full { color: #4ade80; }

.chute__well {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(9px, 1vw, 15px);
  border: 1px solid rgba(56, 189, 248, 0.22);
  background: linear-gradient(180deg, #000 0%, #0b1220 62%, #111f33 100%);
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.95);
}

/* The bright edge the product falls over */
.chute__lip {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(160, 235, 255, 0.75), transparent);
  box-shadow: 0 0 14px rgba(160, 235, 255, 0.5);
}

/* The dark slot the product lands on */
.chute__mouth {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(2, 10, 20, 0) 0%, rgba(2, 10, 20, 0.85) 100%);
}

/* ================================================================
   Section 3 — the till
   ================================================================ */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--bay-gap);
  flex: none;
  width: calc(var(--card-w) + 2 * clamp(7px, 0.8vw, 12px));
  min-height: 0;
  padding: clamp(7px, 0.8vw, 12px);
  border-radius: clamp(18px, 2vw, 30px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, #cffafe 0%, #a5f3fc 20%, #38bdf8 65%, #0891b2 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px rgba(14, 116, 144, 0.6),
    0 6px 14px rgba(0, 0, 0, 0.2);
}

/* The card is mounted flush in the housing now rather than floating on a screen,
   so its drop shadow had nothing to fall on but the cyan around it, where it
   pooled as a smudge. The Aero card still floats over the tank and keeps its own. */
.panel .card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* The card is the till: one view at a time, mounted straight on the housing */
.panel__view {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(12, 41, 71, 0.3) transparent;
}

.panel__view::-webkit-scrollbar { width: 5px; }
.panel__view::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(12, 41, 71, 0.3);
}

.view {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.8vw, 12px);
  padding: clamp(6px, 0.7vw, 10px) 0;
}

.view[hidden] { display: none; }

/* --- Idle --- */

.view--idle {
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-align: center;
  padding: clamp(10px, 1.4vw, 20px) clamp(6px, 0.8vw, 12px);
}

.view__mark {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(6, 60, 100, 0.35));
}

.view__title {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--ink);
}

.view__copy {
  margin: 0;
  max-width: 24em;
  font-size: clamp(10px, 0.95vw, 13px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(12, 41, 71, 0.75);
}

.view--idle .statbar--ink {
  width: 100%;
  margin-top: clamp(4px, 0.6vw, 8px);
  font-size: var(--card-em);
}

/* --- Offer / payment --- */

.view--offer,
.view--pay { align-items: center; }

/* The product card starts at the top of the housing. The payment card is short
   enough that centring reads better there — `safe center` so a card taller than
   the housing spills downwards and stays scrollable rather than losing its head. */
.view--pay {
  justify-content: safe center;
  min-height: 100%;
}

/* ---------- Card reader ---------- */

.reader {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 13px);
  flex: none;
  padding: clamp(8px, 0.9vw, 13px);
  border-radius: clamp(13px, 1.5vw, 22px);
  border: 1.5px solid #334155;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.reader.is-live {
  border-color: #38bdf8;
  box-shadow:
    0 0 25px rgba(34, 211, 238, 0.75),
    inset 0 0 15px rgba(34, 211, 238, 0.4);
}

.reader.is-success {
  border-color: #4ade80;
  box-shadow:
    0 0 25px rgba(74, 222, 128, 0.65),
    inset 0 0 15px rgba(74, 222, 128, 0.35);
}

.reader__wave {
  position: absolute;
  left: clamp(8px, 0.9vw, 13px);
  top: 50%;
  width: clamp(30px, 3vw, 42px);
  height: clamp(30px, 3vw, 42px);
  margin-top: calc(clamp(30px, 3vw, 42px) / -2);
  border-radius: 50%;
  border: 3px solid rgba(103, 232, 249, 0.7);
  opacity: 0;
  pointer-events: none;
}

.reader__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(30px, 3vw, 42px);
  height: clamp(30px, 3vw, 42px);
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1;
}

.reader__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reader__title {
  font-size: clamp(9px, 0.82vw, 11px);
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #e2e8f0;
}

.reader__sub {
  font-size: clamp(8.5px, 0.78vw, 11px);
  font-weight: 500;
  color: #94a3b8;
}

.reader.is-live .reader__sub { color: #67e8f9; font-weight: 700; }
.reader.is-success .reader__sub { color: #4ade80; font-weight: 700; }


/* ================================================================
   Cards — implemented from the Figma frames
   ================================================================ */

.card {
  position: relative;
  flex: none;
  width: var(--card-w);
  font-size: var(--card-em);   /* 1em === 16px at the 380px design width */
  padding: 1.5em;              /* 24px */
  border-radius: 1.75em;       /* 28px */
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1.9em 4.4em rgba(2, 26, 52, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* --- Product information (node 24:7) --- */

.pcard {
  display: flex;
  flex-direction: column;
  gap: 1em;
  color: #fff;
  background:
    radial-gradient(120% 80% at 80% 6%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 52%),
    linear-gradient(172deg, #9bd3f0 0%, #74b8e9 27%, #549ddd 60%, #3b7dc6 100%);
}

.pcard__hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 7em;                 /* 112px */
  border-radius: 1.25em;       /* 20px */
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.pcard__emoji {
  font-size: 4.5em;            /* 72px */
  line-height: 1;
  filter: drop-shadow(0 0.14em 0.2em rgba(6, 50, 79, 0.3));
}

.pcard__head {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: -0.25em;
}

.pcard__headline { flex: 1; min-width: 0; }

.eyebrow {
  margin: 0;
  font-size: 0.8125em;         /* 13px */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(6, 50, 90, 0.25);
}

.eyebrow--ink { color: rgba(12, 41, 71, 0.92); text-shadow: none; }

.pcard__name {
  margin: 0.1em 0 0;
  font-size: 1.8em;            /* ~29px */
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  text-shadow: 0 0.06em 0.18em rgba(5, 45, 84, 0.3);
}

.pcard__price {
  flex: none;
  align-self: center;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  font-size: 1.2em;            /* 19px */
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(180deg, #7ee2f8 0%, #4ec4ef 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0.4em 1em rgba(12, 120, 175, 0.4);
  text-shadow: 0 1px 2px rgba(9, 95, 140, 0.35);
}

.pcard__desc {
  margin: -0.25em 0 0;
  font-size: 0.95em;           /* ~15px */
  font-weight: 500;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.92);
}

/* --- Tag pills (both cards) --- */

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.taglist li {
  padding: 0.32em 0.85em;
  border-radius: 999px;
  font-size: 0.8125em;         /* 13px */
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/* --- Stat strip (both cards) --- */

.statbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  border-radius: 1em;          /* 16px */
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.statbar > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  padding: 0.62em 0.22em 0.7em;
  text-align: center;
  min-width: 0;
}

.statbar > div + div { border-left: 1px solid rgba(255, 255, 255, 0.3); }

.statbar dt {
  font-size: 0.6875em;         /* 11px */
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.statbar dd {
  margin: 0;
  font-size: 1.1em;            /* ~18px */
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #fff;
}

.statbar--ink {
  background: rgba(10, 46, 84, 0.3);
  border-color: rgba(255, 255, 255, 0.28);
}

.statbar--ink > div + div { border-left-color: rgba(255, 255, 255, 0.22); }

/* --- Buttons --- */

.pcard__actions {
  display: flex;
  gap: 0.7em;
  margin-top: 0.15em;
}

.btn {
  padding: 0.72em 1.1em;
  border-radius: 1.25em;       /* 20px */
  font-family: inherit;
  font-size: 1.2em;            /* 19px */
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.btn--buy {
  flex: 1;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, #a8ed86 0%, #7bd96c 46%, #50c059 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -0.5em 1em rgba(20, 105, 52, 0.22),
    0 0.6em 1.3em rgba(33, 138, 70, 0.4);
  text-shadow: 0 1px 2px rgba(20, 90, 45, 0.3);
}

.btn--cancel {
  flex: none;
  padding-left: 0.9em;
  padding-right: 0.9em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0.5em 1.1em rgba(4, 40, 80, 0.25);
  text-shadow: 0 1px 2px rgba(6, 50, 90, 0.3);
}

/* --- Frutiger Aero information (node 24:44) --- */

.acard {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  color: #fff;
  background:
    radial-gradient(110% 70% at 18% 4%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
    linear-gradient(168deg, #a9eac9 0%, #8fddd3 17%, #6dc1e2 44%, #4a92d6 100%);
}

.acard .eyebrow { margin-bottom: -0.35em; }

.acard__title {
  margin: 0 0 0.1em;
  font-size: 2.25em;           /* 36px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.acard__panel {
  position: relative;
  padding: 1.15em;
  border-radius: 1.25em;       /* 20px */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.acard__panel p {
  position: relative;
  margin: 0;
  font-size: 0.95em;           /* ~15px */
  font-weight: 500;
  line-height: 1.32;
  color: #fff;
  text-shadow: 0 1px 3px rgba(6, 48, 92, 0.45);
}

.acard__panel p + p { margin-top: 0.75em; }

/* --- Decorative glass orbs --- */

.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.26) 28%, rgba(255, 255, 255, 0.07) 58%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.55) 86%, rgba(255, 255, 255, 0) 100%);
}

.orb--hero    { width: 3.5em;  height: 3.5em;  top: 0.7em;   right: 1.4em; }
.orb--pcard   { width: 2em;    height: 2em;    bottom: 5.4em; right: 1em; }
.orb--aero-a  { width: 4.6em;  height: 4.6em;  top: 4.2em;   right: -0.6em; }
.orb--aero-b  { width: 2.2em;  height: 2.2em;  top: 7.6em;   right: 2.6em; }
.orb--pay     { width: 2.6em;  height: 2.6em;  top: 1.2em;   left: 1.2em; }


/* --- Payment card (node-less: the machine's own terminal screen) --- */

.paycard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2em;
  color: #fff;
  background:
    radial-gradient(120% 80% at 80% 6%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 52%),
    linear-gradient(172deg, #9bd3f0 0%, #74b8e9 27%, #549ddd 60%, #3b7dc6 100%);
}

.paycard__amount {
  margin: 0.1em 0 0.35em;
  font-size: 3em;              /* 48px */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0.06em 0.18em rgba(5, 45, 84, 0.3);
}

.paycard__status {
  margin: 0.5em 0 0;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(6, 50, 90, 0.3);
}

.paycard__note {
  margin: 0.45em 0 0;
  font-size: 0.8125em;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

.paycard .btn--buy {
  flex: none;
  width: 100%;
  margin-top: 1.1em;
}

/* ================================================================
   Narrow displays — the machine unstacks into one column
   ================================================================ */

@media (max-width: 900px) {
  :root { --card-w: min(344px, calc(100vw - 84px)); }

  body {
    overflow: auto;
    align-items: flex-start;
  }

  .machine {
    height: auto;
    max-height: none;
  }

  .machine__bays { grid-template-columns: minmax(0, 1fr); }

  .bay { min-height: 58vh; }

  .panel {
    width: 100%;
    align-self: stretch;
  }

  .panel__view { min-height: 46vh; }

  .banner__variant-label { display: none; }
}

@media (max-width: 560px) {
  .pcard__head { flex-wrap: wrap; }
  .pcard__price { align-self: flex-start; }
  .statbar > div + div {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }
  .banner__model { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reader { transition: none; }
}