/* =============================================================
   Quick order wizard (/quick-order) — built to rebrand/alacarte/order_a.

   Everything is scoped under #quick-order so it can load on layouts.app
   without leaking into the legacy bundle, and so the legacy bundle's
   element rules lose to these class rules.

   Typography follows the reference's annotations: Lora for the page
   heading, step labels, card titles and the summary heading; Circular Std
   for body copy, with Bold on every price.
   ============================================================= */

#quick-order {
  background-color: var(--sc-pale-blue);
  /* Tightened top padding so Additional Formats clears the fold (was space-8). */
  padding: var(--sc-space-5) 0 var(--sc-space-9);
  color: var(--sc-text);
  font-size: var(--sc-small);
}

/* The legacy bundle puts `padding: 20px` on every form (css/style.css:412),
   which made the wizard's columns 40px narrower than the heading above them —
   so the heading never lined up with the cards, in either variant. The form is
   a wrapper here, not a visual box; the panels supply their own padding. */
#quick-order form {
  padding: 0;
}

/* One measure for the whole wizard, centred, so variant A has air either side
   rather than running to the edges of the row.
   The !important is not decoration: scancafe.css:1613 sets
   `.container { max-width: 1370px !important }` above 1401px, and there is no
   selector that beats an !important without one. Scoped to this page only;
   remove both together if that legacy rule ever goes. */
#quick-order .qo-container {
  max-width: 1180px !important;
  margin-inline: auto;
}

/* ---------- intro ---------- */

#quick-order .qo-intro {
  margin-bottom: var(--sc-space-4);
}

/* Step-aware intro title: the media title shows on step 1, the delivery title
   on step 2. data-step on #quick-order is toggled by sc-quick-order.js. */
#quick-order[data-step="1"] .qo-intro [data-step-head="2"],
#quick-order[data-step="2"] .qo-intro [data-step-head="1"] {
  display: none;
}

/* No font-size here: the h1 rule in sc-components.css sets the site-wide
   42px curve, and a page-local clamp capped at 34px is exactly what made this
   heading smaller than the same heading elsewhere. */
#quick-order .qo-intro h1 {
  margin: 0 0 var(--sc-space-3);
  color: var(--sc-navy);
  line-height: 1.2;
}

#quick-order .qo-intro p {
  margin: 0;
  max-width: 680px;
  font-size: var(--sc-body);
  line-height: 1.55;
}

/* ---------- validation ---------- */

#quick-order .qo-alert {
  margin-bottom: var(--sc-space-5);
  padding: var(--sc-space-4);
  border: 1px solid var(--sc-red);
  border-radius: var(--sc-radius);
  background: #fff;
  color: var(--sc-red);
}

#quick-order .qo-alert ul {
  margin: 0;
  padding-left: 1.2em;
}

#quick-order .qo-error {
  margin: var(--sc-space-4) 0 0;
  color: var(--sc-red);
  font-weight: var(--sc-weight-medium);
}

#quick-order .qo-hint {
  margin: var(--sc-space-4) 0 0;
  color: var(--sc-text);
}

/* ---------- layout ---------- */

#quick-order .qo-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "steps steps"
    "body aside"
    "nav aside";
  gap: var(--sc-space-5);
  align-items: start;
}

#quick-order .qo-main {
  display: contents;
}

#quick-order .qo-steps {
  grid-area: steps;
}

#quick-order .qo-panel:not([hidden]) {
  display: contents;
}

#quick-order .qo-panel[hidden] {
  display: none;
}

#quick-order .qo-panel-body {
  grid-area: body;
  min-width: 0;
}

#quick-order .qo-nav {
  grid-area: nav;
}

#quick-order .qo-aside {
  grid-area: aside;
}

/* ---------- step pills ---------- */

/* Auto-flow rather than a fixed column count: this was `repeat(3, 1fr)` and
   kept that third track after the wizard dropped to two steps, so the pills
   filled two thirds of the row. Now it always spans the column, whatever the
   step count. */
#quick-order .qo-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sc-space-3);
  margin: 0 0 var(--sc-space-3);
  padding: 0;
  list-style: none;
}

#quick-order .qo-step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: var(--sc-space-2);
  width: 100%;
  padding: 10px var(--sc-space-3);
  border: 1px solid var(--sc-border-soft);
  border-radius: var(--sc-radius-pill);
  background: #fff;
  /* Not-reached steps are grey; active and completed steps override to navy. */
  color: var(--sc-text-muted);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-small);
  cursor: pointer;
  transition: background-color var(--sc-transition), color var(--sc-transition);
}

/* Upcoming steps (Checkout, Thank you): not reached yet, not clickable. Muted
   like the Kits stepper's upcoming steps; the number badge stays grey. */
#quick-order .qo-step-upcoming {
  cursor: default;
  color: var(--sc-text-muted);
}

#quick-order .qo-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sc-border-soft);
  color: var(--sc-navy);
  font-family: var(--sc-font);
  font-size: 12px;
  font-weight: var(--sc-weight-bold);
}

/* A completed step (one you've moved past) shows a tick in its badge, matching
   the checkout stepper. On step 2, Media Selection is done. data-step on the
   root is toggled by sc-quick-order.js. */
#quick-order[data-step="2"] .qo-step[data-goto="1"] .qo-step-num {
  font-size: 0 !important;
}
#quick-order[data-step="2"] .qo-step[data-goto="1"] .qo-step-num::after {
  content: "\2713";
  font-size: 12px;
  line-height: 1;
}

/* Selected state is carried by the border and the number badge, not by a
   filled pill: white background, light-blue border, navy badge. */
#quick-order .qo-step-active {
  border-color: var(--sc-navy);
  background: #fff;
  color: var(--sc-navy);
}
/* Completed (previous) steps read navy. JS adds .qo-step-done for steps < current. */
#quick-order .qo-step-done {
  color: var(--sc-navy);
}

#quick-order .qo-step-active .qo-step-num {
  background: var(--sc-navy);
  color: var(--sc-on-brand);
}

/* A completed step reads the same as one not reached yet: only the step you
   are on is marked. No rule of its own, so `.qo-step-num` gives it the grey
   badge -- it used to keep a light-blue badge, which made step 1 look active
   while you were standing on step 2. */

/* ---------- cards ---------- */

#quick-order .qo-card {
  border: 1px solid var(--sc-border-soft);
  border-radius: var(--sc-radius-lg);
  background: #fff;
}

#quick-order .qo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-space-4);
}

/* ---------- step 1: media ---------- */

#quick-order .qo-media {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sc-space-4);
}

#quick-order .qo-media-head {
  display: flex;
  gap: var(--sc-space-3);
  align-items: flex-start;
}

#quick-order .qo-media-head > div {
  min-width: 0;
}

#quick-order .qo-media-head img {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

#quick-order .qo-media-head h2 {
  margin: 0 0 2px;
  color: var(--sc-navy);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-medium);
}

#quick-order .qo-media-head p {
  margin: 0;
  color: var(--sc-text);
  font-size: 13px;
  line-height: 1.4;
}

/* The rule above the price row reads as the card's own total. It used to be
   on the Photography card alone (it has the most above it); every media card
   carries it now so the grid is consistent. */
#quick-order .qo-media-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  margin-top: var(--sc-space-4);
  padding-top: var(--sc-space-4);
  border-top: 1px solid var(--sc-border-soft);
}

#quick-order .qo-price strong {
  color: var(--sc-navy);
  font-weight: var(--sc-weight-bold);
}

#quick-order .qo-price small {
  color: var(--sc-text);
  font-size: 12px;
}

#quick-order .qo-qty {
  width: 74px;
  padding: 7px 10px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  background: #fff;
  color: var(--sc-navy);
  font-family: inherit;
  font-size: var(--sc-small);
  text-align: right;
}

#quick-order .qo-qty:focus-visible {
  outline: 2px solid var(--sc-light-blue);
  outline-offset: 1px;
}

/* ---- quantity stepper ---- */

/* The buttons and the field read as one control, so the border lives on the
   wrapper and the input inside it is bare. The field stays typable — the
   buttons are a shortcut, not the only way in, which matters for the media
   counts where people paste a number from a spreadsheet. */
#quick-order .qo-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  background: #fff;
  overflow: hidden;
}

#quick-order .qo-stepper .qo-qty {
  width: 52px;
  padding: 7px 4px;
  border: 0;
  border-radius: 0;
  text-align: center;
}

/* Inset so the ring sits inside the wrapper's border instead of straddling it. */
#quick-order .qo-stepper .qo-qty:focus-visible {
  outline: 2px solid var(--sc-light-blue);
  outline-offset: -2px;
}

/* Right-aligned: these are bare number fields, so the digits line up the way
   a figure should. The stepper variant stays centred, where the value sits
   between its own two buttons. */
#quick-order .qo-qty-plain {
  width: 56px;
  padding: 7px 6px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: inherit;
  text-align: right;
}

#quick-order .qo-qty-plain:focus-visible {
  outline: 2px solid var(--sc-light-blue);
  outline-offset: 0;
}

#quick-order .qo-qstep {
  flex: 0 0 auto;
  width: 32px;
  padding: 0;
  border: 0;
  background: var(--sc-pale-blue);
  color: var(--sc-navy);
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--sc-weight-bold);
  line-height: 1;
  cursor: pointer;
}

#quick-order .qo-qstep:hover {
  background: var(--sc-light-blue);
  color: #fff;
}

#quick-order .qo-qstep:focus-visible {
  outline: 2px solid var(--sc-light-blue);
  outline-offset: -2px;
}

/* At zero there is nothing to take away. Fading the glyph only — no box, no
   dimmed panel — keeps the control looking like one piece. */
#quick-order .qo-qstep:disabled {
  background: var(--sc-pale-blue);
  color: var(--sc-border);
  cursor: default;
}

/* ---------- step 2: enhancements ---------- */

#quick-order .qo-enh {
  display: flex;
  gap: var(--sc-space-3);
  padding: var(--sc-space-4);
  cursor: pointer;
}

#quick-order .qo-enh-input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--sc-light-blue);
}

#quick-order .qo-enh-body {
  flex: 1 1 auto;
  min-width: 0;
}

#quick-order .qo-enh-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-space-3);
}

#quick-order .qo-enh-name {
  color: var(--sc-navy);
  font-weight: var(--sc-weight-bold);
}

#quick-order .qo-enh-price {
  color: var(--sc-light-blue);
  font-weight: var(--sc-weight-bold);
  white-space: nowrap;
}

#quick-order .qo-enh-price small {
  color: var(--sc-text);
  font-size: 11px;
  font-weight: var(--sc-weight-regular);
}

#quick-order .qo-enh-blurb {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
}

/* ---------- step 3: delivery ---------- */

#quick-order .qo-int:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#quick-order .qo-active-badge {
  display: inline-block;
  margin-bottom: var(--sc-space-2);
  padding: 4px 10px;
  border-radius: var(--sc-radius-pill);
  background: var(--sc-light-blue);
  color: var(--sc-on-brand);
  font-size: 11px;
  font-weight: var(--sc-weight-bold);
  letter-spacing: 0.04em;
}

#quick-order .qo-del.qo-del-locked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

#quick-order .qo-interval {
  display: inline-flex;
  gap: 4px;
  margin-bottom: var(--sc-space-4);
  padding: 4px;
  border-radius: var(--sc-radius-pill);
  background: #fff;
  border: 1px solid var(--sc-border-soft);
}

#quick-order .qo-int {
  padding: 6px 18px;
  border: 0;
  border-radius: var(--sc-radius-pill);
  background: transparent;
  color: var(--sc-text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

#quick-order .qo-int-active {
  background: var(--sc-navy);
  color: var(--sc-on-brand);
  font-weight: var(--sc-weight-medium);
}

/* The Kinoke card is much taller than the two beside it (phone image plus five
   bullets), so `align-items: start` left the right column stopping halfway with
   dead space under it. The columns stretch instead, and the right one splits
   that height evenly between its two cards. */
#quick-order .qo-del-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sc-space-4);
  align-items: stretch;
}

#quick-order .qo-del-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--sc-space-4);
}

/* Their content is short for the height they now have, so it sits centred
   rather than pinned to the top of a tall box. */
#quick-order .qo-del-col .qo-del {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The icon is a fixed-width inline-flex badge that `text-align: center` used to
   centre. In a flex column it stretches to the start edge instead, so it needs
   to centre itself. */
#quick-order .qo-del-col .qo-del-icon {
  align-self: center;
}

#quick-order .qo-del {
  position: relative; /* anchor for the "Selected" badge */
  padding: var(--sc-space-4);
  text-align: center;
  transition: border-color var(--sc-transition), box-shadow var(--sc-transition);
}

#quick-order .qo-del[data-plan-family] {
  cursor: pointer;
}

#quick-order .qo-del.qo-selected {
  border-color: var(--sc-navy);
  box-shadow: 0 0 0 1px var(--sc-navy);
}

/* "Selected" badge on the chosen delivery card. Follows the selection (Kinoke
   by default). Brand orange-red, like the "Most Popular" ribbon. */
#quick-order .qo-del.qo-selected::before {
  content: "Selected";
  position: absolute;
  top: -11px;
  right: 16px;
  z-index: 2;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--sc-orange);
  color: var(--sc-on-brand);
  font-size: 12px;
  font-weight: var(--sc-weight-semi);
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

#quick-order .qo-del h3 {
  margin: 0 0 4px;
  color: var(--sc-navy);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-h4);
  font-weight: var(--sc-weight-medium);
}

#quick-order .qo-del-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: var(--sc-space-3);
  border-radius: 50%;
  background: var(--sc-pale-blue);
  color: var(--sc-light-blue);
}

#quick-order .qo-del-icon svg {
  width: 35px;
  height: 35px;
}

/* Price sits directly under the title, above the blurb — per the reference's
   "rearrange the position of pricing" note on both cards. */
#quick-order .qo-del-price {
  margin: 0 0 var(--sc-space-2);
  color: var(--sc-navy);
}

#quick-order .qo-del-price strong {
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-bold);
}

#quick-order .qo-del-price small {
  color: var(--sc-text);
  font-size: 12px;
}

#quick-order .qo-del-blurb {
  margin: 0 0 var(--sc-space-2);
  font-size: 12px;
  line-height: 1.5;
}

#quick-order .qo-del-note {
  margin: 0;
  color: var(--sc-text);
  font-size: 11px;
}

#quick-order .qo-usb-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  margin: var(--sc-space-3) 0 0;
  font-size: 12px;
}

#quick-order .qo-usb-qty .qo-stepper .qo-qty {
  width: 46px;
}

/* Kinoke card */

#quick-order .qo-del-kinoke {
  text-align: left;
}

#quick-order .qo-ki-logo {
  display: block;
  width: 240px;
  height: auto;
  margin: 0 auto var(--sc-space-3);
}

#quick-order .qo-ki-app {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  margin: 0 auto var(--sc-space-4);
}

/* Bold, and above the bullets — per the reference's note on this card. */
#quick-order .qo-ki-price {
  margin: 0 0 var(--sc-space-3);
  color: var(--sc-navy);
  font-weight: var(--sc-weight-bold);
}

#quick-order .qo-ki-list {
  margin: 0 0 var(--sc-space-3);
  padding-left: 1.1em;
  font-size: 12px;
  line-height: 1.6;
}

#quick-order .qo-ki-list li {
  margin-bottom: 2px;
}

#quick-order .qo-ki-link {
  display: inline-block;
  margin-top: var(--sc-space-2);
  color: var(--sc-light-blue);
  font-size: 12px;
  text-decoration: underline;
}

/* ---------- step nav ---------- */

#quick-order .qo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  margin-top: var(--sc-space-5);
}

#quick-order .qo-btn {
  padding: 11px var(--sc-space-6);
  border: 0;
  border-radius: var(--sc-radius);
  font-family: inherit;
  font-size: var(--sc-small);
  font-weight: var(--sc-weight-medium);
  cursor: pointer;
  transition: background-color var(--sc-transition);
}

#quick-order .qo-btn-next {
  background: var(--sc-red);
  color: var(--sc-on-brand);
}

#quick-order .qo-btn-next:hover {
  background: var(--sc-navy);
}

#quick-order .qo-btn-back {
  background: var(--sc-text-muted);
  color: var(--sc-on-brand);
}

#quick-order .qo-btn-back:hover {
  background: var(--sc-navy);
}

/* The final CTA is light blue, not red — called out in the reference. */
#quick-order .qo-btn-submit {
  width: 100%;
  margin-top: var(--sc-space-4);
  background: var(--sc-red);
  color: var(--sc-on-brand);
}

#quick-order .qo-btn-submit:hover {
  background: var(--sc-navy);
}

/* ---------- summary ---------- */

#quick-order .qo-aside {
  position: sticky;
  top: var(--sc-space-5);
}

#quick-order .qo-summary {
  overflow: hidden;
  border-radius: var(--sc-radius-lg);
  background: #fff;
  box-shadow: var(--sc-shadow-card);
}

#quick-order .qo-summary-head {
  padding: var(--sc-space-3) var(--sc-space-4);
  background: var(--sc-navy);
}

#quick-order .qo-summary-head h2 {
  margin: 0;
  color: var(--sc-on-brand);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-medium);
}

#quick-order .qo-summary-body {
  padding: var(--sc-space-4);
}

#quick-order .qo-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-space-3);
  margin-bottom: var(--sc-space-3);
  font-size: 13px;
}

#quick-order .qo-sum-row span:last-child {
  color: var(--sc-navy);
  font-weight: var(--sc-weight-bold);
  white-space: nowrap;
}

#quick-order .qo-sum-row small {
  color: var(--sc-text);
  font-size: 11px;
}

#quick-order .qo-sum-discount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  margin: var(--sc-space-4) 0;
  padding-top: var(--sc-space-4);
  border-top: 1px solid var(--sc-border-soft);
  font-size: 13px;
}

#quick-order .qo-sum-discount input {
  width: 110px;
  padding: 6px 8px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  font-family: inherit;
  font-size: 12px;
  text-align: right;
}

#quick-order .qo-sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-space-3);
  padding-top: var(--sc-space-3);
  border-top: 1px solid var(--sc-border-soft);
  color: var(--sc-navy);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-bold);
}

/* Undiscounted total struck through, discounted total beside it. The old
   price is deliberately quiet — muted, regular weight, body size — so the
   figure people act on is still the only bold one on the row. */
/* Row-level struck/discounted pair, the same shape the Total uses. */
#quick-order .qo-sum-values {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sc-space-2);
}

#quick-order .qo-sum-was {
  color: var(--sc-text);
  text-decoration: line-through;
}

#quick-order .qo-sum-total-values {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sc-space-2);
}

#quick-order .qo-sum-total-was {
  color: var(--sc-text);
  font-size: 13px;
  font-weight: var(--sc-weight-regular);
  text-decoration: line-through;
}

#quick-order .qo-sum-note {
  margin: var(--sc-space-3) 0 0;
  color: var(--sc-text);
  /* !important beats the temporary 16px preview hack (app_head) that would
     otherwise inflate this note to body size. */
  font-size: 12px !important;
  line-height: 1.5;
}

/* ---------- help band ---------- */

#quick-order .qo-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sc-space-5);
  margin-top: var(--sc-space-6);
  padding: var(--sc-space-5);
  border: 1px solid var(--sc-border-soft);
  border-radius: var(--sc-radius-lg);
  background: #fff;
  text-align: center;
}

#quick-order .qo-help h2 {
  margin: 0 0 4px;
  color: var(--sc-navy);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-medium);
}

#quick-order .qo-help p {
  margin: 0;
  font-size: 12px;
}

#quick-order .qo-help a {
  color: var(--sc-navy);
  text-decoration: underline;
}

/* ---------- responsive ---------- */

/* Horizontal clip so the 240px CSS tip bubbles cannot push the page
   wider than the viewport. They still paint over the cards. */
#quick-order {
  overflow-x: clip;
}

@media (max-width: 991px) {
  #quick-order .qo-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "steps"
      "body"
      "aside"
      "nav";
  }

  #quick-order .qo-aside {
    position: static;
  }

  /* Sidebar already stacks here. Two half-width media cards leave ~300px
     for album / carousel copy, which overflows. One column keeps the
     Photography extras readable. */
  #quick-order .qo-grid,
  #quick-order .qo-help,
  #quick-order .qo-photo-subs {
    grid-template-columns: minmax(0, 1fr);
  }

  #quick-order .qo-del-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, so there is no Kinoke card alongside to match - let them size to
     their content again. */
  #quick-order .qo-del-col {
    grid-template-rows: auto auto;
  }

  #quick-order .qo-intro h1 {
    font-size: clamp(26px, 6vw, 34px);
  }

  #quick-order .qo-intro br {
    display: none;
  }

  #quick-order .qo-steps {
    gap: var(--sc-space-2);
  }

  #quick-order .qo-step {
    min-width: 0;
  }

  #quick-order .qo-nav {
    flex-wrap: wrap;
  }

  #quick-order .qo-nav .qo-btn {
    flex: 1 1 auto;
  }

  #quick-order .qo-discount-field .qo-sum-discount {
    flex-wrap: wrap;
  }

  #quick-order .qo-sum-discount input {
    width: min(110px, 100%);
  }

  #quick-order .qo-tip::after,
  #quick-order .qo-gate-hint-wrap--locked::after {
    width: min(240px, calc(100vw - 32px));
    left: auto;
    right: 0;
    transform: none;
  }
}

@media (max-width: 575px) {
  #quick-order {
    padding: var(--sc-space-6) 0;
  }

  #quick-order .qo-container {
    padding-inline: 16px;
  }

  /* Stack the steps one per row on phones (like the Kits stepper), instead of
     cramming four pills across. */
  #quick-order .qo-steps {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #quick-order .qo-step {
    padding: 9px 12px;
    font-size: 12px;
  }

  #quick-order .qo-nav .qo-btn {
    width: 100%;
    padding: 11px var(--sc-space-4);
  }

  #quick-order .qo-media-foot {
    flex-wrap: wrap;
  }

  #quick-order .qo-interval {
    width: 100%;
    justify-content: center;
  }

  #quick-order .qo-int {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* =============================================================
   Variant B — order_b

   Identical wizard; the only difference is that the order summary
   is held back until the delivery step, so steps 1 and 2 run full
   width. Driven off data-step, which the wizard JS already keeps
   current, so no extra scripting.
   ============================================================= */

#quick-order.qo-variant-b .qo-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "steps"
    "body"
    "nav";
}

/* The summary only appears on the last step, so the steps before it have the
   whole row to themselves. Full width read as stretched and a fixed cap did not
   match variant A, so the measure is variant A's OWN column width — the row
   minus the summary and its gap — just centred instead of left-aligned.
   Derived rather than hard-coded so it tracks the container at every viewport;
   `.container` is forced to 1370px by scancafe.css, not the 1180 set here. */
#quick-order.qo-variant-b:not([data-step="2"]) .qo-aside {
  display: none;
}

#quick-order.qo-variant-b:not([data-step="2"]) .qo-panel-body,
#quick-order.qo-variant-b:not([data-step="2"]) .qo-nav {
  /* `.qo-main` is display:contents, so the old width lived on that box.
     Apply the same measure to the grid children that replaced it. The stepper
     is intentionally excluded so it runs the full width (like order/payment). */
  width: calc(100% - 320px - var(--sc-space-5));
  justify-self: center;
}

/* The page heading and the help band sit outside .qo-shell, so they would keep
   the full row and leave the centred column looking detached. They take the
   same measure — these are ordinary blocks, not grid items, so auto margins are
   the right tool here. */
#quick-order.qo-variant-b:not([data-step="2"]) .qo-intro,
#quick-order.qo-variant-b:not([data-step="2"]) .qo-help {
  max-width: calc(100% - 320px - var(--sc-space-5));
  margin-inline: auto;
}

#quick-order.qo-variant-b[data-step="2"] .qo-shell {
  grid-template-columns: minmax(0, 1fr) 320px;
  /* Steps span the full width (like variant A and order/payment), with the
     summary below the stepper rather than beside it. */
  grid-template-areas:
    "steps steps"
    "body aside"
    "nav aside";
}

/* Steps 1 and 2 take the whole row, including the space the summary occupies on
   step 3 — capping the measure just left an empty strip where the panel would be.
   The cards get wider rather than the grid gaining a column: two columns is what
   the reference shows, and it keeps the media and enhancement cards the same
   shape in both variants. */

@media (max-width: 991px) {
  #quick-order.qo-variant-b[data-step="2"] .qo-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "steps"
      "body"
      "aside"
      "nav";
  }

  /* Variant B desktop measure subtracts the 320px summary. Below this
     breakpoint the summary already stacks, so that leftover strip would
     crush the cards. */
  #quick-order.qo-variant-b:not([data-step="2"]) .qo-steps,
  #quick-order.qo-variant-b:not([data-step="2"]) .qo-panel-body,
  #quick-order.qo-variant-b:not([data-step="2"]) .qo-nav {
    width: auto;
    justify-self: stretch;
  }

  #quick-order.qo-variant-b:not([data-step="2"]) .qo-intro,
  #quick-order.qo-variant-b:not([data-step="2"]) .qo-help {
    max-width: none;
    margin-inline: 0;
  }
}


/* ---------- discount ---------- */

#quick-order .qo-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sc-light-blue);
  font-family: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

#quick-order .qo-link-muted {
  color: var(--sc-text);
}

#quick-order .qo-discount-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--sc-space-4) 0;
  padding-top: var(--sc-space-4);
  border-top: 1px solid var(--sc-border-soft);
}

#quick-order .qo-discount-field .qo-sum-discount {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

#quick-order .qo-discount-apply {
  margin: var(--sc-space-2) 0 0;
  text-align: right;
}

/* The applied code sits where the input was: the row is still the same
   space-between flex, so it lands hard right under the same label. */
#quick-order .qo-discount-code {
  color: var(--sc-navy);
  font-weight: var(--sc-weight-bold);
  letter-spacing: .02em;
}

#quick-order .qo-discount-msg {
  margin: 6px 0 var(--sc-space-2);
  color: var(--sc-light-blue);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

#quick-order .qo-discount-msg--error {
  color: var(--sc-red);
}



/* =============================================================
   Photography card — album / carousel + Advanced options
   Built to rebrand/alacarte/photo_card.

   The two pricing rules are deliberately shown differently: album
   and carousel reveal their own count when ticked, because they
   bill per album and per carousel; the enhancements show a price
   and no input, because they bill at the photo quantity below.
   ============================================================= */

#quick-order .qo-photo-subs {
  /* Stack the sub-options one per line: checkbox - label - "?" on each row.
     The two-column grid squeezed the label at 16px and broke it across lines. */
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
  margin-top: var(--sc-space-4);
  align-items: flex-start;
}

#quick-order .qo-photo-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

#quick-order .qo-photo-sub-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Keep the "?" pinned beside the label. The label breaks its own text when
     it has to; the hint must never drop onto a line of its own below it. */
  flex-wrap: nowrap;
  max-width: 100%;
}

#quick-order .qo-photo-sub-row .qo-check {
  min-width: 0;
}

#quick-order .qo-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  margin: 0;
  font-size: 12px;
  cursor: pointer;
  min-width: 0;
  white-space: normal;
}

#quick-order .qo-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--sc-light-blue);
}

#quick-order .qo-photo-sub-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--sc-space-1) 23px;
}

#quick-order .qo-photo-sub-qty small {
  color: var(--sc-text);
  font-size: 11px;
}

#quick-order .qo-qty-sm {
  width: 58px;
  padding: 5px 8px;
  font-size: 12px;
}

/* ---- the "?" hints ---- */

#quick-order .qo-tip {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sc-border-soft);
  color: var(--sc-text);
  font-family: inherit;
  font-size: 10px;
  line-height: 15px;
  cursor: help;
}

/* CSS-only bubble: this page carries no tooltip library and the native
   `title` delay is too slow to be useful next to a price. */
#quick-order .qo-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 5;
  width: 240px;
  padding: var(--sc-space-3);
  border-radius: var(--sc-radius);
  background: var(--sc-navy);
  color: var(--sc-on-brand);
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sc-transition);
}

#quick-order .qo-tip:hover::after,
#quick-order .qo-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* ---- advanced options ---- */

/* Photography qty 0 — hover explains why album / carousel / Advance options are off. */
#quick-order .qo-gate-hint-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Gate hint sits on the checkbox only, not the label copy or ? tip. */
#quick-order .qo-photo-sub .qo-gate-hint-wrap {
  flex-shrink: 0;
  line-height: 0;
}

#quick-order .qo-photo-sub .qo-gate-hint-wrap--locked {
  cursor: not-allowed;
}

#quick-order .qo-adv-toggle-wrap {
  margin-top: var(--sc-space-3);
}

#quick-order .qo-gate-hint-wrap--locked {
  cursor: not-allowed;
}

#quick-order .qo-gate-hint-wrap--locked::after {
  content: attr(data-gate-hint);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: min(240px, 70vw);
  padding: var(--sc-space-3);
  border-radius: var(--sc-radius);
  background: var(--sc-navy);
  color: var(--sc-on-brand);
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sc-transition);
}

#quick-order .qo-gate-hint-wrap--locked:hover::after,
#quick-order .qo-gate-hint-wrap--locked:focus-within::after {
  opacity: 1;
  visibility: visible;
}

#quick-order .qo-adv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sc-text);
  font-family: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

#quick-order .qo-adv-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sc-navy);
  color: #fff;
  text-decoration: none;
  transition: transform var(--sc-transition);
}

#quick-order .qo-adv-chevron svg {
  display: block;
}

#quick-order .qo-adv-toggle[aria-expanded="true"] .qo-adv-chevron {
  transform: rotate(180deg);
}

#quick-order .qo-adv {
  margin-top: var(--sc-space-3);
}

#quick-order .qo-adv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

#quick-order .qo-adv-price {
  margin-left: auto;
  white-space: nowrap;
}

#quick-order .qo-adv-price strong {
  color: var(--sc-navy);
  font-weight: var(--sc-weight-bold);
  font-size: 13px;
}

#quick-order .qo-adv-price small {
  color: var(--sc-text);
  font-size: 11px;
}

#quick-order .qo-adv-toggle:disabled {
  cursor: not-allowed;
}



/* The footer carries a 64px top margin, which is invisible on a white page but
   shows as a white stripe between this pale-blue section and the navy footer.
   The footer is a body-level sibling of this page, so it can be closed here
   without touching the footer component itself. */
#quick-order ~ .sc-footer {
  margin-top: 0;
}

/* Photo-subs and tip bubbles are defined after the main 991px block, so
   those overrides have to live here or the two-column / 240px rules win. */
@media (max-width: 991px) {
  #quick-order .qo-photo-subs {
    grid-template-columns: minmax(0, 1fr);
  }

  #quick-order .qo-tip::after,
  #quick-order .qo-gate-hint-wrap--locked::after {
    width: min(240px, calc(100vw - 32px));
    left: auto;
    right: 0;
    transform: none;
  }
}

/* ---------- Additional Formats accordion (2026-10-08) ----------
   Small / Medium / Large / Documents & Large Photos (ids 17 / 16 / 70 / 19),
   a <details> under the media cards. Each row: title | price | qty on top,
   image + bullet list underneath. */

#quick-order .qo-formats {
  margin-top: var(--sc-space-4);
}

#quick-order .qo-formats-head {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  padding: var(--sc-space-4) var(--sc-space-5);
  cursor: pointer;
  list-style: none;
}

#quick-order .qo-formats-head::-webkit-details-marker {
  display: none;
}

#quick-order .qo-formats-head:focus-visible {
  outline: 2px solid var(--sc-light-blue);
  outline-offset: 2px;
  border-radius: var(--sc-radius-lg);
}

#quick-order .qo-formats-title {
  margin: 0;
  color: var(--sc-navy);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-medium);
}

#quick-order .qo-formats[open] .qo-formats-chevron {
  transform: rotate(180deg);
}

#quick-order .qo-formats-body {
  padding: 0 var(--sc-space-5) var(--sc-space-2);
}

#quick-order .qo-format {
  display: grid;
  /* Title | price in a middle column | qty at the right edge, as in the design. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "title  price qty"
    "detail detail detail";
  align-items: center;
  column-gap: var(--sc-space-5);
  padding: var(--sc-space-5) 0;
  border-top: 1px solid var(--sc-border-soft);
}

#quick-order .qo-format-title {
  grid-area: title;
  margin: 0;
  color: var(--sc-navy);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-h5);
  font-weight: var(--sc-weight-medium);
}

#quick-order .qo-format-price {
  grid-area: price;
  white-space: nowrap;
}

#quick-order .qo-format-price strong {
  color: var(--sc-navy);
  font-weight: var(--sc-weight-bold);
}

#quick-order .qo-format-price small {
  color: var(--sc-text-muted);
  font-size: 12px;
}

#quick-order .qo-format-qty {
  grid-area: qty;
}

#quick-order .qo-format-detail {
  grid-area: detail;
  display: flex;
  align-items: center;
  gap: var(--sc-space-5);
  margin-top: var(--sc-space-3);
}

#quick-order .qo-format-img {
  flex: 0 0 auto;
  width: 84px;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}

#quick-order .qo-format-list {
  margin: 0;
  padding-left: var(--sc-space-5);
  color: var(--sc-navy);
  font-size: var(--sc-small);
  line-height: 1.5;
}

#quick-order .qo-format-list li + li {
  margin-top: var(--sc-space-2);
}

@media (max-width: 575px) {
  #quick-order .qo-formats-head,
  #quick-order .qo-formats-body {
    padding-left: var(--sc-space-4);
    padding-right: var(--sc-space-4);
  }

  #quick-order .qo-format {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title  title"
      "price  qty"
      "detail detail";
    row-gap: var(--sc-space-2);
  }

  #quick-order .qo-format-img {
    width: 64px;
  }
}

/* Pin these two to 12px (the preview hack otherwise inflates their 11px to
   16px). The #quick-order id lets the !important out-rank the hack. Covers the
   renew note in both delivery cards (inner span too) and the submit sub-note. */
#quick-order .qo-del-note,
#quick-order .qo-del-note span,
#quick-order .qo-sum-note[data-note="submit"] {
  font-size: 12px !important;
}

/* Order Summary alignment: the grid now starts the aside at the body row (level
   with the cards). On step 2 the body opens with the Monthly/Annual toggle, so
   drop the summary past it to line up with the Kinoke/Cloud cards. Desktop only
   (below 992px the summary stacks under the cards). */
@media (min-width: 992px) {
  #quick-order[data-step="2"] .qo-aside {
    /* Clear the full Monthly/Annual toggle block (toggle height + its 16px
       margin) so the summary lines up with the card border, not the toggle. */
    margin-top: 60px;
  }
}