/* November 6 Plans fixes, on Shaan's "Yes, fix them". Layout and strip: desktop only.
   Two or more price: all widths (his "Yes, phone too").
   1. Headline sits above the photo, so the plan picker and Continue button start at the top of the section.
   2. Two or more shows its weekly price (styled here, added by plans-fixes-nov6.js).
   3. Trust strip keeps to one line: "Harvested to order" is dropped (said again in the perks and Promise). */
@media (min-width: 1000px) {
  html body.flow-refinement #unit-plans#unit-plans #plans#plans {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    align-items: start;
  }

  html body.flow-refinement #unit-plans#unit-plans #plans#plans > .product-head,
  html body.flow-refinement #unit-plans#unit-plans #plans#plans > .product-layout {
    display: contents;
  }

  html body.flow-refinement #unit-plans#unit-plans #plans#plans > .product-head > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  html body.flow-refinement #unit-plans#unit-plans #plans#plans .gallery-column {
    grid-column: 1;
    grid-row: 2;
    margin-top: 40px;
  }

  html body.flow-refinement #unit-plans#unit-plans #plans#plans .configuration-column {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* Line the first label up with the top of the headline's capitals. */
    padding-top: 10px;
  }

  html body.flow-refinement #unit-plans#unit-plans #plans#plans > .promise,
  html body.flow-refinement #unit-plans#unit-plans #plans#plans > .buy-bar {
    grid-column: 1 / -1;
  }

  html body.flow-refinement #unit-plans#unit-plans #plans .support-details > .pr-strip .pr-most {
    display: none;
  }
}

/* Narrow computers: tighten the strip so its four items stay on one line. */
@media (min-width: 1000px) and (max-width: 1199px) {
  html body.flow-refinement #unit-plans#unit-plans #plans .support-details > .pr-strip {
    gap: 10px;
    letter-spacing: .03em;
  }
}

/* Two or more weekly price, all widths. */
html body #plans#plans .counter .household-price {
  display: block;
  margin-top: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--oh-ink, #144444);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1000px) {
  html body #plans#plans .counter .household-price {
    margin-top: 10px;
    font-size: 24px;
  }
}