/* Self-hosted webfonts: the print on the packaging. Everything printed on a pack
   (wordmarks, kraft label, address) sets Barlow Condensed, a DIN-descendant made
   for industrial packaging; everything machine-printed (price, serials, shelf
   label) sets IBM Plex Mono. The page around the shelf stays on the native OS
   stack. Latin subsets, OFL — see THIRD_PARTY_NOTICES.md. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/barlow-condensed-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-700.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --wall: #f5f5f7;
  --wall-deep: #f5f5f7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --button: #171a1b;
  --button-ink: #f5f5ef;
  /* The pack is a physical object: one size drives it. Its width sets a container,
     and every part inside is a fraction of that width (cqw), so the whole pack —
     hooks, print, sticker, card, QR — scales as one piece instead of thirty
     hand-tuned pixel values. Change the range, not the parts. */
  --pack-min: 300px;
  --pack-max: 360px;
  --card-width: 87%;
  --price-bg: #f1d98a;
  --price-ink: #33270f;
  --sheet: #ffffff;
  --sheet-line: rgba(29, 29, 31, 0.12);
  --sheet-soft: rgba(29, 29, 31, 0.045);
  --section-line: rgba(29, 29, 31, 0.16);
  --row-line: rgba(29, 29, 31, 0.09);
  --stamp: #c53a2a;
  /* DNBar's orange — the one warm brand note on the page, spent only on the
     link that leaves for their warehouse. */
  --dnbar: #ee7d1b;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial,
    sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial,
    sans-serif;
  --font-condensed: "Barlow Condensed", "Avenir Next Condensed", Bahnschrift, "Roboto Condensed",
    "Arial Narrow", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", Menlo,
    monospace;
  --shadow-rgb: 29 29 31;
  --kraft-face: #262725;
  --kraft-edge: #10110f;
  --kraft-ink: #e6e2da;
  --hook-lo: #747a7b;
  --hook-mid: #999f9f;
  --hook-hi: #c8ccca;
  --hook-outline: rgba(53, 59, 60, 0.3);
  --hook-cast: rgba(29, 34, 35, 0.2);
  --hook-metal: linear-gradient(
    90deg,
    var(--hook-lo) 0%,
    var(--hook-mid) 31%,
    var(--hook-hi) 49%,
    var(--hook-mid) 68%,
    var(--hook-lo) 100%
  );
  --focus: #0e5fbd;
  --wall-material-png: url("./img/materials/png/studio-wall.png?v=2");
  --wall-material: image-set(
    url("./img/materials/webp/studio-wall.webp?v=2") type("image/webp"),
    url("./img/materials/png/studio-wall.png?v=2") type("image/png")
  );
  --paper-material-png: url("./img/materials/png/cardboard-fiber.png?v=2");
  --paper-material: image-set(
    url("./img/materials/webp/cardboard-fiber.webp?v=2") type("image/webp"),
    url("./img/materials/png/cardboard-fiber.png?v=2") type("image/png")
  );
  font-family: var(--font-body);
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 280px;
  min-height: 100%;
  background: var(--wall);
}

body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background-color: var(--wall);
  background-image: none;
  background-attachment: scroll;
}

body::before {
  content: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.display {
  width: min(100%, 1540px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 68px) clamp(18px, 4.2vw, 56px) clamp(36px, 3.5vw, 56px);
}

.display-header {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: clamp(58px, 8vw, 104px);
  text-align: center;
}

.brand-heading {
  margin: 0;
  line-height: 1;
}

.brand {
  display: inline-flex;
  color: var(--ink);
  border-radius: 4px;
  text-decoration: none;
}

.brand:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}

.brand-mark {
  display: block;
  width: auto;
  height: clamp(30px, 3.2vw, 42px);
  fill: currentColor;
}

/* The Q&A and crawlable inventory form one quiet editorial ledger. Both sections
   use the same intro rail and content column instead of stretching several small
   text blocks across the full display wall. */
.faq,
.seo {
  width: min(100%, 1280px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  column-gap: clamp(44px, 5vw, 68px);
  align-items: start;
  padding-top: clamp(28px, 3vw, 38px);
  border-top: 1px solid var(--section-line);
}

.faq {
  margin-top: clamp(56px, 7vw, 96px);
}

.seo {
  margin-top: clamp(48px, 5vw, 72px);
}

.faq__eyebrow,
.seo__pre,
.seo__eyebrow {
  margin: 0 0 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.faq__title,
.seo h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-condensed);
  font-size: clamp(29px, 2.5vw, 35px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-wrap: balance;
}

.faq__lead,
.seo__note > p:last-child {
  max-width: 40ch;
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.58;
  text-wrap: pretty;
}

/* Two independent FAQ columns keep an opened answer from moving the opposite
   side. One gap value governs the whole rhythm: the space between groups within a
   column and the space where the columns stack into one on a narrow screen are the
   same, so a category never crowds the one above it. */
.faq__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 3.5vw, 48px);
  row-gap: clamp(28px, 3vw, 38px);
}

.faq__col {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 38px);
  min-width: 0;
}

/* No rules between rows: structure comes from the category label and the whitespace
   under it, not a stack of hairlines. */
.faq__group {
  display: flex;
  flex-direction: column;
}

.faq__group-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.faq__item summary {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  margin-inline: -10px;
  padding: 10px;
  color: var(--ink);
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The chevron sits in a fixed optical zone, so wrapped questions do not move it. */
.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 0;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition:
    border-color 160ms ease,
    transform 180ms ease;
}

.faq__item[open] summary::after {
  border-color: var(--ink);
  transform: translateY(4px) rotate(-135deg);
}

.faq__answer {
  padding: 0 0 18px;
}

.faq__answer p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}

.faq__answer a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sheet-line);
  transition: border-color 160ms ease;
}

.faq__answer a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.seo__stock {
  min-width: 0;
}

.seo__eyebrow {
  margin-bottom: 13px;
}

/* A row-major grid reads more naturally than newspaper columns and keeps the
   shelf numbers tied to their names as the viewport changes. */
.seo-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px clamp(10px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-list li {
  position: relative;
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  transition:
    background-color 160ms ease,
    transform 120ms ease;
}

/* The number stamped on the pack's spine stays available without competing with
   the domain; it gains contrast only when the row is being inspected. */
.seo-list__no {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.38;
  transition: opacity 160ms ease;
}

.seo-list a {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 160ms ease;
}

/* Extend the link over its ledger row without changing generated SEO markup. */
.seo-list a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

.seo-list li:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.seo-list a:focus-visible {
  outline: none;
}

.seo-list li:active {
  transform: translateY(1px);
}

@media (hover: hover) {
  .faq__item summary:hover,
  .faq__item[open] summary:hover,
  .seo-list li:hover {
    background: var(--sheet-soft);
  }

  .faq__item summary:hover::after {
    border-color: var(--ink);
  }

  .faq__answer a:hover {
    border-bottom-color: var(--ink);
  }

  .seo-list li:hover .seo-list__no {
    opacity: 0.68;
  }

  .seo-list li:hover a {
    transform: translateX(2px);
  }
}

@media (max-width: 1180px) {
  .seo-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .faq,
  .seo {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
  }

  .faq__lead,
  .seo__note > p:last-child {
    max-width: 58ch;
  }

  .seo-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .faq,
  .seo {
    row-gap: 26px;
    padding-top: 26px;
  }

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

  .faq__item summary {
    min-height: 50px;
    font-size: 15.5px;
  }

  .seo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
  }

  .seo-list__no {
    display: none;
  }

  .seo-list li {
    grid-template-columns: minmax(0, 1fr);
    min-height: 44px;
    font-size: 11.5px;
  }
}

@media (max-width: 360px) {
  .seo-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-list li {
    min-height: 46px;
    font-size: 12px;
  }
}

/* The counter at the end of the shop: the partner's mark on the left, the shop's
   own name in the middle, the studio's credit in the right corner. The middle
   column is the anchor, so the name stays centered on the page even though the two
   marks are different widths. */
.display-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: clamp(64px, 8vw, 112px);
}

.footer-site {
  grid-column: 2;
  justify-self: center;
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-site:hover {
  color: var(--ink);
}

.footer-site:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Design credit. Quiet in the corner until you reach for it: the mark spins and
   the credit slides out from behind it. The pill is set in the shelf's own label
   voice (mono, letterspaced caps), not the studio's. */
.footer-credit {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: var(--muted);
  border-radius: 4px;
  opacity: 0.75;
  text-decoration: none;
  transform: translateY(-50%);
  transition:
    color 200ms ease,
    opacity 200ms ease;
}

.footer-credit__mark {
  display: block;
  width: 26px;
  height: 26px;
  fill: currentColor;
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer-credit__tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 2px);
  padding: 6px 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--sheet-soft);
  border: 1px solid var(--sheet-line);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition:
    opacity 280ms ease,
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footer-credit__tip b {
  color: var(--ink);
  font-weight: 600;
}

.footer-credit:hover,
.footer-credit:focus-visible {
  color: var(--ink);
  opacity: 1;
}

.footer-credit:hover .footer-credit__tip,
.footer-credit:focus-visible .footer-credit__tip {
  opacity: 1;
  transform: translate(0, -50%);
}

.footer-credit:hover .footer-credit__mark,
.footer-credit:focus-visible .footer-credit__mark {
  transform: rotate(450deg);
}

.footer-credit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.partner {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  padding: 8px;
  border-radius: 6px;
}

.partner:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Both variants sit in the DOM and are swapped by media query. A <picture> would
   be tidier, but switching its source mid-life aborts the in-flight request. */
.partner__logo {
  display: block;
  width: auto;
  height: 34px;
}

.partner__logo--dark {
  display: none;
}

.kicker {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
}

.rack-section,
.rack {
  position: relative;
}

/* auto-fit fits as many packs as the room allows and lets each one breathe between
   --pack-min and --pack-max; no column-count breakpoints to keep in sync. */
.blister-grid {
  display: grid;
  /* The tracks flex (1fr): auto-fit counts columns by a track's max size, so a fixed
     max would fit fewer, wider-than-needed columns. The pack itself is what carries
     the cap — see .peg-cell max-width. */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--pack-min), 100%), 1fr));
  gap: clamp(58px, 6vw, 86px) clamp(20px, 2.2vw, 30px);
  justify-content: center;
  justify-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.empty-state {
  grid-column: 1 / -1;
  min-height: 240px;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.empty-state code {
  color: var(--ink);
}

.peg-cell {
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: var(--pack-max);
  /* The depth a lifted pack travels through. The vanishing point sits above the
     middle of the pack, at the hook: the pack comes toward you off the peg, so the
     peg is where it is being lifted from. */
  perspective: 1100px;
  perspective-origin: 50% 22%;
  isolation: isolate;
}

/* An element cannot query its own container, so the pack's proportions live on its
   children. Ratios of the pack's width — the old 300px design, expressed once. */
.peg-cell > * {
  --header-height: 28cqw;
  --pivot-y: 3.883cqw;
  --hook-offset: 8.333cqw;
  --pouch-seal-depth: 1.333cqw;
  --card-floor-gap: 0.667cqw;
}

/* The hooks are pinned to the cell; the pack hangs below them. */
.pack-enter {
  margin-top: var(--hook-offset);
}

/* The wall while stock is on its way: real hooks, and under each one the
   faint mark a hanging pack leaves on a shop wall. Geometry matches the real
   pack exactly, so arriving packs land on the very same hooks. */
.ghost-cell {
  pointer-events: none;
}

.ghost-pack {
  margin-top: var(--hook-offset);
  animation: ghost-breathe 1900ms ease-in-out var(--ghost-delay, 0ms) infinite alternate backwards;
}

.ghost-pack__header {
  display: block;
  width: 100%;
  height: var(--header-height);
  fill: color-mix(in srgb, var(--ink) 8%, transparent);
}

.ghost-pack__pouch {
  aspect-ratio: 0.8;
  margin-top: 2px;
  background: color-mix(in srgb, var(--ink) 4.5%, transparent);
  border-radius: 2px 3px 10px 8px / 2px 3px 15px 13px;
}

@keyframes ghost-breathe {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

.hook {
  position: absolute;
  left: 50%;
  pointer-events: none;
}

.hook-rear {
  top: 0;
  z-index: 0;
  width: 6cqw;
  height: calc(var(--hook-offset) + var(--pivot-y) + 1.333cqw);
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 0.65px var(--hook-cast));
}

.hook-mount {
  position: absolute;
  top: 0.333cqw;
  left: 50%;
  width: 3.333cqw;
  height: 2.667cqw;
  border: 0.5px solid var(--hook-outline);
  border-radius: 50%;
  background-color: var(--hook-mid);
  background-image: var(--hook-metal);
  box-shadow: inset 0.5px 0.5px 0.5px rgb(255 255 255 / 0.2);
  transform: translateX(-50%);
}

.hook-mount::after {
  content: none;
}

.hook-wire {
  position: absolute;
  top: 2.333cqw;
  left: 50%;
  width: 1.333cqw;
  height: calc(100% - 2.667cqw);
  border: 0.5px solid var(--hook-outline);
  border-radius: 2px;
  background-color: var(--hook-mid);
  background-image: var(--hook-metal);
  box-shadow: none;
  transform: translateX(-50%);
}

.hook-front {
  top: calc(var(--hook-offset) + var(--pivot-y) - 1.667cqw);
  z-index: 8;
  width: 4cqw;
  height: 3.333cqw;
  border: 0.5px solid var(--hook-outline);
  border-radius: 50%;
  background-color: var(--hook-mid);
  background-image: var(--hook-metal);
  box-shadow: 1px 1.5px 1px var(--hook-cast);
  transform: translateX(-50%);
}

.hook-front::before {
  position: absolute;
  top: 1cqw;
  right: 2.667cqw;
  width: 4.667cqw;
  height: 1.333cqw;
  border: 0;
  border-radius: 2px 0 0 2px;
  background-color: var(--hook-mid);
  background-image: var(--hook-metal);
  box-shadow: 0 1px 0.6px var(--hook-cast);
  content: "";
}

.hook-front::after {
  content: none;
}

/* Reaching for a pack pulls it toward you by the bottom edge. The pack is still on
   its peg, so it turns about the hook: the foot swings out of the wall and into the
   room while the hang hole stays put. A little lift comes with it, the way it does
   when you tug a pack forward on a shelf, and the shadow deepens as the foot leaves
   the wall. It also straightens as you take hold of it — see script.js. */
.pack-enter {
  position: relative;
  z-index: 2;
  transform-origin: 50% var(--pivot-y);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.peg-cell.is-lifted {
  /* Its foot is out in front of the wall, so it passes over its neighbours. */
  z-index: 3;
}

.peg-cell.is-lifted .pack-enter {
  /* Positive rotateX brings the foot toward the viewer and lets the head fall back —
     which is the way round a pack tips when you pull it off a shelf by its bottom. */
  transform: translate3d(0, -1.4cqw, 0) rotateX(9deg);
}

.peg-cell.is-lifted .plastic-pouch {
  box-shadow:
    0 2px 2px rgb(var(--shadow-rgb) / 0.07),
    4px 12px 20px rgb(var(--shadow-rgb) / 0.13),
    8px 26px 44px rgb(var(--shadow-rgb) / 0.1),
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(57 69 73 / 0.045);
}

.plastic-pouch {
  transition: box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pack-swing {
  position: relative;
  transform: rotate(var(--rest-angle));
  transform-origin: 50% var(--pivot-y);
}

.pack-swing.is-swinging {
  will-change: transform;
}

.pack-surface {
  position: relative;
}

.cardboard-header {
  position: relative;
  z-index: 5;
  height: var(--header-height);
  color: var(--kraft-face);
  filter:
    drop-shadow(0 2.2px 0.65px rgb(56 39 25 / 0.32))
    drop-shadow(2.5px 5.5px 4.5px rgb(29 29 31 / 0.115));
}

.cardboard-shape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cardboard-face {
  fill: var(--kraft-face);
}

.cardboard-edge {
  fill: var(--kraft-edge);
  opacity: 0.96;
}

.cardboard-fiber {
  mix-blend-mode: soft-light;
  filter: grayscale(1) contrast(1.58) brightness(1.18);
  opacity: 0.4;
}

.cardboard-light {
  mix-blend-mode: soft-light;
  opacity: 0.4;
}

.cardboard-label {
  position: absolute;
  right: 4cqw;
  bottom: 3.333cqw;
  left: 4cqw;
  z-index: 2;
  overflow: hidden;
  color: var(--kraft-ink);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-condensed);
  font-size: 4.333cqw;
  font-weight: 600;
  font-stretch: condensed;
  letter-spacing: 0.16em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-overflow: ellipsis;
  mix-blend-mode: normal;
  opacity: 0.97;
  text-shadow:
    0 -0.7px 0.4px rgb(0 0 0 / 0.88),
    0 0.8px 0.45px rgb(255 255 255 / 0.2);
  white-space: nowrap;
}

.collection-number {
  position: absolute;
  top: 4cqw;
  left: 3.333cqw;
  z-index: 3;
  color: var(--kraft-ink);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-mono);
  font-size: 4.333cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.74;
  text-shadow: 0 -0.6px 0.35px rgb(0 0 0 / 0.76);
}

/* A real button: on the display page it opens the purchase inquiry. In the
   editor (no [data-inquire] on the rack) it stays inert under the pointer. */
.price-sticker {
  position: absolute;
  top: 2.333cqw;
  right: 2.667cqw;
  z-index: 3;
  display: grid;
  width: 23.333cqw;
  height: 10cqw;
  margin: 0;
  padding: 0;
  place-items: center;
  overflow: hidden;
  appearance: none;
  border: 1px solid rgb(45 31 21 / 0.14);
  border-color: color-mix(in srgb, var(--price-ink) 16%, transparent);
  border-radius: 3px 4px 3px 3px;
  background: var(--price-bg);
  color: var(--price-ink);
  box-shadow:
    0 0.7px 0.8px rgb(48 30 17 / 0.22),
    1px 1.8px 2.2px rgb(48 30 17 / 0.11),
    inset 0 0.5px 0 rgb(255 255 255 / 0.34);
  transform: translate(var(--price-x), var(--price-y)) rotate(var(--price-angle));
  transform-origin: 52% 54%;
  isolation: isolate;
  pointer-events: none;
}

.price-sticker::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: var(--paper-material-png);
  background-image: var(--paper-material);
  background-position: center;
  background-size: 170px 170px;
  filter: grayscale(1) contrast(1.12);
  mix-blend-mode: multiply;
  opacity: 0.075;
  content: "";
}

/* No opacity here: a translucent text layer drops subpixel antialiasing and the
   small type turns mushy. The ink prints at full strength instead. */
.price-sticker__value {
  position: relative;
  z-index: 1;
  color: var(--price-ink);
  font-family: var(--font-mono);
  font-size: 4.333cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.plastic-pouch {
  position: relative;
  aspect-ratio: 0.8;
  margin-top: -0.5px;
  overflow: hidden;
  border: 0.5px solid rgb(66 78 82 / 0.07);
  border-radius: 2px 3px 10px 8px / 2px 3px 15px 13px;
  background-color: rgb(198 213 218 / 0.032);
  box-shadow:
    0 1px 1px rgb(var(--shadow-rgb) / 0.065),
    2px 6px 10px rgb(var(--shadow-rgb) / 0.105),
    4px 15px 24px rgb(var(--shadow-rgb) / 0.075),
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(57 69 73 / 0.045);
}

.plastic-pouch::before {
  content: none;
}

.plastic-pouch::after {
  content: none;
}

.logo-card {
  position: absolute;
  top: auto;
  bottom: calc(var(--pouch-seal-depth) + var(--card-floor-gap));
  left: 50%;
  z-index: 1;
  width: var(--card-width);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(63, 69, 68, 0.13);
  border-radius: 8px;
  /* The card face reads as foil trading-card stock. Every part is derived from the
     one accent colour in OKLCH — so the poles never grey out the way sRGB blobs do,
     and every card runs the same recipe, which is what makes the shelf look like one
     product line. Light falls from above (the vertical field); one analogous bloom
     enriches a top corner without touching the icon; the paper grain (::before) and
     the raking sheen (::after) ride on top. A pasted --card-mesh overrides the face. */
  /* Punch the stored pastel up first — a little lighter, noticeably more chroma —
     then derive the whole face from that vivid base: the hue and identity are kept,
     but the card reads brighter and richer. */
  --acc: oklch(from var(--card-accent, #cfd2d6) calc(l + 0.035) calc(c * 1.22) h);
  --face-hi: oklch(from var(--acc) calc(l + 0.1) calc(c * 0.88) calc(h - 4));
  --face-lo: oklch(from var(--acc) calc(l - 0.1) calc(c * 1.12) calc(h + 9));
  --face-bloom: oklch(from var(--acc) calc(l + 0.04) calc(c * 1.62) calc(h - 34));
  --card-face:
    radial-gradient(120% 82% at 6% -6% in oklab, var(--face-bloom), transparent 54%),
    radial-gradient(96% 76% at 104% 108% in oklab, color-mix(in oklab, var(--face-lo) 72%, transparent), transparent 56%),
    linear-gradient(179deg in oklab, var(--face-hi), var(--acc) 42%, var(--face-lo) 96%);

  background-color: var(--acc);
  background-image: var(--card-mesh, var(--card-face));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 0.8px 0.8px 0 rgba(255, 255, 255, 0.68),
    inset -0.8px -0.8px 1px rgba(51, 58, 57, 0.055),
    0 1px 0.8px rgb(var(--shadow-rgb) / 0.11),
    1.5px 3px 4px rgb(var(--shadow-rgb) / 0.075);
  /* The card turns about its own centre, so it stays in the window of the pouch
     however far it settles off square. See getCardVariation in pack.js. */
  transform: translateX(-50%) rotate(var(--card-tilt, 0deg));
  isolation: isolate;
}

.logo-card::before,
.logo-card::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.logo-card::before {
  z-index: 0;
  background-image: var(--paper-material-png);
  background-image: var(--paper-material);
  background-position: center;
  background-size: 520px auto;
  filter: grayscale(1) contrast(0.88) brightness(1.08);
  mix-blend-mode: multiply;
  opacity: 0.045;
}

/* The raking sheen: the light a coated foil card catches. It sits still on the shelf,
   and — the one moment of motion — sweeps across and brightens as the card is pulled
   toward you, the way real foil flares when you tilt it. Screen blend so it reads as
   light on the colour, not a milky film. */
.logo-card::after {
  z-index: 1;
  background-image: linear-gradient(
    100deg,
    transparent 33%,
    rgb(255 255 255 / 0.36) 46%,
    rgb(255 255 255 / 0.06) 52%,
    transparent 64%
  );
  background-size: 220% 100%;
  background-position: var(--sheen-x, 32%) 0;
  mix-blend-mode: screen;
  opacity: 0.6;
  transition:
    background-position 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 320ms ease;
}

.peg-cell.is-lifted .logo-card::after {
  --sheen-x: 68%;
  opacity: 0.9;
}

.domain-card-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 8.333cqw 6cqw 4cqw;
  color: #171a18;
}

.domain-card__identity {
  display: grid;
  flex: 1;
  gap: 4.667cqw;
  place-content: center;
  justify-items: center;
  min-height: 0;
  padding: 1.667cqw 0 4.667cqw;
  text-align: center;
}

/* Icon and name are stamped into the card like embossed print: a hairline of light
   catches their top edge (the shelf lights from above) and a soft shadow falls below,
   so they read as raised relief on the stock. Offsets are in cqw, so the emboss scales
   with the pack. */
.domain-card__icon {
  width: 15.333cqw;
  height: 15.333cqw;
  color: #1c201e;
  filter:
    drop-shadow(0 -0.09cqw 0.09cqw rgb(255 255 255 / 0.7))
    drop-shadow(0 0.52cqw 0.44cqw rgb(18 14 18 / 0.32));
}

.domain-card__name {
  max-width: 100%;
  overflow: visible;
  font-family: var(--font-condensed);
  font-size: 10.667cqw;
  font-weight: 600;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  line-height: 1.05;
  white-space: nowrap;
  /* Raised relief, matching the icon: light hairline on top, soft shadow below. */
  text-shadow:
    0 -0.18cqw 0.08cqw rgb(255 255 255 / 0.78),
    0 0.5cqw 0.42cqw rgb(18 14 18 / 0.3);
}

.domain-card__footer {
  position: relative;
  display: grid;
  grid-template-columns: 19.333cqw minmax(0, 1fr);
  gap: 3.333cqw;
  align-items: end;
  min-height: 26.667cqw;
  padding-top: 3.667cqw;
  border-top: 1px solid rgb(28 32 30 / 0.14);
  isolation: isolate;
}

.domain-card__footer::before {
  position: absolute;
  top: 0;
  right: -6cqw;
  bottom: -5.333cqw;
  left: -6cqw;
  z-index: -1;
  background: #fff;
  box-shadow: 0 -1px 0 rgb(28 32 30 / 0.1);
  content: "";
}

.domain-card__address {
  overflow: hidden;
  padding-right: 1cqw;
  margin-right: -1cqw;
  padding-bottom: 1cqw;
  font-family: var(--font-mono);
  font-size: 5cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2.333cqw;
  align-items: flex-end;
  min-width: 0;
}

.domain-card__mark {
  display: block;
  width: 12.667cqw;
  height: 12.667cqw;
  object-fit: contain;
  object-position: right center;
  -webkit-user-drag: none;
  user-select: none;
}

.domain-card__qr-group {
  display: flex;
  flex-direction: column;
  gap: 1.667cqw;
  align-items: center;
  width: 19.333cqw;
}

.domain-card__serial {
  color: rgb(28 32 30 / 0.44);
  font-family: var(--font-mono);
  font-size: 2.667cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow:
    0 0.7px 0 rgb(255 255 255 / 0.88),
    0 -0.45px 0 rgb(30 34 32 / 0.2);
}

.domain-card__qr {
  display: block;
  width: 19.333cqw;
  height: 19.333cqw;
  padding: 2.333cqw;
  border: 1px solid rgb(28 32 30 / 0.16);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 1.5px rgb(31 34 32 / 0.08);
  color: inherit;
}

.domain-card__qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.domain-card__qr:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.pouch-face {
  position: absolute;
  inset: 1px;
  z-index: 6;
  border: 2.25px solid rgb(63 76 80 / 0.045);
  border-radius: 2px 3px 9px 7px / 2px 3px 13px 11px;
  background: transparent;
  box-shadow:
    0 0 0 0.45px rgb(255 255 255 / 0.42),
    inset 1px 0 0 rgb(255 255 255 / 0.22),
    inset -1px 0 0 rgb(49 61 65 / 0.055),
    inset 0 -1px 0 rgb(49 61 65 / 0.05);
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.pouch-photo {
  position: absolute;
  inset: -2%;
  z-index: 5;
  display: block;
  background-image: var(--pouch-pass-fallback);
  background-image: var(--pouch-pass);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter:
    brightness(clamp(1.38, calc(var(--film-brightness, 1.08) + 0.37), 1.48))
    contrast(clamp(1.14, calc(var(--film-contrast, 1.08) + 0.1), 1.22));
  mix-blend-mode: screen;
  opacity: clamp(0.86, calc(var(--film-opacity, 0.78) + 0.12), 0.93);
  transform:
    translate3d(var(--film-x, 0), var(--film-y, 0), 0)
    scale(var(--film-scale, 1))
    scaleX(var(--film-flip, 1));
  transform-origin: 50% 50%;
  pointer-events: none;
}

.price-sticker:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.rack[data-inquire] .pack-surface {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rack[data-inquire] .price-sticker {
  cursor: pointer;
  pointer-events: auto;
}

/* ---- End-of-shelf restock CTA ----------------------------------------- */

/* The last bay of the display: one card-sheet, and its right end is bare board.
   Pegboard holes run out from under the copy, one hook is still mounted, and on
   it breathes the ghost of the pack that is not on the wall — the same
   silhouette the shelf shows while stock is on its way. The emptiness is the
   message; the copy tells you what to do about it. */
.restock {
  --restock-pad-y: clamp(30px, 3.8vw, 48px);
  --restock-pad-x: clamp(24px, 3.8vw, 50px);
  position: relative;
  display: grid;
  /* The copy takes what its 52ch note needs; the board sweeps the whole rest of
     the card, so there is no orphaned white between the words and the wall. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin: clamp(56px, 7vw, 92px) 0 0;
  padding: var(--restock-pad-y) var(--restock-pad-x);
  overflow: hidden;
  background: var(--sheet);
  border: 1px solid var(--sheet-line);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgb(var(--shadow-rgb) / 0.04),
    0 14px 34px rgb(var(--shadow-rgb) / 0.05);
}

.restock__eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.restock__title {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-condensed);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
}

.restock__note {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.62;
}

.restock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin-top: clamp(22px, 2.6vw, 30px);
}

/* The shop's own action: an ink pill that keeps you here and opens the sheet. */
.restock__write {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  min-height: 48px;
  color: var(--button-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  background: var(--button);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 140ms ease;
}

.restock__write:hover {
  transform: translateY(-1px);
}

.restock__write:active {
  transform: translateY(0) scale(0.98);
}

.restock__write:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The other way out: DNBar's sign as a chip beside the button. The chip stays
   white in both themes — the packs' card faces do the same — so the navy half
   of the wordmark never sinks into a dark card. */
.restock__dnbar {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 0 18px 0 16px;
  background: #fff;
  border: 1px solid var(--sheet-line);
  border-radius: 999px;
  text-decoration: none;
  transition:
    transform 140ms ease,
    border-color 160ms ease;
}

.restock__dnbar-logo {
  display: block;
  width: 88px;
  height: auto;
}

.restock__dnbar-label {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding-left: 12px;
  color: #6e6e73;
  border-left: 1px solid rgb(29 29 31 / 0.12);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.restock__dnbar-label svg {
  width: 12px;
  height: 12px;
  color: var(--dnbar);
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.restock__dnbar:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--dnbar) 46%, transparent);
}

.restock__dnbar:hover .restock__dnbar-label {
  color: #1d1d1f;
}

.restock__dnbar:hover .restock__dnbar-label svg {
  transform: translate(2px, -2px);
}

.restock__dnbar:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The bare board. The holes are pegboard dots fading in from under the copy;
   the column bleeds to the card's edges so the board reads as the card's own
   material, not a picture placed on it. Bays sit on one hook line, the way
   hooks share a hole row on a real board. */
.restock__wall {
  position: relative;
  display: flex;
  gap: clamp(26px, 3.2vw, 44px);
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  margin: calc(var(--restock-pad-y) * -1) calc(var(--restock-pad-x) * -1)
    calc(var(--restock-pad-y) * -1) 0;
  padding: clamp(28px, 3vw, 38px) clamp(24px, 3vw, 44px) 30px;
}

.restock__wall::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--ink) 13%, transparent) 1px,
    transparent 2px
  );
  background-size: 19px 19px;
  -webkit-mask-image: linear-gradient(to left, black 72%, transparent);
  mask-image: linear-gradient(to left, black 72%, transparent);
  content: "";
}

/* A real shelf cell, one pack narrower than the grid's. cqw units resolve
   against this width, so hooks and ghost print at pack proportions. The empty
   bays hold nothing but their hook — the stock is gone; that is the point. */
.restock__bay {
  flex: none;
  width: min(172px, 100%);
}

/* The mystery pack is a real control: the whole silhouette is the button that
   opens the sheet, the way every stocked pack on the shelf opens its own. */
.restock__mystery-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.restock__mystery-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}

/* The loader's ghosts are divs; here the same classes sit on spans inside a
   button, so the boxes are restored explicitly. */
.restock__mystery-btn .ghost-pack,
.restock__mystery-btn .ghost-pack__pouch {
  display: block;
}

/* Reaching for it nudges the pack on its hook — the same pivot every stocked
   pack turns about — and the question prints a shade darker, as if your hand
   brought it closer to the light. */
.restock__mystery-btn .ghost-pack {
  transform-origin: 50% var(--pivot-y);
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.restock__mystery-btn:hover .ghost-pack,
.restock__mystery-btn:focus-visible .ghost-pack {
  transform: rotate(2.6deg);
}

.restock__mystery-btn:active .ghost-pack {
  transform: rotate(0.8deg);
}

/* The question is printed where a real pack prints its wordmark — the same
   condensed face at the same station on the pouch, struck in ghost ink so it
   stays part of the silhouette and breathes with it. */
.restock__mystery {
  display: grid;
  height: 100%;
  padding-bottom: 20cqw;
  place-items: center;
  color: color-mix(in srgb, var(--ink) 17%, transparent);
  font-family: var(--font-condensed);
  font-size: 40cqw;
  font-weight: 600;
  font-stretch: condensed;
  line-height: 1;
  transition: color 220ms ease;
  user-select: none;
}

.restock__mystery-btn:hover .restock__mystery,
.restock__mystery-btn:focus-visible .restock__mystery {
  color: color-mix(in srgb, var(--ink) 34%, transparent);
}

/* The board loses its farthest bays as the card narrows, the ghost always last. */
@media (max-width: 1360px) {
  .restock__bay--c {
    display: none;
  }
}

@media (max-width: 940px) {
  .restock__bay--a {
    display: none;
  }
}

@media (max-width: 760px) {
  .restock {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone the packs hang right above this card — the empty bay would just
     be a tall gray hole between them and the copy. The words carry it alone. */
  .restock__wall {
    display: none;
  }

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

  .restock__write,
  .restock__dnbar {
    justify-content: center;
  }
}

/* ---- Purchase inquiry sheet ------------------------------------------- */

.inquiry {
  width: min(560px, calc(100vw - 32px));
  max-height: min(calc(100dvh - 40px), 800px);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--sheet-line);
  border-radius: 22px;
  box-shadow:
    0 8px 22px rgb(var(--shadow-rgb) / 0.14),
    0 32px 90px rgb(var(--shadow-rgb) / 0.28);
}

.inquiry::backdrop {
  background: rgb(29 29 31 / 0.34);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
  backdrop-filter: blur(10px) saturate(0.9);
}

.inquiry[open] {
  animation: inquiry-in 420ms cubic-bezier(0.3, 1.24, 0.36, 1);
}

.inquiry[open]::backdrop {
  animation: inquiry-fade 300ms ease-out;
}

.inquiry[data-closing] {
  animation: inquiry-out 170ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

.inquiry[data-closing]::backdrop {
  animation: inquiry-fade 170ms ease-in reverse forwards;
}

.inquiry[data-state="error"] {
  animation: inquiry-shake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes inquiry-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
}

@keyframes inquiry-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.975);
  }
}

@keyframes inquiry-fade {
  from {
    opacity: 0;
  }
}

/* The shake rides the translate property so it never fights the open and
   close animations, which own transform. */
@keyframes inquiry-shake {
  10%,
  90% {
    translate: -1px 0;
  }

  20%,
  80% {
    translate: 2px 0;
  }

  30%,
  50%,
  70% {
    translate: -3px 0;
  }

  40%,
  60% {
    translate: 3px 0;
  }
}

.inquiry__body {
  display: grid;
  gap: 22px;
  max-height: inherit;
  padding: 26px 30px 30px;
  overflow-y: auto;
}

.inquiry__body:focus {
  outline: none;
}

.inquiry__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.inquiry__eyebrow {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.inquiry__number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.inquiry__x {
  display: grid;
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 0;
  padding: 0;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.inquiry__x:hover {
  color: var(--ink);
  background: var(--sheet-soft);
}

.inquiry__x:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.inquiry__x svg {
  width: 19px;
  height: 19px;
}

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

/* Opened from the end-of-shelf CTA, the sheet carries no pack: the identity row
   steps aside and a plain line of framing takes its place. */
.inquiry[data-mode="general"] .inquiry__identity {
  display: none;
}

.inquiry__intro {
  margin: 0;
  padding-bottom: 20px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  border-bottom: 1px solid var(--sheet-line);
}

.inquiry__intro[hidden] {
  display: none;
}

.inquiry__chip {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  color: #1c201e;
  background: #e7e6e1;
  border: 1px solid rgb(29 29 31 / 0.08);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}

.inquiry__chip svg {
  width: 34px;
  height: 34px;
}

/* The chip clones the card icon, which carries an embossed relief filter. In the
   flat sheet that reads as an out-of-place drop shadow, so lay the icon flat. */
.inquiry__chip .domain-card__icon {
  filter: none;
}

.inquiry__names {
  display: grid;
  gap: 1px;
  min-width: 0;
}

/* Ellipsis needs overflow: hidden, and hidden clips both axes — so the line box
   has to leave room for descenders itself. At line-height 1 the box is exactly
   the font size and names like PromptList lose the tail of the p. The leading
   below carries the descenders; the row gap shrinks to keep the optical rhythm. */
.inquiry__name {
  overflow: hidden;
  font-family: var(--font-condensed);
  /* Fits the longest name in the set (Weightlessness) without an ellipsis. */
  font-size: 33px;
  font-weight: 600;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inquiry__domain {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inquiry__price {
  justify-self: end;
  padding: 10px 13px;
  color: var(--price-ink);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--price-bg);
  border: 1px solid color-mix(in srgb, var(--price-ink) 16%, transparent);
  border-radius: 4px;
  box-shadow:
    0 1px 1px rgb(48 30 17 / 0.18),
    inset 0 0.5px 0 rgb(255 255 255 / 0.34);
  rotate: -2.5deg;
}

/* The tag gets slapped on a beat after the sheet lands. */
.inquiry[open] .inquiry__price {
  animation: inquiry-tag-in 340ms cubic-bezier(0.2, 1.4, 0.3, 1) 240ms backwards;
}

@keyframes inquiry-tag-in {
  from {
    opacity: 0;
    scale: 1.3;
    rotate: -8deg;
  }
}

.inquiry__form {
  display: grid;
  gap: 18px;
}

.inquiry__form[hidden] {
  display: none;
}

.inquiry__field {
  display: grid;
  gap: 6px;
}

.inquiry__label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.inquiry__optional {
  margin-left: 4px;
  font-style: normal;
  opacity: 0.55;
}

.inquiry__field input,
.inquiry__field textarea {
  width: 100%;
  padding: 13px 15px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  background: var(--sheet-soft);
  border: 1px solid var(--sheet-line);
  border-radius: 12px;
}

.inquiry__field textarea {
  resize: vertical;
  min-height: 130px;
}

.inquiry__field input::placeholder,
.inquiry__field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 74%, transparent);
}

.inquiry__field input:focus-visible,
.inquiry__field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}

.inquiry__field input:user-invalid,
.inquiry__field textarea:user-invalid {
  border-color: rgb(192 57 43 / 0.55);
}

.inquiry__botcheck {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.inquiry__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
}

.inquiry__hint {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.35;
}

.inquiry__hint svg {
  flex: none;
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.inquiry__send {
  flex: none;
  padding: 14px 24px;
  color: var(--button-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15.5px;
  font-weight: 600;
  background: var(--button);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 140ms ease,
    opacity 140ms ease;
}

.inquiry__send:hover {
  transform: translateY(-1px);
}

.inquiry__send:active {
  transform: translateY(0) scale(0.98);
}

.inquiry__send:disabled {
  opacity: 0.62;
  cursor: default;
  transform: none;
}

.inquiry__send:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.inquiry[data-state="sending"] .inquiry__send-label {
  animation: inquiry-pulse 850ms ease-in-out infinite alternate;
}

@keyframes inquiry-pulse {
  to {
    opacity: 0.55;
  }
}

/* The second route to the same domain, on the tear-off line of a price tag:
   send an inquiry, or take it straight to the register. Only packs that carry a
   figure show it; an INQUIRE pack has no number to buy at. */
.inquiry__instant {
  margin: 4px 0 0;
  padding-top: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  border-top: 1px dashed var(--sheet-line);
}

.inquiry__instant[hidden] {
  display: none;
}

.inquiry__atom {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  transition: border-color 140ms ease;
}

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

.inquiry__atom:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-bottom-color: transparent;
  border-radius: 2px;
}

.inquiry__atom svg {
  width: 13px;
  height: 13px;
  margin-left: 3px;
  vertical-align: baseline;
  opacity: 0.7;
}

.inquiry__done {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 22px 6px 6px;
  text-align: center;
  animation: inquiry-done-in 340ms ease-out;
}

.inquiry__done[hidden] {
  display: none;
}

@keyframes inquiry-done-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* The confirmation moment: a rubber stamp slams onto the slip. */
.inquiry__stamp {
  margin-bottom: 12px;
  padding: 12px 11px 12px 17px;
  color: var(--stamp);
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: uppercase;
  border: 3px solid currentColor;
  border-radius: 7px;
  rotate: -7deg;
  animation: inquiry-stamp-in 460ms cubic-bezier(0.16, 1.4, 0.3, 1) 180ms backwards;
}

@keyframes inquiry-stamp-in {
  from {
    opacity: 0;
    filter: blur(2px);
    scale: 1.75;
    rotate: -14deg;
  }

  62% {
    opacity: 1;
    filter: blur(0);
    scale: 0.94;
    rotate: -6.2deg;
  }
}

.inquiry__done-title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.inquiry__done-note {
  max-width: 36ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.inquiry__close {
  margin-top: 10px;
  padding: 10px 20px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--sheet-soft);
  border: 1px solid var(--sheet-line);
  border-radius: 999px;
  cursor: pointer;
}

.inquiry__close:hover {
  background: color-mix(in srgb, var(--sheet-soft) 60%, var(--sheet-line));
}

.inquiry__close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Touch ergonomics: 16px inputs keep iOS from zooming into the sheet. */
@media (any-pointer: coarse) {
  .inquiry__field input,
  .inquiry__field textarea {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .inquiry {
    width: calc(100vw - 20px);
    border-radius: 18px;
  }

  .inquiry__body {
    gap: 16px;
    padding: 18px 18px 20px;
  }

  .inquiry__name {
    font-size: 26px;
  }

  .inquiry__actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }

  .inquiry__send {
    padding: 13px 20px;
  }

  .inquiry__hint {
    justify-content: center;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* No column breakpoints: auto-fit already reflows the shelf, and the pack's print
   scales with the pack. What is left is room to breathe on a phone. */
@media (max-width: 680px) {
  :root {
    /* One pack per row on a phone. The cap is set by height, not width: a pack is
       ~1.55x as tall as it is wide, so a full-width one would not fit on screen and
       you would scroll a single pack. Keep the whole object in view instead. */
    --pack-min: 240px;
    --pack-max: min(300px, 46dvh);
  }

  .display {
    padding-right: 16px;
    padding-bottom: 32px;
    padding-left: 16px;
  }

  .display-header {
    gap: 12px;
    margin-bottom: 44px;
  }

  .blister-grid {
    gap: 50px 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --wall: #1d1d1f;
    --wall-deep: #1d1d1f;
    --ink: #f5f5f7;
    --muted: #a1a1a6;
    --button: #efefe9;
    --button-ink: #17191a;
    --shadow-rgb: 0 0 0;
    --hook-lo: #505657;
    --hook-mid: #717777;
    --hook-hi: #a2a7a5;
    --hook-outline: rgba(0, 0, 0, 0.46);
    --hook-cast: rgba(0, 0, 0, 0.52);
    --focus: #78aef2;
    --sheet: #232326;
    --sheet-line: rgba(245, 245, 247, 0.14);
    --sheet-soft: rgba(245, 245, 247, 0.07);
    --section-line: rgba(245, 245, 247, 0.2);
    --row-line: rgba(245, 245, 247, 0.11);
    --stamp: #e8604e;
    --dnbar: #f79236;
  }

  .inquiry::backdrop {
    background: rgb(0 0 0 / 0.55);
  }

  body {
    background-color: var(--wall);
    background-image: none;
    background-blend-mode: normal;
  }

  .plastic-pouch {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(226, 239, 241, 0.025);
  }

  .partner__logo--light {
    display: none;
  }

  .partner__logo--dark {
    display: block;
  }
}

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

  .pack-swing {
    will-change: auto !important;
  }

  /* The credit still appears on hover, it just stops spinning and sliding. */
  .footer-credit__tip {
    transform: translate(0, -50%);
  }

  .footer-credit:hover .footer-credit__mark,
  .footer-credit:focus-visible .footer-credit__mark {
    transform: none;
  }
}