.order-builder {
  min-height: 100vh;
  color: #214b70;
  background: #f4f8fc;
}

.order-builder__hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(43, 104, 150, 0.08);
  text-align: center;
  background: radial-gradient(circle at 50% -20%, #d8eafa 0%, #eaf3fb 52%, #f0f6fc 100%);
}

.order-builder__hero::after {
  position: absolute;
  bottom: -0.3rem;
  left: 50%;
  width: 3.5rem;
  height: 0.3rem;
  border-radius: 999px;
  background: #79a9d1;
  box-shadow: 0 0 0 0.4rem #f4f8fc;
  content: "";
  transform: translateX(-50%);
}

.order-builder__hero .container {
  max-width: 48rem;
}

.order-builder__hero h1 {
  margin-top: 0.75rem;
  color: #173b59;
  font-size: clamp(1.2rem, 5.6vw, 4rem);
  line-height: 1.04;
  white-space: nowrap;
}

.order-builder__hero p:last-child {
  max-width: 38rem;
  margin: 1rem auto 0;
  color: #5f748a;
  line-height: 1.65;
}

.order-builder__shell {
  max-width: 64rem;
  padding-top: clamp(2.25rem, 5vw, 3.75rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.order-progress {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  padding: 1.15rem clamp(0.75rem, 3vw, 1.6rem) 1rem;
  border: 1px solid rgba(43, 104, 150, 0.11);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 45px -34px rgba(30, 79, 119, 0.72);
}

.order-progress ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-progress ol::before {
  position: absolute;
  top: 1rem;
  right: 10%;
  left: 10%;
  height: 2px;
  border-radius: 999px;
  background: #dce9f4;
  content: "";
}

.order-progress li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.48rem;
  color: #8499ad;
  text-align: center;
}

.order-progress li > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border: 2px solid #d9e6f2;
  border-radius: 50%;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 750;
  box-shadow: 0 0 0 0.3rem #fff;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.order-progress li small {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.order-progress li.is-active,
.order-progress li.is-complete {
  color: #286f9f;
}

.order-progress li.is-active > span,
.order-progress li.is-complete > span {
  border-color: #286f9f;
  color: #fff;
  background: #286f9f;
}

.order-progress li.is-active > span {
  box-shadow: 0 0 0 0.3rem #fff, 0 0 0 0.42rem rgba(40, 111, 159, 0.13);
  transform: translateY(-0.08rem);
}

.order-progress li.is-active small {
  color: #173b59;
  font-weight: 800;
}

/* A drawn tick rather than two rotated borders: the L-shaped border trick
   leaves the mark sitting low and right of the circle's centre, and no amount
   of nudging centres it at every size. */
.order-progress li.is-complete > span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.95rem;
  height: 0.95rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
  transform: translate(-50%, -50%);
}

.order-progress li.is-complete > span {
  font-size: 0;
}

.order-builder__layout {
  display: block;
}

.order-form {
  max-width: 56rem;
  margin-inline: auto;
  padding: clamp(1.35rem, 3.5vw, 2.5rem);
  border: 1px solid rgba(43, 104, 150, 0.11);
  border-radius: 1.35rem;
  background: #fff;
  box-shadow: 0 24px 48px -42px rgba(30, 79, 119, 0.65);
}

.order-step[hidden],
.order-form [hidden] {
  display: none !important;
}

.order-step__head {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}

.order-step__head > span {
  color: #6c91b1;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  line-height: 1;
}

.order-step__head .eyebrow {
  color: #64809a;
  font-weight: 700;
}

.order-step__head h2 {
  margin-top: 0.3rem;
  color: #173b59;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.order-step__head > div > p:last-child {
  margin-top: 0.4rem;
  color: #6b8198;
  font-size: 0.9rem;
  line-height: 1.6;
}

.occasion-fieldset,
.delivery-options {
  margin: 0;
  padding: 0;
  border: 0;
}

.occasion-fieldset legend,
.delivery-options legend,
.order-field > span,
.promo-field > label {
  margin-bottom: 0.6rem;
  color: #4f6d86;
  font-size: 0.75rem;
  font-weight: 750;
}

.occasion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.occasion-grid label,
.recipient-choice label,
.delivery-options label {
  cursor: pointer;
}

.occasion-grid input,
.recipient-choice input,
.edition-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.occasion-grid label > span {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding-inline: 0.6rem;
  border: 1px solid rgba(43, 104, 150, 0.13);
  border-radius: 0.75rem;
  color: #5e768e;
  background: #f8fbff;
  font-size: 0.78rem;
  font-weight: 650;
  text-align: center;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.occasion-grid label > span b {
  font: inherit;
}

.occasion-grid input:checked + span {
  border-color: #367681;
  color: #245f8d;
  background: #e5eff8;
}

.order-fields {
  display: grid;
  gap: 1rem;
}

.order-fields--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 0.45rem;
  align-items: end;
}

.occasion-fieldset + .order-fields,
.order-fields + .order-field,
.order-field + .order-field,
.order-field + .order-data-note {
  margin-top: 1.15rem;
}

.order-field {
  display: grid;
  min-width: 0;
}

.order-fields--two > .order-field {
  grid-template-rows: auto var(--control-height);
}

.order-field .input {
  width: 100%;
  min-height: var(--control-height);
}

.order-field > span small {
  color: #899bab;
  font-weight: 500;
}

.order-field__label {
  margin-bottom: 0.6rem;
  color: #4f6d86;
  font-size: 0.75rem;
  font-weight: 750;
}

/* The hint beside a label is an aside, not part of the label: it drops the
   label's weight so the field name stays the thing being read. */
.order-field__label small {
  color: #7d929c;
  font-weight: 400;
  text-transform: none;
}

.message-input {
  position: relative;
}

.message-input .textarea {
  width: 100%;
}

.message-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.45rem;
}

.message-footer button {
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(43, 104, 150, 0.14);
  border-radius: 999px;
  color: #326f9e;
  background: #eaf3fb;
  box-shadow: 0 4px 12px -9px rgba(30, 79, 119, 0.7);
  font-size: 0.68rem;
  font-weight: 750;
  cursor: pointer;
}

.message-counter {
  display: inline-block;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}

.message-counter [data-character-count] {
  color: #617b93;
  font-variant-numeric: tabular-nums;
}

.order-field .input,
.order-field .textarea,
.promo-field .input {
  border-color: rgba(43, 104, 150, 0.15);
  border-radius: 0.7rem;
  background: #fbfdff;
}

.order-field .textarea {
  padding: 0.85rem 1rem;
}

/* The line under the email field on the review step. */
.order-field__hint {
  display: block;
  margin-top: 0.4rem;
  color: #7b9096;
  font-size: 0.78rem;
  line-height: 1.5;
}

.order-field--email {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Fields that failed validation. The class is set when a step is checked and
   removed as soon as the visitor edits the field again.

   These rules are kept apart from the :user-invalid ones below on purpose: a
   selector list is dropped whole by browsers that do not know one of its
   pseudo-classes, which would silently take the class rule down with it. */
.order-form .is-invalid {
  border-color: #c0503f;
  background: #fdf6f5;
}

.order-form .is-invalid:focus {
  border-color: #a93f2f;
  outline-color: #c0503f;
  box-shadow: 0 0 0 3px rgba(192, 80, 63, 0.16);
}

/* The browser's own checks, but only after the field has been used - never on
   a form that was just opened. */
.order-form .input:user-invalid,
.order-form .select:user-invalid,
.order-form .textarea:user-invalid {
  border-color: #c0503f;
  background: #fdf6f5;
}

.order-form .input:user-invalid:focus,
.order-form .select:user-invalid:focus,
.order-form .textarea:user-invalid:focus {
  border-color: #a93f2f;
  outline-color: #c0503f;
  box-shadow: 0 0 0 3px rgba(192, 80, 63, 0.16);
}

/* The date, time and map controls are buttons, so they need the same
   treatment as the inputs. */
.order-form .date-picker__trigger.is-invalid,
.order-form .time-picker__trigger.is-invalid,
.order-form .order-map-button.is-invalid {
  border-color: #c0503f;
  background: #fdf6f5;
}

.date-field-label {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.6rem;
  color: #4f6d86;
  font-size: 0.75rem;
  font-weight: 750;
}

.date-info {
  position: relative;
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  padding: 0;
  border: 1px solid #82a5c4;
  border-radius: 50%;
  color: #5a7891;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 800;
  cursor: help;
}

.date-info [role="tooltip"] {
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  z-index: 1400;
  width: max-content;
  max-width: 17rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  color: #fff;
  background: #214b70;
  box-shadow: 0 12px 24px -16px rgba(20, 61, 96, 0.8);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.2rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.date-info [role="tooltip"] strong,
.date-info [role="tooltip"] > span {
  display: block;
  text-align: left;
}

.date-info [role="tooltip"] strong {
  margin-bottom: 0.15rem;
  color: #bfd6e9;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.date-info:hover [role="tooltip"],
.date-info:focus-visible [role="tooltip"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.date-picker {
  position: relative;
}

.date-picker__trigger {
  display: flex;
  width: 100%;
  min-height: var(--control-height);
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
  border: 1px solid rgba(43, 104, 150, 0.15);
  border-radius: 0.7rem;
  color: #70869b;
  background: #fbfdff;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.date-picker__trigger.has-value {
  color: #214b70;
}

.date-picker__trigger svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  fill: none;
  stroke: #3d7fac;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.date-picker__popover {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 1350;
  width: min(23rem, calc(100vw - 3rem));
  padding: 1rem;
  border: 1px solid rgba(43, 104, 150, 0.13);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 24px 50px -28px rgba(30, 79, 119, 0.75);
}

.date-picker__nav {
  display: grid;
  grid-template-columns: 2.25rem 1fr 2.25rem;
  gap: 0.45rem;
  align-items: center;
}

.date-picker__selectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.2rem;
  gap: 0.4rem;
}

.date-picker__selectors select {
  min-width: 0;
  height: 2.25rem;
  border: 1px solid rgba(43, 104, 150, 0.12);
  border-radius: 0.6rem;
  color: #214b70;
  background: #f8fbff;
  font: 700 0.76rem/1 var(--font-sans);
  cursor: pointer;
}

.date-picker__nav button {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(43, 104, 150, 0.1);
  border-radius: 0.6rem;
  color: #3a719e;
  background: #f1f7fd;
  cursor: pointer;
}

.date-picker__nav button:disabled {
  color: #bac9d6;
  background: #fafcff;
  cursor: not-allowed;
}

.date-picker__weekdays,
.date-picker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.date-picker__weekdays {
  margin-top: 0.85rem;
  color: #8da0b2;
  font-size: 0.58rem;
  font-weight: 750;
  text-align: center;
  text-transform: uppercase;
}

.date-picker__days {
  margin-top: 0.35rem;
}

.date-picker__days button,
.date-picker__days span {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 0.55rem;
  font-size: 0.72rem;
}

.date-picker__days button {
  color: #4a6e8d;
  background: transparent;
  cursor: pointer;
}

.date-picker__days button:hover {
  background: #eaf3fb;
}

.date-picker__days button.is-selected {
  color: #fff;
  background: #307cae;
}

.date-picker__days button:disabled {
  color: #c3ced9;
  background: transparent;
  cursor: not-allowed;
}

.order-field > small {
  margin-top: 0.35rem;
  color: #8b9daf;
  font-size: 0.7rem;
}

.order-location-row {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.order-map-button,
.promo-field button {
  min-height: var(--control-height);
  padding-inline: 1rem;
  border: 1px solid rgba(43, 104, 150, 0.15);
  border-radius: 0.7rem;
  color: #356f9d;
  background: #eaf3fb;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.order-map-button {
  width: 8.75rem;
  white-space: nowrap;
}

.order-map {
  position: relative;
  z-index: 1;
  margin-top: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(43, 104, 150, 0.16);
  border-radius: 0.8rem;
  background: #e9f2fa;
}

.order-map__canvas {
  height: 19rem;
  background: #dfebf6;
}

.order-map > p {
  padding: 0.65rem 0.8rem;
  color: #668097;
  background: #fff;
  font-size: 0.68rem;
  line-height: 1.45;
}

.order-map .leaflet-control-attribution {
  font-size: 0.58rem;
}

.order-map .leaflet-control-layers {
  border: 0;
  border-radius: 0.65rem;
  box-shadow: 0 8px 22px -14px rgba(30, 79, 119, 0.65);
  font-family: var(--font-sans);
  font-size: 0.7rem;
}

.leaflet-control-locate button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: #286791;
  background: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.leaflet-control-locate button:hover {
  background: #f1f7fd;
}

.combobox__option {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.order-builder .combobox__list {
  z-index: 5;
}

.combobox__flag {
  display: inline-grid;
  width: 1.55rem;
  flex: 0 0 1.55rem;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
}

.combobox__label {
  min-width: 0;
}

/* The flag of the place that was picked, shown inside the field. */
.combobox {
  position: relative;
}

.combobox__selected-flag {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  z-index: 2;
  font-size: 1.05rem;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.combobox__selected-flag[hidden] {
  display: none;
}

/* Room for the flag, only while one is shown. */
.combobox:has(.combobox__selected-flag:not([hidden])) .input {
  padding-left: 2.5rem;
}

.order-data-note {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.8rem 0.9rem;
  border-radius: 0.75rem;
  color: #607990;
  background: #eaf3fb;
  font-size: 0.76rem;
  line-height: 1.55;
}

.order-data-note > span {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #7ba2c3;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 750;
}

.recipient-choice,
.edition-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.recipient-choice label > span,
.edition-card {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid rgba(43, 104, 150, 0.13);
  border-radius: 1rem;
  background: #f9fbff;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.recipient-choice input:checked + span,
.edition-card:has(input:checked) {
  border-color: #3b80b4;
  background: #e7f1fa;
  box-shadow: inset 0 0 0 1px rgba(58, 130, 178, 0.12);
}

.recipient-choice strong,
.edition-card > strong {
  color: #214b70;
  font-size: 1rem;
}

.recipient-choice small,
.edition-card > small {
  margin-top: 0.55rem;
  color: #688098;
  font-size: 0.79rem;
  line-height: 1.55;
}

.gift-fields {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
}

/* A labelled rule opening the gift-only fields: the icon and wording carry
   the meaning, and the line runs on to the edge so the group reads as one. */
.gift-fields__rule {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  color: #256ea5;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.gift-fields__rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(37, 110, 165, 0.28), rgba(37, 110, 165, 0));
}

.gift-fields__icon {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(37, 110, 165, 0.1);
}

.gift-fields__icon svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-options {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.delivery-options label {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  min-height: 2.9rem;
  padding-inline: 0.8rem;
  border: 1px solid rgba(43, 104, 150, 0.12);
  border-radius: 0.7rem;
  color: #5d758c;
  background: #fafcff;
  font-size: 0.78rem;
  line-height: 1.35;
}

.delivery-options input,
.order-confirm input {
  accent-color: #2d78ac;
}

.delivery-options input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  align-self: center;
}

.delivery-options label > span {
  display: block;
}

.schedule-fields {
  margin-top: 0.8rem;
  padding: 1rem;
  border: 1px solid rgba(43, 104, 150, 0.12);
  border-radius: 0.8rem;
  background: #f1f7fd;
}

.schedule-fields__title {
  display: block;
  margin-bottom: 0.7rem;
  color: #4f6d86;
  font-size: 0.75rem;
  font-weight: 750;
}

.schedule-picker {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(8rem, 0.75fr);
  gap: 0.7rem;
}

.schedule-control {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.schedule-control > span {
  color: #6a849c;
  font-size: 0.66rem;
  font-weight: 700;
}

.date-picker--delivery .date-picker__popover {
  right: auto;
  left: 0;
}

.time-picker {
  position: relative;
}

.time-picker__trigger {
  display: flex;
  width: 100%;
  min-height: var(--control-height);
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
  border: 1px solid rgba(43, 104, 150, 0.15);
  border-radius: 0.7rem;
  color: #70869b;
  background: #fff;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.time-picker__trigger.has-value {
  color: #214b70;
}

.time-picker__trigger svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  fill: none;
  stroke: #3d7fac;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.time-picker__popover {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 1350;
  width: min(19rem, calc(100vw - 3rem));
  padding: 1rem;
  border: 1px solid rgba(43, 104, 150, 0.13);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 24px 50px -28px rgba(30, 79, 119, 0.75);
}

.time-picker__popover > p {
  margin-bottom: 0.8rem;
  color: #214b70;
  font-size: 0.78rem;
  font-weight: 800;
}

.time-picker__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.4rem;
  align-items: end;
}

.time-picker__controls label {
  display: grid;
  gap: 0.3rem;
  color: #7c93aa;
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.time-picker__controls select {
  width: 100%;
  height: 2.6rem;
  border: 1px solid rgba(43, 104, 150, 0.13);
  border-radius: 0.65rem;
  color: #214b70;
  background: #f7faff;
  font: 750 0.82rem/1 var(--font-sans);
}

/* Padding alone does not move the arrow: several browsers paint the native one
   against the right border whatever the padding says. The control draws its
   own chevron instead, which can then be placed properly. Declared after both
   select rules, whose `background` shorthand would otherwise wipe the image. */
.time-picker__controls select,
.date-picker__selectors select {
  appearance: none;
  -webkit-appearance: none;
  padding-left: 0.7rem;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%234a6d8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.62rem 0.4rem;
}

.time-picker__separator {
  padding-bottom: 0.65rem;
  color: #57758e;
  font-weight: 800;
}

.time-picker__period {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.2rem;
  border-radius: 0.7rem;
  background: #e9f2fa;
}

.time-picker__period button {
  height: 2.2rem;
  border: 0;
  border-radius: 0.52rem;
  color: #70869b;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.time-picker__period button.is-active {
  color: #286f9f;
  background: #fff;
  box-shadow: 0 3px 10px -7px rgba(30, 79, 119, 0.8);
}

.time-picker__confirm {
  width: 100%;
  min-height: 2.55rem;
  margin-top: 0.8rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #286791;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.schedule-fields > small {
  display: block;
  margin-top: 0.45rem;
  color: #8095aa;
  font-size: 0.68rem;
  line-height: 1.45;
}

.edition-card {
  position: relative;
  cursor: pointer;
}

.edition-card__status {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  color: #2e6d59;
  background: #dff1e8;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.edition-card > b {
  margin-top: auto;
  padding-top: 1rem;
  color: #245f8d;
}

.edition-card--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.edition-card--disabled .edition-card__status {
  color: #755f47;
  background: #eee8de;
}

.order-review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid rgba(43, 104, 150, 0.11);
  border-radius: 0.9rem;
  overflow: hidden;
  /* A full-width row leaves the cell beside it empty when the rows before it
     are odd in number. No element sits there, so the grid itself carries the
     cell colour and the hole matches its neighbours. */
  background: #fafcff;
}

.order-review > div {
  min-height: 5rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(43, 104, 150, 0.09);
  background: #fafcff;
}

.order-review > div:nth-child(odd) {
  border-right: 1px solid rgba(43, 104, 150, 0.09);
}

.order-review dt {
  color: #8499ad;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.order-review dd {
  margin: 0.4rem 0 0;
  color: #274f73;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.45;
}

.order-review > div[data-review-key="message"],
.order-review > div[data-review-key="gift-message"] {
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 1px solid rgba(43, 104, 150, 0.09);
}

/* The cell before a full-width row hands its rule over to that row, so the
   line runs the whole width instead of stopping at the hole. */
.order-review > div:has(+ div[data-review-key="message"]),
.order-review > div:has(+ div[data-review-key="gift-message"]) {
  border-bottom: 0;
}

.order-review > div[data-review-key="message"] dd,
.order-review > div[data-review-key="gift-message"] dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-order-heading {
  margin: 2rem 0 0.85rem;
}

.review-order-heading .eyebrow {
  color: #64809a;
}

.review-order-heading h3 {
  margin-top: 0.35rem;
  color: #173b59;
  font-size: 1.35rem;
}

.order-confirm {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1.2rem;
  padding: 0.95rem;
  border: 1px solid rgba(43, 104, 150, 0.13);
  border-radius: 0.8rem;
  color: #536f88;
  background: #f7faff;
  font-size: 0.8rem;
  line-height: 1.5;
}

.review-consents {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.review-consents .order-confirm {
  margin-top: 0;
}

/* A native checkbox ignores border and background, so marking the input alone
   showed nothing. The box the reader actually sees is the label around it. */
.order-form .order-confirm:has(.is-invalid) {
  border-color: #c0503f;
  background: #fdf6f5;
}

.order-form .order-confirm .is-invalid {
  accent-color: #c0503f;
  outline: 2px solid rgba(192, 80, 63, 0.45);
  outline-offset: 2px;
  border-radius: 3px;
}

.review-consents a {
  color: #2d74a7;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(47, 119, 169, 0.35);
  text-underline-offset: 0.16em;
}

.order-summary {
  overflow: hidden;
  border: 1px solid rgba(43, 104, 150, 0.12);
  border-radius: 1rem;
}

.order-summary__product {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem;
  background: #eaf3fb;
}

.order-summary__product strong,
.order-summary__product small {
  display: block;
}

.order-summary__product strong {
  color: #214b70;
}

.order-summary__product small {
  margin-top: 0.25rem;
  color: #788da2;
  font-size: 0.72rem;
}

.order-summary__product > b {
  color: #245f8d;
  font-size: 1.1rem;
}

.promo-field {
  padding: 1.2rem;
  border-top: 1px solid rgba(43, 104, 150, 0.1);
}

.promo-field summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #4f6d86;
  font-size: 0.78rem;
  font-weight: 750;
  list-style: none;
  cursor: pointer;
}

.promo-field summary::-webkit-details-marker {
  display: none;
}

.promo-field__toggle {
  position: relative;
  display: block;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #356f9d;
  background: #e5f0fa;
  font-size: 0;
  transition: transform 180ms ease, background 180ms ease;
}

.promo-field__toggle::before,
.promo-field__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.promo-field__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.promo-field[open] .promo-field__toggle {
  background: #dcebf7;
  transform: rotate(45deg);
}

.promo-field__content {
  margin-top: 0.85rem;
}

.promo-field__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.promo-field p {
  margin-top: 0.6rem;
  color: #32725d;
  font-size: 0.75rem;
  font-weight: 650;
}

.price-breakdown {
  margin: 0;
  padding: 0.8rem 1.2rem 1.2rem;
  border-top: 1px solid rgba(43, 104, 150, 0.1);
}

.price-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.42rem;
  color: #6b8299;
  font-size: 0.8rem;
}

.price-breakdown dd {
  margin: 0;
}

.price-breakdown > div:last-child {
  margin-top: 0.45rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(43, 104, 150, 0.11);
  color: #214b70;
  font-size: 1rem;
  font-weight: 750;
}

.preparation-progress {
  margin-top: 0;
  padding: 0;
  color: #4f6d86;
  background: transparent;
}

.preparation-progress ul {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preparation-progress li {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem;
  border: 1px solid rgba(43, 104, 150, 0.1);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.78);
  opacity: 0.55;
}

.preparation-progress li.is-active,
.preparation-progress li.is-done {
  opacity: 1;
}

.prepare-status {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 2px solid rgba(48, 122, 173, 0.2);
  border-radius: 50%;
}

.preparation-progress li.is-active .prepare-status {
  border-color: rgba(48, 122, 173, 0.18);
  border-top-color: #2d78ac;
  animation: prepare-spin 1.15s linear infinite;
}

.preparation-progress li.is-done .prepare-status {
  border-color: #72ad8f;
  color: #fff;
  background: #72ad8f;
}

.preparation-progress li.is-done .prepare-status::before {
  content: "✓";
  font-size: 0.7rem;
  font-weight: 900;
}

.preparation-progress li strong,
.preparation-progress li small {
  display: block;
}

.preparation-progress li strong {
  color: #214b70;
  font-size: 0.8rem;
}

.preparation-progress li small {
  margin-top: 0.08rem;
  color: #798ea4;
  font-size: 0.68rem;
  line-height: 1.45;
}

.preparation-progress__error {
  margin-top: 0.9rem;
  color: #9a493e;
  font-size: 0.75rem;
  line-height: 1.5;
}

.preparation-retry {
  width: 100%;
  min-height: var(--control-height);
  margin-top: 0.9rem;
  border: 1px solid rgba(43, 104, 150, 0.16);
  border-radius: 999px;
  color: #326f9e;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

.order-form__error {
  margin-top: 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.65rem;
  color: #8a4035;
  background: #fbebe7;
  font-size: 0.78rem;
}

.order-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(43, 104, 150, 0.1);
}

/* Placing the order dims the button and shows a progress cursor. There is no
   spinner: the wait is short, and the disabled state already says the click
   was taken. */
.payment-button[disabled] {
  cursor: progress;
  opacity: 0.85;
}

.order-back {
  min-height: var(--control-height);
  margin-right: auto;
  padding-inline: 0;
  border: 0;
  color: #61778c;
  background: none;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

@keyframes prepare-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 39.99rem) {
  .order-builder__hero {
    padding-block: 3.5rem 2.5rem;
  }

  .order-progress {
    margin-inline: -0.35rem;
    padding-inline: 0.4rem;
  }

  .order-progress li small {
    max-width: 4rem;
    font-size: 0.58rem;
  }

  .order-form {
    padding: 1.15rem;
  }

  .order-step__head {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .order-step__head > span {
    font-size: 1.8rem;
  }

  .occasion-grid,
  .order-fields--two,
  .recipient-choice,
  .edition-choice,
  .order-review {
    grid-template-columns: 1fr;
  }

  .schedule-picker {
    grid-template-columns: 1fr;
  }

  .order-review > div:nth-child(odd) {
    border-right: 0;
  }

  .order-location-row {
    grid-template-columns: 1fr;
  }

  .order-map-button {
    width: 100%;
  }

  .order-actions {
    flex-wrap: wrap;
  }

  .order-actions .btn {
    flex: 1 1 auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  .preparation-progress li.is-active .prepare-status {
    animation: none;
  }
}