:root {
  --catalog-ink: #142d39;
  --catalog-muted: #58707a;
  --catalog-canvas: #eef1ef;
  --catalog-card: #fffef9;
  --catalog-line: #b9c4c2;
  --catalog-orange: #d45d43;
  --catalog-yellow: #f0bd4f;
  --catalog-blue: #2d5968;
}

.shop-stage-hero {
  position: relative;
  overflow: hidden;
  color: #fffef9;
  background: var(--catalog-ink);
}

.shop-stage-hero--carry { background: #244d5b; }
.shop-stage-hero--settle {
  color: var(--catalog-ink);
  background: var(--catalog-yellow);
}

.shop-stage-hero .wrap {
  min-height: 350px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 64px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 48px;
}

.shop-stage-hero .breadcrumbs { color: #f8d989; }
.shop-stage-hero .breadcrumbs a { color: inherit; }
.shop-stage-hero--settle .breadcrumbs { color: #853a2a; }

.stage-manifest-code {
  margin: 0 0 16px;
  color: #f8d989;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.shop-stage-hero--settle .stage-manifest-code { color: #853a2a; }

.shop-stage-hero h1 {
  max-width: 850px;
  margin: 0 0 18px;
  font-size: clamp(3rem, 6.7vw, 5.9rem);
  line-height: .92;
  letter-spacing: -.052em;
}

.stage-hero-copy > p:last-child {
  max-width: 760px;
  margin: 0;
  color: #dce7e8;
  font-size: .98rem;
  line-height: 1.65;
}

.shop-stage-hero--settle .stage-hero-copy > p:last-child { color: #294550; }

.stage-hero-mark {
  position: relative;
  min-height: 230px;
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  color: inherit;
  border: 1px solid rgb(255 255 255 / 34%);
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 6%) 0 8px, transparent 8px 16px);
}

.shop-stage-hero--settle .stage-hero-mark {
  border-color: rgb(20 45 57 / 28%);
  background:
    repeating-linear-gradient(-45deg, rgb(20 45 57 / 6%) 0 8px, transparent 8px 16px);
}

.stage-hero-mark::before,
.stage-hero-mark::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  height: 1px;
  background: currentColor;
  opacity: .34;
}

.stage-hero-mark::before { top: 29px; }
.stage-hero-mark::after { bottom: 29px; }

.stage-hero-mark span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 6.8rem;
  font-weight: 900;
  line-height: .8;
}

.stage-hero-mark strong {
  margin-top: 21px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .74rem;
  letter-spacing: .25em;
}

.stage-rail-wrap {
  position: static;
  top: auto;
  z-index: auto;
  background: #fffef9;
  border-bottom: 1px solid var(--catalog-line);
  backdrop-filter: none;
}

.stage-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stage-rail a {
  position: relative;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-content: center;
  padding: 12px 24px;
  color: var(--catalog-ink);
  border-right: 1px solid var(--catalog-line);
  text-decoration: none;
}

.stage-rail a:first-child { border-left: 1px solid var(--catalog-line); }

.stage-rail a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 4px;
  background: transparent;
}

.stage-rail a:hover,
.stage-rail a:focus-visible { background: #f3f0e8; }
.stage-rail a.active::after { background: var(--catalog-orange); }

.stage-rail span {
  grid-row: 1 / 3;
  align-self: center;
  color: #9a3e2c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  font-weight: 900;
}

.stage-rail strong {
  align-self: end;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stage-rail small {
  color: var(--catalog-muted);
  font-size: .65rem;
}

.moving-catalog {
  padding-top: 70px;
  padding-bottom: 78px;
  background:
    linear-gradient(90deg, transparent 49.9%, rgb(20 45 57 / 3%) 50%, transparent 50.1%) 0 0 / 38px 38px,
    linear-gradient(rgb(20 45 57 / 3%) 49.9%, transparent 50.1%) 0 0 / 38px 38px,
    var(--catalog-canvas);
  scroll-margin-top: 22px;
}

.catalog-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
  gap: 64px;
  align-items: end;
  margin-bottom: 46px;
}

.catalog-kicker {
  margin: 0 0 14px;
  color: #9a3e2c;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.catalog-intro h2 {
  max-width: 700px;
  margin: 0;
  color: var(--catalog-ink);
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  line-height: .94;
  letter-spacing: -.045em;
}

.catalog-intro > p {
  margin: 0;
  color: var(--catalog-muted);
  font-size: .82rem;
  line-height: 1.7;
}

.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  border: 1px solid var(--catalog-ink);
  background: var(--catalog-card);
  box-shadow: 7px 7px 0 var(--catalog-ink);
}

.catalog-search {
  display: grid;
  gap: 8px;
  padding: 18px 20px 20px;
  border-right: 1px solid var(--catalog-ink);
}

.catalog-search > span:first-child,
.catalog-result > span,
.catalog-page-select > span {
  color: var(--catalog-muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.catalog-search__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  min-height: 50px;
  border-bottom: 2px solid var(--catalog-ink);
}

.catalog-search input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0;
  color: var(--catalog-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: 750 1rem/1.2 "Segoe UI", Arial, sans-serif;
}

.catalog-search input::placeholder { color: #829298; }

.catalog-search__field b {
  display: grid;
  height: 48px;
  place-items: center;
  color: var(--catalog-card);
  background: var(--catalog-orange);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
}

.catalog-result {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px 24px;
  color: var(--catalog-card);
  background: var(--catalog-ink);
}

.catalog-result > span { color: #f4c86c; }
.catalog-result strong { font: 750 .9rem/1.4 "Segoe UI", Arial, sans-serif; }

.catalog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 34px;
}

.catalog-categories button {
  min-height: 38px;
  padding: 0 15px;
  color: var(--catalog-ink);
  background: #fffef9;
  border: 1px solid var(--catalog-line);
  font: 800 .69rem/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.catalog-categories button:hover { border-color: var(--catalog-ink); }

.catalog-categories button.active {
  color: #fffef9;
  background: var(--catalog-blue);
  border-color: var(--catalog-blue);
}

.catalog-search input:focus-visible,
.catalog-categories button:focus-visible,
.catalog-pagination-bar button:focus-visible,
.catalog-page-select select:focus-visible,
.supply-card__actions a:focus-visible {
  outline: 3px solid var(--catalog-yellow);
  outline-offset: 3px;
}

.supply-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.supply-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: var(--catalog-card);
  border: 1px solid var(--catalog-line);
  box-shadow: 0 9px 24px rgb(20 45 57 / 8%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.supply-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 34px rgb(20 45 57 / 14%);
}

.supply-card__visual {
  position: relative;
  min-height: 250px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.6%, rgb(20 45 57 / 5%) 50%, transparent 50.4%) 0 0 / 28px 28px,
    linear-gradient(rgb(20 45 57 / 5%) 49.6%, transparent 50.4%) 0 0 / 28px 28px,
    #f7f6f0;
  border-bottom: 1px solid var(--catalog-line);
}

.supply-card__visual img {
  width: 100%;
  height: 250px;
  padding: 30px 28px 22px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 180ms ease;
}

.supply-card:hover .supply-card__visual img { transform: scale(1.025); }

.supply-card__index {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 30px;
  place-items: center;
  color: #fffef9;
  background: var(--catalog-ink);
  font: 900 .63rem/1 "SFMono-Regular", Consolas, monospace;
}

.supply-card__tape {
  position: absolute;
  top: 17px;
  right: -9px;
  z-index: 2;
  max-width: 72%;
  padding: 8px 19px 8px 15px;
  color: var(--catalog-ink);
  background: rgb(240 189 79 / 92%);
  box-shadow: 0 2px 0 rgb(20 45 57 / 15%);
  font: 900 .62rem/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .06em;
  text-align: right;
  text-transform: uppercase;
  transform: rotate(1.3deg);
}

.supply-card__body {
  display: grid;
  align-content: start;
  padding: 22px 22px 18px;
}

.supply-card__source {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  color: #9a3e2c;
  font: 900 .61rem/1.2 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.supply-card__source span:last-child {
  color: var(--catalog-muted);
  text-align: right;
}

.supply-card h3 {
  margin: 0 0 11px;
  color: var(--catalog-ink);
  font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 1.33rem;
  font-stretch: condensed;
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.supply-card__body > p {
  margin: 0;
  color: var(--catalog-muted);
  font-size: .76rem;
  line-height: 1.58;
}

.supply-card__decision {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--catalog-line);
}

.supply-card__decision strong {
  color: var(--catalog-ink);
  font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
}

.supply-card__decision span {
  color: var(--catalog-muted);
  font-size: .6rem;
}

.supply-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 22px 22px;
}

.supply-card__actions .button {
  min-width: 0;
  min-height: 43px;
  padding: 8px 10px;
  font-size: .64rem;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.catalog-empty {
  grid-column: 1 / -1;
  padding: 70px 30px;
  color: var(--catalog-ink);
  background: var(--catalog-card);
  border: 1px solid var(--catalog-line);
  text-align: center;
}

.catalog-empty strong {
  display: block;
  margin-bottom: 7px;
  font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 1.5rem;
}

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

.catalog-pagination-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-top: 42px;
  padding: 18px;
  background: var(--catalog-card);
  border: 1px solid var(--catalog-ink);
}

.catalog-pagination {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.catalog-pagination-bar button {
  min-width: 42px;
  min-height: 42px;
  padding: 0 13px;
  color: var(--catalog-ink);
  background: transparent;
  border: 1px solid var(--catalog-line);
  font: 800 .7rem/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.catalog-pagination-bar button:hover:not(:disabled) { border-color: var(--catalog-ink); }
.catalog-pagination-bar button:disabled { opacity: .35; cursor: not-allowed; }

.catalog-pagination button.active {
  color: var(--catalog-card);
  background: var(--catalog-orange);
  border-color: var(--catalog-orange);
}

.catalog-page-select {
  display: grid;
  gap: 5px;
  min-width: 128px;
}

.catalog-page-select select {
  min-height: 42px;
  padding: 0 30px 0 11px;
  color: var(--catalog-ink);
  background: var(--catalog-card);
  border: 1px solid var(--catalog-line);
  font: 750 .7rem/1 "Segoe UI", Arial, sans-serif;
}

.stage-disclosure {
  margin: 52px 0 0;
  padding: 22px 0;
  color: var(--catalog-muted);
  border-top: 1px solid var(--catalog-line);
  border-bottom: 1px solid var(--catalog-line);
  font-size: .72rem;
  line-height: 1.65;
}

.stage-next {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 38px;
  padding: 27px 30px;
  color: #fffef9;
  background: var(--catalog-ink);
}

.stage-next > span {
  color: #f4c86c;
  font: 900 .64rem/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.stage-next a {
  color: #fffef9;
  font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 750;
  text-decoration: none;
}

.stage-next a strong { color: #f4c86c; }
.stage-next--complete { background: var(--catalog-blue); }

@media (max-width: 1080px) {
  .supply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-pagination-bar { grid-template-columns: auto 1fr auto; }
  .catalog-page-select { grid-column: 1 / -1; grid-template-columns: auto minmax(150px, 240px); justify-content: end; align-items: center; }
}

@media (max-width: 780px) {
  .shop-stage-hero .wrap { grid-template-columns: minmax(0, 1fr) 165px; gap: 32px; }
  .stage-hero-mark { min-height: 190px; }
  .stage-hero-mark span { font-size: 5rem; }
  .catalog-intro { grid-template-columns: 1fr; gap: 22px; }
  .catalog-toolbar { grid-template-columns: 1fr; box-shadow: 5px 5px 0 var(--catalog-ink); }
  .catalog-search { border-right: 0; border-bottom: 1px solid var(--catalog-ink); }
  .catalog-result { min-height: 86px; }
}

@media (max-width: 700px) {
  .shop-stage-hero .wrap {
    min-height: 0;
    grid-template-columns: 1fr;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .shop-stage-hero h1 { font-size: clamp(2.8rem, 14.5vw, 4.5rem); }
  .stage-hero-mark { display: none; }

  .stage-rail a {
    min-height: 68px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    padding: 10px 7px;
    text-align: center;
  }

  .stage-rail span { grid-row: auto; font-size: 1rem; }
  .stage-rail strong { font-size: .65rem; }
  .stage-rail small { display: none; }

  .moving-catalog {
    padding-top: 50px;
    padding-bottom: 54px;
    background-size: 30px 30px;
  }

  .catalog-intro { margin-bottom: 34px; }
  .catalog-intro h2 { font-size: clamp(2.55rem, 12vw, 3.6rem); }
  .catalog-categories { flex-wrap: nowrap; margin-right: calc(var(--pad) * -1); overflow-x: auto; padding-right: var(--pad); scrollbar-width: thin; }
  .catalog-categories button { flex: 0 0 auto; }
  .supply-grid { grid-template-columns: 1fr; gap: 19px; }
  .supply-card__visual,
  .supply-card__visual img { height: 245px; min-height: 245px; }
  .supply-card__actions { grid-template-columns: 1fr; }

  .catalog-pagination-bar {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 13px;
  }

  .catalog-pagination {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 3px;
  }

  #product-page-previous { grid-column: 1; grid-row: 2; }
  #product-page-next { grid-column: 2; grid-row: 2; }

  .catalog-page-select {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
  }

  .stage-next { grid-template-columns: 1fr; gap: 8px; padding: 24px; }
  .stage-next a { font-size: 1.14rem; }
}

@media (prefers-reduced-motion: reduce) {
  .supply-card,
  .supply-card__visual img {
    transition: none;
  }
}