/* For Retailers (retail.html): an overview of the four parts of the program, a numbered section
   for each (potatoes, seasonings, recipe cards, support), and the program builder at the bottom,
   which is the buyer form. The 3D viewers are <model-viewer> (assets/js/vendor/), driven by
   retail.js; the recipe card itself is styled in recipe-card.css. See docs/pages/retail.md. */

/* Whatever retail.js hides stays hidden, whatever display its class gives it. */
#main [hidden] {
  display: none !important;
}

/* ---------- Hero ---------- */
.rt-hero {
  position: relative;
  overflow: hidden;
  background: var(--logo-yellow);
  border-bottom: var(--stroke) solid var(--ink);
}
.rt-hero .field {
  color: #f2c400;
}
.rt-hero__inner {
  position: relative;
  display: grid;
  gap: 20px;
  align-items: center;
  padding-block: clamp(36px, 6vw, 76px) clamp(20px, 3vw, 40px);
}
@media (min-width: 960px) {
  .rt-hero__inner {
    grid-template-columns: 1fr 1.08fr;
    gap: 32px;
  }
}
.rt-hero__copy {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.rt-hero h1 {
  font-size: clamp(2.35rem, 1.45rem + 3.7vw, 4.3rem);
  line-height: 0.98;
}
.rt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.rt-hero__bins {
  width: 100%;
  margin-inline: auto;
}
@media (max-width: 959px) {
  .rt-hero__bins {
    max-width: 640px;
  }
}

/* ---------- Numbers, chips and panels: what every section is made of ---------- */
/* The section's number, as a sticker in its colour (--c, set on the section). */
.rt-num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--c, var(--logo-yellow));
  border: var(--stroke) solid var(--ink);
  border-radius: 15px;
  box-shadow: 3px 3px 0 var(--ink);
  font: 700 1.25rem/1 var(--font-display);
  color: var(--ink);
}
.rt-sec__head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  margin-bottom: 20px;
}
.rt-sec__head .rt-num {
  width: clamp(58px, 6.5vw, 80px);
  height: clamp(58px, 6.5vw, 80px);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.2rem);
}
.rt-sec__head h2 {
  margin-top: 4px;
  font-size: clamp(1.85rem, 1.35rem + 2.2vw, 3rem);
  line-height: 1.02;
}

/* The selling points, short enough to take in at a glance. Plain ticks, not pills: the pills on
   this page are buttons, and these aren't. */
.rt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0;
  list-style: none;
}
.rt-chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 1.0625rem/1.2 var(--font-display);
}
@media (max-width: 639px) {
  .rt-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }
  .rt-chips li {
    align-items: flex-start;
    font-size: 0.9375rem;
  }
}
.rt-chips li::before,
.rt-ticks li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--c, var(--logo-green)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' fill='none' stroke='%23231f20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.rt-panel {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  min-width: 0;
  padding: clamp(14px, 3vw, 32px);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.section:not(.section--cream) .rt-panel {
  background: #fffcf4;
}
.rt-note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---------- Why it sells ---------- */
.rt-pitch {
  padding-block: clamp(44px, 6vw, 80px);
}
.rt-pitch__head {
  max-width: 760px;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.rt-pitch__head h2 {
  margin-top: 6px;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.02;
}
.rt-pitch__head .lede {
  margin-top: 14px;
}
.rt-pitch__grid {
  display: grid;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
}
@media (min-width: 900px) {
  .rt-pitch__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}
.rt-pitch__figure {
  min-width: 0;
  margin: 0;
}
.rt-pitch__picture {
  position: relative;
}
.rt-pitch__picture img {
  display: block;
  width: 100%;
  height: auto;
}
/* The numbers on the picture, at --x and --y of it. */
.rt-pitch__pin,
.rt-pitch__list li::before {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--logo-yellow);
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
  font: 700 1.05rem/1 var(--font-display);
  color: var(--ink);
}
.rt-pitch__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
}
@media (max-width: 599px) {
  .rt-pitch__pin {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
}
.rt-pitch__list {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rt-pitch;
}
.rt-pitch__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 14px;
  counter-increment: rt-pitch;
}
.rt-pitch__list li::before {
  content: counter(rt-pitch);
  grid-row: span 2;
}
.rt-pitch__list h3 {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.15;
}
.rt-pitch__list p {
  margin-top: 4px;
  color: var(--ink-soft);
  line-height: 1.45;
}
/* The four parts of the program, as links to their sections, and the way to the builder. */
.rt-pitch__parts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: var(--stroke) solid var(--ink);
}
.rt-pitch__parts-title {
  font: 700 0.8125rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rt-pitch__parts a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 1.1rem/1.1 var(--font-display);
  color: var(--ink);
  text-decoration: none;
}
.rt-pitch__parts a:not(.btn):hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rt-pitch__parts .rt-num {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 0.95rem;
}
.rt-pitch__cta {
  margin-left: auto;
}
@media (max-width: 639px) {
  .rt-pitch__parts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rt-pitch__parts-title,
  .rt-pitch__cta {
    grid-column: 1 / -1;
  }
  .rt-pitch__cta {
    margin: 6px 0 0;
    justify-self: start;
  }
}

/* ---------- 3D viewer ---------- */
.viewer {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.viewer__models {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.viewer__models label {
  position: relative;
}
.viewer__models input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.viewer__models span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  transition: background-color 0.2s, box-shadow 0.18s var(--ease-out);
}
.viewer__models input:hover + span {
  box-shadow: var(--shadow-sm);
}
.viewer__models input:checked + span {
  background: var(--ink);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--logo-yellow);
}
.viewer__models input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.viewer__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at 50% 85%, #fffdf6 0 40%, var(--cream) 75%);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
model-viewer.viewer__model {
  display: block;
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  --progress-bar-color: transparent;
}
.viewer__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.viewer__ar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
  min-height: 46px;
  padding: 10px 20px;
  font-size: 1rem;
  white-space: nowrap;
}
/* Until model-viewer has loaded (and without JavaScript) the poster stands in for the model,
   so the controls that need it stay out of the way. */
model-viewer:not(:defined) .viewer__ar,
model-viewer:not(:defined) .viewer__progress,
html:not(.js) .viewer__models,
html:not(.js) .viewer__hint {
  display: none;
}
.viewer__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  opacity: 0;
  transition: opacity 0.3s;
}
.viewer__progress.is-loading {
  opacity: 1;
}
.viewer__progress span {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  background: var(--ink);
  transition: width 0.2s;
}
.viewer__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  gap: 8px;
}
.viewer__zoom button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  font: 700 1.5rem/1 var(--font-display);
  color: var(--ink);
  cursor: pointer;
}
.viewer__zoom button:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--ink);
}
.viewer__hint {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---------- Tables ---------- */
.rt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 1rem;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
}
.rt-table th,
.rt-table td {
  padding: 11px clamp(10px, 1.6vw, 16px);
  text-align: left;
  vertical-align: top;
  line-height: 1.35;
  border-bottom: 1px solid var(--line);
}
.rt-table thead > tr > * {
  background: var(--ink);
  color: var(--white);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: bottom;
  border-bottom: 0;
}
.rt-table tbody tr:last-child > * {
  border-bottom: 0;
}
.rt-table tbody th {
  font-weight: 700;
  white-space: nowrap;
}
.rt-dot {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  vertical-align: -1px;
  background: var(--c);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.rt-table thead .rt-dot {
  border-color: var(--white);
}
.rt-upc {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---------- 01 Potatoes: one panel, the bag or the bin ---------- */
/* retail.js keeps data-variety and data-pack on the panel in step with the pickers. Without
   JavaScript the panel shows the Red bag, both packs' specs and all four potatoes. */
.rt-spuds {
  --spud: var(--potato-red);
}
.rt-spuds[data-variety="gold"] { --spud: var(--potato-gold); }
.rt-spuds[data-variety="russet"] { --spud: var(--potato-russet); }
.rt-spuds[data-variety="white"] { --spud: var(--potato-white); }
@media (min-width: 900px) {
  .rt-spuds {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
  .rt-spuds__table {
    grid-column: 1 / -1;
  }
}
.rt-spuds__show {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.rt-spuds__bags {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.rt-spuds__bags::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 76%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: var(--spud);
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  transition: background-color 0.3s;
}
.rt-spuds__bag {
  position: relative;
  display: none;
  width: auto;
  height: 88%;
  filter: drop-shadow(5px 6px 0 rgba(35, 31, 32, 0.22));
}
.rt-spuds[data-variety="red"] .rt-spuds__bag[data-variety="red"],
.rt-spuds[data-variety="gold"] .rt-spuds__bag[data-variety="gold"],
.rt-spuds[data-variety="russet"] .rt-spuds__bag[data-variety="russet"],
.rt-spuds[data-variety="white"] .rt-spuds__bag[data-variety="white"] {
  display: block;
}
.rt-spuds__bin {
  position: absolute;
  inset: 0;
}
.rt-spuds[data-pack="bin"] .rt-spuds__bags,
.rt-spuds:not([data-pack="bin"]) .rt-spuds__bin,
.rt-spuds:not([data-pack="bin"]) .rt-spuds__hint {
  display: none;
}
.rt-spuds__pick {
  display: grid;
  gap: 22px;
  align-content: start;
  min-width: 0;
}
.rt-spuds__varieties {
  margin: 0;
}
@media (min-width: 900px) {
  .rt-spuds__varieties .variant-picker__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1160px) {
  .rt-spuds__varieties .variant-picker__options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .rt-spuds__varieties .swatch label {
    gap: 8px;
    padding-right: 10px;
    font-size: 1rem;
  }
  .rt-spuds__varieties .swatch__chip {
    width: 36px;
    height: 36px;
  }
}
.rt-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.rt-packs legend {
  float: left;
  width: 100%;
  grid-column: 1 / -1;
  padding: 0;
  font-weight: 700;
}
.rt-pack {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 16px 16px;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  transition: background-color 0.2s, box-shadow 0.18s var(--ease-out);
}
.rt-pack input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rt-pack label {
  font: 700 1.3rem/1.1 var(--font-display);
}
.rt-pack__specs {
  display: grid;
  gap: 8px;
  margin: 0;
}
.rt-pack__specs dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rt-pack__specs dd {
  margin: 1px 0 0;
  font-weight: 700;
  line-height: 1.3;
}
.rt-pack:hover {
  box-shadow: var(--shadow-sm);
}
.rt-pack:has(input:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.js .rt-spuds[data-pack="case"] .rt-pack:has(#pack-case),
.js .rt-spuds[data-pack="bin"] .rt-pack:has(#pack-bin) {
  background: var(--ink);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--logo-yellow);
}
.js .rt-spuds[data-pack="case"] .rt-pack:has(#pack-case) dt,
.js .rt-spuds[data-pack="bin"] .rt-pack:has(#pack-bin) dt {
  color: rgba(255, 255, 255, 0.72);
}
html:not(.js) .rt-spuds__varieties,
html:not(.js) .rt-pack input {
  display: none;
}
/* The chosen potato's row stands out; on a phone it's the only row shown. */
.js .rt-spuds[data-variety="red"] tr[data-variety="red"] > *,
.js .rt-spuds[data-variety="gold"] tr[data-variety="gold"] > *,
.js .rt-spuds[data-variety="russet"] tr[data-variety="russet"] > *,
.js .rt-spuds[data-variety="white"] tr[data-variety="white"] > * {
  background: #fff6d8;
  background: color-mix(in srgb, var(--spud) 16%, var(--white));
}
@media (max-width: 699px) {
  .rt-table--stack,
  .rt-table--stack tbody,
  .rt-table--stack tr,
  .rt-table--stack th,
  .rt-table--stack td {
    display: block;
  }
  .rt-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .rt-table--stack {
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .rt-table--stack tbody {
    display: grid;
    gap: 12px;
  }
  .rt-table--stack tr {
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
  }
  .rt-table--stack tbody tr > * {
    background: var(--white);
  }
  .rt-table--stack tbody tr:last-child > * {
    border-bottom: 1px solid var(--line);
  }
  .rt-table--stack th[scope="row"] {
    padding: 12px 14px 10px;
    font-family: var(--font-display);
    font-size: 1.2rem;
  }
  .rt-table--stack td {
    display: grid;
    grid-template-columns: 6.4em minmax(0, 1fr);
    gap: 10px;
    padding: 9px 14px;
  }
  .rt-table--stack tbody tr > :last-child {
    border-bottom: 0;
  }
  .rt-table--stack td::before {
    content: attr(data-label);
    padding-top: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .js .rt-spuds tr[data-variety] {
    display: none;
  }
  .js .rt-spuds[data-variety="red"] tr[data-variety="red"],
  .js .rt-spuds[data-variety="gold"] tr[data-variety="gold"],
  .js .rt-spuds[data-variety="russet"] tr[data-variety="russet"],
  .js .rt-spuds[data-variety="white"] tr[data-variety="white"] {
    display: block;
  }
}

/* ---------- The packing floor: the live map, in the games' own colours ---------- */
.rt-floor {
  background: #102229;
  color: #f4f1de;
  border-block: var(--stroke) solid var(--ink);
}
.rt-floor__inner {
  display: grid;
  gap: clamp(22px, 3vw, 32px);
}
@media (min-width: 900px) {
  .rt-floor__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    grid-template-areas: "head map" "jobs map";
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  .rt-floor__head { grid-area: head; }
  .rt-floor__map { grid-area: map; }
  .rt-floor__jobs { grid-area: jobs; }
}
.rt-floor__head {
  display: grid;
  gap: 12px;
}
.rt-floor h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  color: var(--white);
}
.rt-floor .eyebrow {
  color: #e9c46a;
}
.rt-floor__map {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}
html:not(.js) .rt-floor__map {
  display: none;
}
.rt-floor__jobs {
  display: grid;
  gap: 22px;
  justify-items: start;
}
.rt-floor__line {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .rt-floor__line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.rt-floor__line a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 52px;
  padding: 8px 12px 8px 10px;
  color: #f4f1de;
  text-decoration: none;
  background: #16303b;
  border-radius: var(--radius-md);
  font: 600 1.0625rem/1.15 var(--font-display);
  transition: background-color 0.15s;
}
.rt-floor__line a:hover {
  background: #1f3e4a;
}
.rt-floor__line a:focus-visible {
  outline: 3px solid #e9c46a;
  outline-offset: 2px;
}
.rt-floor__line small {
  display: block;
  margin-top: 2px;
  font: 400 0.875rem/1.2 var(--font-body);
  color: #a8b3c2;
}
.rt-floor__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #2a9d8f;
  border-radius: 50%;
  font: 700 0.9375rem/1 var(--font-body);
  color: var(--white);
}
.rt-floor__walk {
  --btn-bg: #e9c46a;
  box-shadow: 4px 4px 0 #000;
}
.rt-floor__walk:hover {
  box-shadow: 6px 6px 0 #000;
}

/* ---------- 02 Seasonings ---------- */
@media (min-width: 1000px) {
  .rt-season {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
  .rt-season__specs {
    grid-column: 1 / -1;
  }
}
.rt-season__info {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}
.rt-blends {
  display: grid;
  gap: 12px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.rt-blend {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: #eef4e3;
  background: color-mix(in srgb, var(--c) 24%, var(--white));
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
}
.rt-blend img {
  width: 50px;
}
.rt-blend h3 {
  font-size: 1.3rem;
}
.rt-blend p {
  margin-top: 3px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.rt-blend .rt-blend__pair {
  font-weight: 700;
  color: var(--ink);
}
.rt-mini {
  margin-top: 4px;
  font-size: 1.2rem;
}
.rt-ticks {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-ticks li {
  display: flex;
  gap: 10px;
  line-height: 1.4;
}
.rt-season__specs {
  display: grid;
  gap: 16px;
  min-width: 0;
}
@media (min-width: 700px) {
  .rt-table--blends td {
    white-space: nowrap;
  }
}
.rt-specs {
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
  .rt-specs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .rt-specs dd {
    font-size: 1rem;
  }
}

/* ---------- 03 Recipe cards and the store plan ---------- */
.rt-steps {
  display: grid;
  gap: 12px;
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0;
  list-style: none;
  counter-reset: rt-step;
}
@media (min-width: 860px) {
  .rt-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
.rt-steps li {
  position: relative;
  padding: 14px 18px 16px 62px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  line-height: 1.45;
  color: var(--ink-soft);
  counter-increment: rt-step;
}
.rt-steps li::before {
  content: counter(rt-step);
  position: absolute;
  top: 14px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--logo-yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font: 700 1rem/1 var(--font-display);
  color: var(--ink);
}
.rt-steps strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--ink);
}

.rt-cards {
  align-items: start;
}
@media (min-width: 980px) {
  .rt-cards {
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  }
}
.rt-cards__card {
  display: grid;
  justify-items: center;
  gap: 18px;
  min-width: 0;
}
.rt-cards__pick {
  justify-content: center;
}
.rt-cards__pick span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--c);
  border: 2px solid currentColor;
  border-radius: 50%;
}
.rt-flip {
  width: min(100%, 380px);
  perspective: 1600px;
}
.rt-flip .rcard {
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease-out);
}
.rt-flip.is-turned .rcard {
  transform: rotateY(180deg);
}
.rt-flip .rcard__face {
  border: var(--stroke) solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rt-flip .rcard__back {
  transform: rotateY(180deg);
}
/* Without JavaScript there's no button: hover or focus turns the card over. */
html:not(.js) .rt-flip:hover .rcard,
html:not(.js) .rt-flip:focus-within .rcard {
  transform: rotateY(180deg);
}
.rcard__shop li.is-pointed .rcard__where {
  outline: 0.6cqi solid var(--ink);
  outline-offset: 0.5cqi;
}

.rt-plan {
  min-width: 0;
  margin: 0;
  padding: clamp(12px, 2vw, 20px);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
}
.rt-plan__svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-display);
}
/* On a phone the plan would shrink to unreadable: it keeps a readable size and scrolls sideways
   instead. */
@media (max-width: 599px) {
  .rt-plan__scroll {
    overflow-x: auto;
    margin-inline: calc(-1 * clamp(12px, 2vw, 20px));
    padding-inline: clamp(12px, 2vw, 20px);
    padding-bottom: 6px;
  }
  .rt-plan__svg {
    width: 520px;
    max-width: none;
  }
}
.rt-plan__floor {
  fill: #fcf8ef;
  stroke: var(--ink);
  stroke-width: 3;
}
.rt-plan__door {
  fill: var(--white);
}
.rt-plan__note {
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink-soft);
}
.rt-dept rect {
  fill: var(--d, #eee);
  stroke: var(--ink);
  stroke-width: 2;
  fill-opacity: 0.3;
  stroke-opacity: 0.4;
  transition: fill-opacity 0.4s, stroke-opacity 0.4s;
}
.rt-dept text {
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--ink);
  fill-opacity: 0.5;
  transition: fill-opacity 0.4s;
}
.rt-dept.is-on rect {
  fill-opacity: 1;
  stroke-opacity: 1;
}
.rt-dept.is-on text {
  fill-opacity: 1;
}
.rt-dept[data-dept="produce"] { --d: #97d700; }
.rt-dept[data-dept="bakery"] { --d: #e8b36a; }
.rt-dept[data-dept="deli"] { --d: #ffb81b; }
.rt-dept[data-dept="seafood"] { --d: #5fb4e6; }
.rt-dept[data-dept="meat"] { --d: #ff4438; }
.rt-dept[data-dept="dairy"] { --d: #ffffff; }
.rt-dept[data-dept="frozen"] { --d: #b8e2f7; }
.rt-plan__shelves rect,
.rt-plan__tills rect {
  fill: #e4d9c4;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.rt-plan__tills text {
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink-soft);
}
.rt-aisle circle {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 2;
  transition: fill 0.3s;
}
.rt-aisle text {
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--ink);
  transition: fill 0.3s;
}
.rt-aisle.is-on circle {
  fill: var(--ink);
}
.rt-aisle.is-on text {
  fill: var(--white);
}
.rt-route {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.1 9;
}
.rt-route--halo {
  stroke: var(--logo-yellow);
  stroke-width: 12;
  stroke-dasharray: none;
}
.rt-plan__bin path {
  fill: var(--bin, var(--potato-red));
  stroke: var(--ink);
  stroke-width: 2.5;
}
.rt-plan__bin text {
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--ink);
}
.rt-dept.is-pointed rect,
.rt-aisle.is-pointed circle {
  stroke-width: 5;
}
.rt-plan__caption {
  margin-top: 14px;
  font-weight: 600;
}
.rt-plan__key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.rt-plan__key b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 0.75rem;
  color: var(--ink);
}
.rt-plan__walk {
  margin-top: 16px;
}

/* ---------- 04 Support ---------- */
.rt-support {
  display: grid;
  gap: 16px;
  align-items: start;
}
@media (min-width: 900px) {
  .rt-support {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 22px;
  }
}
.rt-support__pos,
.rt-support__list li {
  padding: clamp(16px, 2vw, 22px);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
}
.rt-support h3 {
  margin-bottom: 4px;
  font-size: 1.25rem;
}
.rt-support p {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.rt-support__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The danglers on a shelf's edge: each hangs by its stem (the top of the real one, which clips
   under the shelf, is behind the edge). Sized in cqi, so each is the same design at any width. */
.rt-support__danglers {
  --gap: clamp(8px, 1.6vw, 18px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 18px;
  padding: 34px 4px 4px;
}
@media (max-width: 519px) {
  .rt-support__danglers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
}
.rt-dangler {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  background: var(--c);
  box-shadow: 3px 4px 0 rgba(35, 31, 32, 0.25);
  transform-origin: 50% -34px;
}
/* Each dangler hangs in a .rt-hang, which draws the stretch of shelf above it (so each row of
   danglers has its shelf) and stays put when the dangler swings. */
.rt-hang {
  position: relative;
}
.rt-hang::before {
  content: "";
  position: absolute;
  top: -34px;
  left: calc(var(--gap) / -2);
  z-index: 1;
  width: calc(100% + var(--gap) + 1px);
  height: 14px;
  background: var(--ink);
}
/* Its stem, up under the shelf. */
.rt-dangler::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 13%;
  height: 34px;
  translate: -50% 0;
  background: var(--c);
}
.rt-dangler::after {
  content: "";
  position: absolute;
  inset: 3%;
  border: 0.9cqi dashed #5a4321;
  border-radius: 3cqi 9cqi 3cqi 9cqi;
  pointer-events: none;
}
.rt-dangler__qr {
  position: absolute;
  top: 6%;
  left: 6%;
  display: grid;
  justify-items: center;
  gap: 1.6cqi;
  width: 17cqi;
  font: 500 2.6cqi/1 var(--font-body);
  text-transform: uppercase;
  color: var(--white);
}
.rt-dangler__qr svg {
  display: block;
  width: 100%;
  padding: 1.2cqi;
  background: var(--white);
  border: 0.6cqi solid var(--ink);
  border-radius: 1cqi;
  stroke: var(--ink);
}
/* "Scan me": a black tab under the code */
.rt-dangler__qr b {
  padding: 1cqi 2cqi;
  font-weight: 500;
  background: var(--ink);
  border-radius: 1cqi;
}
.rt-dangler img {
  position: absolute;
  top: 10%;
  left: 12%;
  width: 80%;
  height: auto;
}
.rt-dangler p {
  position: absolute;
  inset: auto 4% 15% 4%;
  font: 700 7.4cqi/1.05 var(--font-display);
  text-align: center;
  color: var(--white);
}
.rt-dangler small {
  position: absolute;
  inset: auto 0 6.5% 0;
  font: 300 5.2cqi/1 var(--font-body);
  text-align: center;
  color: #5a4321;
}
@media (prefers-reduced-motion: no-preference) {
  .rt-dangler:hover {
    animation: rt-swing 1.6s var(--ease-out);
  }
}
@keyframes rt-swing {
  20% { rotate: 5deg; }
  45% { rotate: -3.5deg; }
  70% { rotate: 1.5deg; }
  100% { rotate: 0deg; }
}

/* ---------- Build your program (the buyer form) ---------- */
.rt-build {
  position: relative;
  background: var(--logo-yellow);
  border-top: var(--stroke) solid var(--ink);
}
.rt-builder {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
@media (min-width: 1000px) {
  .rt-builder {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
    align-items: start;
  }
  .rt-builder__summary {
    position: sticky;
    top: 104px;
    grid-column: 2;
    grid-row: 1;
  }
  .rt-builder__steps {
    grid-column: 1;
    grid-row: 1;
  }
}
.rt-builder__steps {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.rt-step {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: clamp(16px, 2.6vw, 26px);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.rt-step > legend {
  float: left;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 96px 0 0;
  font: 700 clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem)/1.1 var(--font-display);
}
/* Numbered by a counter, so a step that hasn't been added (hidden) doesn't leave a gap. */
.rt-builder__steps {
  counter-reset: rt-step;
}
.rt-step__num {
  counter-increment: rt-step;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--logo-yellow);
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  font-size: 1.1rem;
}
.rt-step__num::before {
  content: counter(rt-step);
}
.rt-step__note {
  color: var(--ink-soft);
}
.rt-step__remove {
  position: absolute;
  top: clamp(16px, 2.6vw, 26px);
  right: clamp(16px, 2.6vw, 26px);
  min-height: 38px;
  padding: 6px 14px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  font: 600 0.9375rem/1 var(--font-display);
  cursor: pointer;
}
.rt-step__remove:hover {
  background: var(--cream);
}
.rt-step__remove:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.rt-step--free {
  background: var(--cream);
  box-shadow: none;
  border-width: 2px;
}
.rt-step__free strong {
  font-family: var(--font-display);
}
.rt-sub {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.rt-sub > legend {
  float: left;
  width: 100%;
  padding: 0;
  font-weight: 700;
}
.rt-optional {
  font-weight: 400;
  color: var(--ink-soft);
}

/* A choice: a checkbox shown as a pill, with a chip in the thing's colour (--c). */
.rt-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rt-opts--4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) {
  .rt-opts--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.rt-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 18px 8px 10px;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  font: 600 1.0625rem/1.15 var(--font-display);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.18s var(--ease-out);
}
.rt-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rt-opt__box {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  background: var(--c, var(--white));
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.rt-opt input:checked + .rt-opt__box::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' fill='none' stroke='%23231f20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.rt-opt:not([style]) input:checked + .rt-opt__box {
  background-color: var(--logo-green);
}
.rt-opt:hover {
  box-shadow: var(--shadow-sm);
}
.rt-opt:has(input:checked) {
  background: var(--ink);
  color: var(--white);
}
.rt-opt:has(input:checked) .rt-opt__box {
  border-color: var(--white);
}
.rt-opt:has(input:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.rt-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.rt-check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--ink);
}

/* "Add seasonings" and "Add recipe cards": the next steps, waiting to be added. */
.rt-add {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border: var(--stroke) dashed var(--ink);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.2s;
}
.rt-add:hover {
  background: var(--white);
  border-style: solid;
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-sm);
}
.rt-add:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.rt-add__plus {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--logo-green);
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  font: 700 1.7rem/1 var(--font-display);
}
.rt-add__text strong {
  display: block;
  font: 700 1.3rem/1.1 var(--font-display);
}
.rt-add__text span {
  display: block;
  margin-top: 3px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.rt-build .form-actions {
  margin-top: 4px;
}
.rt-build__or {
  font-size: 0.9375rem;
}
.rt-build__or a {
  font-weight: 700;
  word-break: break-word;
}

/* The summary: a picture of the bins as the program grows, and what's in it. */
.rt-builder__summary {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(14px, 2.4vw, 22px);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.rt-builder__summary h3 {
  font-size: 1.45rem;
}
/* One bin, or two side by side; three or four in two rows, the front row a little lower. */
.rt-builder__picture {
  --n: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  align-content: center;
  min-height: 150px;
  padding: 12px 4% 6px;
  background: radial-gradient(ellipse at 50% 85%, #fffdf6 0 40%, var(--cream) 75%);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rt-builder__bin {
  position: relative;
  flex: none;
  width: calc(100% / min(max(var(--n), 1.6), 2) + 4%);
  margin-inline: -2%;
}
.rt-builder__bin:nth-child(n + 3) {
  margin-top: -7%;
}
.rt-builder__bin img {
  display: block;
  width: 100%;
  height: auto;
}
/* The bin's recipe card, leaning on its corner. */
.rt-builder__bin .rt-builder__card {
  position: absolute;
  right: 9%;
  bottom: 3%;
  width: 22%;
  border: 2px solid var(--ink);
  border-radius: 7% / 4.7%;
  box-shadow: 2px 2px 0 var(--ink);
  rotate: 5deg;
}
.rt-builder__empty {
  align-self: center;
  font-weight: 700;
  color: var(--ink-soft);
}
.rt-builder__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-builder__list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  line-height: 1.4;
}
.rt-builder__list li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background: var(--c, var(--logo-green));
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.rt-builder__list b {
  font-family: var(--font-display);
}
.rt-builder__list .is-free {
  color: var(--ink-soft);
}