.product-purchase {
  display: grid;
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(30.72px, 3.89vw, 56px);
  font-family: "Montserrat", Arial, sans-serif;
  color: #222;
  background: transparent;
}

.product-purchase button,
.product-purchase input {
  font: inherit;
}

.product-purchase button:focus-visible,
.product-purchase a:focus-visible,
.product-purchase input:focus-visible {
  outline: 2px solid #214e34;
  outline-offset: 3px;
}

.product-purchase__gallery {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* Sep 3 #49: swiping the gallery dragged the whole page sideways instead of
   changing the image. The swipe added for #23 is deliberately passive and never
   calls preventDefault, so vertical scrolling through the gallery stays with
   the page — but with touch-action left at its default the browser was also
   free to claim the horizontal half of that gesture, and it did.

   pan-y hands vertical panning to the page and keeps horizontal gestures for
   the script, which is the split the handler was already written for. It
   replaces nothing the handler does; it stops the browser competing with it. */
.product-purchase__media-stage {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  padding: clamp(16px, 3vw, 40px);
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #f7f4ec;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.product-purchase__media-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-purchase__media-placeholder {
  box-sizing: border-box;
  width: 100%;
  padding: 32px;
  align-content: center;
  justify-items: center;
  text-align: center;
  color: #5c6b60;
}

.product-purchase__media-placeholder:not([hidden]) {
  display: grid;
}

.product-purchase__media-placeholder strong {
  font-size: 15px;
  font-weight: 600;
  color: #173824;
}

.product-purchase__media-placeholder span {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
}

.product-purchase__media-stage > img[hidden] {
  display: none;
}

.product-purchase__media-note {
  font-size: 11px;
  line-height: 1.2;
  color: #5c6b60;
}

/* Aug 28 #7: the arrows live in a row with the thumbnails so they can flank
   them. Off the phone they are hidden and the row is just the thumbnails. */
.product-purchase__thumb-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.product-purchase__thumb-row > .product-purchase__thumbnails {
  min-width: 0;
  flex: 1;
}

.product-purchase__thumb-arrow {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #214e34;
  cursor: pointer;
  background: #f7f4ec;
  border: 1px solid rgba(33, 78, 52, 0.2);
  border-radius: 999px;
  flex: 0 0 auto;
  place-items: center;
}

.product-purchase__thumb-arrow:hover {
  background: #dde7e0;
}

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

.product-purchase__thumbnails[hidden] {
  display: none;
}

.product-purchase__thumbnails button {
  display: block;
  min-width: 0;
  padding: 10px 10px 13px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(33, 78, 52, 0.16);
  border-radius: 6px;
  background: #f7f4ec;
}

.product-purchase__thumbnails button[aria-pressed="true"] {
  border-color: #214e34;
}

.product-purchase__thumbnails img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.product-purchase__eyebrow,
.product-purchase__label {
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #214e34;
}

.product-purchase__eyebrow {
  margin-bottom: 12px;
}

.product-purchase h1 {
  margin: 0 0 14px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.14;
  color: #173824;
}

.product-purchase__price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 32px;
  margin-bottom: 10px;
}

.product-purchase__price {
  font-size: 26px;
  font-weight: 700;
  color: #173824;
}

.product-purchase__per-pod {
  font-size: 13px;
  color: #5c6b60;
}

.product-purchase__description {
  max-width: 520px;
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.7;
  color: #3d4c42;
}

.product-purchase__info > .product-purchase__label {
  margin-bottom: 12px;
}

.product-purchase__packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}

.product-purchase__pack {
  min-width: 0;
  height: 101px;
  padding: 18px 14px;
  cursor: pointer;
  text-align: left;
  border: 1px solid rgba(33, 78, 52, 0.2);
  border-radius: 8px;
  background: #fff;
}

.product-purchase__pack[aria-pressed="true"] {
  border-color: #214e34;
  background: #dde7e0;
}

.product-purchase__pack span {
  display: block;
}

.product-purchase__pack-label {
  font-size: 14px;
  font-weight: 700;
  color: #173824;
}

.product-purchase__pack-price {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #214e34;
}

.product-purchase__pack-tag {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #7a1c22;
}

.product-purchase__form-row {
  display: flex;
  gap: 12px;
  height: 58px;
  margin-bottom: 14px;
}

.product-purchase__quantity {
  display: flex;
  flex: 0 0 115.03px;
  width: 115.03px;
  height: 58px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(33, 78, 52, 0.3);
  border-radius: 999px;
}

.product-purchase__quantity button {
  height: 56px;
  padding: 0 16px;
  cursor: pointer;
  border: 0;
  color: #214e34;
  background: transparent;
  font-size: 18px;
}

.product-purchase__quantity input {
  width: 28px;
  padding: 0;
  border: 0;
  outline: 0;
  text-align: center;
  color: #222;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  appearance: textfield;
}

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

.product-purchase .product-purchase__add {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  color: #f7f4ec;
  background: #214e34;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.product-purchase__add:hover {
  background: #173824;
}

.product-purchase__add:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.product-purchase__add .button__spinner {
  display: none;
}

.product-purchase__add.loading [data-product-add-label] {
  opacity: 0;
}

.product-purchase__add.loading .button__spinner {
  display: inline-block;
}

.product-purchase__error {
  margin: -6px 0 14px;
  font-size: 12px;
  color: #7a1c22;
}

.product-purchase__error:not(.hidden)::after {
  content: attr(data-message);
}

.product-purchase__success {
  margin: -4px 0 12px;
  font-size: 12px;
  color: #214e34;
}

.product-purchase__success a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.product-purchase__shipping-note {
  margin-bottom: 26px;
  font-size: 12px;
  color: #5c6b60;
}

.product-purchase__guidance {
  padding: 20px;
  margin-bottom: 26px;
  border-radius: 8px;
  background: #f7f4ec;
}

.product-purchase__guidance .product-purchase__label {
  margin-bottom: 10px;
}

.product-purchase__guidance > div:last-child {
  font-size: 14px;
  line-height: 1.7;
  color: #3d4c42;
}

.product-purchase__accordions {
  border-top: 1px solid rgba(33, 78, 52, 0.18);
}

.product-purchase__accordion-item {
  border-bottom: 1px solid rgba(33, 78, 52, 0.18);
}

.product-purchase__accordion-item > button {
  display: flex;
  width: 100%;
  height: 62px;
  padding: 20px 2px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  border: 0;
  text-align: left;
  color: #173824;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-purchase__accordion-glyph {
  color: #214e34;
  font-size: 18px;
}

.product-purchase__accordion-answer {
  padding: 0 2px 22px;
  font-size: 14px;
  line-height: 1.75;
  color: #3d4c42;
}

/* Numbered steps — a filled circle per step with the copy hanging beside it,
   per the merchant's reference on Aug 26 #17. */
.product-purchase__accordion-steps,
.product-purchase__accordion-bullets {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 12px;
}

.product-purchase__accordion-steps {
  counter-reset: purchase-step;
}

.product-purchase__accordion-steps li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 12px;
  counter-increment: purchase-step;
}

.product-purchase__accordion-steps li::before {
  content: counter(purchase-step);
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #f7f4ec;
  background: #214e34;
  border-radius: 50%;
}

.product-purchase__accordion-bullets li {
  display: grid;
  grid-template-columns: 6px 1fr;
  align-items: start;
  gap: 12px;
}

/* Trust badges under Add to cart (v2 #26). Five slots hold one row at every
   width — on a phone the icon and type shrink instead of the row wrapping
   to 3 + 2 (Aug 24 #5). */
.product-purchase__badges {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 18px 0;
  margin-bottom: 24px;
  gap: 8px;
  border-top: 1px solid rgba(33, 78, 52, 0.12);
  border-bottom: 1px solid rgba(33, 78, 52, 0.12);
}

.product-purchase__badge {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.product-purchase__badge-icon {
  display: block;
  width: 30px;
  height: 30px;
  color: #214e34;
}

.product-purchase__badge-label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: #3d4c42;
}

@media (max-width: 759px) {
  .product-purchase__badges {
    gap: 6px;
  }

  .product-purchase__badge {
    gap: 6px;
  }

  .product-purchase__badge-icon {
    width: 22px;
    height: 22px;
  }

  .product-purchase__badge-label {
    font-size: 9px;
    letter-spacing: -0.01em;
  }
}

/* Box contents — count chip, thumbnail, label (v2 #32). */
.product-purchase__box-contents {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 10px;
}

.product-purchase__box-contents li {
  display: grid;
  grid-template-columns: 34px 44px 1fr;
  align-items: center;
  gap: 12px;
}

.product-purchase__box-row--no-chip {
  grid-template-columns: 34px 44px 1fr;
}

.product-purchase__box-row--no-chip .product-purchase__box-label {
  grid-column: 3;
}

.product-purchase__box-count {
  display: grid;
  height: 22px;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #f7f4ec;
  background: #214e34;
  border-radius: 11px;
}

.product-purchase__box-thumb {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: rgba(33, 78, 52, 0.05);
  border-radius: 6px;
}

.product-purchase__box-row--no-chip .product-purchase__box-thumb {
  grid-column: 2;
}

/* "Label: value" lines become real labels (v2 #20). */
/* Aug 31 #25: the actives table the buy box lost. Deliberately styled off the
   ingredient-panel table further down the page — same uppercase column heads
   and same rule under them — so the two read as one statement of the formula
   rather than two different tables. First line of the answer is the header
   row; a line with no "label: value" pair becomes the note underneath, which
   is where the inert percentage lands. */
.product-purchase__accordion-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
}

.product-purchase__accordion-table thead th {
  padding: 0 16px 8px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  color: #214e34;
  border-bottom: 2px solid rgba(33, 78, 52, 0.24);
}

.product-purchase__accordion-table tbody th {
  padding: 10px 16px 0 0;
  font-weight: 400;
  text-align: left;
  color: #3d4c42;
}

.product-purchase__accordion-table tbody td {
  padding: 10px 0 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #214e34;
}

.product-purchase__accordion-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: #5c6b60;
}

.product-purchase__accordion-labels {
  display: grid;
  margin: 0;
  gap: 14px;
}

/* Sep 3: the label and its text used to share a row, so a value long enough to
   wrap — most of Shipping & Returns — hung indented under itself against a
   ragged left edge. The text starts on its own line under the label now, which
   gives every entry the same left margin and reads as a paragraph with a
   heading rather than a squeezed table. The gap above grows to keep the
   entries apart now that each is two lines. */
.product-purchase__accordion-labels div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.product-purchase__accordion-labels dt {
  font-weight: 700;
  color: #214e34;
}

.product-purchase__accordion-labels dt::after {
  content: ":";
}

.product-purchase__accordion-labels dd {
  margin: 0;
}

.product-purchase__accordion-labels dd:only-child {
  grid-column: 1 / -1;
}

.product-purchase__accordion-bullets li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 9px;
  background: #214e34;
  border-radius: 50%;
}


@media (max-width: 1079px) {
  .product-purchase h1 {
    font-size: 26px;
  }

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

@media (min-width: 750px) and (max-width: 1079px) {
  .product-purchase {
    padding-top: 30.72px !important;
    padding-bottom: 53.76px !important;
  }
}

@media (max-width: 749px) {
  .product-purchase {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* Mobile stacks the workspace into one column, so the gallery drives section
     height. Reproduce the source's exact gallery metrics here (desktop/tablet keep
     the info column as the height driver, so these are scoped to mobile):
     - thumbnail image is default inline + visible overflow, so its baseline
       line-box descender grows the 1/1 button from 78.5px to 81.5px, and
       font-size 13.33px matches the source's descender (16px overshoots by 1px);
     - the caption note uses line-height:normal (26.0px), not the base 1.2 (26.375px). */
  .product-purchase__thumbnails--kit button {
    overflow: visible;
    font-size: 13.3333px;
  }

  .product-purchase__thumbnails--kit img {
    display: inline;
  }

  .product-purchase__media-note--kit {
    line-height: normal;
  }
}

/* ---- Kit mode (starter-kit purchase workspace) ---- */

.product-purchase--kit .product-purchase__media-stage--kit {
  position: relative;
  overflow: visible;
  min-width: 0;
  place-items: center;
}

.product-purchase__media-stage--kit > img {
  grid-area: 1 / 1;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-purchase__media-stage--kit > img[data-kit-active="true"] {
  display: block;
}

.product-purchase__save-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #7a1c22;
  color: #f7f4ec;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-purchase__media-note--kit {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.04em;
  min-height: 13px;
}

.product-purchase__thumbnails--kit {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-purchase__thumbnails--kit button {
  aspect-ratio: 1 / 1;
  padding: 10px;
}

.product-purchase__thumbnails--kit button[hidden] {
  display: none;
}

.product-purchase__thumbnails--kit img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

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

.product-purchase--kit h1 {
  font-size: clamp(26px, 3.2vw, 40px);
}

/* The kit price row, its struck-through compare and its save label went with
   v2 #17 — the tier buttons and the gallery badge carry those figures now. */

.product-purchase__coverage-list {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.product-purchase__coverage {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  border: 1.5px solid rgba(33, 78, 52, 0.2);
  border-radius: 8px;
  background: #fff;
}

.product-purchase__coverage[aria-pressed="true"] {
  border-color: #214e34;
  background: #dde7e0;
}

.product-purchase__coverage-radio {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid #214e34;
  border-radius: 999px;
}

.product-purchase__coverage-radio > span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: transparent;
}

.product-purchase__coverage[aria-pressed="true"] .product-purchase__coverage-radio > span {
  background: #214e34;
}

.product-purchase__coverage-main {
  flex: 1;
}

.product-purchase__coverage-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #173824;
}

.product-purchase__coverage-desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #5c6b60;
}

.product-purchase__coverage-meta {
  text-align: right;
}

.product-purchase__coverage-price {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #173824;
}

.product-purchase__coverage-tag {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a1c22;
}

.product-purchase__addons {
  padding: 18px;
  margin-bottom: 22px;
  border: 1px solid rgba(33, 78, 52, 0.18);
  border-radius: 8px;
}

.product-purchase__addons > .product-purchase__label {
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.product-purchase__addon {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.product-purchase__addon:first-of-type {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(33, 78, 52, 0.12);
}

.product-purchase__addon:last-of-type {
  padding-top: 14px;
}

.product-purchase__addon input {
  width: 18px;
  height: 18px;
  accent-color: #214e34;
}

.product-purchase__addon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.product-purchase__addon-copy {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: #3d4c42;
}

.product-purchase__addon-copy strong {
  color: #173824;
}

.product-purchase__addon-price {
  font-size: 14px;
  font-weight: 700;
  color: #173824;
}

.product-purchase--kit .product-purchase__form-row {
  flex-wrap: wrap;
  align-items: stretch;
  height: auto;
}

.product-purchase--kit .product-purchase__add {
  min-width: 220px;
}

.product-purchase__shipping-note--kit {
  margin-bottom: 22px;
}

.product-purchase__success--kit {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  margin: 0 0 22px;
  border-radius: 8px;
  background: #dde7e0;
  font-size: 13px;
  color: #173824;
}

.product-purchase__success--kit[hidden] {
  display: none;
}

.product-purchase__success-check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #214e34;
  color: #fff;
  font-size: 12px;
}

.product-purchase__upgrade-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 26px;
  border-radius: 8px;
  background: #f7f4ec;
}

.product-purchase__upgrade-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.product-purchase__upgrade-copy {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: #3d4c42;
}

.product-purchase__upgrade-copy strong {
  color: #173824;
}

.product-purchase__upgrade {
  padding: 12px 18px;
  cursor: pointer;
  border: 1.5px solid #214e34;
  border-radius: 999px;
  background: transparent;
  color: #214e34;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-purchase--kit .product-purchase__accordion-answer {
  white-space: pre-line;
}

/* Slot the breadcrumb section moves into on a phone (v2 #27). Collapses to
   nothing on desktop, where the trail stays in its own section above. */
.product-purchase__breadcrumb-slot:empty {
  display: none;
}

.product-purchase__breadcrumb-slot {
  margin-bottom: 12px;
}

/* Aug 28 #6 + #7: phone gallery. The stage loses its inset padding so the
   product fills its frame, the thumbnails come down a size, and the prev/next
   arrows appear either side of the row. This block sits at the foot of the
   file on purpose — the kit variant's own button padding is declared further
   up at the same specificity, and these have to land after it. */
@media (max-width: 749px) {
  .product-purchase__media-stage {
    padding: 0;
  }

  /* Aug 31 #22: switching media shunted everything below it — the stage stood
     350px on one image and 420px on the next. aspect-ratio was already 1/1;
     what overrode it is the automatic minimum size of a grid item, which lets
     a tall image push its row open. Pin the row and cap the image to it, so
     the picture letterboxes inside a stage that never changes height. */
  .product-purchase__media-stage {
    grid-template-rows: minmax(0, 1fr);
  }

  .product-purchase__media-stage img,
  .product-purchase__media-stage--kit > img {
    min-height: 0;
    max-height: 100%;
  }

  /* Aug 31 #40 + #6: the first screen has to reach the title and rating, and
     it was spending its height on furniture. This note is empty on both
     product templates but still held 13px plus the column gap above it. */
  .product-purchase__media-note:empty {
    display: none;
  }

  .product-purchase__gallery {
    gap: 10px;
  }

  /* Fixed-width columns rather than fractions of the row: the thumbnails were
     sized by however much width was left over, which made them nearly as tall
     as they were wide. 48px reads as a strip under the image, and the same
     rule holds the pack gallery's three and the kit's four. */
    /* Sep 3: this scrolls, but it was position:static, so it was not the
       containing block for the absolutely positioned .visually-hidden label
       inside each thumbnail — and an overflow ancestor only clips an absolutely
       positioned box that sits in its containing-block chain. Those 1px labels
       therefore ignored the scroller, came to rest at their button's scrolled
       offset (x~397 on a 390px screen) and dragged the whole document out to
       497px wide. The page scrolled sideways on a phone because of them.

       Making the strip a containing block brings them back under its clip.
       Measured on a 390px viewport: 497 -> 390. Forcing overflow:hidden here
       does not help, which is what proves the mechanism — the boxes were never
       being clipped by this element at all. */
  .product-purchase__thumbnails,
  .product-purchase__thumbnails--kit {
    position: relative;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 48px;
    justify-content: center;
    /* Now that the gallery runs off the product's media there can be nine of
       these, not five: 9 x 48px plus gaps overruns the row and took the page
       with it. The strip scrolls instead. `safe center` keeps a short strip
       centred while making sure a long one can still be scrolled back to its
       first thumb — plain `center` puts the overflow out of reach on both
       sides. Browsers without it drop the line and keep the centring above. */
    justify-content: safe center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .product-purchase__thumbnails::-webkit-scrollbar,
  .product-purchase__thumbnails--kit::-webkit-scrollbar {
    display: none;
  }

  .product-purchase__thumbnails button,
  .product-purchase__thumbnails--kit button {
    padding: 4px;
  }

  .product-purchase__thumb-arrow {
    display: grid;
  }

  /* Sep 1 #6: the white border around the main image is this section's own
     20px side padding, not anything baked into the pictures — they are square
     and fill a square stage exactly. So the stage is pulled back out over that
     padding to sit edge to edge, and loses its corner radius, which only reads
     as rounded while there is a margin outside it. The thumbnails keep the
     gutter: the row is a scrolling strip and needs an edge to run to. */
  .product-purchase__media-stage {
    width: calc(100% + 40px);
    margin-inline: -20px;
    border-radius: 0;
  }

  /* ...and a size down from 48px, as asked on the same thread. */
  .product-purchase__thumbnails,
  .product-purchase__thumbnails--kit {
    grid-auto-columns: 42px;
  }
}