/* Sting in the Tail — trade order page.
 * Layout glue only. Every colour, face and space resolves through the tokens in
 * ds/tokens.css; nothing brand-related is written literally here.
 * Rule 1 of the design system: page content never sits on white. White is for
 * product photography, which is why only .sitt-tile__img carries --sitt-surface.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--sitt-paper);
  color: var(--sitt-ink-muted);
  font-family: var(--sitt-font-mono);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* ---------------------------------------------------------------- header */

.ord-brand {
  display: flex;
  align-items: center;
  gap: var(--sitt-space-sm);
  text-decoration: none;
  color: var(--sitt-ink);
  min-width: 0;
}

/* The header bar must wrap rather than overflow its container on narrow screens. */
.sitt-header__bar { flex-wrap: wrap; row-gap: var(--sitt-space-xs); }
@media (max-width: 700px) {
  .sitt-header__nav { margin-inline-start: 0; order: 3; width: 100%; }
  /* On a phone there is no room beside the logo, so it sits below it. */
  .ord-brand { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ord-brand__season { font-size: .78rem; letter-spacing: .12em; }
  /* With the basket bar pinned to the foot, a pinned header as well leaves a
     phone half its screen. The bar carries the order, so the header scrolls. */
  .sitt-header--sticky { position: static; }
}
.ord-brand__logo { width: 116px; height: auto; display: block; flex: 0 0 auto; }
.ord-brand__season {
  font-family: var(--sitt-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sitt-ink);
}

/* Cart button in the header bar. */
.ord-cartbtn {
  position: relative;
  font-family: var(--sitt-font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--sitt-ink);
  color: var(--sitt-paper);
  border: none;
  border-radius: var(--sitt-radius-chip);
  padding: 8px 14px;
  cursor: pointer;
}
.ord-cartbtn:hover { background: var(--sitt-honey); color: var(--sitt-ink); }
.ord-cartbtn__count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: var(--sitt-radius-pill);
  background: var(--sitt-honey);
  color: var(--sitt-ink);
}
.ord-cartbtn:hover .ord-cartbtn__count { background: var(--sitt-ink); color: var(--sitt-paper); }

/* ------------------------------------------------------------ typography */

.ord-eyebrow {
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sitt-ink-faint);
  margin: 0 0 var(--sitt-space-xs);
}
.ord-h {
  font-family: var(--sitt-font-display);
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sitt-ink);
  margin: 0 0 var(--sitt-space-sm);
  font-weight: 700;
}
.ord-lead { font-size: .86rem; color: var(--sitt-ink-muted); margin: 0 0 var(--sitt-space-md); }
.ord-note { font-size: .7rem; color: var(--sitt-ink-faint); }

/* ------------------------------------------------- collection navigation */

.ord-collnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--sitt-space-md);
}
.ord-collnav button {
  font-family: var(--sitt-font-mono);
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--sitt-radius-chip);
  border: 1px solid var(--sitt-rule);
  background: transparent;
  color: var(--sitt-ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ord-collnav button:hover { border-color: var(--sitt-ink-faint); color: var(--sitt-ink); }
/* The dot carries the collection colour, so the nav is wayfinding too. */
.ord-collnav__dot { width: 12px; height: 12px; border-radius: var(--sitt-radius-pill); flex: 0 0 auto; }
.ord-collnav button[aria-pressed="true"] { border-color: transparent; color: var(--sitt-ink); }
.ord-collnav__n { color: var(--sitt-ink-faint); }

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

.ord-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sitt-space-sm);
  align-items: center;
  margin-bottom: var(--sitt-space-md);
}
.ord-search {
  flex: 1 1 260px;
  font-family: var(--sitt-font-mono);
  font-size: .8rem;
  padding: 9px 12px;
  background: var(--sitt-paper-tint);
  border: 1px solid var(--sitt-rule);
  border-radius: var(--sitt-radius-card);
  color: var(--sitt-ink);
}
.ord-search:focus-visible { outline: var(--sitt-focus-ring); outline-offset: var(--sitt-focus-offset); }

/* A wider measure than the design system's 1180px container token, to give the
 * catalogue more room. SITT's call. Narrow reading sections are unaffected. */
:root { --sitt-container-max: 1560px; }

/* Exactly five products across however wide the window gets: the grid never adds
 * a sixth column, it makes the five bigger. Steps down on smaller screens. */
.ord-railed__body .sitt-tilegrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .ord-railed__body .sitt-tilegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ord-railed__body .sitt-tilegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ord-railed__body .sitt-tilegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px)  { .ord-railed__body .sitt-tilegrid { grid-template-columns: 1fr; } }

/* The collection rail — the brand's wayfinding signature, carried onto the web. */
.ord-railed { display: flex; gap: var(--sitt-space-md); align-items: stretch; }
.ord-rail { flex: 0 0 16px; border-radius: var(--sitt-radius-chip); }
.ord-railed__body { flex: 1; min-width: 0; }

/* Whole-collection header — the sub-collection "add all" pattern, one level up. */
.ord-collhead {
  display: flex;
  align-items: center;
  gap: var(--sitt-space-md);
  padding: var(--sitt-space-sm) var(--sitt-space-md);
  margin-bottom: var(--sitt-space-md);
  background: var(--sitt-paper-tint);
  border: 1px solid var(--sitt-rule);
  border-radius: var(--sitt-radius-card);
}
.ord-collhead__bar { width: 4px; align-self: stretch; min-height: 34px; border-radius: var(--sitt-radius-chip); flex: 0 0 auto; }
.ord-collhead__text { min-width: 0; }
.ord-collhead__name {
  margin: 0;
  font-family: var(--sitt-font-display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sitt-ink);
}
.ord-collhead__meta { display: block; font-size: .66rem; color: var(--sitt-ink-faint); margin-top: 2px; }
.ord-collhead__cta { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 640px) {
  .ord-collhead { flex-wrap: wrap; }
  .ord-collhead__cta { margin-left: 0; width: 100%; }
}

.ord-subhead {
  display: flex;
  align-items: center;
  gap: var(--sitt-space-sm);
  margin: 0 0 var(--sitt-space-md);
}
/* Clear space before each new product group, so its heading reads as the
   start of what follows, not a caption for the photos above. */
.ord-railed__body > section + section { margin-top: 56px; }
/* A product group starts with a band in its range's colour (the chip
   classes carry the colour and a readable text colour). */
.ord-subhead .ord-subhead__name {
  font-family: var(--sitt-font-mono);
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 16px;
  line-height: 1.2;
}
.ord-subhead__n { font-size: .74rem; color: var(--sitt-ink-faint); }
.ord-subhead__add {
  margin-left: auto;
  font-family: var(--sitt-font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--sitt-rule);
  border-radius: var(--sitt-radius-chip);
  padding: 4px 9px;
  color: var(--sitt-ink-muted);
  cursor: pointer;
}
.ord-subhead__add:hover { color: var(--sitt-ink); border-color: var(--sitt-ink-faint); }

/* ------------------------------------------------------------ order tile */

/* Mirrors .sitt-tile from the design system, plus the ordering controls the
 * catalogue tile has no slot for. Same classes, so it restyles with the system. */
.ord-tile { display: flex; flex-direction: column; }
.ord-tile .sitt-tile__img { cursor: zoom-in; }

/* Photographs are contain-fitted on white, per the design system. The source
 * shots are a mix of portrait, landscape and square, so the image must be sized
 * to the square box and letterboxed — never stretched, never cropped. */
/* The image box is made square in its own right rather than with height:100%.
 * The wrapper's height comes from aspect-ratio, which leaves it indefinite for
 * percentage resolution, so height:100% silently falls back to auto and
 * portrait shots overflow. object-fit then letterboxes the photo inside. */
/* Photography fills its square edge to edge and is cropped to fit, rather than
 * being contain-fitted on white as the design system's print rule asks. With a
 * mix of portrait and landscape sources, letterboxing left wide bands of white
 * and the grid read as mostly empty.
 *
 * The image box is squared in its own right rather than with height:100% — the
 * wrapper's height comes from aspect-ratio, which leaves it indefinite for
 * percentage resolution, so height:100% silently falls back to auto. */
.ord-tile .sitt-tile__img {
  padding: 0;                       /* photo runs to the edge of the image area */
}
.ord-tile .sitt-tile__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
.ord-tile__name { flex: 1; }
.ord-tile__gal {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: .56rem;
  letter-spacing: .1em;
  background: var(--sitt-ink);
  color: var(--sitt-paper);
  border-radius: var(--sitt-radius-chip);
  padding: 2px 6px;
  opacity: .82;
}
.ord-tile__actions { margin-top: var(--sitt-space-sm); }

.ord-qty { display: flex; align-items: stretch; gap: 6px; }
.ord-qty button {
  font-family: var(--sitt-font-mono);
  width: 30px;
  border: 1px solid var(--sitt-rule);
  background: var(--sitt-paper);
  color: var(--sitt-ink);
  border-radius: var(--sitt-radius-chip);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
}
.ord-qty button:hover:not(:disabled) { background: var(--sitt-honey); border-color: var(--sitt-honey); }
.ord-qty button:disabled { opacity: .38; cursor: not-allowed; }
.ord-qty__val {
  flex: 1;
  text-align: center;
  font-family: var(--sitt-font-mono);
  font-size: .74rem;
  border: 1px solid var(--sitt-rule);
  border-radius: var(--sitt-radius-chip);
  background: var(--sitt-paper-tint);
  color: var(--sitt-ink);
  padding: 5px 2px;
  min-width: 0;
}
.ord-inline-note {
  margin-top: 5px;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sitt-ink-faint);
  text-align: center;
}

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

.ord-h1 { font-size: 1.4rem; line-height: 1.25; max-width: 34ch; }
@media (max-width: 560px) { .ord-h1 { font-size: 1.15rem; } }

.ord-tag {
  display: inline-block; align-self: flex-start;
  font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sitt-ink); background: var(--sitt-paper-alt);
  border: 1px solid var(--sitt-tan); border-radius: var(--sitt-radius-chip);
  padding: 1px 6px;
}

/* The terms, in one line. */
.ord-strip {
  list-style: none; margin: var(--sitt-space-sm) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 0;
  font-size: .7rem; color: var(--sitt-ink);
}
.ord-strip li { padding-right: var(--sitt-space-sm); margin-right: var(--sitt-space-sm); border-right: 1px solid var(--sitt-rule); }
.ord-strip li:last-child { border-right: none; }
@media (max-width: 560px) {
  .ord-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--sitt-space-sm); }
  .ord-strip li { border: none; margin: 0; padding: 0; }
  .ord-strip li::before { content: "✓ "; color: var(--sitt-honey); }
}

.ord-human { font-size: .72rem; color: var(--sitt-ink-muted); text-align: center; margin: var(--sitt-space-lg) 0 0; }
.ord-human a { color: var(--sitt-ink); }

.ord-anchor { scroll-margin-top: 120px; }
@media (max-width: 700px) { .ord-anchor { scroll-margin-top: 12px; } }

/* ------------------------------------------------------------ topics */

/* Our fair header boards, as the way into the suggested orders. */
/* The two long boards take twice the width, so all five print at one height. */
.ord-topics { display: grid; gap: var(--sitt-space-sm); grid-template-columns: 2fr 2fr 1fr 1fr 1fr; margin-bottom: var(--sitt-space-md); }
@media (max-width: 760px) {
  .ord-topics { grid-template-columns: 1fr 1fr; }
  .ord-topic--wide { grid-column: 1 / -1; }
}
.ord-topic {
  padding: 4px; background: transparent; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--sitt-radius-card);
  display: grid; place-items: center;
}
.ord-topic img { display: block; width: 100%; height: auto; }
.ord-topic:hover { border-color: var(--sitt-rule); }
.ord-topic[aria-pressed="true"] { border-color: var(--sitt-ink); background: var(--sitt-paper-tint); }
.ord-topic:focus-visible { outline: var(--sitt-focus-ring); outline-offset: var(--sitt-focus-offset); }
.ord-topicline { font-size: 1.05rem; color: var(--sitt-ink); margin: var(--sitt-space-md) 0 var(--sitt-space-md); line-height: 1.45; }
.ord-topicline b {
  display: block; font-family: var(--sitt-font-display); font-weight: 700; font-size: 1.35rem;
  color: var(--sitt-ink); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px;
}

/* --------------------------------------------------------- basket ladder */

/* Three steps: two suggested orders, then the floor display builder. */
.ord-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sitt-space-md);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 760px)  { .ord-steps { grid-template-columns: 1fr; } }
.ord-step {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--sitt-paper-tint);
  border: 1px solid var(--sitt-rule);
  border-top: 3px solid var(--sitt-tan);
  border-radius: var(--sitt-radius-card);
  padding: var(--sitt-space-md);
}
.ord-step--top { border-top-color: var(--sitt-honey); }
.ord-step__label {
  font-family: var(--sitt-font-display); font-weight: 700;
  font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sitt-ink); margin: var(--sitt-space-xs) 0 2px;
}
.ord-step__tier { font-family: var(--sitt-font-display); font-size: 1.25rem; color: var(--sitt-ink); }
.ord-step__unlock {
  font-size: .7rem; color: var(--sitt-ink);
  border-left: 2px solid var(--sitt-honey);
  padding-left: var(--sitt-space-xs);
  margin: var(--sitt-space-xs) 0;
}
.ord-step { position: relative; }
/* A small picture of the floor display, tucked into the corner of its card. */
.ord-step__fsdu {
  position: absolute; top: var(--sitt-space-sm); right: var(--sitt-space-sm);
  width: 38px; height: auto;
  background: var(--sitt-surface); border-radius: var(--sitt-radius-image);
}
.ord-step__lines { font-size: .64rem; color: var(--sitt-ink-faint); }
.ord-step__peek {
  align-self: flex-start;
  background: none; border: none; padding: 4px 0;
  font-family: var(--sitt-font-mono); font-size: .64rem;
  color: var(--sitt-ink); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.ord-step__list {
  list-style: none; margin: var(--sitt-space-xs) 0 0; padding: 0;
  max-height: 220px; overflow-y: auto;
  font-size: .62rem; color: var(--sitt-ink-muted);
  border-top: 1px solid var(--sitt-rule);
}
.ord-step__list li { display: flex; justify-content: space-between; gap: var(--sitt-space-xs); padding: 3px 0; border-bottom: 1px solid var(--sitt-rule); }
.ord-step__list li span:last-child { white-space: nowrap; }
.ord-step__cta { margin-top: auto; padding-top: var(--sitt-space-sm); }
.ord-step__warn { margin-top: 4px; text-align: center; }

/* ------------------------------------------------ floor display */

/* Sits in the order panel once free carriage is reached. */
.ord-fsdu {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--sitt-space-sm);
  align-items: start;
  margin-bottom: var(--sitt-space-md);
  padding: var(--sitt-space-sm);
  border: 1px solid var(--sitt-rule);
  border-radius: var(--sitt-radius-card);
  background: var(--sitt-paper-tint);
}
.ord-fsdu__img { background: var(--sitt-surface); border-radius: var(--sitt-radius-image); overflow: hidden; }
.ord-fsdu__img img { display: block; width: 100%; height: auto; }
.ord-fsdu .ord-h { font-size: .74rem; margin-bottom: 2px; }
.ord-fsdu__body { font-size: .64rem; margin: 0; }

/* ---------------------------------------------- thresholds meter */

.ord-ladder { padding-bottom: 30px; position: relative; }
.ord-ladder--compact { padding-bottom: 26px; }
.ord-ladder__track { position: relative; height: 6px; background: var(--sitt-rule); border-radius: var(--sitt-radius-pill); }
.ord-ladder__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sitt-honey); border-radius: var(--sitt-radius-pill); transition: width .3s ease; }
.ord-ladder__stop {
  position: absolute; top: 50%; width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: var(--sitt-paper); border: 2px solid var(--sitt-tan);
  border-radius: var(--sitt-radius-pill);
}
.ord-ladder__stop.is-met { background: var(--sitt-honey); border-color: var(--sitt-honey); }
.ord-ladder__labels { position: absolute; left: 0; right: 0; top: 14px; height: 22px; }
.ord-ladder__label {
  position: absolute; transform: translateX(-50%);
  font-size: .56rem; letter-spacing: .04em; white-space: nowrap;
  color: var(--sitt-ink-faint); text-align: center; line-height: 1.25;
}
.ord-ladder__label b { font-weight: 400; color: var(--sitt-ink-muted); }
.ord-ladder__label.is-met b { color: var(--sitt-ink); }
/* The last label would run off the right edge if centred on its stop. */
.ord-ladder__label:last-child { transform: translateX(-100%); text-align: right; }
/* On a phone only the amounts fit under the stops. */
@media (max-width: 560px) {
  .ord-ladder__label span { display: none; }
  .ord-ladder { padding-bottom: 20px; }
}
.ord-gapmsg { font-size: .74rem; color: var(--sitt-ink); margin: 0 0 var(--sitt-space-sm); }


/* ------------------------------------------------------------ basket bar */

.ord-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--sitt-paper-alt);
  border-top: 1px solid var(--sitt-rule);
  box-shadow: var(--sitt-elevation-md);
  padding-block: var(--sitt-space-sm) calc(var(--sitt-space-xs) + env(safe-area-inset-bottom, 0px));
}
.ord-bar__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sitt-space-lg); align-items: center; }
.ord-bar__sum { display: flex; flex-direction: column; }
.ord-bar__goods { font-family: var(--sitt-font-display); font-size: 1.1rem; color: var(--sitt-ink); line-height: 1.1; }
.ord-bar__msg { margin: 0 0 6px; font-size: .74rem; color: var(--sitt-ink); }
.ord-bar__cta { display: flex; gap: var(--sitt-space-xs); }
body.ord-hasbar { padding-bottom: 120px; }
.ord-bar__link {
  display: none;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sitt-font-mono); font-size: .66rem;
  color: var(--sitt-ink-muted); text-decoration: underline; text-underline-offset: 3px;
}
.ord-bar__link:hover { color: var(--sitt-ink); }
@media (max-width: 760px) {
  .ord-bar__in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sitt-space-xs) var(--sitt-space-md); }
  .ord-bar__meter { grid-column: 1 / -1; order: 3; }
  .ord-bar__cta .sitt-btn--secondary { display: none; }
  .ord-bar__msg { font-size: .68rem; }
  .ord-bar__link { display: block; margin: 2px 0 0; }
  body.ord-hasbar { padding-bottom: 150px; }
}

/* ------------------------------------------------------ tile extras */

.ord-facts { display: flex; flex-wrap: wrap; gap: 2px var(--sitt-space-sm); margin: 2px 0 0; font-size: .6rem; color: var(--sitt-ink-faint); letter-spacing: .04em; }
.ord-facts__proof { color: var(--sitt-ink); }

/* ------------------------------------------------------------ cart panel */

.ord-scrim {
  position: fixed; inset: 0;
  background: rgba(73, 67, 63, .42);
  border: none; padding: 0; margin: 0;
  z-index: 40;
  cursor: default;
}
.ord-cart {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px, 100%);
  background: var(--sitt-paper);
  border-left: 1px solid var(--sitt-rule);
  z-index: 41;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 14px rgba(73, 67, 63, .16);
}
.ord-cart__head {
  display: flex; align-items: center; gap: var(--sitt-space-sm);
  padding: var(--sitt-space-md);
  border-bottom: 1px solid var(--sitt-rule);
}
.ord-cart__title { font-family: var(--sitt-font-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sitt-ink); }
.ord-cart__body { flex: 1; overflow-y: auto; padding: var(--sitt-space-md); }
.ord-cart__from { padding: var(--sitt-space-xs) var(--sitt-space-md); font-size: .66rem; color: var(--sitt-ink-muted); border-bottom: 1px solid var(--sitt-rule); background: var(--sitt-paper-alt); }
.ord-cart__foot { border-top: 1px solid var(--sitt-rule); padding: var(--sitt-space-md); background: var(--sitt-paper-alt); }
.ord-x {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--sitt-ink-faint); font-size: 1.15rem; line-height: 1; padding: 2px 6px;
  font-family: var(--sitt-font-mono);
}
.ord-x:hover { color: var(--sitt-ink); }

.ord-line { display: flex; gap: var(--sitt-space-sm); padding: var(--sitt-space-sm) 0; border-bottom: 1px solid var(--sitt-rule); }
.ord-line:last-child { border-bottom: none; }
.ord-line__img {
  width: 46px; height: 46px; flex: 0 0 auto;
  background: var(--sitt-surface);
  border: 1px solid var(--sitt-rule);   /* pale packaging on white needs an edge */
  border-radius: var(--sitt-radius-image);
  display: grid; place-items: center; overflow: hidden;
}
.ord-line__img img { width: 100%; height: 100%; object-fit: contain; }
.ord-line__main { flex: 1; min-width: 0; }
.ord-line__name { font-size: .72rem; color: var(--sitt-ink); line-height: 1.35; }
.ord-line__meta { font-size: .62rem; color: var(--sitt-ink-faint); }
.ord-line__ctl { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.ord-line__sum { text-align: right; font-size: .72rem; color: var(--sitt-ink); white-space: nowrap; }

.ord-totals { font-size: .74rem; }
.ord-totals__row { display: flex; justify-content: space-between; gap: var(--sitt-space-sm); margin-bottom: 3px; }
.ord-totals__row--grand {
  margin-top: var(--sitt-space-sm);
  padding-top: var(--sitt-space-sm);
  border-top: 1px solid var(--sitt-rule);
  font-size: .9rem;
  color: var(--sitt-ink);
}
.ord-free { color: var(--sitt-collection-gardeners-essentials); }


/* ------------------------------------------------------------- lightbox */

.ord-lb {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(73, 67, 63, .97);
  display: flex; flex-direction: column;
  padding: var(--sitt-space-md);
}
/* The photo always fits the screen: the stage takes what is left between
   the bar and the thumbnails, and the photo is never taller than that. */
.ord-lb__stage {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ord-lb__frame {
  max-width: 100%; max-height: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--sitt-radius-image); cursor: zoom-in;
}
.ord-lb__stage.is-zoomed .ord-lb__frame { cursor: zoom-out; touch-action: none; }
.ord-lb__frame img {
  display: block; max-width: 100%; max-height: 100%;
  max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px);
  width: auto; height: auto; object-fit: contain;
  background: var(--sitt-surface);
  transition: transform .15s ease-out; user-select: none;
}
.ord-lb__bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sitt-space-sm) var(--sitt-space-md); color: var(--sitt-paper); margin-bottom: var(--sitt-space-sm); }
.ord-lb__head { min-width: 0; flex: 1 1 260px; }
.ord-lb__count { font-family: var(--sitt-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sitt-honey); margin-bottom: 2px; }
.ord-lb__title { font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.ord-lb__meta { font-size: .8rem; opacity: .85; margin-top: 3px; }
.ord-lb__prods { display: flex; gap: 6px; }
.ord-lb__prods button, .ord-lb__zoom {
  font-family: var(--sitt-font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 12px; cursor: pointer; border-radius: var(--sitt-radius-chip);
  background: transparent; color: var(--sitt-paper); border: 1px solid var(--sitt-paper);
}
.ord-lb__zoom[aria-pressed="true"] { background: var(--sitt-paper); color: var(--sitt-ink); }
.ord-lb__foot { flex: 0 0 auto; }
.ord-lb__hint { margin: 6px 0 0; text-align: center; font-size: .7rem; color: var(--sitt-paper); opacity: .75; }
.ord-lb__x { margin-left: auto; background: none; border: none; color: var(--sitt-paper); font-size: 1.4rem; cursor: pointer; font-family: var(--sitt-font-mono); line-height: 1; }
.ord-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--sitt-paper); color: var(--sitt-ink);
  border: none; border-radius: var(--sitt-radius-pill);
  width: 38px; height: 38px; cursor: pointer; font-size: 1.1rem;
  font-family: var(--sitt-font-mono);
}
.ord-lb__nav--prev { left: 4px; }
.ord-lb__nav--next { right: 4px; }
.ord-lb__thumbs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: var(--sitt-space-sm); }
.ord-lb__thumbs button {
  width: 46px; height: 46px; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--sitt-surface); border: 2px solid transparent; border-radius: var(--sitt-radius-image);
}
.ord-lb__thumbs button[aria-current="true"] { border-color: var(--sitt-honey); }
.ord-lb__thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* --------------------------------------------------------------- review */

.ord-form { display: grid; gap: var(--sitt-space-md); }
@media (min-width: 620px) { .ord-form--2 { grid-template-columns: 1fr 1fr; } }

.ord-review { display: grid; gap: var(--sitt-space-lg); align-items: start; }
@media (min-width: 900px) { .ord-review { grid-template-columns: 1.15fr .85fr; } }

.ord-tablewrap { overflow-x: auto; }
.ord-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.ord-table th, .ord-table td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--sitt-rule); white-space: nowrap; }
.ord-table th { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sitt-ink-faint); font-weight: 400; }
.ord-table td:first-child, .ord-table th:first-child { white-space: normal; min-width: 170px; }
.ord-table .ord-num { text-align: right; }
/* A thumbnail beside each line, so the buyer can see what is in the order. */
.ord-sumprod { display: flex; align-items: center; gap: var(--sitt-space-sm); }
.ord-sumprod .ord-line__img { width: 52px; height: 52px; }
.ord-sumprod__ph { font-size: .5rem; color: var(--sitt-ink-faint); text-align: center; line-height: 1.2; }
.ord-table tbody tr:nth-child(even) { background: var(--sitt-paper-alt); }

.ord-panel {
  background: var(--sitt-paper-tint);
  border: 1px solid var(--sitt-rule);
  border-radius: var(--sitt-radius-card);
  padding: var(--sitt-space-md);
}

.ord-empty { text-align: center; padding: var(--sitt-space-xxl) var(--sitt-space-md); color: var(--sitt-ink-faint); font-size: .78rem; }

.ord-actions { display: flex; flex-wrap: wrap; gap: var(--sitt-space-sm); }

/* Screen-reader-only, for the live region announcing cart changes. */
.ord-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .ord-cartbtn, .ord-collnav, .ord-toolbar, .ord-actions, .ord-cart, .ord-scrim, .ord-bar { display: none !important; }
}

/* Quantity buttons inside the review summary. */
.ord-table__qty .ord-qty { justify-content: flex-end; min-width: 120px; }
.ord-table__qty .ord-qty button { width: 26px; }
.ord-table__qty .ord-qty__val { max-width: 52px; padding: 3px 2px; }

/* The range buttons again, at the foot of the range. */
.ord-collfoot { margin-top: var(--sitt-space-xl); padding-top: var(--sitt-space-md); border-top: 1px solid var(--sitt-rule); }
.ord-collnav--foot { margin-bottom: 0; }

/* ------------------------------------------ step copy and multipacks */

.ord-step__desc { font-size: .7rem; color: var(--sitt-ink-muted); margin: var(--sitt-space-xs) 0 0; }
.ord-step--top .ord-step__desc { padding-right: 46px; }
.ord-step__unit { display: block; color: var(--sitt-ink-faint); font-size: .58rem; }

/* ------------------------------------------- floor display builder */

.ord-builder {
  margin-top: var(--sitt-space-lg);
  padding: var(--sitt-space-md);
  border: 1px solid var(--sitt-rule);
  border-top: 3px solid var(--sitt-honey);
  border-radius: var(--sitt-radius-card);
  background: var(--sitt-paper-tint);
}
.ord-builder__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sitt-space-sm); }
.ord-builder__step {
  font-family: var(--sitt-font-display); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sitt-ink); margin: var(--sitt-space-md) 0 var(--sitt-space-xs);
}
.ord-builder__step b {
  display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: 4px;
  border-radius: 50%; background: var(--sitt-honey); color: var(--sitt-ink); font-weight: 400;
}
.ord-sidetiles { display: grid; gap: var(--sitt-space-sm); grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .ord-sidetiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ord-sidetiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ord-sidetile {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 84px; padding: 0 0 18px; overflow: hidden;
  background: var(--sitt-paper); border: 2px solid var(--sitt-rule);
  border-radius: var(--sitt-radius-card); cursor: pointer; font: inherit; color: inherit;
}
.ord-sidetile img { display: block; width: 100%; height: auto; }
.ord-sidetile.is-on { border-color: var(--sitt-honey); box-shadow: 0 0 0 2px var(--sitt-honey); }
.ord-sidetile:disabled { opacity: .35; cursor: not-allowed; }
.ord-sidetile:focus-visible { outline: var(--sitt-focus-ring); outline-offset: var(--sitt-focus-offset); }
.ord-sidetile--text { background: var(--sitt-paper-alt); }
.ord-sidetile__words { display: flex; flex-direction: column; gap: 2px; padding: var(--sitt-space-xs) var(--sitt-space-sm); text-align: center; }
.ord-sidetile__words b { font-family: var(--sitt-font-display); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sitt-ink); }
.ord-sidetile__words span { font-size: .58rem; color: var(--sitt-ink-muted); line-height: 1.3; }
.ord-sidetile__val {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0;
  font-family: var(--sitt-font-mono); font-size: .58rem; text-align: center;
  background: var(--sitt-paper-tint); color: var(--sitt-ink-muted); border-top: 1px solid var(--sitt-rule);
}

.ord-builder__sum {
  display: grid; gap: var(--sitt-space-lg); align-items: start;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  margin-top: var(--sitt-space-lg);
}
@media (max-width: 640px) { .ord-builder__sum { grid-template-columns: 1fr; } }

/* A simple drawing of the stand: two faces, each with its header board. */
.ord-stand { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sitt-space-sm); max-width: 220px; }
.ord-stand__side { display: flex; flex-direction: column; align-items: stretch; }
.ord-stand__hdr {
  min-height: 34px; display: grid; place-items: center; padding: 2px 4px; text-align: center;
  font-family: var(--sitt-font-display); font-size: .54rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--sitt-ink); color: var(--sitt-paper); border-radius: 3px 3px 0 0;
}
.ord-stand__board {
  height: 150px; display: flex; flex-direction: column; justify-content: space-around; padding: 6px 5px;
  background: var(--sitt-tan); border: 2px solid var(--sitt-ink); border-top: 0;
}
.ord-stand__shelf { display: block; height: 4px; background: var(--sitt-ink); opacity: .55; border-radius: 1px; }
.ord-stand__feet { height: 6px; margin: 0 -4px; background: var(--sitt-ink); border-radius: 0 0 3px 3px; }
.ord-stand__cap { margin-top: 4px; text-align: center; font-family: var(--sitt-font-mono); font-size: .56rem; color: var(--sitt-ink-muted); }

.ord-builder__lines { display: flex; flex-direction: column; gap: var(--sitt-space-sm); }
.ord-sidesum { padding-bottom: var(--sitt-space-xs); border-bottom: 1px solid var(--sitt-rule); }
.ord-sidesum__head { display: flex; align-items: baseline; gap: var(--sitt-space-xs); flex-wrap: wrap; }
.ord-sidesum__head b { font-weight: 400; color: var(--sitt-ink); }
.ord-sidesum__val { margin-left: auto; font-family: var(--sitt-font-mono); font-size: .72rem; color: var(--sitt-ink); }
.ord-builder__total { display: flex; justify-content: space-between; font-size: .8rem; color: var(--sitt-ink); }
.ord-builder__total b { font-family: var(--sitt-font-display); font-size: 1.1rem; font-weight: 400; }
.ord-builder__free { margin: 0; font-size: .7rem; color: var(--sitt-ink); border-left: 2px solid var(--sitt-honey); padding-left: var(--sitt-space-xs); }

/* ------------------------------- display offer and line in the order */

.ord-offer {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sitt-space-sm); align-items: start;
  margin-bottom: var(--sitt-space-sm); padding: var(--sitt-space-sm);
  border: 1px solid var(--sitt-honey); border-radius: var(--sitt-radius-card); background: var(--sitt-paper-tint);
}
.ord-offer__img { background: var(--sitt-surface); border-radius: var(--sitt-radius-image); overflow: hidden; }
.ord-offer__img img { display: block; width: 100%; height: auto; }
.ord-offer__q { margin: 0 0 var(--sitt-space-xs); font-size: .76rem; color: var(--sitt-ink); }
.ord-offer__pick { display: flex; flex-direction: column; gap: var(--sitt-space-xs); }
.ord-offer__pick .ord-note { margin: 0; }
.ord-hdrsel { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: var(--sitt-space-xs); font-size: .66rem; }
.ord-hdrsel select {
  width: 100%; min-width: 0; padding: 4px 6px; font: inherit; color: var(--sitt-ink);
  background: var(--sitt-paper); border: 1px solid var(--sitt-rule); border-radius: var(--sitt-radius-image);
}
.ord-line--display { background: var(--sitt-paper-tint); }
.ord-display-note { color: var(--sitt-ink); }

/* ------------------------------------------- a topic's ranges together */

.ord-collnav .ord-collnav__topic {
  background: var(--sitt-ink); color: var(--sitt-paper); border-color: var(--sitt-ink);
  font-weight: 700;
}
.ord-collnav .ord-collnav__topic[aria-pressed="false"] { background: var(--sitt-paper); color: var(--sitt-ink); }
.ord-collnav .is-topic { border-color: var(--sitt-ink-faint); color: var(--sitt-ink); }
.ord-collnav .ord-collnav__topic[aria-pressed="true"] { color: var(--sitt-paper); }
.ord-collnav__sep { width: 1px; align-self: stretch; background: var(--sitt-rule); margin: 0 4px; }
.ord-topicview { font-size: .74rem; color: var(--sitt-ink-muted); margin: 0 0 var(--sitt-space-md); }
.ord-topicview b { font-weight: 400; color: var(--sitt-ink); text-transform: uppercase; letter-spacing: .1em; }
.ord-rangeblock + .ord-rangeblock { margin-top: var(--sitt-space-xl); }

/* The PDF link at the end of the thank-you text. */
.ord-pdflink { font-weight: 700; color: var(--sitt-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------- after sending: download pop-up */

.ord-nextstep {
  margin: var(--sitt-space-sm) 0 0; padding: var(--sitt-space-xs) var(--sitt-space-sm);
  font-size: .7rem; color: var(--sitt-ink);
  border-left: 2px solid var(--sitt-honey); background: var(--sitt-paper-tint);
}
.ord-scrim--modal { z-index: 60; }
.ord-modal {
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: var(--sitt-space-lg); background: var(--sitt-paper);
  border-top: 4px solid var(--sitt-honey); border-radius: var(--sitt-radius-card);
}
.ord-modal__x { position: absolute; top: var(--sitt-space-sm); right: var(--sitt-space-sm); }
.ord-modal__body { font-size: .82rem; color: var(--sitt-ink); margin: 0 0 var(--sitt-space-md); }
.ord-modal__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sitt-space-xs); margin-bottom: var(--sitt-space-sm); }
.ord-modal__go { width: 100%; justify-content: center; font-weight: 700; }
.ord-builder__hint { text-transform: none; letter-spacing: 0; font-family: var(--sitt-font-mono); font-size: .62rem; color: var(--sitt-ink-muted); }

/* ---------------------------- free display, in "Your details" */

.ord-dispdet {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sitt-space-sm); align-items: start;
  margin-top: var(--sitt-space-lg); padding: var(--sitt-space-sm);
  border: 1px solid var(--sitt-rule); border-left: 3px solid var(--sitt-honey);
  border-radius: var(--sitt-radius-card); background: var(--sitt-paper-tint);
}
.ord-dispdet__img { background: var(--sitt-surface); border-radius: var(--sitt-radius-image); overflow: hidden; }
.ord-dispdet__img img { display: block; width: 100%; height: auto; }
.ord-dispdet__h { font-size: .8rem; margin: 0 0 2px; }
.ord-dispdet__state { margin: 0 0 2px; font-size: .78rem; color: var(--sitt-ink-muted); }
.ord-dispdet__state.is-in { color: var(--sitt-ink); font-weight: 700; }
.ord-dispdet .ord-note { margin: 0 0 var(--sitt-space-xs); }
.ord-stand__hdr { min-height: 22px; }

/* Range buttons: a little smaller on phones so two fit side by side. */
@media (max-width: 560px) {
  .ord-collnav button { font-size: .72rem; padding: 8px 11px; letter-spacing: .06em; }
  .ord-collnav__dot { width: 10px; height: 10px; }
}

/* ------------------------- products in a suggested order, with photos */

.ord-packlist { list-style: none; margin: var(--sitt-space-xs) 0 0; padding: 0; border-top: 1px solid var(--sitt-rule); }
.ord-packlist__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sitt-space-sm);
  align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sitt-rule);
}
.ord-packlist__img {
  width: 56px; height: 56px; padding: 0; border: 1px solid var(--sitt-rule); border-radius: var(--sitt-radius-image);
  background: var(--sitt-surface); overflow: hidden; cursor: zoom-in;
}
.ord-packlist__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ord-packlist__img:hover { border-color: var(--sitt-ink-faint); }
.ord-packlist__img:focus-visible { outline: var(--sitt-focus-ring); outline-offset: var(--sitt-focus-offset); }
.ord-packlist__name { font-size: .76rem; color: var(--sitt-ink); line-height: 1.3; }
.ord-packlist__sum { font-size: .74rem; color: var(--sitt-ink); white-space: nowrap; }

/* =====================================================================
   Clearer layout (team feedback, October 2026; .ord-v2 is always on).
   One reading font for text, the typewriter font only for codes and
   small labels, and three clear title sizes.
   ===================================================================== */

/* the step bar */
.ord-stepbar { background: var(--sitt-paper-alt); border-bottom: 1px solid var(--sitt-rule); }
.ord-stepbar__in {
  list-style: none; margin: 0 auto; padding-top: 12px; padding-bottom: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
}
.ord-stepbar__step { display: flex; align-items: center; gap: 14px; }
.ord-stepbar__btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sitt-font-display); font-size: 1rem; color: var(--sitt-ink-muted);
  background: none; border: none; padding: 4px 2px; cursor: default;
}
button.ord-stepbar__btn { cursor: pointer; }
button.ord-stepbar__btn:hover .ord-stepbar__label { text-decoration: underline; text-underline-offset: 3px; }
.ord-stepbar__n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--sitt-ink-faint); font-weight: 700; font-size: .9rem; color: var(--sitt-ink-muted);
}
.ord-stepbar__step.is-now .ord-stepbar__btn { color: var(--sitt-ink); font-weight: 700; }
.ord-stepbar__step.is-now .ord-stepbar__n { background: var(--sitt-honey); border-color: var(--sitt-honey); color: var(--sitt-ink); }
.ord-stepbar__step.is-done .ord-stepbar__n { background: var(--sitt-ink); border-color: var(--sitt-ink); color: var(--sitt-paper); }
.ord-stepbar__arrow { color: var(--sitt-ink-faint); font-size: 1.1rem; }
@media (max-width: 560px) {
  .ord-stepbar__btn { font-size: .82rem; gap: 6px; }
  .ord-stepbar__n { width: 24px; height: 24px; font-size: .75rem; }
  .ord-stepbar__step, .ord-stepbar__in { gap: 6px; }
}

/* reading text */
.ord-v2 body { font-family: var(--sitt-font-display); font-size: 16px; color: var(--sitt-ink-muted); }
.ord-v2 .ord-lead { font-size: 1.05rem; line-height: 1.55; }
.ord-v2 .ord-note { font-size: .82rem; }
.ord-v2 .ord-strip { font-size: .9rem; }

/* titles: page title, section titles, then card titles */
.ord-v2 .ord-h1 { font-size: 2.3rem; line-height: 1.15; letter-spacing: .02em; }
.ord-v2 .ord-h2 { font-size: 1.75rem; letter-spacing: .04em; margin-bottom: var(--sitt-space-sm); }
.ord-v2 .ord-h { font-weight: 700; }
.ord-v2 .ord-step__label { font-size: 1.15rem; }
.ord-v2 .ord-step__tier { font-size: 1.6rem; }
.ord-v2 .ord-step__desc, .ord-v2 .ord-step__unlock { font-size: .95rem; }
.ord-v2 .ord-collhead__name { font-size: 1.4rem; }
.ord-v2 .ord-collhead__meta { font-size: .85rem; }

/* fewer small labels competing with the titles */
.ord-v2 main > .sitt-section:first-child .ord-eyebrow,
.ord-v2 #ord-suggest + div > .ord-eyebrow:first-child,
.ord-v2 .ord-review .ord-eyebrow:first-child,
.ord-v2 .ord-step .ord-tag { display: none; }

/* product cards: names and prices readable, codes stay small */
.ord-v2 .sitt-tile__name { font-family: var(--sitt-font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.ord-v2 .sitt-tile__price { font-size: .9rem; }
.ord-v2 .sitt-tile__meta { font-size: .74rem; }
.ord-v2 .ord-facts { font-size: .78rem; }
.ord-v2 .ord-packlist__name, .ord-v2 .ord-line__name { font-size: .92rem; }
.ord-v2 .ord-line__meta { font-size: .74rem; }

/* menu, buttons and form labels a size up */
.ord-v2 .sitt-navlink { font-size: .86rem; }
.ord-v2 .sitt-btn { font-size: .8rem; }
.ord-v2 .sitt-field__label { font-size: .8rem; }
/* the design system sets the typewriter font on every container: in the
   preview, containers read in the sans; buttons, chips, codes keep it */
.ord-v2 .sitt-container, .ord-v2 .sitt-section, .ord-v2 .sitt-header, .ord-v2 .sitt-tile,
.ord-v2 .sitt-tilegrid, .ord-v2 .sitt-field, .ord-v2 .sitt-notice, .ord-v2 .sitt-callout,
.ord-v2 .sitt-sitefooter, .ord-v2 .ord-cart, .ord-v2 .ord-modal { font-family: var(--sitt-font-display); }
.ord-v2 .sitt-tile__meta, .ord-v2 .ord-line__meta, .ord-v2 .sitt-tile__coll,
.ord-v2 .ord-tag, .ord-v2 .ord-eyebrow, .ord-v2 .sitt-navlink { font-family: var(--sitt-font-mono); }
.ord-v2 .ord-topicview { font-size: .95rem; }
.ord-v2 .ord-subhead .ord-subhead__name { font-size: .95rem; }
/* order summary, order panel and review table */
.ord-v2 .ord-totals { font-size: .92rem; }
.ord-v2 .ord-gapmsg { font-size: .9rem; }
.ord-v2 .ord-ladder__label { font-size: .7rem; }
.ord-v2 .ord-panel .ord-h { font-size: 1.05rem !important; }
.ord-v2 .ord-table { font-size: .85rem; }
.ord-v2 .ord-cart__title { font-size: 1.1rem; }
.ord-v2 .ord-dispdet__h { font-size: 1rem; }
.ord-v2 .ord-dispdet__state, .ord-v2 .ord-offer__q, .ord-v2 .ord-nextstep { font-size: .9rem; }
.ord-stepbar__short { display: none; }
@media (max-width: 560px) {
  .ord-stepbar__label { display: none; }
  .ord-stepbar__short { display: inline; }
  .ord-stepbar__in { flex-wrap: nowrap; justify-content: space-between; }
  .ord-v2 .ord-h1 { font-size: 1.6rem; }
  .ord-v2 .ord-h2 { font-size: 1.35rem; }
  .ord-v2 .sitt-header__nav { flex-wrap: wrap; gap: 4px 14px; overflow: visible; }
  .ord-v2 .sitt-navlink { font-size: .74rem; letter-spacing: .06em; }
}