/* ==========================================================================
   zhosayprints design system

   The shop sells two things that look nothing alike: cute fridge magnets and
   precision tabletop bases. What actually unites them is magnetism, so the
   whole page is built around a dipole: N is the magnets, S is the bases, and
   the field lines in the hero are traced from the real two-pole field
   equation (assets/js/field.js) rather than drawn by hand.

   Everything else stays quiet so that one idea carries the page.
   ========================================================================== */

@import url("fonts.css");

:root {
  /* Ground: cool pale steel, the colour of a clean print bed. Chosen over
     the usual warm cream so that the colourful PLA prints stay the warmest
     thing on the page. */
  --ground:      #e6e8ed;
  --ground-deep: #d5d9e2;
  --card:        #fafbfc;
  --ink:         #10131a;
  --ink-2:       #39404e;
  --muted:       #6c7484;
  --line:        #c6cbd8;
  --line-soft:   #dfe3ea;

  /* The two poles. Textbook magnet colours, pulled down out of toy territory. */
  --pole-n:      #c62a3c;
  --pole-n-soft: #f6e3e5;
  --pole-s:      #2547cc;
  --pole-s-soft: #e0e5f9;

  --focus:       #10131a;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell:  1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 3px;

  --shadow-card: 0 1px 2px rgba(16, 19, 26, .05),
                 0 8px 24px -12px rgba(16, 19, 26, .18);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Browser geben <figure> von Haus aus margin: 1em 40px. Ohne das hier steht
   um jede Produktkachel ein weißer Rand und das Bild ist deutlich schmaler
   als die Karte. */
figure { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* -------------------------------------------------------------- layout -- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ------------------------------------------------------------ typography */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.028em;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.lede {
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0;
}

.mono { font-family: var(--font-mono); font-size: 13px; }

/* ------------------------------------------------------------ site head -- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 62px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
  text-decoration: none;
  margin-right: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

/* The dot between the halves of the wordmark is the magnet itself: red on
   the left half, blue on the right, same dipole as the hero. */
.wordmark__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--pole-n) 0 50%, var(--pole-s) 50% 100%);
  align-self: center;
  margin-inline: 3px;
  flex: none;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.navlinks a { text-decoration: none; color: var(--ink-2); }
.navlinks a:hover { color: var(--ink); text-decoration: underline; }

.cartlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.cartlink:hover { border-color: var(--ink); }

.cartlink__count {
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--ground);
  font-size: 11px;
  font-weight: 500;
  display: inline-grid;
  place-items: center;
}

.cartlink[data-empty="true"] .cartlink__count {
  background: var(--line);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* The field canvas sits behind the copy and spans the full hero. */
.hero__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  padding-block: clamp(64px, 11vw, 132px) clamp(56px, 9vw, 104px);
}

.hero__title {
  font-size: clamp(46px, 9.2vw, 108px);
  max-width: 15ch;
  margin-block: 22px 26px;
}

/* "magnetisch" gets the dipole gradient, the one flourish in the type. */
.hero__pull {
  background: linear-gradient(96deg, var(--pole-n) 8%, var(--pole-s) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* Field lines draw themselves in on load; field.js sets the dash values and
   the per-line delay, so the keyframe only has to run the offset to zero. */
@keyframes fieldDraw {
  to { stroke-dashoffset: 0; }
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .16s ease, color .16s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn--ghost:hover { border-color: var(--ink); background: var(--card); }

.btn--n { background: var(--pole-n); border-color: var(--pole-n); color: #fff; }
.btn--s { background: var(--pole-s); border-color: var(--pole-s); color: #fff; }

.btn--block { width: 100%; }

/* ------------------------------------------------------------- sections -- */

.section {
  padding-block: clamp(56px, 8vw, 96px);
  /* The masthead is sticky, so an anchor jump has to stop short of it or the
     section heading lands underneath the bar. */
  scroll-margin-top: 74px;
}

.section--tinted { background: var(--ground-deep); }

.section__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 34px);
  margin-bottom: clamp(32px, 5vw, 52px);
}

/* The pole glyph replaces the usual 01 / 02 section numbering. There are
   exactly two product lines and they really are the two ends of the magnet,
   so the marker carries information instead of decorating. */
.pole-glyph {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: #fff;
}

.pole-glyph[data-pole="n"] { background: var(--pole-n); }
.pole-glyph[data-pole="s"] { background: var(--pole-s); }

.section__fineprint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
  margin: 14px 0 0;
}

.section__title {
  font-size: clamp(30px, 4.4vw, 46px);
  margin-block: 4px 12px;
}

/* --------------------------------------------------------------- grid --- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  /* Jede Karte so hoch wie ihr Inhalt. Gestreckt stünde neben einem
     Konfigurator eine fast leere Zubehörkarte gleicher Höhe. */
  align-items: start;
}

/* --------------------------------------------------------------- card --- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.card:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.card__figure {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ground-deep);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

.card__figure img { width: 100%; height: 100%; object-fit: cover; }
.card__figure svg { width: 100%; height: 100%; }

.card__tag {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.card__tag[data-pole="n"] { color: var(--pole-n); border-color: var(--pole-n); }
.card__tag[data-pole="s"] { color: var(--pole-s); border-color: var(--pole-s); }

/* Umdrehen: das Base hat zwei Seiten, die beide etwas zeigen. */
.card__flip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}

.card__flip:hover { border-color: var(--ink); color: var(--ink); }
.card__flip[hidden] { display: none; }

/* Beim Wechsel kurz aufblenden, damit der Seitenwechsel sichtbar wird und
   nicht wie ein Bildfehler aussieht. */
.card__figure img { animation: artFade .22s ease both; }

@keyframes artFade {
  from { opacity: .25; }
  to   { opacity: 1; }
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  flex: 1;
}

.card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0;
}

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

.card__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}

.card__specs dt { color: var(--muted); }
.card__specs dd { margin: 0; text-align: right; }

.card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}

.card__price {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  margin-right: auto;
}

.card__price small {
  display: block;
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .02em;
}

.card__select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  font-family: var(--font-mono);
  font-size: 12.5px;
  cursor: pointer;
}

.card__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------- Konfigurator -- */

.config__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 -4px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chips--stack { flex-direction: column; align-items: stretch; }

.chip {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.chip:hover { border-color: var(--ink-2); }

.chip[aria-checked="true"] {
  background: var(--pole-s);
  border-color: var(--pole-s);
  color: #fff;
}

.chips--stack .chip { text-align: left; }
.chips--sm .chip { padding: 6px 9px; font-size: 12px; }

.qty-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.qty__field {
  width: 56px;
  height: 30px;
  border: 0;
  background: var(--card);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty__field::-webkit-outer-spin-button,
.qty__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.config__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: -2px 0 0;
}

/* Hinweis auf die nächste Mengenstaffel. */
.card__hint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--pole-s);
  background: var(--pole-s-soft);
  border-radius: var(--radius);
  padding: 7px 10px;
  margin: 0;
}

.card__hint[hidden] { display: none; }

/* Die Konfiguratorkarte bleibt so breit wie jede andere.
   Zwei Rasterspalten waren ein Irrweg: das feste 4:3 des Bildes setzt jede
   zusätzliche Breite in zusätzliche Höhe um, die Karte wurde 1277 px lang.
   Nebeneinander gestellt blieb die Bildspalte hochkant und das Foto schwamm
   in einer leeren Fläche. Kompakter Inhalt schlägt hier mehr Platz. */

.card--config .card__body { gap: 10px; }

/* Bedienelemente enger an ihre Beschriftung rücken. */
.card--config .config__label { margin-bottom: -6px; }

.card__stock {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;   /* sonst bricht "auf Lager" in zwei Zeilen */
  align-self: flex-start;
}

.card__stock[data-low="true"] { color: var(--pole-n); }

/* ------------------------------------------------------------ how-made -- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  counter-reset: step;
}

/* Here the numbering IS the information: it is a real sequence, in order. */
.step { display: flex; flex-direction: column; gap: 10px; }

.step__n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  margin: 0;
}

.step p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* ---------------------------------------------------------------- cart -- */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.cart-lines {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.cart-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.cart-line:last-child { border-bottom: 0; }

.cart-line__figure {
  width: 76px;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--ground-deep);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cart-line__figure svg,
.cart-line__figure img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 2px;
}

.cart-line__variant {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.cart-line__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.qty button {
  width: 30px; height: 30px;
  border: 0;
  background: var(--ground);
  cursor: pointer;
  font-family: var(--font-mono);
  line-height: 1;
}

.qty button:hover { background: var(--ground-deep); }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }

.qty output {
  min-width: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
}

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.linkish:hover { color: var(--pole-n); }

.summary {
  position: sticky;
  top: 82px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 20px;
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  padding-block: 7px;
}

.summary__row--total {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 14px;
  font-size: 17px;
  font-weight: 500;
}

.summary__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 14px 0 0;
}

.empty {
  text-align: center;
  padding: clamp(48px, 9vw, 96px) 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.empty__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 8px;
}

.empty p { color: var(--muted); margin: 0 0 22px; }

/* --------------------------------------------------------------- prose -- */

.prose { max-width: 74ch; }

.prose h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0 0 28px;
}

.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.015em;
  margin: 40px 0 12px;
}

.prose h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  margin: 26px 0 8px;
}

.prose p, .prose li { color: var(--ink-2); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }

.prose address {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  margin-bottom: 14px;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-bottom: 18px;
}

.prose th, .prose td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.prose th { font-weight: 600; font-size: 13px; color: var(--muted); }

.callout {
  border-left: 3px solid var(--pole-n);
  background: var(--pole-n-soft);
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 18px;
}

.callout p { margin: 0; color: var(--ink); font-size: 15px; }

.table-scroll { overflow-x: auto; }

/* ----------------------------------------------------------- utilities -- */
/* Deliberately few. These exist so no page needs a style attribute, which is
   what lets the Content-Security-Policy stay free of 'unsafe-inline'. */

.page-title { font-size: clamp(32px, 5vw, 52px); margin-block: 10px 34px; }
.rule--spaced { margin-block: 40px; }
.push-top { margin-top: 32px; }
.fill { width: 100%; height: 100%; }

/* -------------------------------------------------------------- footer -- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 48px 40px;
  margin-top: clamp(56px, 8vw, 96px);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  margin-bottom: 36px;
}

.footer__title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 7px; }
.footer__list a { font-size: 14.5px; text-decoration: none; color: var(--ink-2); }
.footer__list a:hover { color: var(--ink); text-decoration: underline; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

/* ------------------------------------------------------- holding page -- */
/* The pre-launch placeholder. Same dipole field as the shop hero, so the
   page people find early already looks like the shop they will come back to. */

.holding {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.holding__top { position: relative; padding-top: 28px; }

.holding__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 9vw, 96px);
}

.holding__title {
  font-size: clamp(42px, 8vw, 92px);
  max-width: 14ch;
  margin-block: 20px 26px;
}

.holding__contact {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
  margin: 30px 0 0;
}

.holding__foot {
  position: relative;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}

.holding__foot .footer__legal { padding-top: 0; border-top: 0; }

/* --------------------------------------------------------------- toast -- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  font-family: var(--font-mono);
  font-size: 13px;
  box-shadow: 0 12px 32px -10px rgba(16, 19, 26, .5);
  /* Clear the viewport by the toast's own height *plus* its bottom offset;
     a plain percentage leaves it peeking above the fold. visibility keeps it
     out of the tab order while it is parked. */
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  visibility: hidden;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.2),
              opacity .2s ease,
              visibility 0s linear .28s;
}

.toast[data-open="true"] {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.2),
              opacity .2s ease,
              visibility 0s;
}

.toast a { color: var(--ground); }

/* --------------------------------------------------------------- alert -- */

.alert {
  border: 1px solid var(--pole-n);
  background: var(--pole-n-soft);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 14.5px;
  margin-bottom: 18px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .navlinks { gap: 14px; }
  .navlinks .navlinks__hide-sm { display: none; }
  .section__head { flex-direction: column; gap: 16px; }
  .pole-glyph { width: 46px; height: 46px; font-size: 21px; }
  .cart-line { grid-template-columns: 60px minmax(0, 1fr); }
  .cart-line__figure { width: 60px; }
  .cart-line__right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* -------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------- print -- */

@media print {
  .masthead, .footer, .hero__field, .toast { display: none; }
  body { background: #fff; }
}