/*! Shelf design system 1.0.0 (2026-11-07). Licensed to Design Systems Library members, single user. */

/* ---- base ---- */
/* Shelf base: document defaults, zero-specificity resets inside .sh-page, type roles,
   containers, sections and helpers. Load after tokens.css and before every component. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sh-nav-h) + var(--sh-space-4));
}

body {
  margin: 0;
  background: var(--sh-canvas);
  color: var(--sh-body);
  font-family: var(--sh-font-sans);
  font-size: var(--sh-fs-body);
  line-height: var(--sh-lh-body);
  font-weight: var(--sh-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

:where(.sh-page),
:where(.sh-page) *,
:where(.sh-page) *::before,
:where(.sh-page) *::after {
  box-sizing: border-box;
}

:where(.sh-page) :where(h1, h2, h3, h4, h5, p, ul, ol, figure, dl, dd, pre, table, blockquote) {
  margin: 0;
}

:where(.sh-page) :where(fieldset) {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

:where(.sh-page) :where(legend) {
  padding: 0;
}

:where(.sh-page) :where(img, svg, video) {
  display: block;
  max-inline-size: 100%;
}

:where(.sh-page) :where(img, video) {
  block-size: auto;
}

:where(.sh-page) :where(h1, h2, h3, h4, h5) {
  color: var(--sh-ink);
  text-wrap: balance;
}

:where(.sh-page) :where(h1) {
  font-family: var(--sh-font-serif);
  font-weight: var(--sh-weight-regular);
  font-size: var(--sh-fs-display);
  line-height: var(--sh-lh-display);
  letter-spacing: var(--sh-track-display);
}

:where(.sh-page) :where(h2) {
  font-family: var(--sh-font-serif);
  font-weight: var(--sh-weight-regular);
  font-size: var(--sh-fs-title);
  line-height: var(--sh-lh-title);
  letter-spacing: var(--sh-track-title);
}

:where(.sh-page) :where(h3) {
  font-size: var(--sh-fs-card);
  font-weight: var(--sh-weight-semibold);
  line-height: var(--sh-lh-snug);
}

:where(.sh-page) :where(h4, h5) {
  font-size: var(--sh-fs-body);
  font-weight: var(--sh-weight-semibold);
  line-height: var(--sh-lh-snug);
}

:where(.sh-page) :where(p, li, dd, figcaption) {
  text-wrap: pretty;
}

:where(.sh-page) :where(a) {
  color: var(--sh-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--sh-dur-fast) var(--sh-ease);
}

:where(.sh-page) :where(a:hover) {
  color: var(--sh-ink);
}

:where(.sh-page) :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sh-focus);
  outline-offset: 2px;
}

:where(.sh-page) :where(button) {
  font: inherit;
}

:where(.sh-page) :where(code, kbd, samp) {
  font-family: var(--sh-font-mono);
  font-size: 0.9em;
}

:where(.sh-page) :where(p code, li code, td code, dd code) {
  padding: 1px 6px;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-sm);
  background: var(--sh-well);
  color: var(--sh-ink);
  overflow-wrap: anywhere;
}

:where(.sh-page) :where(strong, b) {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

:where(.sh-page) :where(s, del) {
  text-decoration-thickness: 1px;
}

:where(.sh-page) ::selection {
  background: var(--sh-accent-soft);
  color: var(--sh-ink);
}

:where(.sh-page) :where([hidden]) {
  display: none !important;
}

/* Type roles as classes, for when the element and the look differ */
.sh-display {
  font-family: var(--sh-font-serif);
  font-weight: var(--sh-weight-regular);
  font-size: var(--sh-fs-display);
  line-height: var(--sh-lh-display);
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}

.sh-title {
  font-family: var(--sh-font-serif);
  font-weight: var(--sh-weight-regular);
  font-size: var(--sh-fs-title);
  line-height: var(--sh-lh-title);
  letter-spacing: var(--sh-track-title);
  color: var(--sh-ink);
}

.sh-headline {
  font-family: var(--sh-font-serif);
  font-weight: var(--sh-weight-regular);
  font-size: var(--sh-fs-headline);
  line-height: var(--sh-lh-title);
  color: var(--sh-ink);
}

.sh-serif {
  font-family: var(--sh-font-serif);
  font-weight: var(--sh-weight-regular);
}

.sh-lede {
  font-size: var(--sh-fs-lede);
  line-height: 1.55;
  color: var(--sh-muted);
}

.sh-small {
  font-size: var(--sh-fs-small);
  line-height: 1.55;
}

.sh-meta {
  font-size: var(--sh-fs-meta);
  line-height: var(--sh-lh-snug);
  font-weight: var(--sh-weight-medium);
  color: var(--sh-muted);
}

.sh-muted {
  color: var(--sh-muted);
}

.sh-num {
  font-variant-numeric: tabular-nums;
}

.sh-mono {
  font-family: var(--sh-font-mono);
}

.sh-center {
  text-align: center;
  margin-inline: auto;
}

/* Containers and sections */
.sh-container {
  inline-size: 100%;
  max-inline-size: calc(var(--sh-content) + var(--sh-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
}

.sh-container--narrow {
  max-inline-size: calc(var(--sh-narrow) + var(--sh-gutter) * 2);
}

.sh-section {
  padding-block: var(--sh-section);
}

.sh-section--tight {
  padding-block: calc(var(--sh-section) * 0.6);
}

.sh-section--flush-top {
  padding-block-start: 0;
}

.sh-section--flush-bottom {
  padding-block-end: 0;
}

.sh-section--paper {
  background: var(--sh-surface);
  border-block: 1px solid var(--sh-hair);
}

.sh-section--bay {
  background: var(--sh-bay);
}

/* Layout helpers */
.sh-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sh-space-4);
}

.sh-stack--tight {
  gap: var(--sh-space-2);
}

.sh-stack--loose {
  gap: var(--sh-space-9);
}

.sh-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sh-space-3);
}

.sh-grid {
  display: grid;
  gap: var(--sh-space-6);
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .sh-grid--2,
  .sh-grid--3,
  .sh-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .sh-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .sh-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sh-split {
  display: grid;
  gap: var(--sh-space-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 960px) {
  .sh-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sh-space-10);
  }

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

  .sh-split--aside {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  .sh-split--side {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--sh-space-9);
  }

  .sh-split--sticky > :first-child {
    position: sticky;
    inset-block-start: calc(var(--sh-nav-h) + var(--sh-space-6));
    align-self: start;
  }
}

/* Visually hidden, skip link, text link with an arrow, hairline rule */
.sh-sr {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sh-skip {
  position: absolute;
  inset-inline-start: var(--sh-space-4);
  inset-block-start: var(--sh-space-3);
  z-index: 100;
  padding: var(--sh-space-3) var(--sh-space-4);
  border-radius: var(--sh-radius-btn);
  background: var(--sh-ink);
  color: var(--sh-canvas);
  font-weight: var(--sh-weight-semibold);
  text-decoration: none;
  transform: translateY(-160%);
}

.sh-skip:focus {
  transform: none;
  color: var(--sh-canvas);
}

.sh-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sh-space-2);
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--sh-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.sh-link svg {
  flex: none;
  transition: transform var(--sh-dur) var(--sh-ease);
}

.sh-link:hover {
  color: var(--sh-ink);
  text-decoration-color: var(--sh-ink);
}

.sh-link:hover svg {
  transform: translateX(3px);
}

.sh-rule {
  block-size: 1px;
  margin: 0;
  border: 0;
  background: var(--sh-hair);
}

@media (prefers-reduced-motion: reduce) {
  .sh-link svg,
  :where(.sh-page) :where(a) {
    transition: none;
  }
}

/* ---- buttons ---- */
/* Shelf buttons: 10px corners, a pressed bottom edge on the buy button, one primary per view. */

.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sh-space-2);
  min-block-size: 48px;
  padding: 11px 20px;
  border: 1px solid var(--sh-control);
  border-radius: var(--sh-radius-btn);
  background: var(--sh-surface);
  color: var(--sh-ink);
  font: inherit;
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--sh-dur) var(--sh-ease),
    border-color var(--sh-dur) var(--sh-ease),
    color var(--sh-dur) var(--sh-ease),
    transform var(--sh-dur-fast) var(--sh-ease);
}

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

.sh-btn:active {
  transform: translateY(1px);
}

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

.sh-btn svg {
  flex: none;
}

/* Primary: the buy color. Its darker bottom edge reads like the lip of a price tag. */
.sh-btn--primary {
  border-color: var(--sh-buy);
  background: var(--sh-buy);
  color: var(--sh-buy-ink);
  box-shadow: inset 0 -2px 0 var(--sh-cover-shade);
}

.sh-btn--primary:hover {
  border-color: var(--sh-buy-hover);
  background: var(--sh-buy-hover);
  color: var(--sh-buy-ink);
}

.sh-btn--secondary {
  background: var(--sh-surface);
}

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

.sh-btn--ghost:hover {
  border-color: transparent;
  background: var(--sh-well);
}

.sh-btn--sm {
  min-block-size: 40px;
  padding: 7px 14px;
  font-size: var(--sh-fs-meta);
}

.sh-btn--lg {
  min-block-size: 56px;
  padding: 14px 26px;
  font-size: var(--sh-fs-body);
}

.sh-btn--block {
  display: flex;
  inline-size: 100%;
}

.sh-btn--icon {
  inline-size: 48px;
  padding: 0;
}

.sh-btn--icon.sh-btn--sm {
  inline-size: 40px;
}

/* Toggle buttons (presets, filters in toolbars) */
.sh-btn[aria-pressed="true"]:not(.sh-btn--primary) {
  border-color: var(--sh-ink);
  background: var(--sh-well);
  box-shadow: inset 0 0 0 1px var(--sh-ink);
}

/* Disabled stays legible: muted text on a well, never a faded opacity */
.sh-btn:disabled,
.sh-btn[aria-disabled="true"] {
  border-color: var(--sh-hair);
  background: var(--sh-well);
  color: var(--sh-muted);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Loading: a spinner before the label, the label says what is happening */
.sh-btn__spin {
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: sh-spin 0.8s linear infinite;
}

.sh-btn[aria-busy="true"] {
  cursor: progress;
}

@keyframes sh-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (pointer: coarse) {
  .sh-btn--sm {
    min-block-size: 44px;
  }

  .sh-btn--icon.sh-btn--sm {
    inline-size: 44px;
  }
}

/* Action group: a primary and at most one secondary */
.sh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sh-space-3);
}

.sh-actions--center {
  justify-content: center;
}

.sh-actions--end {
  justify-content: flex-end;
}

@media (max-width: 479px) {
  .sh-actions--stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .sh-actions--stack-sm .sh-btn {
    inline-size: 100%;
  }
}

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

  .sh-btn:active {
    transform: none;
  }

  .sh-btn__spin {
    animation-duration: 2.4s;
  }
}

/* ---- badges ---- */
/* Shelf tags: pill labels for sale marks, formats, status and "included". */

.sh-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 26px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--sh-radius-pill);
  background: var(--sh-well);
  color: var(--sh-ink);
  font-size: var(--sh-fs-tag);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--sh-track-tag);
  white-space: nowrap;
}

.sh-tag svg {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
}

.sh-tag--sale {
  background: var(--sh-sale-soft);
  color: var(--sh-sale);
}

.sh-tag--new {
  border-color: var(--sh-ink);
  background: var(--sh-surface);
  color: var(--sh-ink);
}

.sh-tag--included {
  background: var(--sh-ok-soft);
  color: var(--sh-ok);
}

.sh-tag--ok {
  background: var(--sh-ok-soft);
  color: var(--sh-ok);
}

.sh-tag--warn {
  background: var(--sh-warn-soft);
  color: var(--sh-warn);
}

.sh-tag--danger {
  background: var(--sh-danger-soft);
  color: var(--sh-danger);
}

.sh-tag--info {
  background: var(--sh-info-soft);
  color: var(--sh-info);
}

.sh-tag--outline {
  border-color: var(--sh-hair-strong);
  background: transparent;
  color: var(--sh-body);
}

.sh-tag__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 2px;
  background: currentColor;
}

.sh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}

/* Count bubble: cart quantity, unread notes */
.sh-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 6px;
  border-radius: var(--sh-radius-pill);
  background: var(--sh-buy);
  color: var(--sh-buy-ink);
  font-size: var(--sh-fs-tag);
  font-weight: var(--sh-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---- shelf ---- */
/* Shelf: the signature primitive. Objects stand on a plank with a top surface, a front edge and a
   soft contact shadow under each one. Product cards, the hero, plans, the cart and the footer all use it. */

.sh-shelf {
  --sh-shelf-gap: min(var(--sh-space-5), 3cqi);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sh-shelf-gap);
  padding-inline: var(--sh-space-4);
  padding-block-end: calc(var(--sh-plank-size) + var(--sh-plank-depth) * 0.45);
}

/* Top surface of the plank: the objects stand on its back half */
.sh-shelf::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  inset-block-end: var(--sh-plank-size);
  block-size: var(--sh-plank-depth);
  background: var(--sh-plank-top);
}

/* Front edge: the thin shelf line, with its lip and the shade it casts */
.sh-shelf::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--sh-plank-size);
  border-radius: 1px;
  background: var(--sh-plank);
  box-shadow: inset 0 1px 0 var(--sh-plank-lip), 0 7px 10px -5px var(--sh-plank-shade);
}

.sh-shelf--start {
  justify-content: flex-start;
}

.sh-shelf--spread {
  justify-content: space-evenly;
}

.sh-shelf--tight {
  --sh-shelf-gap: min(var(--sh-space-2), 2cqi);
}

.sh-shelf--snug {
  --sh-shelf-gap: 3px;
}

/* A deeper plank for heroes and big displays */
.sh-shelf--deep {
  --sh-plank-depth: 16px;
  --sh-plank-size: 4px;
}

/* No plank: objects stand on a plank drawn by a parent (hero, cubby) */
.sh-shelf--bare {
  padding-block-end: 0;
}

.sh-shelf--bare::before,
.sh-shelf--bare::after {
  content: none;
}

/* Room under the plank for hanging price talkers */
.sh-shelf--talkers {
  margin-block-end: 44px;
}

.sh-shelf__item {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Contact shadow: a soft ellipse where the object meets the plank */
.sh-shelf__item::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: -6%;
  inset-block-end: -6px;
  block-size: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sh-contact), transparent);
  transition:
    transform var(--sh-dur-slow) var(--sh-ease-out),
    opacity var(--sh-dur-slow) var(--sh-ease-out);
}

.sh-shelf__item > .sh-cover {
  transition: transform var(--sh-dur-slow) var(--sh-ease-out);
}

/* Lean: one object tipped against its neighbor. Use once per shelf at most. */
.sh-shelf__item--lean > .sh-cover {
  transform: rotate(-6deg);
  transform-origin: 0% 100%;
}

/* Lift: the hover state of an object (also used by product cards) */
.sh-shelf__item--lift > .sh-cover,
.sh-shelf__item:is(a, button):hover > .sh-cover,
.sh-shelf__item:is(a, button):focus-visible > .sh-cover {
  transform: translateY(-6px);
}

.sh-shelf__item--lift::after,
.sh-shelf__item:is(a, button):hover::after,
.sh-shelf__item:is(a, button):focus-visible::after {
  transform: scaleX(0.82);
  opacity: 0.55;
}

/* Desk only: an extra object that steps off the shelf under 640px so the rest keep their size */
@media (max-width: 639px) {
  .sh-shelf__item--desk {
    display: none;
  }
}

/* Talker: the price tag clipped to the front edge under an object */
.sh-shelf__talker {
  position: absolute;
  inset-block-start: calc(100% + var(--sh-plank-depth) * 0.45 + var(--sh-plank-size) + 9px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border: 1px solid var(--sh-hair-strong);
  border-radius: var(--sh-radius-object);
  background: var(--sh-paper);
  color: var(--sh-paper-ink);
  font-size: var(--sh-fs-tag);
  font-weight: var(--sh-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--sh-shadow-card);
}

.sh-shelf__talker::before {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  left: 50%;
  inline-size: 1px;
  block-size: 9px;
  background: var(--sh-hair-strong);
}

.sh-shelf__talker--sale {
  border-color: var(--sh-sale);
  background: var(--sh-sale-soft);
  color: var(--sh-sale);
}

/* Empty slot: a dashed outline where an object will stand (bundle builder, empty states) */
.sh-shelf__slot {
  position: relative;
  z-index: 1;
  flex: none;
  inline-size: var(--sh-slot-w, 64px);
  block-size: var(--sh-slot-h, 84px);
  border: 1.5px dashed var(--sh-control);
  border-radius: var(--sh-radius-object);
}

@media (prefers-reduced-motion: reduce) {
  .sh-shelf__item::after,
  .sh-shelf__item > .sh-cover {
    transition: none;
  }
}

/* ---- cover ---- */
/* Cover: coded product objects. Every variant is CSS on a few spans, sized by --sh-cover-w. The cover's
   own padding and margins are multiples of --sh-cover-w; everything inside it is drawn in container units
   (cqi) against the cover, so one object scales from a 44px cart thumbnail to a 224px hero piece. */

.sh-cover {
  --sh-cover-w: min(132px, 17cqi);
  --sh-cover-bg: var(--sh-cover-1);
  --sh-cover-fg: var(--sh-cover-1-ink);
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  flex: none;
  inline-size: var(--sh-cover-w);
  aspect-ratio: 3 / 4;
  border-radius: var(--sh-radius-object);
  background: var(--sh-cover-bg);
  color: var(--sh-cover-fg);
  box-shadow: inset 0 0 0 1px var(--sh-cover-edge), var(--sh-shadow-object);
  font-family: var(--sh-font-serif);
  font-weight: var(--sh-weight-regular);
  line-height: 1.08;
  text-align: start;
  text-decoration: none;
}

.sh-cover--c1 { --sh-cover-bg: var(--sh-cover-1); --sh-cover-fg: var(--sh-cover-1-ink); }
.sh-cover--c2 { --sh-cover-bg: var(--sh-cover-2); --sh-cover-fg: var(--sh-cover-2-ink); }
.sh-cover--c3 { --sh-cover-bg: var(--sh-cover-3); --sh-cover-fg: var(--sh-cover-3-ink); }
.sh-cover--c4 { --sh-cover-bg: var(--sh-cover-4); --sh-cover-fg: var(--sh-cover-4-ink); }
.sh-cover--c5 { --sh-cover-bg: var(--sh-cover-5); --sh-cover-fg: var(--sh-cover-5-ink); }
.sh-cover--c6 { --sh-cover-bg: var(--sh-cover-6); --sh-cover-fg: var(--sh-cover-6-ink); }

.sh-cover--xs { --sh-cover-w: 44px; }
.sh-cover--sm { --sh-cover-w: min(92px, 13cqi); }
.sh-cover--lg { --sh-cover-w: min(172px, 21cqi); }
.sh-cover--xl { --sh-cover-w: min(224px, 27cqi); }

/* On narrow shelves (phones) objects take a bigger share of the plank, so three or four still read as
   objects. Mark extra objects .sh-shelf__item--desk. */
@container (max-width: 479px) {
  .sh-cover { --sh-cover-w: min(132px, 24cqi); }
  .sh-cover--sm { --sh-cover-w: min(92px, 19cqi); }
  .sh-cover--lg { --sh-cover-w: min(172px, 28cqi); }
  .sh-cover--xl { --sh-cover-w: min(224px, 33cqi); }
  .sh-cover--xs { --sh-cover-w: 44px; }
}

.sh-cover__title {
  display: block;
  font-size: max(12px, 12.5cqi);
  text-wrap: balance;
}

.sh-cover__meta {
  display: block;
  font-family: var(--sh-font-sans);
  font-size: max(12px, 7.5cqi);
  font-weight: var(--sh-weight-semibold);
  letter-spacing: 0.02em;
}

.sh-cover__mark {
  display: block;
  inline-size: 22cqi;
}

.sh-cover__mark svg {
  inline-size: 100%;
  block-size: auto;
}

/* Book: spine shade and hinge on the left, title block, rule, emblem at the foot */
.sh-cover--book {
  padding: calc(var(--sh-cover-w) * 0.14) calc(var(--sh-cover-w) * 0.09) calc(var(--sh-cover-w) * 0.1) calc(var(--sh-cover-w) * 0.19);
  overflow: hidden;
  border-radius: 2px var(--sh-radius-object-lg) var(--sh-radius-object-lg) 2px;
}

.sh-cover--book::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  inline-size: 10cqi;
  background: var(--sh-cover-shade);
}

.sh-cover--book::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 11.5cqi;
  inline-size: 1px;
  background: var(--sh-cover-light);
}

.sh-cover__rule {
  display: block;
  inline-size: 26cqi;
  block-size: 2px;
  margin-block: 7cqi 5cqi;
  background: currentColor;
  opacity: 0.6;
}

.sh-cover--book .sh-cover__mark {
  margin-block-start: auto;
}

/* Planner: coil binding across the top edge, title, a large year */
.sh-cover--planner {
  padding: calc(var(--sh-cover-w) * 0.2) calc(var(--sh-cover-w) * 0.11) calc(var(--sh-cover-w) * 0.11);
  border-radius: var(--sh-radius-object-lg);
}

.sh-cover--planner::before {
  content: "";
  position: absolute;
  top: -4.5cqi;
  left: 9cqi;
  right: 9cqi;
  block-size: 10cqi;
  background: repeating-linear-gradient(90deg, var(--sh-plank) 0 2cqi, transparent 2cqi 9cqi);
  border-radius: 1cqi;
}

.sh-cover--planner::after {
  content: "";
  position: absolute;
  top: 3.6cqi;
  left: 9cqi;
  right: 9cqi;
  block-size: 3.6cqi;
  background: radial-gradient(circle at 1cqi 50%, var(--sh-cover-shade) 0 1.4cqi, transparent 1.6cqi) 0 0 / 9cqi 100% repeat-x;
}

.sh-cover__year {
  display: block;
  margin-block-start: auto;
  font-size: 24cqi;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* Sheets: a template stack. Two sheets behind, the front sheet shows a coded layout. */
.sh-cover--sheets {
  aspect-ratio: 4 / 5;
  margin-block-start: calc(var(--sh-cover-w) * 0.09);
  margin-inline-end: calc(var(--sh-cover-w) * 0.09);
  background: transparent;
  box-shadow: none;
  font-family: var(--sh-font-sans);
}

.sh-cover--sheets::before,
.sh-cover--sheets::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--sh-cover-edge);
}

.sh-cover--sheets::before {
  background: var(--sh-paper-line);
  transform: translate(9cqi, -9cqi);
}

.sh-cover--sheets::after {
  background: var(--sh-cover-bg);
  transform: translate(4.5cqi, -4.5cqi);
}

.sh-cover__sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5cqi;
  block-size: 100%;
  padding: 8cqi;
  border-radius: 2px;
  background: var(--sh-paper);
  color: var(--sh-paper-ink);
  box-shadow: inset 0 0 0 1px var(--sh-cover-edge), var(--sh-shadow-object);
}

.sh-cover--sheets .sh-cover__band {
  display: flex;
  align-items: center;
  overflow: hidden;
  min-block-size: 20cqi;
  padding: 4cqi 6cqi;
  border-radius: 1px;
  background: var(--sh-cover-bg);
  color: var(--sh-cover-fg);
}

.sh-cover--sheets .sh-cover__title {
  font-family: var(--sh-font-serif);
  font-size: max(12px, 11cqi);
  white-space: nowrap;
}

.sh-cover__lines {
  display: grid;
  gap: 4cqi;
}

.sh-cover__line {
  display: block;
  block-size: max(2px, 2.6cqi);
  border-radius: 1px;
  background: var(--sh-paper-line);
}

.sh-cover__line--short {
  inline-size: 55%;
}

.sh-cover__line--mid {
  inline-size: 78%;
}

.sh-cover__table {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3.5cqi 5cqi;
}

.sh-cover__table > span {
  display: block;
  block-size: max(2px, 2.6cqi);
  border-radius: 1px;
  background: var(--sh-paper-line);
}

.sh-cover__total {
  display: block;
  align-self: flex-end;
  margin-block-start: auto;
  inline-size: 42cqi;
  block-size: 7cqi;
  border-radius: 1px;
  background: var(--sh-cover-bg);
}

.sh-cover__blocks {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5cqi;
}

.sh-cover__blocks > span {
  display: block;
  border-radius: 1px;
  background: var(--sh-paper-line);
}

.sh-cover__blocks > span:nth-child(3n + 1) {
  background: var(--sh-cover-bg);
}

/* Box: a plugin or kit box with a top face, a side face and a paper label */
.sh-cover--box {
  aspect-ratio: 5 / 6;
  margin-block-start: calc(var(--sh-cover-w) * 0.1);
  margin-inline-end: calc(var(--sh-cover-w) * 0.14);
  padding: calc(var(--sh-cover-w) * 0.11) calc(var(--sh-cover-w) * 0.1) calc(var(--sh-cover-w) * 0.1);
  border-radius: 2px;
  font-family: var(--sh-font-sans);
}

.sh-cover--box::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  inline-size: 100%;
  block-size: 9.8cqi;
  background: linear-gradient(var(--sh-cover-light), var(--sh-cover-light)), var(--sh-cover-bg);
  box-shadow: inset 0 0 0 1px var(--sh-cover-edge);
  transform: skewX(-55deg);
  transform-origin: 0 100%;
}

.sh-cover--box::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  inline-size: 14cqi;
  block-size: 100%;
  background: linear-gradient(var(--sh-cover-shade), var(--sh-cover-shade)), var(--sh-cover-bg);
  box-shadow: inset 0 0 0 1px var(--sh-cover-edge);
  transform: skewY(-35deg);
  transform-origin: 0 0;
}

.sh-cover--box .sh-cover__mark {
  inline-size: 24cqi;
}

.sh-cover__label {
  display: block;
  overflow: hidden;
  margin-block-start: auto;
  padding: 5cqi 6cqi;
  border-radius: 2px;
  background: var(--sh-paper);
  color: var(--sh-paper-ink);
}

.sh-cover--box .sh-cover__title {
  font-family: var(--sh-font-serif);
  font-size: max(12px, 11cqi);
  white-space: nowrap;
}

.sh-cover--box .sh-cover__meta {
  margin-block-start: 2cqi;
}

/* Specimen: a type specimen card with a big glyph in the cover color */
.sh-cover--specimen {
  aspect-ratio: 4 / 5;
  padding: calc(var(--sh-cover-w) * 0.09) calc(var(--sh-cover-w) * 0.1) 0;
  overflow: hidden;
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-paper);
  color: var(--sh-paper-ink);
}

.sh-cover__glyph {
  display: block;
  color: var(--sh-cover-bg);
  font-size: 52cqi;
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.sh-cover__ramp {
  display: block;
  margin-block-start: 4cqi;
  font-size: max(12px, 8.5cqi);
}

.sh-cover--specimen .sh-cover__band {
  display: block;
  margin: auto -10cqi 0;
  block-size: 14cqi;
  background: var(--sh-cover-bg);
}

/* Tiles: an icon set, a square card with a 3 by 3 grid of its own icons */
.sh-cover--tiles {
  aspect-ratio: 1;
  padding: calc(var(--sh-cover-w) * 0.13);
  overflow: hidden;
  border-radius: var(--sh-radius-object-lg);
}

.sh-cover__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9cqi;
}

.sh-cover__grid svg {
  inline-size: 100%;
  block-size: auto;
}

/* Spine: a book seen from the shelf edge. Narrow, tall, title running bottom to top. */
.sh-cover--spine {
  container-type: normal;
  align-items: center;
  justify-content: center;
  inline-size: var(--sh-spine-w, 38px);
  block-size: var(--sh-spine-h, 168px);
  aspect-ratio: auto;
  padding-block: 20px;
  overflow: hidden;
  border-radius: 2px;
  font-size: 15px;
  transition: transform var(--sh-dur-slow) var(--sh-ease-out);
}

.sh-cover--spine::before,
.sh-cover--spine::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background: currentColor;
  opacity: 0.4;
}

.sh-cover--spine::before {
  top: 9px;
}

.sh-cover--spine::after {
  bottom: 9px;
}

.sh-cover--spine .sh-cover__title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: inherit;
  line-height: 1;
  white-space: nowrap;
}

a.sh-cover--spine:hover,
a.sh-cover--spine:focus-visible {
  color: var(--sh-cover-fg);
  transform: translateY(-6px);
}

a.sh-cover--spine:focus-visible {
  outline: 3px solid var(--sh-focus);
  outline-offset: 3px;
}

/* Thumbnails drop their words: the shape and color carry them */
.sh-cover--xs :is(.sh-cover__title, .sh-cover__meta, .sh-cover__rule, .sh-cover__ramp, .sh-cover__label, .sh-cover__year, .sh-cover__mark) {
  display: none;
}

.sh-cover--xs.sh-cover--sheets .sh-cover__band {
  min-block-size: 16cqi;
}

/* Covers under about 76px wide (a content box under 56px) keep their shape and drop their words */
@container (max-width: 55px) {
  :is(.sh-cover__title, .sh-cover__meta, .sh-cover__rule, .sh-cover__ramp, .sh-cover__label, .sh-cover__mark) {
    display: none;
  }
}

/* Sheets have no outer padding, so their band title steps off a little earlier; box labels need room too */
@container (max-width: 72px) {
  .sh-cover--sheets .sh-cover__title {
    display: none;
  }
}

@container (max-width: 76px) {
  .sh-cover--box .sh-cover__label {
    display: none;
  }
}

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

/* ---- nav ---- */
/* Shelf nav: a calm cream bar with the wordmark, five links, search, theme, account and the cart. */

.sh-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  border-block-end: 1px solid var(--sh-hair);
  background: var(--sh-canvas);
}

.sh-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sh-space-6);
  inline-size: 100%;
  max-inline-size: calc(var(--sh-content) + var(--sh-gutter) * 2);
  min-block-size: var(--sh-nav-h);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
}

.sh-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--sh-ink);
  text-decoration: none;
}

.sh-nav__brand:hover {
  color: var(--sh-ink);
}

.sh-nav__name {
  font-family: var(--sh-font-serif);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.sh-nav__menu {
  flex: 1;
  min-inline-size: 0;
}

.sh-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sh-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--sh-space-3);
  border-radius: var(--sh-radius-btn);
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.sh-nav__link:hover {
  color: var(--sh-ink);
  background: var(--sh-well);
}

.sh-nav__link[aria-current="page"] {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--sh-space-3);
  inset-block-end: 6px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--sh-accent);
}

.sh-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sh-space-1);
  margin-inline-start: auto;
}

.sh-nav__cart {
  margin-inline-start: var(--sh-space-2);
  gap: 6px;
}

.sh-nav__cart .sh-count {
  margin-inline-start: 2px;
}

/* Theme toggle: shows the moon in light, the sun in dark */
.sh-theme-toggle__sun {
  display: none;
}

.sh-theme-toggle__moon,
.sh-theme-toggle__sun {
  align-items: center;
  justify-content: center;
}

.sh-theme-toggle__moon {
  display: inline-flex;
}

:root[data-theme="dark"] .sh-theme-toggle__sun {
  display: inline-flex;
}

:root[data-theme="dark"] .sh-theme-toggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sh-theme-toggle__sun {
    display: inline-flex;
  }

  :root:not([data-theme="light"]) .sh-theme-toggle__moon {
    display: none;
  }
}

.sh-nav__toggle {
  display: none;
}

/* Under 960px the links move into a disclosure panel (with JS) or a scrolling row (without) */
@media (max-width: 959px) {
  .sh-nav__inner {
    flex-wrap: wrap;
    gap: 0 var(--sh-space-3);
  }

  .sh-nav__menu {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
  }

  .sh-nav.has-menu .sh-nav__toggle {
    display: inline-flex;
  }

  .sh-nav.has-menu .sh-nav__menu {
    display: none;
    overflow: visible;
  }

  .sh-nav.has-menu .sh-nav__menu.is-open {
    display: block;
    padding-block: var(--sh-space-2) var(--sh-space-4);
    border-block-start: 1px solid var(--sh-hair);
  }

  .sh-nav.has-menu .sh-nav__links {
    flex-direction: column;
    align-items: stretch;
  }

  .sh-nav.has-menu .sh-nav__link {
    min-block-size: 48px;
    font-size: var(--sh-fs-body);
  }

  .sh-nav.has-menu .sh-nav__link[aria-current="page"]::after {
    inset-inline: 0 auto;
    inset-block: 12px;
    inline-size: 3px;
    block-size: auto;
  }
}

@media (max-width: 559px) {
  .sh-nav__name {
    font-size: 1.1875rem;
  }

  .sh-nav__search,
  .sh-nav__account {
    display: none;
  }

  .sh-nav__cart-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sh-nav__cart {
    margin-inline-start: 0;
    padding-inline: 10px;
  }
}

/* ---- announcement-bar ---- */
/* Announcement bar: one line above the nav on the bay color, dismissible. */

.sh-announce {
  border-block-end: 1px solid var(--sh-hair);
  background: var(--sh-bay);
  color: var(--sh-ink);
}

.sh-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sh-space-3);
  min-block-size: 44px;
  padding-block: 6px;
}

.sh-announce__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px var(--sh-space-3);
  font-size: var(--sh-fs-small);
  line-height: 1.4;
  text-align: center;
}

.sh-announce__text a {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
  text-decoration-color: var(--sh-accent);
  text-decoration-thickness: 2px;
}

.sh-announce__close {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border: 0;
  border-radius: var(--sh-radius-sm);
  background: transparent;
  color: var(--sh-ink);
  cursor: pointer;
}

.sh-announce__close:hover {
  background: var(--sh-well);
}

@media (pointer: coarse) {
  .sh-announce__close {
    inline-size: 44px;
    block-size: 44px;
  }
}

/* ---- breadcrumbs ---- */
/* Breadcrumbs: a quiet trail above page titles, slash-separated. */

.sh-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
  line-height: 1.4;
}

.sh-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.sh-crumbs__item + .sh-crumbs__item::before {
  content: "/";
  padding-inline: 6px;
  color: var(--sh-hair-strong);
}

.sh-crumbs__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  color: var(--sh-muted);
  text-decoration: none;
}

.sh-crumbs__link:hover {
  color: var(--sh-ink);
  text-decoration: underline;
  text-decoration-color: var(--sh-accent);
}

.sh-crumbs__current {
  color: var(--sh-ink);
}

@media (pointer: coarse) {
  .sh-crumbs__link {
    min-block-size: 44px;
  }
}

/* ---- sidebar-nav ---- */
/* Sidebar nav: account and help sections. A plank-colored marker shows where you are. */

.sh-side {
  display: grid;
  gap: var(--sh-space-3);
}

.sh-side__title {
  padding-inline: var(--sh-space-3);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
}

.sh-side__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-side__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sh-space-3);
  min-block-size: 44px;
  padding: 8px var(--sh-space-3);
  border-radius: var(--sh-radius-btn);
  color: var(--sh-body);
  font-weight: var(--sh-weight-medium);
  text-decoration: none;
}

.sh-side__link svg {
  flex: none;
  color: var(--sh-muted);
}

.sh-side__link:hover {
  background: var(--sh-well);
  color: var(--sh-ink);
}

.sh-side__link[aria-current="page"],
.sh-side__link[aria-current="true"] {
  background: var(--sh-bay);
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-side__link[aria-current="page"]::before,
.sh-side__link[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 10px;
  inline-size: 3px;
  border-radius: 2px;
  background: var(--sh-plank);
}

.sh-side__link[aria-current] svg {
  color: var(--sh-ink);
}

.sh-side__count {
  margin-inline-start: auto;
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-variant-numeric: tabular-nums;
}

/* Under 900px the list becomes a scrolling row of pills */
@media (max-width: 899px) {
  .sh-side__title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sh-side__list {
    display: flex;
    gap: var(--sh-space-2);
    overflow-x: auto;
    padding-block-end: 4px;
  }

  .sh-side__link {
    flex: none;
    border: 1px solid var(--sh-hair-strong);
    border-radius: var(--sh-radius-pill);
    white-space: nowrap;
  }

  .sh-side__link[aria-current="page"]::before,
  .sh-side__link[aria-current="true"]::before {
    content: none;
  }

  .sh-side__link[aria-current="page"],
  .sh-side__link[aria-current="true"] {
    border-color: var(--sh-plank);
  }
}

/* ---- hero ---- */
/* Hero: the shop window. Copy and a display shelf stand on one long plank that runs the container width. */

.sh-hero {
  padding-block: clamp(36px, 5vw, 80px) clamp(56px, 6vw, 96px);
}

.sh-hero__inner {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--sh-space-8);
  align-items: end;
  padding-block-end: calc(var(--sh-plank-size) + var(--sh-plank-depth) * 0.45);
  --sh-plank-depth: 16px;
  --sh-plank-size: 4px;
}

.sh-hero__inner::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline: var(--sh-gutter);
  inset-block-end: var(--sh-plank-size);
  block-size: var(--sh-plank-depth);
  background: var(--sh-plank-top);
}

.sh-hero__inner::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline: var(--sh-gutter);
  inset-block-end: 0;
  block-size: var(--sh-plank-size);
  border-radius: 1px;
  background: var(--sh-plank);
  box-shadow: inset 0 1px 0 var(--sh-plank-lip), 0 8px 12px -6px var(--sh-plank-shade);
}

.sh-hero--talkers .sh-hero__inner {
  margin-block-end: 44px;
}

.sh-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sh-space-5);
}

.sh-hero__title {
  max-inline-size: 15ch;
}

.sh-hero__lede {
  max-inline-size: 46ch;
  color: var(--sh-muted);
  font-size: var(--sh-fs-lede);
  line-height: 1.55;
}

.sh-hero__actions {
  margin-block-start: var(--sh-space-2);
}

.sh-hero__copy > :is(.sh-search, .sh-dl, .sh-steps, .sh-actions--stack-sm) {
  align-self: stretch;
  max-inline-size: 560px;
}

.sh-hero__note {
  display: flex;
  align-items: center;
  gap: var(--sh-space-2);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-hero__note svg {
  flex: none;
  color: var(--sh-ok);
}

.sh-hero__display {
  position: relative;
  z-index: 1;
  min-inline-size: 0;
}

.sh-hero__display > .sh-shelf {
  padding-inline: 0;
}

@media (min-width: 960px) {
  .sh-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sh-space-9);
  }

  .sh-hero__copy {
    padding-block-end: var(--sh-space-9);
  }
}

/* Inner page hero: crumbs, a smaller title, lede, and a small shelf on the end side */
.sh-hero--page {
  padding-block: clamp(24px, 3vw, 48px) clamp(40px, 4vw, 64px);
}

.sh-hero--page .sh-hero__inner {
  --sh-plank-depth: 10px;
  --sh-plank-size: 3px;
}

.sh-hero--page .sh-hero__title {
  max-inline-size: 18ch;
  font-size: var(--sh-fs-page);
}

.sh-hero--page .sh-hero__copy {
  gap: var(--sh-space-4);
}

@media (min-width: 960px) {
  .sh-hero--page .sh-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .sh-hero--page .sh-hero__copy {
    padding-block-end: var(--sh-space-8);
  }
}

@media (max-width: 959px) {
  .sh-hero--page .sh-hero__display {
    max-inline-size: 420px;
  }
}

/* ---- section-header ---- */
/* Section header: a serif h2 with one muted intro. The row form puts a "see all" link on the end side,
   above a hairline, like a label on a shelf edge. */

.sh-head {
  display: grid;
  gap: var(--sh-space-3);
  max-inline-size: 680px;
  margin-block-end: var(--sh-space-8);
}

.sh-head__intro {
  color: var(--sh-muted);
  font-size: var(--sh-fs-lede);
  line-height: 1.55;
}

.sh-head--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.sh-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sh-space-3) var(--sh-space-7);
  max-inline-size: none;
  padding-block-end: var(--sh-space-4);
  border-block-end: 1px solid var(--sh-hair);
}

.sh-head__text {
  display: grid;
  gap: var(--sh-space-2);
  max-inline-size: 680px;
}

.sh-head__action {
  flex: none;
}

.sh-head--tight {
  margin-block-end: var(--sh-space-6);
}

/* Beside content in a split, the split's gap does the spacing */
.sh-split > .sh-head {
  margin-block-end: 0;
}

/* ---- cards ---- */
/* Cards: content cards for posts, guides and help topics. Same cubby shape as product cards, sans titles. */

.sh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow-card);
  overflow: hidden;
  transition: box-shadow var(--sh-dur) var(--sh-ease), border-color var(--sh-dur) var(--sh-ease);
}

.sh-card__bay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 8;
  padding-block-start: var(--sh-space-5);
  background: var(--sh-bay);
}

.sh-card__bay > .sh-shelf {
  padding-inline: var(--sh-space-4);
}

.sh-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sh-space-2);
  padding: var(--sh-space-5) var(--sh-space-6) var(--sh-space-6);
}

.sh-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--sh-space-3);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-card__title {
  color: var(--sh-ink);
  font-size: var(--sh-fs-card);
  font-weight: var(--sh-weight-semibold);
  line-height: var(--sh-lh-snug);
}

.sh-card__text {
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
  line-height: 1.6;
}

.sh-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-3);
  margin-block-start: auto;
  padding-block-start: var(--sh-space-3);
}

.sh-card__link {
  color: inherit;
  text-decoration: none;
}

.sh-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sh-card__link:focus-visible {
  outline: none;
}

.sh-card__link:focus-visible::after {
  border-radius: var(--sh-radius-card);
  outline: 3px solid var(--sh-focus);
  outline-offset: -3px;
}

.sh-card--link:hover {
  border-color: var(--sh-hair-strong);
  box-shadow: var(--sh-shadow-lift);
}

.sh-card--link:hover .sh-card__title {
  text-decoration: underline;
  text-decoration-color: var(--sh-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sh-card--link:hover .sh-shelf__item > .sh-cover {
  transform: translateY(-6px);
}

.sh-card--flat {
  border-color: transparent;
  background: var(--sh-bay);
  box-shadow: none;
}

.sh-card--feature .sh-card__body {
  padding: var(--sh-space-7);
}

/* Cards in a list grid fill their cell so rows line up */
:is(.sh-grid, .sh-cards) > li {
  display: flex;
  min-inline-size: 0;
}

:is(.sh-grid, .sh-cards) > li > .sh-card {
  flex: 1;
}

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

/* ---- product-card ---- */
/* Product card: a cubby. The cover stands in a bay on a plank that runs edge to edge; title, meta,
   price and the add button sit below it. Also defines .sh-price, used wherever a price appears. */

.sh-product {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow-card);
  overflow: hidden;
  transition: box-shadow var(--sh-dur) var(--sh-ease), border-color var(--sh-dur) var(--sh-ease);
}

.sh-product:hover {
  border-color: var(--sh-hair-strong);
  box-shadow: var(--sh-shadow-lift);
}

.sh-product__bay {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 6 / 5;
  padding-block-start: var(--sh-space-6);
  background: var(--sh-bay);
}

.sh-product__bay > .sh-shelf {
  padding-inline: var(--sh-space-3);
}

.sh-product__bay .sh-cover {
  --sh-cover-w: clamp(70px, 44cqi, 156px);
}

.sh-product__bay .sh-cover--tiles,
.sh-product__bay .sh-cover--box {
  --sh-cover-w: clamp(64px, 40cqi, 140px);
}

.sh-product:hover .sh-shelf__item > .sh-cover,
.sh-product:focus-within .sh-shelf__item > .sh-cover {
  transform: translateY(-6px);
}

.sh-product:hover .sh-shelf__item::after,
.sh-product:focus-within .sh-shelf__item::after {
  transform: scaleX(0.82);
  opacity: 0.55;
}

.sh-product__flags {
  position: absolute;
  inset-block-start: var(--sh-space-3);
  inset-inline-start: var(--sh-space-3);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sh-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: var(--sh-space-5) var(--sh-space-5) var(--sh-space-5);
}

.sh-product__title {
  font-family: var(--sh-font-serif);
  font-size: var(--sh-fs-card);
  font-weight: var(--sh-weight-regular);
  line-height: 1.2;
  color: var(--sh-ink);
}

.sh-product__link {
  color: inherit;
  text-decoration: none;
}

.sh-product__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.sh-product__link:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sh-accent);
  text-decoration-thickness: 2px;
}

.sh-product__link:focus-visible {
  outline: none;
}

.sh-product__link:focus-visible::after {
  outline: 3px solid var(--sh-focus);
  outline-offset: -3px;
}

.sh-product__meta {
  font-size: var(--sh-fs-meta);
  line-height: 1.45;
  color: var(--sh-muted);
}

.sh-product__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-2) var(--sh-space-3);
  margin-block-start: auto;
  padding-block-start: var(--sh-space-3);
}

.sh-product__add {
  position: relative;
  z-index: 2;
}

.sh-product__add.is-added {
  border-color: var(--sh-ok);
  background: var(--sh-ok-soft);
  color: var(--sh-ok);
}

/* Horizontal card: cart suggestions, related items in narrow columns */
.sh-product--row {
  flex-direction: row;
  align-items: stretch;
}

.sh-product--row .sh-product__bay {
  flex: 0 0 38%;
  aspect-ratio: auto;
  min-block-size: 148px;
}

/* Grid of product cards: two columns on phones, up to four on wide screens */
.sh-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sh-space-3);
  padding: 0;
  list-style: none;
}

.sh-products > li {
  display: flex;
  min-inline-size: 0;
}

.sh-products > li > .sh-product {
  flex: 1;
}

@media (min-width: 720px) {
  .sh-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sh-space-6);
  }
}

@media (min-width: 1100px) {
  .sh-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (max-width: 559px) {
  .sh-products .sh-product__body {
    padding: var(--sh-space-3) var(--sh-space-3) var(--sh-space-4);
  }

  .sh-products .sh-product__title {
    font-size: var(--sh-fs-body);
  }

  .sh-products .sh-product__foot {
    align-items: stretch;
    flex-direction: column;
  }

  .sh-products .sh-product__add {
    inline-size: 100%;
  }
}

/* Price: serif figures, a struck former price, an optional terms note */
.sh-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--sh-space-2);
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.375rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}

.sh-price__was {
  color: var(--sh-muted);
  font-family: var(--sh-font-sans);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-price__note {
  inline-size: 100%;
  color: var(--sh-muted);
  font-family: var(--sh-font-sans);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
  line-height: 1.4;
}

.sh-price--sale .sh-price__now {
  color: var(--sh-sale);
}

.sh-price--lg {
  font-size: var(--sh-fs-headline);
}

.sh-price--xl {
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
}

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

/* ---- shelf-row ---- */
/* Shelf row: a horizontal, scroll-snapped run of product cards with arrow buttons in the header. */

.sh-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sh-space-3) var(--sh-space-6);
  margin-block-end: var(--sh-space-6);
  padding-block-end: var(--sh-space-4);
  border-block-end: 1px solid var(--sh-hair);
}

.sh-row__text {
  display: grid;
  gap: var(--sh-space-2);
  max-inline-size: 640px;
}

.sh-row__intro {
  color: var(--sh-muted);
  font-size: var(--sh-fs-lede);
  line-height: 1.5;
}

.sh-row__tools {
  display: flex;
  align-items: center;
  gap: var(--sh-space-2);
}

.sh-row__link {
  margin-inline-end: var(--sh-space-3);
}

.sh-row__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--sh-space-6)) / 4);
  gap: var(--sh-space-6);
  margin: -6px -6px 0;
  padding: 6px 6px var(--sh-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scroll-behavior: smooth;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--sh-hair-strong) transparent;
}

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

.sh-row__slot {
  display: flex;
  min-inline-size: 0;
  scroll-snap-align: start;
}

.sh-row__slot > * {
  flex: 1;
}

@media (max-width: 1099px) {
  .sh-row__track {
    grid-auto-columns: calc((100% - 2 * var(--sh-space-6)) / 3);
  }
}

@media (max-width: 719px) {
  .sh-row__track {
    grid-auto-columns: 64%;
    gap: var(--sh-space-3);
  }

  .sh-row__btn {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-row__track {
    scroll-behavior: auto;
  }
}

/* ---- category-nav ---- */
/* Category nav: pills or shelf tiles for categories, plus the filter bar (format chips, sort, live count). */

.sh-catnav__list {
  display: flex;
  gap: var(--sh-space-2);
  margin: 0;
  padding: 4px 2px var(--sh-space-2);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--sh-hair-strong) transparent;
}

.sh-catnav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sh-space-2);
  min-block-size: 44px;
  padding: 8px 16px;
  border: 1px solid var(--sh-hair-strong);
  border-radius: var(--sh-radius-pill);
  background: var(--sh-surface);
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

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

.sh-catnav__count {
  color: var(--sh-muted);
  font-size: var(--sh-fs-tag);
  font-variant-numeric: tabular-nums;
}

.sh-catnav__link[aria-current="page"],
.sh-catnav__link[aria-current="true"] {
  border-color: var(--sh-invert);
  background: var(--sh-invert);
  color: var(--sh-invert-ink);
}

.sh-catnav__link[aria-current] .sh-catnav__count {
  color: var(--sh-invert-muted);
}

/* Wrap: pills flow onto several lines instead of scrolling (long indexes) */
.sh-catnav--wrap .sh-catnav__list {
  flex-wrap: wrap;
  overflow: visible;
}
/* Tiles: each category is a cubby with a few of its objects on a small shelf */
.sh-catnav--tiles .sh-catnav__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sh-space-3);
  overflow: visible;
}

@media (min-width: 720px) {
  .sh-catnav--tiles .sh-catnav__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sh-space-5);
  }
}

@media (min-width: 1100px) {
  .sh-catnav--tiles .sh-catnav__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.sh-catnav--tiles .sh-catnav__link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  block-size: 100%;
  padding: 0;
  overflow: hidden;
  border-color: var(--sh-hair);
  border-radius: var(--sh-radius-card);
  white-space: normal;
}

.sh-catnav__shelf {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 11;
  padding-block-start: var(--sh-space-4);
  background: var(--sh-bay);
}

.sh-catnav__shelf > .sh-shelf {
  --sh-plank-depth: 7px;
}

.sh-catnav__shelf .sh-cover {
  --sh-cover-w: min(76px, 32cqi);
}

.sh-catnav__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sh-space-2);
  padding: var(--sh-space-3) var(--sh-space-4) var(--sh-space-4);
}

.sh-catnav--tiles .sh-catnav__link:hover .sh-cover {
  transform: translateY(-4px);
}

.sh-catnav--tiles .sh-catnav__link:hover {
  border-color: var(--sh-hair-strong);
  box-shadow: var(--sh-shadow-lift);
}

/* Filters */
.sh-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sh-space-4) var(--sh-space-6);
  padding-block: var(--sh-space-4);
  border-block: 1px solid var(--sh-hair);
}

.sh-filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sh-space-2) var(--sh-space-3);
}

.sh-filters__legend {
  float: inline-start;
  margin-inline-end: var(--sh-space-3);
  padding-block: 10px;
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
}

.sh-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sh-space-2);
}

.sh-filters__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sh-space-3) var(--sh-space-5);
}

.sh-filters__count {
  color: var(--sh-muted);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-medium);
  font-variant-numeric: tabular-nums;
}

.sh-filters__sort {
  display: flex;
  align-items: center;
  gap: var(--sh-space-2);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
}

/* Chip: a checkbox that looks like a pill */
.sh-chip {
  position: relative;
  display: inline-flex;
}

.sh-chip__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sh-chip__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 40px;
  padding: 7px 14px;
  border: 1px solid var(--sh-control);
  border-radius: var(--sh-radius-pill);
  background: var(--sh-surface);
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  white-space: nowrap;
}

.sh-chip__input:hover + .sh-chip__label {
  border-color: var(--sh-ink);
}

.sh-chip__input:checked + .sh-chip__label {
  border-color: var(--sh-accent);
  background: var(--sh-accent-soft);
  color: var(--sh-ink);
  box-shadow: inset 0 0 0 1px var(--sh-accent);
}

.sh-chip__input:checked + .sh-chip__label::before {
  content: "";
  inline-size: 5px;
  block-size: 9px;
  margin-inline-end: 2px;
  border: solid var(--sh-accent-strong);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.sh-chip__input:focus-visible + .sh-chip__label {
  outline: 3px solid var(--sh-focus);
  outline-offset: 2px;
}

.sh-chip__input:disabled + .sh-chip__label {
  border-color: var(--sh-hair);
  background: var(--sh-well);
  color: var(--sh-muted);
}

@media (pointer: coarse) {
  .sh-chip__label {
    min-block-size: 44px;
  }
}

/* ---- bento ---- */
/* Bento: cubbies of different widths. Each well shows a coded piece of what you get, standing at its foot. */

.sh-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sh-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-bento__item {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow-card);
  overflow: hidden;
}

@media (min-width: 720px) {
  .sh-bento__item {
    grid-column: span 3;
  }

  .sh-bento__item--wide {
    grid-column: span 6;
  }
}

@media (min-width: 1024px) {
  .sh-bento__item {
    grid-column: span 2;
  }

  .sh-bento__item--wide {
    grid-column: span 4;
  }

  .sh-bento__item--half {
    grid-column: span 3;
  }
}

.sh-bento__well {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 220px;
  padding: var(--sh-space-6) var(--sh-space-6) 0;
  background: var(--sh-bay);
  overflow: hidden;
}

@media (max-width: 719px) {
  .sh-bento__well {
    min-block-size: 168px;
  }
}

.sh-bento__well > .sh-shelf {
  margin-inline: calc(var(--sh-space-6) * -1);
}

.sh-bento__well--center {
  justify-content: center;
  padding-block-end: var(--sh-space-6);
}

.sh-bento__body {
  display: grid;
  gap: var(--sh-space-2);
  padding: var(--sh-space-5) var(--sh-space-6) var(--sh-space-6);
}

.sh-bento__title {
  font-size: var(--sh-fs-card);
}

.sh-bento__text {
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
}

/* Mini panel: a small coded card that floats in a well (receipts, notes, key strips) */
.sh-mini {
  display: grid;
  gap: var(--sh-space-2);
  inline-size: min(100%, 340px);
  margin-inline: auto;
  padding: var(--sh-space-4);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow-lift);
  color: var(--sh-body);
  font-size: var(--sh-fs-meta);
}

.sh-mini__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-3);
}

.sh-mini__strong {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-mini__mono {
  color: var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: var(--sh-fs-meta);
}

.sh-mini--tucked {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-block-end: 0;
}

/* ---- features ---- */
/* Features: icon, title, two lines of text. No cards; columns breathe on the canvas. Plus check lists. */

.sh-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sh-space-8) var(--sh-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .sh-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .sh-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sh-features--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sh-space-8) var(--sh-space-7);
  }

  .sh-features--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sh-feature {
  display: grid;
  align-content: start;
  gap: var(--sh-space-2);
}

.sh-feature__icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: var(--sh-space-3);
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-bay);
  color: var(--sh-ink);
  box-shadow: inset 0 -3px 0 var(--sh-plank-top);
}

.sh-feature__title {
  font-size: var(--sh-fs-card);
}

.sh-feature__text {
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
}

/* Numbered steps: the icon becomes a serif numeral */
.sh-feature__num {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: var(--sh-space-3);
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-bay);
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.5rem;
  box-shadow: inset 0 -3px 0 var(--sh-plank-top);
}

/* Check lists: what's included (sage) and what isn't (muted) */
.sh-checks {
  display: grid;
  gap: var(--sh-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-checks > * {
  position: relative;
  padding-inline-start: 30px;
  line-height: 1.5;
}

.sh-checks > *::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 3px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--sh-ok-soft);
}

.sh-checks > *::after {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  inset-block-start: 7px;
  inline-size: 6px;
  block-size: 10px;
  border: solid var(--sh-ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sh-checks--no > * {
  color: var(--sh-muted);
}

.sh-checks--no > *::before {
  background: var(--sh-well);
}

.sh-checks--no > *::after {
  inset-inline-start: 6px;
  inset-block-start: 12px;
  inline-size: 8px;
  block-size: 2px;
  border: 0;
  background: var(--sh-muted);
  transform: none;
}

.sh-checks--sm > * {
  font-size: var(--sh-fs-meta);
}

.sh-checks--sm > *::before {
  inset-block-start: 1px;
}

.sh-checks--sm > *::after {
  inset-block-start: 5px;
}

.sh-checks--sm.sh-checks--no > *::after {
  inset-block-start: 10px;
}

/* ---- stats ---- */
/* Stats: a row of serif figures with plain labels, divided by hairlines. Facts about the shop, never customers. */

.sh-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--sh-hair);
}

@media (min-width: 900px) {
  .sh-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sh-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--sh-space-2);
  padding: var(--sh-space-6) var(--sh-space-5);
  border-inline-start: 1px solid var(--sh-hair);
}

.sh-stat:nth-child(2n + 1) {
  border-inline-start: 0;
}

@media (max-width: 899px) {
  .sh-stat:nth-child(n + 3) {
    border-block-start: 1px solid var(--sh-hair);
  }
}

@media (min-width: 900px) {
  .sh-stat:nth-child(2n + 1) {
    border-inline-start: 1px solid var(--sh-hair);
  }

  .sh-stat:first-child {
    border-inline-start: 0;
  }
}

.sh-stat__value {
  margin: 0;
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.sh-stat__label {
  color: var(--sh-muted);
  font-size: var(--sh-fs-small);
  line-height: 1.45;
}

/* ---- logo-row ---- */
/* Logo row: the shop's own imprints as geometric marks. Muted ink, no color, evenly spaced. */

.sh-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sh-space-6) var(--sh-space-9);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sh-muted);
  font-size: var(--sh-fs-body);
  font-weight: var(--sh-weight-semibold);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.sh-logo svg {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
}

.sh-logo--serif {
  font-family: var(--sh-font-serif);
  font-weight: var(--sh-weight-regular);
  font-size: 1.1875rem;
}

.sh-logos__note {
  margin-block-start: var(--sh-space-5);
  color: var(--sh-muted);
  font-size: var(--sh-fs-small);
  text-align: center;
}

/* ---- testimonial ---- */
/* Testimonial: a note from the shop's own people, set as a serif quote with a small byline. */

.sh-quote {
  display: grid;
  gap: var(--sh-space-6);
  max-inline-size: 820px;
  margin: 0;
}

.sh-quote__text {
  margin: 0;
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  hanging-punctuation: first last;
}

.sh-quote__text p {
  text-wrap: balance;
}

.sh-quote__by {
  display: flex;
  align-items: center;
  gap: var(--sh-space-3);
}

.sh-quote__name {
  display: block;
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-quote__role {
  display: block;
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-quote--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.sh-quote--panel {
  max-inline-size: none;
  padding: var(--sh-space-8);
  border-radius: var(--sh-radius-card);
  background: var(--sh-bay);
}

/* ---- review-card ---- */
/* Review card: a beta tester's note, named by role, with what they used it for. Never stars. */

.sh-review {
  display: flex;
  flex-direction: column;
  gap: var(--sh-space-4);
  padding: var(--sh-space-6);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
}

.sh-review__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-2);
}

.sh-review__tested {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-review__quote {
  margin: 0;
  color: var(--sh-body);
  font-size: var(--sh-fs-body);
  line-height: 1.6;
}

.sh-review__use {
  display: flex;
  align-items: flex-start;
  gap: var(--sh-space-2);
  padding: var(--sh-space-3);
  border-radius: var(--sh-radius-sm);
  background: var(--sh-well);
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  line-height: 1.45;
}

.sh-review__use svg {
  flex: none;
  margin-block-start: 1px;
  color: var(--sh-muted);
}

.sh-review__by {
  display: flex;
  align-items: center;
  gap: var(--sh-space-3);
  margin-block-start: auto;
}

.sh-review__role {
  display: block;
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-review__group {
  display: block;
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sh-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .sh-reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .sh-reviews--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sh-reviews > li {
  display: flex;
}

.sh-reviews > li > .sh-review {
  flex: 1;
}

/* ---- pricing ---- */
/* Pricing: license tiers or passes as cubbies. The bay shows what the tier covers as objects on a shelf. */

.sh-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sh-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .sh-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sh-plans--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 920px;
    margin-inline: auto;
  }
}

.sh-plans > li {
  display: flex;
}

.sh-plan {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow-card);
  overflow: hidden;
}

.sh-plan--featured {
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 1px var(--sh-accent), var(--sh-shadow-lift);
}

.sh-plan__bay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 7;
  padding-block-start: var(--sh-space-5);
  background: var(--sh-bay);
}

.sh-plan__bay .sh-cover {
  --sh-cover-w: min(76px, 22cqi);
}

.sh-plan__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sh-space-4);
  padding: var(--sh-space-6) var(--sh-space-6) var(--sh-space-7);
}

.sh-plan__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-2);
}

.sh-plan__name {
  font-size: var(--sh-fs-card);
}

.sh-plan__desc {
  color: var(--sh-muted);
  font-size: var(--sh-fs-small);
}

.sh-plan__price {
  display: grid;
  gap: 4px;
}

.sh-plan__term {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-plan__list {
  padding-block-start: var(--sh-space-4);
  border-block-start: 1px solid var(--sh-hair);
}

.sh-plans__note {
  margin-block-start: var(--sh-space-6);
  color: var(--sh-muted);
  font-size: var(--sh-fs-small);
  text-align: center;
}

.sh-plans__compare {
  margin-block-start: var(--sh-space-10);
}

/* ---- license-picker ---- */
/* License picker: radio cards for personal, team and extended. The picked one shows what changes. */

.sh-license {
  display: grid;
  gap: var(--sh-space-3);
}

.sh-license__legend {
  margin-block-end: var(--sh-space-3);
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
}

.sh-license__options {
  display: grid;
  gap: var(--sh-space-2);
}

.sh-license__option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sh-space-3);
  padding: var(--sh-space-4);
  border: 1px solid var(--sh-hair-strong);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-surface);
  cursor: pointer;
  transition: border-color var(--sh-dur-fast) var(--sh-ease), background-color var(--sh-dur-fast) var(--sh-ease);
}

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

.sh-license__input {
  appearance: none;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  margin: 2px 0 0;
  border: 1.5px solid var(--sh-control);
  border-radius: 50%;
  background: var(--sh-surface);
  cursor: pointer;
}

.sh-license__input::after {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--sh-accent);
  transform: scale(0);
  transition: transform var(--sh-dur-fast) var(--sh-ease);
}

.sh-license__input:checked {
  border-color: var(--sh-accent);
}

.sh-license__input:checked::after {
  transform: scale(1);
}

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

.sh-license__option:has(.sh-license__input:checked) {
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 1px var(--sh-accent);
}

.sh-license__option:has(.sh-license__input:disabled) {
  border-color: var(--sh-hair);
  background: var(--sh-well);
  cursor: not-allowed;
}

.sh-license__body {
  display: grid;
  gap: 4px;
}

.sh-license__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sh-space-3);
}

.sh-license__name {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-license__price {
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.1875rem;
  font-variant-numeric: lining-nums;
}

.sh-license__desc {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  line-height: 1.45;
}

.sh-license__changes {
  display: none;
  margin-block-start: var(--sh-space-2);
}

.sh-license__option:has(.sh-license__input:checked) .sh-license__changes {
  display: grid;
}

.sh-license__help {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

/* Compact: three tiers in one row of small cards (wide panels only) */
@media (min-width: 560px) {
  .sh-license--row .sh-license__options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sh-license--row .sh-license__option {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-license__option,
  .sh-license__input::after {
    transition: none;
  }
}

/* ---- purchase-panel ---- */
/* Purchase panel: the sticky buy box on product pages. Title, price, license picker, one button,
   the refund line, the facts and what's inside. Also the two-column product page layout. */

.sh-buy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sh-space-7);
  align-items: start;
}

@media (min-width: 960px) {
  .sh-buy-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sh-space-9);
  }
}

.sh-buy {
  display: grid;
  gap: var(--sh-space-5);
  padding: var(--sh-space-6);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow-card);
}

@media (min-width: 960px) {
  .sh-buy {
    padding: var(--sh-space-7);
  }

  .sh-buy--sticky {
    position: sticky;
    inset-block-start: calc(var(--sh-nav-h) + var(--sh-space-5));
  }
}

.sh-buy__head {
  display: grid;
  gap: var(--sh-space-2);
}

.sh-buy__title {
  font-family: var(--sh-font-serif);
  font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
  font-weight: var(--sh-weight-regular);
  line-height: 1.08;
  letter-spacing: var(--sh-track-title);
}

.sh-buy__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--sh-space-3);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-buy__lede {
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
}

.sh-buy__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sh-space-3);
  padding-block: var(--sh-space-4);
  border-block: 1px solid var(--sh-hair);
}

.sh-buy__terms {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-buy__actions {
  display: grid;
  gap: var(--sh-space-2);
}

.sh-buy__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sh-space-2) var(--sh-space-5);
  margin: 0;
  font-size: var(--sh-fs-meta);
}

.sh-buy__facts dt {
  color: var(--sh-muted);
  font-weight: var(--sh-weight-medium);
}

.sh-buy__facts dd {
  margin: 0;
  color: var(--sh-ink);
  font-weight: var(--sh-weight-medium);
}

/* ---- product-gallery ---- */
/* Product gallery: a big bay with views of the product (the object, a page inside, the formats, the spec
   sheet) and thumbnail tabs under it. Without JS every view shows, stacked. */

.sh-gallery {
  display: grid;
  gap: var(--sh-space-3);
  min-inline-size: 0;
}

.sh-gallery__stage {
  overflow: hidden;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-bay);
}

.sh-gallery__view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: clamp(320px, 36vw, 500px);
  padding: var(--sh-space-9) var(--sh-space-5) 0;
}

.sh-gallery__view .sh-cover--xl {
  --sh-cover-w: min(280px, 40cqi);
}

.sh-gallery__view .sh-cover--lg {
  --sh-cover-w: min(190px, 25cqi);
}

.sh-gallery__view + .sh-gallery__view {
  border-block-start: 1px solid var(--sh-hair);
}

.sh-gallery.has-js .sh-gallery__view + .sh-gallery__view {
  border-block-start: 0;
}

.sh-gallery__view--center {
  justify-content: center;
  padding-block-end: var(--sh-space-8);
}

.sh-gallery__caption {
  position: absolute;
  inset-block-start: var(--sh-space-4);
  inset-inline-start: var(--sh-space-5);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
}

.sh-gallery__view > .sh-shelf {
  margin-inline: calc(var(--sh-space-5) * -1);
}

.sh-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sh-space-3);
}

.sh-gallery:not(.has-js) .sh-gallery__thumbs {
  display: none;
}

.sh-gallery__thumb {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-surface);
  color: var(--sh-muted);
  font: inherit;
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  text-align: center;
  cursor: pointer;
}

.sh-gallery__thumb:hover {
  border-color: var(--sh-hair-strong);
  color: var(--sh-ink);
}

.sh-gallery__thumb[aria-selected="true"] {
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 1px var(--sh-accent);
  color: var(--sh-ink);
}

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

.sh-gallery__mini {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  block-size: 72px;
  padding-block-start: var(--sh-space-2);
  background: var(--sh-bay);
}

.sh-gallery__mini > .sh-shelf {
  inline-size: 100%;
  --sh-plank-depth: 5px;
  --sh-plank-size: 2px;
}

.sh-gallery__thumb-label {
  display: block;
  padding: 8px 6px;
}

/* Sheet: a page from inside the product, drawn as real text on paper */
.sh-sheet {
  display: grid;
  gap: var(--sh-space-3);
  align-content: start;
  inline-size: min(100%, 420px);
  margin-inline: auto;
  padding: var(--sh-space-6);
  border-radius: var(--sh-radius-object);
  background: var(--sh-paper);
  color: var(--sh-paper-ink);
  box-shadow: inset 0 0 0 1px var(--sh-cover-edge), var(--sh-shadow-object);
  font-size: var(--sh-fs-meta);
  line-height: 1.4;
}

.sh-sheet--tall {
  min-block-size: 360px;
}

.sh-sheet__band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sh-space-3);
  padding: var(--sh-space-3) var(--sh-space-4);
  border-radius: 2px;
  background: var(--sh-cover-3);
  color: var(--sh-cover-3-ink);
}

.sh-sheet__title {
  font-family: var(--sh-font-serif);
  font-size: 1.25rem;
}

.sh-sheet__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sh-space-4);
  padding-block: 6px;
  border-block-end: 1px solid var(--sh-paper-line);
  font-variant-numeric: tabular-nums;
}

.sh-sheet__row--total {
  border-block-end: 0;
  font-family: var(--sh-font-serif);
  font-size: 1.125rem;
}

.sh-sheet__label {
  color: var(--sh-paper-ink);
  font-weight: var(--sh-weight-semibold);
}

/* Spec card: the facts sheet view */
.sh-spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sh-space-3) var(--sh-space-6);
  inline-size: min(100%, 460px);
  margin: 0 auto;
  padding: var(--sh-space-6);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow-lift);
  font-size: var(--sh-fs-small);
}

.sh-spec dt {
  color: var(--sh-muted);
  font-weight: var(--sh-weight-medium);
}

.sh-spec dd {
  margin: 0;
  color: var(--sh-ink);
}

/* ---- whats-inside ---- */
/* What's inside: the file tree of a download. Folders are native <details>; sizes line up on the end side. */

.sh-tree {
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-surface);
}

.sh-tree__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-2) var(--sh-space-3);
  padding: var(--sh-space-3) var(--sh-space-4);
  border-block-end: 1px solid var(--sh-hair);
}

.sh-tree__title {
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
}

.sh-tree__sum {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
  font-variant-numeric: tabular-nums;
}

.sh-tree__list {
  margin: 0;
  padding: var(--sh-space-2);
  list-style: none;
}

.sh-tree__list .sh-tree__list {
  margin-inline-start: 17px;
  padding: 0 0 0 var(--sh-space-3);
  border-inline-start: 1px solid var(--sh-hair);
}

.sh-tree__row {
  display: flex;
  align-items: center;
  gap: var(--sh-space-2);
  min-block-size: 36px;
  padding: 6px var(--sh-space-2);
  border-radius: var(--sh-radius-sm);
  color: var(--sh-body);
  font-size: var(--sh-fs-meta);
  line-height: 1.35;
}

.sh-tree__row > svg {
  flex: none;
  color: var(--sh-muted);
}

summary.sh-tree__row {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
  cursor: pointer;
  list-style: none;
}

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

summary.sh-tree__row:hover {
  background: var(--sh-well);
}

.sh-tree__chev {
  display: inline-flex;
  flex: none;
  color: var(--sh-muted);
  transition: transform var(--sh-dur-fast) var(--sh-ease);
}

details[open] > summary .sh-tree__chev {
  transform: rotate(90deg);
}

:where([dir="rtl"]) .sh-tree__chev {
  transform: scaleX(-1);
}

:where([dir="rtl"]) details[open] > summary .sh-tree__chev {
  transform: rotate(90deg);
}

.sh-tree__name {
  flex: 1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.sh-tree__size {
  flex: none;
  color: var(--sh-muted);
  font-variant-numeric: tabular-nums;
}

.sh-tree__file .sh-tree__name {
  color: var(--sh-ink);
}

.sh-tree__foot {
  padding: var(--sh-space-3) var(--sh-space-4);
  border-block-start: 1px solid var(--sh-hair);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

@media (pointer: coarse) {
  summary.sh-tree__row {
    min-block-size: 44px;
  }
}

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

/* ---- bundle-builder ---- */
/* Bundle builder: pick three products, watch three empty slots on a small shelf fill, see the saving. */

.sh-bundle {
  display: grid;
  gap: var(--sh-space-6);
}

@media (min-width: 1024px) {
  .sh-bundle {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
    gap: var(--sh-space-8);
  }
}

.sh-bundle__legend {
  margin-block-end: var(--sh-space-4);
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
}

.sh-bundle__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sh-space-3);
}

@media (min-width: 720px) {
  .sh-bundle__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sh-bundle__pick {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sh-hair-strong);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-surface);
  cursor: pointer;
}

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

.sh-bundle__input {
  position: absolute;
  inset-block-start: var(--sh-space-3);
  inset-inline-end: var(--sh-space-3);
  z-index: 2;
  inline-size: 22px;
  block-size: 22px;
  margin: 0;
  accent-color: var(--sh-accent);
  cursor: pointer;
}

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

.sh-bundle__cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 2;
  padding-block-start: var(--sh-space-3);
  background: var(--sh-bay);
}

.sh-bundle__cover > .sh-shelf {
  --sh-plank-depth: 7px;
}

.sh-bundle__cover .sh-cover {
  --sh-cover-w: min(72px, 34cqi);
}

.sh-bundle__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sh-space-2);
  padding: var(--sh-space-3);
}

.sh-bundle__name {
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.3;
}

.sh-bundle__price {
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.0625rem;
}

.sh-bundle__pick:has(.sh-bundle__input:checked) {
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 1px var(--sh-accent);
}

.sh-bundle__pick:has(.sh-bundle__input:checked) .sh-cover {
  transform: translateY(-4px);
}

.sh-bundle__pick:has(.sh-bundle__input:disabled) {
  border-color: var(--sh-hair);
  background: var(--sh-well);
  cursor: not-allowed;
}

/* Summary: three slots on a shelf, the total and the button */
.sh-bundle__summary {
  display: grid;
  gap: var(--sh-space-4);
  padding: var(--sh-space-6);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
}

@media (min-width: 1024px) {
  .sh-bundle__summary {
    position: sticky;
    inset-block-start: calc(var(--sh-nav-h) + var(--sh-space-5));
  }
}

.sh-bundle__slots {
  padding-block-start: var(--sh-space-4);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-bay);
}

.sh-bundle__slots > .sh-shelf {
  --sh-slot-w: 52px;
  --sh-slot-h: 68px;
  min-block-size: 84px;
}

.sh-bundle__slots .sh-shelf__slot.is-filled {
  border-style: solid;
  border-color: transparent;
  background: var(--sh-cover-bg, var(--sh-cover-1));
  box-shadow: inset 0 0 0 1px var(--sh-cover-edge), var(--sh-shadow-object);
}

.sh-bundle__count {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-bundle__totals {
  display: grid;
  gap: var(--sh-space-2);
  margin: 0;
  font-size: var(--sh-fs-small);
}

.sh-bundle__totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sh-space-3);
}

.sh-bundle__totals dt {
  color: var(--sh-muted);
}

.sh-bundle__totals dd {
  margin: 0;
  color: var(--sh-ink);
  font-variant-numeric: tabular-nums;
}

.sh-bundle__save dd,
.sh-bundle__save dt {
  color: var(--sh-ok);
  font-weight: var(--sh-weight-semibold);
}

.sh-bundle__total {
  padding-block-start: var(--sh-space-3);
  border-block-start: 1px solid var(--sh-hair);
}

.sh-bundle__total dd {
  font-family: var(--sh-font-serif);
  font-size: 1.5rem;
}

.sh-bundle__note {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

@media (prefers-reduced-motion: reduce) {
  .sh-bundle__pick:has(.sh-bundle__input:checked) .sh-cover {
    transform: none;
  }
}

/* ---- refund-strip ---- */
/* Refund strip: the plain guarantee line. A receipt icon, one sentence, one link. */

.sh-refund {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sh-space-2) var(--sh-space-3);
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
  line-height: 1.45;
}

.sh-refund > svg {
  flex: none;
  color: var(--sh-ok);
}

.sh-refund > span {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.sh-refund--band > span,
.sh-refund--compact > span {
  flex: 0 1 auto;
}

.sh-refund__strong {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-refund a {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
  text-decoration-color: var(--sh-accent);
}

.sh-refund--compact {
  flex-wrap: nowrap;
  align-items: flex-start;
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-refund--compact > svg {
  margin-block-start: 1px;
}

/* Band: a full-width line between sections, set between two hairlines */
.sh-refund--band {
  justify-content: center;
  padding-block: var(--sh-space-5);
  border-block: 1px solid var(--sh-hair);
  text-align: center;
}

.sh-refund__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sh-space-3) var(--sh-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-refund__items > li {
  display: inline-flex;
  align-items: center;
  gap: var(--sh-space-2);
}

.sh-refund__items svg {
  flex: none;
  color: var(--sh-ok);
}

/* ---- faq ---- */
/* FAQ: native details between hairlines. A plus turns into a minus. No cards. */

.sh-faq {
  border-block-start: 1px solid var(--sh-hair);
}

.sh-faq__item {
  border-block-end: 1px solid var(--sh-hair);
}

.sh-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-4);
  min-block-size: 64px;
  padding-block: var(--sh-space-4);
  color: var(--sh-ink);
  font-size: var(--sh-fs-body);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.sh-faq__q::-webkit-details-marker {
  display: none;
}

.sh-faq__q:hover {
  color: var(--sh-ink);
  text-decoration: underline;
  text-decoration-color: var(--sh-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sh-faq__icon {
  position: relative;
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background: var(--sh-bay);
}

.sh-faq__icon::before,
.sh-faq__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 13px;
  inset-inline-start: 8px;
  inline-size: 12px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--sh-ink);
  transition: transform var(--sh-dur) var(--sh-ease);
}

.sh-faq__icon::after {
  transform: rotate(90deg);
}

.sh-faq__item[open] .sh-faq__icon::after {
  transform: rotate(0deg);
}

.sh-faq__a {
  display: grid;
  gap: var(--sh-space-3);
  max-inline-size: 68ch;
  padding-block-end: var(--sh-space-5);
  color: var(--sh-body);
}

.sh-faq__contact {
  margin-block-start: var(--sh-space-5);
  color: var(--sh-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sh-faq__icon::before,
  .sh-faq__icon::after {
    transition: none;
  }
}

/* ---- forms ---- */
/* Forms: labels above fields, 48px controls with 10px corners, errors in words under the field. */

.sh-form {
  display: grid;
  gap: var(--sh-space-5);
}

.sh-form--card {
  padding: var(--sh-space-7);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
}

@media (max-width: 559px) {
  .sh-form--card {
    padding: var(--sh-space-5);
  }
}

.sh-form__row {
  display: grid;
  gap: var(--sh-space-5);
}

@media (min-width: 640px) {
  .sh-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sh-form__row--3 {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.sh-form__group {
  display: grid;
  gap: var(--sh-space-4);
  padding-block-start: var(--sh-space-5);
  border-block-start: 1px solid var(--sh-hair);
}

.sh-form__legend {
  float: inline-start;
  inline-size: 100%;
  margin-block-end: var(--sh-space-4);
  color: var(--sh-ink);
  font-size: var(--sh-fs-card);
  font-weight: var(--sh-weight-semibold);
}

.sh-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-3) var(--sh-space-5);
}

@media (max-width: 479px) {
  .sh-form__foot > .sh-btn {
    inline-size: 100%;
  }
}

.sh-field {
  display: grid;
  gap: 6px;
  min-inline-size: 0;
  align-content: start;
}

.sh-label {
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.35;
}

.sh-label__optional {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-regular);
}

.sh-input,
.sh-select,
.sh-textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 11px 14px;
  border: 1px solid var(--sh-control);
  border-radius: var(--sh-radius-input);
  background: var(--sh-surface);
  color: var(--sh-ink);
  font: inherit;
  font-size: var(--sh-fs-small);
  line-height: 1.4;
  transition: border-color var(--sh-dur-fast) var(--sh-ease);
}

.sh-input::placeholder,
.sh-textarea::placeholder {
  color: var(--sh-muted);
  opacity: 1;
}

.sh-input:hover,
.sh-select:hover,
.sh-textarea:hover {
  border-color: var(--sh-ink);
}

.sh-input:focus,
.sh-select:focus,
.sh-textarea:focus {
  border-color: var(--sh-focus);
  outline: 2px solid var(--sh-focus);
  outline-offset: 1px;
}

.sh-input[aria-invalid="true"],
.sh-select[aria-invalid="true"],
.sh-textarea[aria-invalid="true"] {
  border-color: var(--sh-danger);
  box-shadow: inset 0 0 0 1px var(--sh-danger);
}

.sh-input.is-valid {
  border-color: var(--sh-ok);
  box-shadow: inset 0 0 0 1px var(--sh-ok);
}

.sh-input:disabled,
.sh-select:disabled,
.sh-textarea:disabled {
  border-color: var(--sh-hair);
  background: var(--sh-well);
  color: var(--sh-muted);
  cursor: not-allowed;
}

.sh-input[readonly] {
  border-style: dashed;
  background: var(--sh-well);
}

.sh-select {
  appearance: none;
  padding-inline-end: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.sh-select--sm {
  min-block-size: 40px;
  padding: 7px 36px 7px 12px;
  font-size: var(--sh-fs-meta);
}

.sh-textarea {
  min-block-size: 140px;
  resize: vertical;
}

.sh-hint {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  line-height: 1.45;
}

.sh-error,
.sh-success {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.45;
}

.sh-error {
  color: var(--sh-danger);
}

.sh-success {
  color: var(--sh-ok);
}

.sh-error svg,
.sh-success svg {
  flex: none;
  margin-block-start: 1px;
}

/* Checkbox and radio rows */
.sh-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sh-space-3);
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
  line-height: 1.45;
  cursor: pointer;
}

.sh-check input {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin: 1px 0 0;
  accent-color: var(--sh-accent);
  cursor: pointer;
}

.sh-check:has(input:disabled) {
  color: var(--sh-muted);
  cursor: not-allowed;
}

/* Inline form: one field and one button on a line */
.sh-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sh-space-2);
}

.sh-inline-form > .sh-input {
  flex: 1 1 220px;
  inline-size: auto;
}

@media (pointer: coarse) {
  .sh-select--sm {
    min-block-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-input,
  .sh-select,
  .sh-textarea {
    transition: none;
  }
}

/* ---- switch ---- */
/* Switch: a checkbox with role="switch". The thumb is a small square object, not a circle. */

.sh-switch {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sh-space-3);
  cursor: pointer;
}

.sh-switch__input {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 46px;
  block-size: 28px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sh-switch__track {
  position: relative;
  flex: none;
  inline-size: 46px;
  block-size: 28px;
  border: 1.5px solid var(--sh-control);
  border-radius: var(--sh-radius-sm);
  background: var(--sh-well);
  transition: background-color var(--sh-dur) var(--sh-ease), border-color var(--sh-dur) var(--sh-ease);
}

.sh-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 19px;
  block-size: 19px;
  border-radius: var(--sh-radius-object);
  background: var(--sh-control);
  transition: transform var(--sh-dur) var(--sh-ease-out), background-color var(--sh-dur) var(--sh-ease);
}

.sh-switch__input:checked + .sh-switch__track {
  border-color: var(--sh-accent);
  background: var(--sh-accent);
}

.sh-switch__input:checked + .sh-switch__track::after {
  background: var(--sh-accent-ink);
  transform: translateX(18px);
}

:where([dir="rtl"]) .sh-switch__input:checked + .sh-switch__track::after {
  transform: translateX(-18px);
}

.sh-switch__input:focus-visible + .sh-switch__track {
  outline: 3px solid var(--sh-focus);
  outline-offset: 2px;
}

.sh-switch__input:disabled + .sh-switch__track {
  border-color: var(--sh-hair-strong);
  background: var(--sh-well);
}

.sh-switch__input:disabled + .sh-switch__track::after {
  background: var(--sh-hair-strong);
}

.sh-switch__input:disabled:checked + .sh-switch__track {
  border-color: var(--sh-control);
  background: var(--sh-control);
}

.sh-switch__input:disabled:checked + .sh-switch__track::after {
  background: var(--sh-surface);
}

.sh-switch:has(.sh-switch__input:disabled) {
  cursor: not-allowed;
}

.sh-switch__text {
  display: grid;
  gap: 2px;
  padding-block-start: 3px;
}

.sh-switch__label {
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.35;
}

.sh-switch__hint {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  line-height: 1.45;
}

.sh-switches {
  display: grid;
  gap: var(--sh-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  .sh-switch__track,
  .sh-switch__track::after {
    transition: none;
  }
}

/* ---- choice-cards ---- */
/* Choice cards: radio or checkbox options as cards. Checkboxes are small square objects; radios are round. */

.sh-choices {
  display: grid;
  gap: var(--sh-space-3);
}

.sh-choices__legend {
  margin-block-end: var(--sh-space-3);
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
}

.sh-choices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sh-space-3);
}

.sh-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sh-space-3);
  padding: var(--sh-space-4);
  border: 1px solid var(--sh-hair-strong);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-surface);
  cursor: pointer;
}

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

.sh-choice__input {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin: 2px 0 0;
  border: 1.5px solid var(--sh-control);
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-surface);
  cursor: pointer;
}

.sh-choice__input[type="radio"] {
  border-radius: 50%;
}

.sh-choice__input::after {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 2px;
  background: var(--sh-accent);
  transform: scale(0);
  transition: transform var(--sh-dur-fast) var(--sh-ease);
}

.sh-choice__input[type="radio"]::after {
  border-radius: 50%;
}

.sh-choice__input:checked {
  border-color: var(--sh-accent);
}

.sh-choice__input:checked::after {
  transform: scale(1);
}

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

.sh-choice:has(.sh-choice__input:checked) {
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 1px var(--sh-accent);
}

.sh-choice:has(.sh-choice__input:disabled) {
  border-color: var(--sh-hair);
  background: var(--sh-well);
  cursor: not-allowed;
}

.sh-choice__body {
  display: grid;
  flex: 1;
  gap: 2px;
  min-inline-size: 0;
}

.sh-choice__title {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.35;
}

.sh-choice__text {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  line-height: 1.45;
}

.sh-choice__aside {
  flex: none;
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.0625rem;
}

.sh-choice__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-bay);
  color: var(--sh-ink);
}

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

/* ---- search-field ---- */
/* Search field: a magnifier inside the field, a clear button that appears once you type. */

.sh-search {
  display: grid;
  gap: 6px;
}

.sh-search__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sh-space-2);
}

.sh-search__icon {
  position: absolute;
  inset-inline-start: 14px;
  display: inline-flex;
  color: var(--sh-muted);
  pointer-events: none;
}

.sh-search__input {
  appearance: none;
  flex: 1;
  min-inline-size: 0;
  padding-inline: 44px 48px;
}

.sh-search__input::-webkit-search-cancel-button,
.sh-search__input::-webkit-search-decoration {
  appearance: none;
}

.sh-search__clear {
  position: absolute;
  inset-inline-end: 6px;
  display: inline-grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 0;
  border-radius: var(--sh-radius-sm);
  background: transparent;
  color: var(--sh-muted);
  cursor: pointer;
}

.sh-search__clear:hover {
  background: var(--sh-well);
  color: var(--sh-ink);
}

.sh-search__box:has(.sh-search__submit) .sh-search__clear {
  inset-inline-end: auto;
  position: static;
  margin-inline-start: -46px;
}

.sh-search__box:has(.sh-search__submit) .sh-search__input {
  padding-inline-end: 48px;
}

.sh-search--lg .sh-search__input {
  min-block-size: 60px;
  font-size: var(--sh-fs-lede);
}

.sh-search--lg .sh-search__icon {
  inset-inline-start: 18px;
}

.sh-search--lg .sh-search__input {
  padding-inline-start: 52px;
}

.sh-search__hint {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-search__hint kbd {
  padding: 1px 6px;
  border: 1px solid var(--sh-hair-strong);
  border-block-end-width: 2px;
  border-radius: var(--sh-radius-sm);
  background: var(--sh-surface);
  color: var(--sh-ink);
}

@media (pointer: coarse) {
  .sh-search__clear {
    inline-size: 44px;
    block-size: 44px;
  }
}

/* ---- file-drop ---- */
/* File drop: a dashed bay you can click or drop onto. The file list shows names and sizes. */

.sh-drop {
  display: grid;
  gap: var(--sh-space-2);
}

.sh-drop__zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sh-space-2);
  padding: var(--sh-space-7) var(--sh-space-6);
  border: 1.5px dashed var(--sh-control);
  border-radius: var(--sh-radius-card);
  background: var(--sh-bay);
  color: var(--sh-body);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--sh-dur-fast) var(--sh-ease), background-color var(--sh-dur-fast) var(--sh-ease);
}

.sh-drop__zone:hover,
.sh-drop.is-over .sh-drop__zone {
  border-color: var(--sh-accent);
  background: var(--sh-accent-soft);
}

.sh-drop__zone:has(.sh-drop__input:focus-visible) {
  outline: 3px solid var(--sh-focus);
  outline-offset: 2px;
}

.sh-drop__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}

.sh-drop__icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: var(--sh-space-1);
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-surface);
  color: var(--sh-ink);
  box-shadow: var(--sh-shadow-object);
}

.sh-drop__title {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-drop__title u {
  text-decoration-color: var(--sh-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.sh-drop__hint {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-drop.is-error .sh-drop__zone {
  border-color: var(--sh-danger);
  background: var(--sh-danger-soft);
}

.sh-drop:has(.sh-drop__input:disabled) .sh-drop__zone {
  border-color: var(--sh-hair-strong);
  background: var(--sh-well);
  cursor: not-allowed;
}

.sh-drop__files {
  display: grid;
  gap: var(--sh-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-drop__file {
  display: flex;
  align-items: center;
  gap: var(--sh-space-3);
  padding: var(--sh-space-2) var(--sh-space-3);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-btn);
  background: var(--sh-surface);
  font-size: var(--sh-fs-meta);
}

.sh-drop__file > svg {
  flex: none;
  color: var(--sh-muted);
}

.sh-drop__name {
  flex: 1;
  min-inline-size: 0;
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
  overflow-wrap: anywhere;
}

.sh-drop__size {
  color: var(--sh-muted);
  font-variant-numeric: tabular-nums;
}

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

/* ---- newsletter ---- */
/* Newsletter: one email field and one button, a plain promise underneath, a confirmation in place. */

.sh-news {
  display: grid;
  gap: var(--sh-space-4);
  max-inline-size: 560px;
}

.sh-news__title {
  font-size: var(--sh-fs-card);
}

.sh-news__intro {
  color: var(--sh-muted);
}

.sh-news__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sh-space-2);
}

.sh-news__row > .sh-input {
  flex: 1 1 220px;
  inline-size: auto;
}

.sh-news__note {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-news__done {
  display: flex;
  align-items: flex-start;
  gap: var(--sh-space-2);
  padding: var(--sh-space-3) var(--sh-space-4);
  border-radius: var(--sh-radius-btn);
  background: var(--sh-ok-soft);
  color: var(--sh-ok);
  font-weight: var(--sh-weight-semibold);
}

.sh-news__done svg {
  flex: none;
  margin-block-start: 2px;
}

.sh-news--panel .sh-news__title {
  font-size: var(--sh-fs-headline);
}

/* Panel: a bay-colored block with a small shelf of past issues */
.sh-news--panel {
  max-inline-size: none;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  padding: var(--sh-space-7);
  border-radius: var(--sh-radius-card);
  background: var(--sh-bay);
}

@media (min-width: 900px) {
  .sh-news--panel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sh-space-6) var(--sh-space-9);
    padding: var(--sh-space-9);
  }

  .sh-news--panel > :not(.sh-news__shelf) {
    grid-column: 1;
  }

  .sh-news--panel .sh-news__shelf {
    grid-row: 1 / span 6;
    grid-column: 2;
    align-self: end;
  }
}

.sh-news__shelf .sh-cover {
  --sh-cover-w: min(80px, 22cqi);
}

/* ---- tables ---- */
/* Tables: warm white with a well header, hairline rows, tabular figures, labelled stacks under 640px. */

.sh-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
}

.sh-table {
  inline-size: 100%;
  border-collapse: collapse;
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
  line-height: 1.45;
}

.sh-table caption {
  padding: var(--sh-space-4) var(--sh-space-5);
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
  text-align: start;
  caption-side: top;
}

.sh-table th,
.sh-table td {
  padding: var(--sh-space-3) var(--sh-space-5);
  border-block-start: 1px solid var(--sh-hair);
  text-align: start;
  vertical-align: middle;
}

.sh-table thead th {
  background: var(--sh-well);
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  white-space: nowrap;
}

.sh-table tbody th {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-table tbody tr:hover > * {
  background: var(--sh-well);
}

.sh-num {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.sh-table th.sh-num,
.sh-table td.sh-num {
  text-align: end;
}

.sh-table__group > th {
  background: var(--sh-bay);
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
}

.sh-table__group:hover > th {
  background: var(--sh-bay);
}

.sh-yes,
.sh-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sh-yes {
  color: var(--sh-ok);
  font-weight: var(--sh-weight-semibold);
}

.sh-no {
  color: var(--sh-muted);
}

.sh-table--compact th,
.sh-table--compact td {
  padding-block: var(--sh-space-2);
}

/* Under 640px a stacked table becomes labelled cards, one per row */
@media (max-width: 639px) {
  .sh-table--stack thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .sh-table--stack,
  .sh-table--stack tbody,
  .sh-table--stack tr,
  .sh-table--stack th,
  .sh-table--stack td {
    display: block;
  }

  .sh-table--stack tr {
    padding: var(--sh-space-3) var(--sh-space-4);
    border-block-start: 1px solid var(--sh-hair);
  }

  .sh-table--stack tbody tr:first-child {
    border-block-start: 0;
  }

  .sh-table--stack th,
  .sh-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--sh-space-4);
    padding: 6px 0;
    border: 0;
    text-align: end;
  }

  .sh-table--stack tbody th {
    justify-content: flex-start;
    padding-block-end: var(--sh-space-2);
    font-size: var(--sh-fs-body);
    text-align: start;
  }

  .sh-table--stack td[data-label]::before {
    content: attr(data-label);
    color: var(--sh-muted);
    font-weight: var(--sh-weight-medium);
    text-align: start;
  }

  .sh-table--stack .sh-table__group > th {
    margin-inline: calc(var(--sh-space-4) * -1);
    padding-inline: var(--sh-space-4);
  }

  .sh-table--stack tr.sh-table__group {
    padding: 0 var(--sh-space-4);
  }

  .sh-table--stack tbody tr:hover > * {
    background: transparent;
  }
}

/* ---- downloads-table ---- */
/* Downloads table: what you own, with a small cover, the version, the size and one download button per row. */

.sh-downloads td,
.sh-downloads th {
  padding-block: var(--sh-space-4);
}

.sh-downloads__item {
  display: flex;
  align-items: center;
  gap: var(--sh-space-4);
  min-inline-size: 220px;
}

.sh-downloads__thumb {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: none;
  inline-size: 64px;
  block-size: 64px;
  padding-block-start: 6px;
  border-radius: var(--sh-radius-sm);
  background: var(--sh-bay);
  overflow: hidden;
}

.sh-downloads__thumb > .sh-shelf {
  inline-size: 100%;
  padding-inline: 0;
  --sh-plank-depth: 5px;
  --sh-plank-size: 2px;
}

.sh-downloads__name {
  display: block;
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.0625rem;
  font-weight: var(--sh-weight-regular);
  line-height: 1.25;
}

.sh-downloads__license {
  display: block;
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-downloads__action {
  text-align: end;
  white-space: nowrap;
}

.sh-downloads tr.is-refunded .sh-downloads__name {
  color: var(--sh-muted);
}

@media (max-width: 639px) {
  .sh-downloads.sh-table--stack tbody th {
    padding-block-end: var(--sh-space-3);
  }

  .sh-downloads .sh-downloads__action {
    display: block;
    padding-block-start: var(--sh-space-3);
  }

  .sh-downloads .sh-downloads__action .sh-btn {
    inline-size: 100%;
  }
}

/* ---- license-key ---- */
/* License key: the key in a monospaced well with show and copy buttons. Masked by JS, plain without it. */

.sh-key {
  display: grid;
  gap: var(--sh-space-2);
}

.sh-key__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-2);
}

.sh-key__label {
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
}

.sh-key__row {
  display: flex;
  align-items: stretch;
  gap: var(--sh-space-2);
}

.sh-key__value {
  display: flex;
  align-items: center;
  flex: 1;
  min-inline-size: 0;
  min-block-size: 48px;
  padding: 10px 14px;
  border: 1px dashed var(--sh-control);
  border-radius: var(--sh-radius-input);
  background: var(--sh-well);
  color: var(--sh-ink);
  font-family: var(--sh-font-mono);
  font-size: var(--sh-fs-small);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.sh-key__status {
  color: var(--sh-ok);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  min-block-size: 1.4em;
}

.sh-key__hint {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-key__copy.is-copied {
  border-color: var(--sh-ok);
  background: var(--sh-ok-soft);
  color: var(--sh-ok);
}

.sh-key--off .sh-key__value {
  border-style: solid;
  border-color: var(--sh-hair);
  color: var(--sh-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

@media (max-width: 479px) {
  .sh-key__row {
    flex-wrap: wrap;
  }

  .sh-key__value {
    flex-basis: 100%;
  }

  .sh-key__copy {
    flex: 1;
  }
}

/* ---- description-list ---- */
/* Description list: label and value pairs between hairlines, for order details and account facts. */

.sh-dl {
  display: grid;
  margin: 0;
  border-block-start: 1px solid var(--sh-hair);
}

.sh-dl__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px var(--sh-space-6);
  padding-block: var(--sh-space-3);
  border-block-end: 1px solid var(--sh-hair);
}

@media (min-width: 560px) {
  .sh-dl__row {
    grid-template-columns: minmax(120px, 2fr) minmax(0, 5fr);
  }
}

.sh-dl dt {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.6;
}

.sh-dl dd {
  margin: 0;
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
}

.sh-dl--compact .sh-dl__row {
  padding-block: var(--sh-space-2);
}

/* Inline: label above value, laid out in columns, for summaries at the top of a page */
.sh-dl--inline {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--sh-space-4) var(--sh-space-6);
  border: 0;
}

.sh-dl--inline .sh-dl__row {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border: 0;
}

.sh-dl--inline dd {
  font-weight: var(--sh-weight-semibold);
}

/* ---- pagination ---- */
/* Pagination: previous and next with words, page numbers as small square tags, the current one in ink. */

.sh-pages__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sh-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-pages__link {
  display: inline-grid;
  place-items: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: var(--sh-space-3);
  border: 1px solid transparent;
  border-radius: var(--sh-radius-btn);
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.sh-pages__link:hover {
  border-color: var(--sh-hair-strong);
  background: var(--sh-surface);
  color: var(--sh-ink);
}

.sh-pages__link[aria-current="page"] {
  border-color: var(--sh-invert);
  background: var(--sh-invert);
  color: var(--sh-invert-ink);
}

.sh-pages__step {
  display: inline-flex;
  gap: var(--sh-space-2);
  border-color: var(--sh-control);
  background: var(--sh-surface);
}

.sh-pages__step[aria-disabled="true"] {
  border-color: var(--sh-hair);
  background: var(--sh-well);
  color: var(--sh-muted);
  cursor: not-allowed;
}

.sh-pages__gap {
  display: inline-grid;
  place-items: center;
  min-inline-size: 32px;
  color: var(--sh-muted);
}

.sh-pages__summary {
  margin-block-start: var(--sh-space-3);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  text-align: center;
}

@media (max-width: 559px) {
  .sh-pages__num:not([aria-current]) {
    display: none;
  }
}

/* ---- avatar ---- */
/* Avatar: initials on a small square object in one of the six cover colors. No photos. */

.sh-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-cover-1);
  color: var(--sh-cover-1-ink);
  box-shadow: inset 0 0 0 1px var(--sh-cover-edge);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-bold);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.sh-avatar--c1 { background: var(--sh-cover-1); color: var(--sh-cover-1-ink); }
.sh-avatar--c2 { background: var(--sh-cover-2); color: var(--sh-cover-2-ink); }
.sh-avatar--c3 { background: var(--sh-cover-3); color: var(--sh-cover-3-ink); }
.sh-avatar--c4 { background: var(--sh-cover-4); color: var(--sh-cover-4-ink); }
.sh-avatar--c5 { background: var(--sh-cover-5); color: var(--sh-cover-5-ink); }
.sh-avatar--c6 { background: var(--sh-cover-6); color: var(--sh-cover-6-ink); }

.sh-avatar--sm {
  inline-size: 32px;
  block-size: 32px;
  font-size: var(--sh-fs-tag);
}

.sh-avatar--lg {
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--sh-radius-sm);
  font-family: var(--sh-font-serif);
  font-size: 1.5rem;
  font-weight: var(--sh-weight-regular);
  letter-spacing: 0;
}

.sh-avatars {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-avatars > li + li {
  margin-inline-start: -8px;
}

.sh-avatars .sh-avatar {
  box-shadow: 0 0 0 2px var(--sh-canvas);
}

/* ---- cart-drawer ---- */
/* Cart drawer: a native modal <dialog> that slides in from the end side. Also the cart line list (.sh-cart)
   used in the drawer and on the cart page. */

.sh-drawer {
  --sh-drawer-from: 100%;
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  inline-size: min(440px, 100vw);
  max-inline-size: 100vw;
  block-size: 100dvh;
  max-block-size: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sh-surface);
  color: var(--sh-body);
  box-shadow: var(--sh-shadow-pop);
}

:where([dir="rtl"]) .sh-drawer {
  --sh-drawer-from: -100%;
}

.sh-drawer::backdrop {
  background: var(--sh-scrim);
}

.sh-drawer[open] {
  animation: sh-drawer-in var(--sh-dur-slow) var(--sh-ease-out);
}

@keyframes sh-drawer-in {
  from {
    transform: translateX(var(--sh-drawer-from));
  }
}

.sh-drawer__panel {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

/* Static preview of the panel for docs and kitchen sinks */
.sh-drawer__panel--static {
  max-inline-size: 440px;
  block-size: auto;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow-lift);
  overflow: hidden;
}

.sh-drawer__head {
  display: flex;
  align-items: center;
  gap: var(--sh-space-3);
  padding: var(--sh-space-4) var(--sh-space-4) var(--sh-space-4) var(--sh-space-6);
  border-block-end: 1px solid var(--sh-hair);
}

.sh-drawer__title {
  font-size: var(--sh-fs-headline);
}

.sh-drawer__count {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-drawer__close {
  margin-inline-start: auto;
}

.sh-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sh-space-2) var(--sh-space-6);
}

.sh-drawer__foot {
  display: grid;
  gap: var(--sh-space-3);
  padding: var(--sh-space-5) var(--sh-space-6) var(--sh-space-6);
  border-block-start: 1px solid var(--sh-hair);
  background: var(--sh-surface);
}

.sh-drawer__totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
}

.sh-drawer__totals dt {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-drawer__totals dd {
  margin: 0;
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.5rem;
  font-variant-numeric: lining-nums;
}

.sh-drawer__note {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

/* Cart lines */
.sh-cart {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-cart__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--sh-space-4);
  align-items: start;
  padding-block: var(--sh-space-4);
  border-block-end: 1px solid var(--sh-hair);
}

.sh-cart__item:last-child {
  border-block-end: 0;
}

.sh-cart__thumb {
  display: flex;
  align-items: flex-end;
  block-size: 80px;
  padding-block-start: 8px;
  border-radius: var(--sh-radius-sm);
  background: var(--sh-bay);
  overflow: hidden;
}

.sh-cart__thumb > .sh-shelf {
  inline-size: 100%;
  padding-inline: 0;
  --sh-plank-depth: 6px;
  --sh-plank-size: 2px;
}

.sh-cart__info {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

.sh-cart__name {
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.125rem;
  line-height: 1.25;
}

.sh-cart__name a {
  color: inherit;
  text-decoration: none;
}

.sh-cart__name a:hover {
  text-decoration: underline;
  text-decoration-color: var(--sh-accent);
}

.sh-cart__meta {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  line-height: 1.45;
}

.sh-cart__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sh-space-4);
  margin-block-start: var(--sh-space-2);
}

.sh-cart__remove {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--sh-hair-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.sh-cart__remove:hover {
  text-decoration-color: var(--sh-accent);
}

.sh-cart__price {
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.125rem;
  font-variant-numeric: lining-nums;
  text-align: end;
}

.sh-cart__was {
  display: block;
  color: var(--sh-muted);
  font-family: var(--sh-font-sans);
  font-size: var(--sh-fs-meta);
}

/* Cart page: roomier lines */
.sh-cart--page .sh-cart__item {
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: var(--sh-space-5);
  padding-block: var(--sh-space-6);
}

.sh-cart--page .sh-cart__thumb {
  block-size: 120px;
  padding-block-start: 12px;
}

.sh-cart--page .sh-cart__thumb .sh-cover {
  --sh-cover-w: 58px;
}

.sh-cart--page .sh-cart__name {
  font-size: var(--sh-fs-card);
}

@media (max-width: 559px) {
  .sh-cart--page .sh-cart__item {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .sh-cart--page .sh-cart__thumb {
    block-size: 96px;
  }

  .sh-cart--page .sh-cart__thumb .sh-cover {
    --sh-cover-w: 44px;
  }

  .sh-cart--page .sh-cart__price {
    grid-column: 2;
    text-align: start;
  }
}

@media (pointer: coarse) {
  .sh-cart__remove {
    min-block-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-drawer[open] {
    animation: none;
  }
}

/* ---- checkout-summary ---- */
/* Checkout summary: the lines, a coupon field with every state, the taxes note and the total in serif. */

.sh-summary {
  display: grid;
  gap: var(--sh-space-5);
  padding: var(--sh-space-6);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
}

@media (min-width: 960px) {
  .sh-summary--sticky {
    position: sticky;
    inset-block-start: calc(var(--sh-nav-h) + var(--sh-space-5));
  }
}

.sh-summary__title {
  font-size: var(--sh-fs-headline);
}

.sh-summary__lines {
  display: grid;
  gap: var(--sh-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-summary__line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--sh-space-3);
  align-items: center;
}

.sh-summary__thumb {
  display: flex;
  align-items: flex-end;
  block-size: 56px;
  padding-block-start: 6px;
  border-radius: var(--sh-radius-sm);
  background: var(--sh-bay);
  overflow: hidden;
}

.sh-summary__thumb > .sh-shelf {
  inline-size: 100%;
  padding-inline: 0;
  --sh-plank-depth: 5px;
  --sh-plank-size: 2px;
}

.sh-summary__thumb .sh-cover {
  --sh-cover-w: 30px;
}

.sh-summary__info {
  display: grid;
  min-inline-size: 0;
}

.sh-summary__name {
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.3;
}

.sh-summary__meta {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-summary__price {
  color: var(--sh-ink);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* Coupon */
.sh-coupon {
  display: grid;
  gap: 6px;
  padding-block: var(--sh-space-4);
  border-block: 1px solid var(--sh-hair);
}

.sh-coupon__row {
  display: flex;
  gap: var(--sh-space-2);
}

.sh-coupon__row > .sh-input {
  flex: 1;
  min-inline-size: 0;
  font-family: var(--sh-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sh-coupon__applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-2);
}

.sh-coupon__code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px dashed var(--sh-ok);
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-ok-soft);
  color: var(--sh-ok);
  font-family: var(--sh-font-mono);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
}

.sh-coupon__remove {
  min-block-size: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Totals */
.sh-summary__totals {
  display: grid;
  gap: var(--sh-space-2);
  margin: 0;
  font-size: var(--sh-fs-small);
}

.sh-summary__totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sh-space-4);
}

.sh-summary__totals dt {
  color: var(--sh-muted);
}

.sh-summary__totals dd {
  margin: 0;
  color: var(--sh-ink);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.sh-summary__discount dt,
.sh-summary__discount dd {
  color: var(--sh-ok);
  font-weight: var(--sh-weight-semibold);
}

.sh-summary__tax dd {
  max-inline-size: 22ch;
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-summary__total {
  margin-block-start: var(--sh-space-2);
  padding-block-start: var(--sh-space-4);
  border-block-start: 1px solid var(--sh-hair);
}

.sh-summary__total dt {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-summary__total dd {
  font-family: var(--sh-font-serif);
  font-size: var(--sh-fs-headline);
  font-variant-numeric: lining-nums;
}

.sh-summary__note {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

@media (pointer: coarse) {
  .sh-coupon__remove {
    min-block-size: 44px;
  }
}

/* ---- order-confirmation ---- */
/* Order confirmation: a sage mark, a thank-you in serif, the order facts, and the new things standing on your shelf. */

.sh-confirm {
  display: grid;
  gap: var(--sh-space-6);
}

.sh-confirm__head {
  display: grid;
  gap: var(--sh-space-4);
  max-inline-size: 720px;
}

.sh-confirm__mark {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--sh-radius-sm);
  background: var(--sh-ok-soft);
  color: var(--sh-ok);
  box-shadow: inset 0 -3px 0 var(--sh-cover-edge);
}

.sh-confirm__title {
  font-family: var(--sh-font-serif);
  font-size: var(--sh-fs-page);
  font-weight: var(--sh-weight-regular);
  line-height: var(--sh-lh-title);
  letter-spacing: var(--sh-track-title);
}

.sh-confirm__lede {
  color: var(--sh-muted);
  font-size: var(--sh-fs-lede);
}

.sh-confirm__meta {
  padding: var(--sh-space-5) var(--sh-space-6);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
}

.sh-confirm__shelf {
  padding: var(--sh-space-8) var(--sh-space-5) 0;
  border-radius: var(--sh-radius-card);
  background: var(--sh-bay);
  overflow: hidden;
}

.sh-confirm__shelf > .sh-shelf {
  margin-inline: calc(var(--sh-space-5) * -1);
  margin-block-end: 52px;
}

.sh-confirm__shelf .sh-shelf__talker {
  border-color: var(--sh-ok);
  background: var(--sh-ok-soft);
  color: var(--sh-ok);
}

.sh-confirm__next {
  display: grid;
  gap: var(--sh-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sh-step;
}

@media (min-width: 900px) {
  .sh-confirm__next {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sh-space-6);
  }
}

.sh-confirm__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sh-space-3);
  counter-increment: sh-step;
}

.sh-confirm__step::before {
  content: counter(sh-step);
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-bay);
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
}

.sh-confirm__step-title {
  display: block;
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-confirm__step-text {
  display: block;
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
}

/* ---- prose ---- */
/* Prose: long-form articles. 18px Familjen Grotesk at 68 characters, serif h2s, square bullets like tiny
   objects, links underlined in tomato, a short plank for the section break. */

.sh-prose {
  max-inline-size: 68ch;
  color: var(--sh-body);
  font-size: var(--sh-fs-prose);
  line-height: 1.7;
  hanging-punctuation: first;
}

.sh-prose > * + * {
  margin-block-start: 1.15em;
}

.sh-prose > :first-child {
  margin-block-start: 0;
}

.sh-prose h2 {
  margin-block-start: 2.2em;
  font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
  scroll-margin-block-start: calc(var(--sh-nav-h) + var(--sh-space-6));
}

.sh-prose h3 {
  margin-block-start: 1.8em;
  font-size: 1.3125rem;
  scroll-margin-block-start: calc(var(--sh-nav-h) + var(--sh-space-6));
}

.sh-prose h2 + *,
.sh-prose h3 + * {
  margin-block-start: 0.6em;
}

.sh-prose a {
  color: var(--sh-ink);
  text-decoration-color: var(--sh-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sh-prose a:hover {
  text-decoration-color: var(--sh-ink);
}

.sh-prose ul,
.sh-prose ol {
  padding-inline-start: 1.5em;
}

.sh-prose li + li {
  margin-block-start: 0.45em;
}

.sh-prose ul {
  list-style: none;
}

.sh-prose ul > li {
  position: relative;
}

.sh-prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.1em;
  inset-block-start: 0.68em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 1px;
  background: var(--sh-plank);
}

.sh-prose ol > li::marker {
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
}

.sh-prose blockquote {
  padding-inline-start: var(--sh-space-6);
  border-inline-start: 3px solid var(--sh-plank);
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 1.375rem;
  line-height: 1.4;
}

.sh-prose figure {
  margin-block: 2em;
}

.sh-prose figcaption {
  margin-block-start: var(--sh-space-3);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  line-height: 1.5;
}

.sh-prose__plate {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 220px;
  padding-block-start: var(--sh-space-7);
  border-radius: var(--sh-radius-card);
  background: var(--sh-bay);
  overflow: hidden;
}

.sh-prose hr {
  inline-size: 72px;
  block-size: 3px;
  margin: 2.6em auto;
  border: 0;
  border-radius: 1px;
  background: var(--sh-plank);
  box-shadow: 0 -6px 0 var(--sh-plank-top);
}

.sh-prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--sh-fs-small);
  font-variant-numeric: tabular-nums;
}

.sh-prose th,
.sh-prose td {
  padding: 10px 12px;
  border-block-end: 1px solid var(--sh-hair);
  text-align: start;
}

.sh-prose thead th {
  border-block-end-color: var(--sh-hair-strong);
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
}

.sh-prose__table {
  overflow-x: auto;
}

.sh-prose code {
  font-size: 0.86em;
}

.sh-prose kbd {
  padding: 1px 6px;
  border: 1px solid var(--sh-hair-strong);
  border-block-end-width: 2px;
  border-radius: var(--sh-radius-sm);
  background: var(--sh-surface);
  color: var(--sh-ink);
}

.sh-prose__lede {
  color: var(--sh-ink);
  font-size: 1.3125rem;
  line-height: 1.55;
}

/* Article layout: header, table of contents and body. Phones read head, contents, body in that order;
   from 1024px the contents move into a sticky rail beside the body. */
.sh-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sh-space-7);
}

.sh-article__head {
  display: grid;
  gap: var(--sh-space-4);
  max-inline-size: 760px;
}

@media (min-width: 1024px) {
  .sh-article {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--sh-space-9);
    row-gap: var(--sh-space-8);
  }

  .sh-article__head,
  .sh-article__body {
    grid-column: 2;
  }

  .sh-article__toc {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    inset-block-start: calc(var(--sh-nav-h) + var(--sh-space-6));
    align-self: start;
  }
}

@media (max-width: 559px) {
  .sh-prose {
    font-size: var(--sh-fs-body);
  }
}

/* ---- callout ---- */
/* Callout: a tinted note inside an article or a help page, with one icon and a short title. */

.sh-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sh-space-3);
  padding: var(--sh-space-4) var(--sh-space-5);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-bay);
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
  line-height: 1.6;
}

.sh-callout > svg {
  margin-block-start: 3px;
  color: var(--sh-ink);
}

.sh-callout__body {
  display: grid;
  gap: 4px;
}

.sh-callout__title {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-callout--tip {
  background: var(--sh-ok-soft);
}

.sh-callout--tip > svg {
  color: var(--sh-ok);
}

.sh-callout--note {
  background: var(--sh-info-soft);
}

.sh-callout--note > svg {
  color: var(--sh-info);
}

.sh-callout--warn {
  background: var(--sh-warn-soft);
}

.sh-callout--warn > svg {
  color: var(--sh-warn);
}

.sh-callout a {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

/* ---- toc ---- */
/* Table of contents: a quiet list beside the article; the current section gets a small plank marker. */

.sh-toc {
  display: grid;
  gap: var(--sh-space-3);
}

@media (min-width: 1024px) {
  .sh-toc--sticky {
    position: sticky;
    inset-block-start: calc(var(--sh-nav-h) + var(--sh-space-6));
  }
}

.sh-toc__title {
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
}

.sh-toc__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  border-inline-start: 1px solid var(--sh-hair);
  list-style: none;
}

.sh-toc__link {
  position: relative;
  display: block;
  padding: 6px 0 6px var(--sh-space-4);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
  line-height: 1.4;
  text-decoration: none;
}

.sh-toc__link:hover {
  color: var(--sh-ink);
}

.sh-toc__link[aria-current="true"] {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-toc__link[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset-inline-start: -2px;
  inset-block: 6px;
  inline-size: 3px;
  border-radius: 2px;
  background: var(--sh-plank);
}

.sh-toc__list .sh-toc__list {
  border: 0;
}

.sh-toc__list .sh-toc__list .sh-toc__link {
  padding-inline-start: var(--sh-space-7);
}

@media (pointer: coarse) {
  .sh-toc__link {
    padding-block: 11px;
  }
}

/* ---- byline ---- */
/* Byline: who wrote it, their role, the date and the reading time. */

.sh-byline {
  display: flex;
  align-items: center;
  gap: var(--sh-space-3);
}

.sh-byline__text {
  display: grid;
  gap: 2px;
}

.sh-byline__name {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.3;
}

.sh-byline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sh-space-2);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
}

.sh-byline__meta > * + *::before {
  content: "/";
  margin-inline-end: var(--sh-space-2);
  color: var(--sh-hair-strong);
}

.sh-byline--split {
  justify-content: space-between;
  flex-wrap: wrap;
  padding-block: var(--sh-space-4);
  border-block: 1px solid var(--sh-hair);
}

.sh-byline__who {
  display: flex;
  align-items: center;
  gap: var(--sh-space-3);
}

/* ---- timeline ---- */
/* Timeline: changelog and roadmap entries on a vertical hairline, each marked by a small square object. */

.sh-timeline {
  position: relative;
  display: grid;
  gap: var(--sh-space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-timeline::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 7px;
  inline-size: 1px;
  background: var(--sh-hair-strong);
}

.sh-timeline__entry {
  position: relative;
  display: grid;
  gap: var(--sh-space-2);
  padding-inline-start: var(--sh-space-8);
}

.sh-timeline__entry::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 5px;
  inline-size: 15px;
  block-size: 15px;
  border-radius: var(--sh-radius-object);
  background: var(--sh-cover-bg, var(--sh-cover-3));
  box-shadow: inset 0 0 0 1px var(--sh-cover-edge), 0 0 0 4px var(--sh-canvas);
}

.sh-timeline__entry--next::before {
  background: var(--sh-canvas);
  box-shadow: inset 0 0 0 1.5px var(--sh-control), 0 0 0 4px var(--sh-canvas);
}

@media (min-width: 760px) {
  .sh-timeline__entry {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--sh-space-2) var(--sh-space-7);
  }

  .sh-timeline__date {
    grid-row: span 3;
  }
}

.sh-timeline__date {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  line-height: 1.6;
}

.sh-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sh-space-2) var(--sh-space-3);
}

.sh-timeline__title {
  font-size: var(--sh-fs-card);
}

.sh-timeline__text {
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
}

.sh-timeline__entry > .sh-checks {
  margin-block-start: var(--sh-space-2);
}

/* ---- alert ---- */
/* Alert: a page-level message with an icon, a title, one line and an optional action or dismiss. */

.sh-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sh-space-3);
  padding: var(--sh-space-4) var(--sh-space-4) var(--sh-space-4) var(--sh-space-5);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-surface);
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
  line-height: 1.5;
}

.sh-alert > svg {
  margin-block-start: 2px;
}

.sh-alert__body {
  display: grid;
  gap: 2px;
}

.sh-alert__title {
  color: var(--sh-ink);
  font-weight: var(--sh-weight-semibold);
}

.sh-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sh-space-2);
  margin-block-start: var(--sh-space-2);
}

.sh-alert__close {
  display: inline-grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  margin: -6px -6px 0 0;
  border: 0;
  border-radius: var(--sh-radius-sm);
  background: transparent;
  color: var(--sh-ink);
  cursor: pointer;
}

.sh-alert__close:hover {
  background: var(--sh-cover-edge);
}

.sh-alert--ok {
  border-color: transparent;
  background: var(--sh-ok-soft);
}

.sh-alert--ok > svg {
  color: var(--sh-ok);
}

.sh-alert--warn {
  border-color: transparent;
  background: var(--sh-warn-soft);
}

.sh-alert--warn > svg {
  color: var(--sh-warn);
}

.sh-alert--danger {
  border-color: transparent;
  background: var(--sh-danger-soft);
}

.sh-alert--danger > svg {
  color: var(--sh-danger);
}

.sh-alert--info {
  border-color: transparent;
  background: var(--sh-info-soft);
}

.sh-alert--info > svg {
  color: var(--sh-info);
}

@media (pointer: coarse) {
  .sh-alert__close {
    inline-size: 44px;
    block-size: 44px;
  }
}

/* ---- toast ---- */
/* Toast: a small espresso note that rises from the bottom, says what happened, and offers one action. */

.sh-toasts {
  position: fixed;
  inset-inline: var(--sh-space-4);
  inset-block-end: var(--sh-space-4);
  z-index: 60;
  display: grid;
  justify-items: center;
  gap: var(--sh-space-2);
  pointer-events: none;
}

.sh-toast {
  display: flex;
  align-items: center;
  gap: var(--sh-space-3);
  inline-size: min(100%, 440px);
  padding: var(--sh-space-3) var(--sh-space-3) var(--sh-space-3) var(--sh-space-4);
  border-radius: var(--sh-radius-panel);
  background: var(--sh-invert);
  color: var(--sh-invert-ink);
  box-shadow: var(--sh-shadow-pop);
  font-size: var(--sh-fs-small);
  line-height: 1.4;
  pointer-events: auto;
  animation: sh-toast-in var(--sh-dur-slow) var(--sh-ease-out);
}

.sh-toast > svg {
  flex: none;
}

.sh-toast__text {
  flex: 1;
  min-inline-size: 0;
}

.sh-toast__action {
  flex: none;
  color: var(--sh-invert-ink);
  font-weight: var(--sh-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--sh-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.sh-toast__action:hover {
  color: var(--sh-invert-ink);
}

.sh-toast__close {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border: 0;
  border-radius: var(--sh-radius-sm);
  background: transparent;
  color: var(--sh-invert-ink);
  cursor: pointer;
}

.sh-toast__close:hover {
  background: var(--sh-invert-muted);
  color: var(--sh-invert);
}

.sh-toast__close:focus-visible,
.sh-toast__action:focus-visible {
  outline: 3px solid var(--sh-invert-ink);
  outline-offset: 2px;
}

.sh-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--sh-dur) var(--sh-ease), transform var(--sh-dur) var(--sh-ease);
}

/* Static toast for previews */
.sh-toast--static {
  animation: none;
}

@keyframes sh-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (pointer: coarse) {
  .sh-toast__close {
    inline-size: 44px;
    block-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-toast {
    animation: none;
  }

  .sh-toast.is-leaving {
    transform: none;
    transition: none;
  }
}

/* ---- dialog ---- */
/* Dialog: a native modal <dialog> for confirmations and short reading (license terms). */

.sh-dialog {
  inline-size: min(520px, calc(100vw - 32px));
  max-block-size: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
  color: var(--sh-body);
  box-shadow: var(--sh-shadow-pop);
}

.sh-dialog::backdrop {
  background: var(--sh-scrim);
}

.sh-dialog[open] {
  animation: sh-dialog-in var(--sh-dur) var(--sh-ease-out);
}

@keyframes sh-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

.sh-dialog__panel {
  display: grid;
  gap: var(--sh-space-4);
  padding: var(--sh-space-6);
}

.sh-dialog__panel--static {
  max-inline-size: 520px;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow-lift);
}

.sh-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sh-space-4);
}

.sh-dialog__title {
  color: var(--sh-ink);
  font-family: var(--sh-font-sans);
  font-size: var(--sh-fs-card);
  font-weight: var(--sh-weight-semibold);
  line-height: var(--sh-lh-snug);
  letter-spacing: 0;
}

.sh-dialog__close {
  margin: -8px -8px 0 0;
}

.sh-dialog__body {
  display: grid;
  gap: var(--sh-space-3);
  color: var(--sh-body);
  font-size: var(--sh-fs-small);
}

.sh-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sh-space-2);
  padding-block-start: var(--sh-space-2);
}

/* Destructive confirmation: the confirm button is outlined in danger, never filled with the buy color */
.sh-btn--danger {
  border-color: var(--sh-danger);
  background: var(--sh-surface);
  color: var(--sh-danger);
}

.sh-btn--danger:hover {
  border-color: var(--sh-danger);
  background: var(--sh-danger-soft);
  color: var(--sh-danger);
}

@media (prefers-reduced-motion: reduce) {
  .sh-dialog[open] {
    animation: none;
  }
}

/* ---- tooltip ---- */
/* Tooltip: a short espresso note above a small trigger. Shows on hover and on focus; Escape hides it. */

.sh-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.sh-tip__trigger {
  display: inline-grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sh-muted);
  cursor: help;
}

.sh-tip__trigger:hover {
  background: var(--sh-well);
  color: var(--sh-ink);
}

.sh-tip__term {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--sh-control);
  text-underline-offset: 4px;
  cursor: help;
}

.sh-tip__bubble {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  left: 50%;
  z-index: 30;
  display: none;
  inline-size: max-content;
  max-inline-size: min(260px, calc(100vw - 32px));
  padding: var(--sh-space-2) var(--sh-space-3);
  border-radius: var(--sh-radius-sm);
  background: var(--sh-invert);
  color: var(--sh-invert-ink);
  box-shadow: var(--sh-shadow-pop);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-medium);
  line-height: 1.45;
  text-align: start;
  transform: translateX(-50%);
  pointer-events: none;
}

.sh-tip__bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-block-start-color: var(--sh-invert);
  transform: translateX(-50%);
}

.sh-tip:hover .sh-tip__bubble,
.sh-tip:focus-within .sh-tip__bubble {
  display: block;
  animation: sh-tip-in var(--sh-dur-fast) var(--sh-ease);
}

.sh-tip.is-dismissed .sh-tip__bubble {
  display: none;
}

@keyframes sh-tip-in {
  from {
    opacity: 0;
  }
}

/* Start-aligned bubble for triggers near the start edge on phones */
.sh-tip--start .sh-tip__bubble {
  left: 0;
  transform: none;
}

.sh-tip--start .sh-tip__bubble::after {
  left: 14px;
}

@media (pointer: coarse) {
  .sh-tip__trigger {
    inline-size: 44px;
    block-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-tip:hover .sh-tip__bubble,
  .sh-tip:focus-within .sh-tip__bubble {
    animation: none;
  }
}

/* ---- empty-state ---- */
/* Empty state: an empty shelf, with dashed slots where things will stand, one sentence and one way forward. */

.sh-empty {
  display: grid;
  justify-items: center;
  gap: var(--sh-space-3);
  max-inline-size: 480px;
  margin-inline: auto;
  padding-block: var(--sh-space-8);
  text-align: center;
}

.sh-empty__shelf {
  inline-size: min(100%, 300px);
  margin-block-end: var(--sh-space-4);
}

.sh-empty__shelf > .sh-shelf {
  --sh-slot-w: 56px;
  --sh-slot-h: 74px;
}

.sh-empty__title {
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: var(--sh-fs-headline);
  font-weight: var(--sh-weight-regular);
  line-height: var(--sh-lh-title);
}

.sh-empty__text {
  color: var(--sh-muted);
}

.sh-empty .sh-actions {
  justify-content: center;
  margin-block-start: var(--sh-space-3);
}

.sh-empty .sh-search {
  inline-size: 100%;
  margin-block-start: var(--sh-space-3);
  text-align: start;
}
.sh-empty--compact {
  padding-block: var(--sh-space-6);
}

.sh-empty--compact .sh-empty__title {
  font-size: var(--sh-fs-card);
}

.sh-empty--compact .sh-empty__shelf {
  inline-size: min(100%, 200px);
}

.sh-empty--compact .sh-empty__shelf > .sh-shelf {
  --sh-slot-w: 40px;
  --sh-slot-h: 54px;
}

.sh-empty--hero {
  max-inline-size: 600px;
}

.sh-empty--hero .sh-empty__shelf {
  inline-size: min(100%, 440px);
}

.sh-empty--hero .sh-empty__shelf > .sh-shelf {
  --sh-slot-w: 88px;
  --sh-slot-h: 118px;
}

.sh-empty--panel {
  max-inline-size: none;
  padding: var(--sh-space-9) var(--sh-space-6);
  border: 1px dashed var(--sh-hair-strong);
  border-radius: var(--sh-radius-card);
}

/* ---- skeleton ---- */
/* Skeleton: placeholder blocks that pulse gently while content loads. Cards keep their cubby shape. */

.sh-skel {
  display: block;
  block-size: 14px;
  border-radius: var(--sh-radius-sm);
  background: var(--sh-bay);
  animation: sh-skel-pulse 1.6s ease-in-out infinite;
}

.sh-skel--title {
  inline-size: 70%;
  block-size: 20px;
}

.sh-skel--text {
  inline-size: 100%;
}

.sh-skel--short {
  inline-size: 45%;
}

.sh-skel--btn {
  inline-size: 84px;
  block-size: 40px;
  border-radius: var(--sh-radius-btn);
}

.sh-skel--price {
  inline-size: 48px;
  block-size: 24px;
}

.sh-skel-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
  overflow: hidden;
}

.sh-skel-card__bay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 6 / 5;
  padding-block-start: var(--sh-space-6);
  background: var(--sh-well);
}

.sh-skel-card__bay > .sh-shelf {
  --sh-slot-w: 40%;
  --sh-slot-h: 62%;
  block-size: 100%;
}

.sh-skel-card__bay .sh-shelf__slot {
  border-color: var(--sh-hair-strong);
  animation: sh-skel-pulse 1.6s ease-in-out infinite;
}

.sh-skel-card__body {
  display: grid;
  gap: var(--sh-space-3);
  padding: var(--sh-space-5);
}

.sh-skel-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--sh-space-2);
}

@keyframes sh-skel-pulse {
  50% {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-skel,
  .sh-skel-card__bay .sh-shelf__slot {
    animation: none;
  }
}

/* ---- progress ---- */
/* Progress: a bar with its label and value in words, and checkout steps marked by small square objects. */

.sh-progress {
  display: grid;
  gap: var(--sh-space-2);
}

.sh-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sh-space-3);
}

.sh-progress__label {
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
}

.sh-progress__value {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.sh-progress__track {
  position: relative;
  block-size: 10px;
  overflow: hidden;
  border-radius: var(--sh-radius-object);
  background: var(--sh-bay);
  box-shadow: inset 0 0 0 1px var(--sh-hair);
}

.sh-progress__bar {
  display: block;
  block-size: 100%;
  border-radius: var(--sh-radius-object);
  background: var(--sh-accent);
  transition: inline-size var(--sh-dur-slow) var(--sh-ease-out);
}

.sh-progress--ok .sh-progress__bar {
  background: var(--sh-ok);
}

.sh-progress--busy .sh-progress__bar {
  inline-size: 35%;
  animation: sh-progress-busy 1.4s var(--sh-ease) infinite;
}

@keyframes sh-progress-busy {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(300%);
  }
}

.sh-progress__hint {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

/* Steps */
.sh-steps {
  display: flex;
  align-items: center;
  gap: var(--sh-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sh-steps;
}

.sh-steps__item {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--sh-space-2);
  min-inline-size: 0;
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  counter-increment: sh-steps;
}

.sh-steps__item:last-child {
  flex: none;
}

.sh-steps__item::after {
  content: "";
  flex: 1;
  min-inline-size: 12px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--sh-hair-strong);
}

.sh-steps__item:last-child::after {
  content: none;
}

.sh-steps__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  border: 1.5px solid var(--sh-control);
  border-radius: var(--sh-radius-object-lg);
  background: var(--sh-surface);
  color: var(--sh-muted);
  font-size: var(--sh-fs-tag);
  font-weight: var(--sh-weight-bold);
}

.sh-steps__mark::before {
  content: counter(sh-steps);
}

.sh-steps__item.is-done {
  color: var(--sh-ink);
}

.sh-steps__item.is-done .sh-steps__mark {
  border-color: var(--sh-ok);
  background: var(--sh-ok-soft);
  color: var(--sh-ok);
}

.sh-steps__item.is-done .sh-steps__mark::before {
  content: "";
  inline-size: 5px;
  block-size: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.sh-steps__item.is-done::after {
  background: var(--sh-ok);
}

.sh-steps__item[aria-current="step"] {
  color: var(--sh-ink);
}

.sh-steps__item[aria-current="step"] .sh-steps__mark {
  border-color: var(--sh-accent);
  background: var(--sh-accent);
  color: var(--sh-accent-ink);
}

@media (max-width: 559px) {
  .sh-steps__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sh-steps__item[aria-current="step"] .sh-steps__label {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip: auto;
  }
}

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

  .sh-progress--busy .sh-progress__bar {
    animation: none;
    inline-size: 100%;
    opacity: 0.6;
  }
}

/* ---- chart ---- */
/* Chart: inline SVG bar, line and donut charts that read only the viz tokens. Labels live in HTML so they
   stay 13px or larger at every width; every chart has a data table behind a disclosure. */

.sh-chart {
  display: grid;
  gap: var(--sh-space-4);
  margin: 0;
  padding: var(--sh-space-6);
  border: 1px solid var(--sh-hair);
  border-radius: var(--sh-radius-card);
  background: var(--sh-surface);
}

.sh-chart__head {
  display: grid;
  gap: 2px;
}

.sh-chart__title {
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
}

.sh-chart__sub {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-chart__plot {
  position: relative;
}

.sh-chart__svg {
  inline-size: 100%;
  block-size: 180px;
  overflow: visible;
}

.sh-chart__grid {
  stroke: var(--sh-hair);
  stroke-width: 1;
}

.sh-chart__base {
  stroke: var(--sh-plank);
  stroke-width: 2;
}

.sh-chart__bar--1 { fill: var(--sh-viz-1); }
.sh-chart__bar--2 { fill: var(--sh-viz-2); }
.sh-chart__bar--3 { fill: var(--sh-viz-3); }
.sh-chart__bar--4 { fill: var(--sh-viz-4); }
.sh-chart__bar--5 { fill: var(--sh-viz-5); }
.sh-chart__bar--6 { fill: var(--sh-viz-6); }

.sh-chart__line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sh-chart__line--1 { stroke: var(--sh-viz-1); }
.sh-chart__line--2 { stroke: var(--sh-viz-2); stroke-dasharray: 6 5; }
.sh-chart__line--3 { stroke: var(--sh-viz-3); stroke-dasharray: 2 4; }

.sh-chart__arc {
  fill: none;
  stroke-width: 6;
}

.sh-chart__arc--1 { stroke: var(--sh-viz-1); }
.sh-chart__arc--2 { stroke: var(--sh-viz-2); }
.sh-chart__arc--3 { stroke: var(--sh-viz-3); }
.sh-chart__arc--4 { stroke: var(--sh-viz-4); }
.sh-chart__arc--5 { stroke: var(--sh-viz-5); }
.sh-chart__arc--6 { stroke: var(--sh-viz-6); }

.sh-chart__track {
  fill: none;
  stroke: var(--sh-well);
  stroke-width: 6;
}

/* HTML axis: one cell per bar or point, aligned with the SVG columns */
.sh-chart__axis {
  display: grid;
  grid-template-columns: repeat(var(--sh-chart-n, 4), minmax(0, 1fr));
  margin: 0;
  padding: var(--sh-space-2) 0 0;
  list-style: none;
  color: var(--sh-muted);
  font-size: var(--sh-fs-tag);
  font-weight: var(--sh-weight-medium);
  text-align: center;
}

.sh-chart__axis strong {
  display: block;
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 559px) {
  .sh-chart__axis--months > li:nth-child(even) {
    visibility: hidden;
  }
}

/* Legend */
.sh-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sh-space-2) var(--sh-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sh-fs-meta);
}

.sh-chart__key {
  display: inline-flex;
  align-items: center;
  gap: var(--sh-space-2);
  color: var(--sh-body);
}

.sh-chart__key strong {
  color: var(--sh-ink);
  font-variant-numeric: tabular-nums;
}

.sh-chart__swatch {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 2px;
  background: var(--sh-viz-1);
}

.sh-chart__swatch--2 { background: var(--sh-viz-2); }
.sh-chart__swatch--3 { background: var(--sh-viz-3); }
.sh-chart__swatch--4 { background: var(--sh-viz-4); }
.sh-chart__swatch--5 { background: var(--sh-viz-5); }
.sh-chart__swatch--6 { background: var(--sh-viz-6); }

.sh-chart__swatch--line {
  block-size: 3px;
  border-radius: 1px;
}

.sh-chart__swatch--dash {
  block-size: 3px;
  background: repeating-linear-gradient(90deg, var(--sh-viz-2) 0 4px, transparent 4px 7px);
}

/* Donut layout: ring and legend side by side */
.sh-chart__donut {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--sh-space-5);
}

@media (min-width: 560px) {
  .sh-chart__donut {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

.sh-chart__ring {
  position: relative;
  inline-size: 180px;
  block-size: 180px;
  margin-inline: auto;
}

.sh-chart__ring .sh-chart__svg {
  block-size: 100%;
  transform: rotate(-90deg);
}

.sh-chart__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.sh-chart__center strong {
  color: var(--sh-ink);
  font-family: var(--sh-font-serif);
  font-size: 2rem;
  font-weight: var(--sh-weight-regular);
  line-height: 1;
}

.sh-chart__center span {
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-chart__donut .sh-chart__legend {
  display: grid;
  gap: var(--sh-space-2);
}

.sh-chart__donut .sh-chart__key {
  justify-content: flex-start;
}

.sh-chart__donut .sh-chart__key strong {
  margin-inline-start: auto;
}

/* Data table fallback */
.sh-chart__data summary {
  color: var(--sh-ink);
  font-size: var(--sh-fs-meta);
  font-weight: var(--sh-weight-semibold);
  cursor: pointer;
}

.sh-chart__data table {
  inline-size: 100%;
  margin-block-start: var(--sh-space-3);
  border-collapse: collapse;
  font-size: var(--sh-fs-meta);
  font-variant-numeric: tabular-nums;
}

.sh-chart__data th,
.sh-chart__data td {
  padding: 6px 8px;
  border-block-end: 1px solid var(--sh-hair);
  text-align: start;
}

.sh-chart__data td:last-child,
.sh-chart__data th:last-child {
  text-align: end;
}

.sh-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sh-space-5);
}

@media (min-width: 960px) {
  .sh-charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sh-charts > .sh-chart--wide {
    grid-column: 1 / -1;
  }
}

/* ---- cta ---- */
/* CTA close: a large cubby on the bay color. Copy on the start side, a shelf of objects standing on the
   panel's own bottom edge on the end side. */

.sh-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sh-space-7);
  overflow: hidden;
  padding: var(--sh-space-8) var(--sh-space-6) 0;
  border-radius: var(--sh-radius-card);
  background: var(--sh-bay);
}

@media (min-width: 900px) {
  .sh-cta {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    gap: var(--sh-space-8);
    padding: var(--sh-space-10) var(--sh-space-10) 0;
  }
}

.sh-cta__copy {
  display: grid;
  justify-items: start;
  gap: var(--sh-space-4);
}

@media (min-width: 900px) {
  .sh-cta__copy {
    padding-block-end: var(--sh-space-10);
  }
}

.sh-cta__text {
  max-inline-size: 46ch;
  color: var(--sh-muted);
  font-size: var(--sh-fs-lede);
}

.sh-cta__actions {
  margin-block-start: var(--sh-space-2);
}

.sh-cta__shelf {
  margin-inline: calc(var(--sh-space-6) * -1);
}

@media (min-width: 900px) {
  .sh-cta__shelf {
    margin-inline: 0 calc(var(--sh-space-10) * -1);
  }
}

.sh-cta__shelf > .sh-shelf {
  --sh-plank-depth: 14px;
}

/* Centered: no shelf column, the shelf runs under the copy */
.sh-cta--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.sh-cta--center .sh-cta__copy {
  justify-items: center;
  padding-block-end: 0;
}

.sh-cta--center .sh-cta__shelf {
  inline-size: calc(100% + var(--sh-space-6) * 2);
}

@media (min-width: 900px) {
  .sh-cta--center .sh-cta__shelf {
    inline-size: calc(100% + var(--sh-space-10) * 2);
    margin-inline: calc(var(--sh-space-10) * -1);
  }
}

/* ---- footer ---- */
/* Footer: the bottom shelf. Category spines stand on a plank across the top, then the columns and a plain bar. */

.sh-footer {
  padding-block: var(--sh-space-8) var(--sh-space-7);
  background: var(--sh-canvas);
}

.sh-footer__shelf {
  margin-block-end: var(--sh-space-9);
}

.sh-footer__shelf .sh-shelf {
  padding-inline: var(--sh-space-2);
  --sh-plank-depth: 12px;
}

.sh-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sh-space-8);
}

@media (min-width: 720px) {
  .sh-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sh-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .sh-footer__grid {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: var(--sh-space-9);
  }

  .sh-footer__brand {
    grid-column: auto;
  }
}

.sh-footer__brand {
  display: grid;
  align-content: start;
  gap: var(--sh-space-4);
}

.sh-footer__about {
  max-inline-size: 40ch;
  color: var(--sh-muted);
}

.sh-footer__title {
  margin-block-end: var(--sh-space-3);
  color: var(--sh-ink);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-weight-semibold);
}

.sh-footer__links {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-footer__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  color: var(--sh-body);
  text-decoration: none;
}

.sh-footer__links a:hover {
  color: var(--sh-ink);
  text-decoration: underline;
  text-decoration-color: var(--sh-accent);
}

.sh-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-space-3) var(--sh-space-6);
  margin-block-start: var(--sh-space-9);
  padding-block-start: var(--sh-space-5);
  border-block-start: 1px solid var(--sh-hair);
  color: var(--sh-muted);
  font-size: var(--sh-fs-meta);
}

.sh-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sh-space-2) var(--sh-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-footer__legal a {
  color: var(--sh-muted);
}

.sh-footer__legal a:hover {
  color: var(--sh-ink);
}

@media (pointer: coarse) {
  .sh-footer__links a {
    min-block-size: 44px;
  }

  .sh-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}