.order-page-title {
   margin: 0 0 var(--space-6);
}

.order-page-notice {
   margin: var(--space-6) 0;
   padding: var(--space-12) var(--space-4);
   border: 1px solid var(--color-gray-200);
   border-radius: var(--radius-md);
   color: var(--color-secondary-700);
   text-align: center;
}

.order-cart {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
}

.order-reminder {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
   padding: var(--space-4) var(--space-5);
   border-left: 3px solid var(--color-primary-500);
   border-radius: var(--radius-sm);
   background: var(--color-gray-100);
}

.order-reminder-count {
   margin: 0;
   font-weight: 600;
   color: var(--color-gray-900);
}

.order-reminder-text {
   margin: 0;
   color: var(--color-secondary-700);
}

.order-items {
   margin: 0;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
}

.order-item {
   position: relative;
   display: flex;
}

.order-item > .lot-card {
   flex: 1;
}

.order-item > .lot-card:focus-visible,
.order-item-remove:focus-visible {
   outline: 2px solid var(--color-primary-700);
   outline-offset: 2px;
}

.order-item-amount {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
   margin: 0;
   margin-top: auto;
}

.order-item-amount-label {
   color: var(--color-secondary-700);
}

.order-item-remove {
   position: absolute;
   top: var(--space-2);
   right: var(--space-2);
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
   border: 1px solid var(--color-gray-200);
   border-radius: var(--radius-full);
   background: var(--color-bg, #fff);
   color: var(--color-secondary-700);
   box-shadow: var(--shadow-sm);
   cursor: pointer;
   transition: border-color .18s var(--ease-out), color .18s var(--ease-out);
}

.order-item-remove::after {
   content: "";
   position: absolute;
   inset: -8px;
}

.order-item-remove:hover {
   border-color: var(--color-secondary-900);
   color: var(--color-secondary-900);
}

.order-item-remove-icon {
   width: .625rem;
   height: .625rem;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.order-form {
   max-width: 34rem;
   padding-top: var(--space-8);
   border-top: 1px solid var(--color-gray-200);
}

.order-form-names {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-6);
}

@media (min-width: 768px) {
   .order-form-names {
      grid-template-columns: 1fr 1fr;
   }
}

.order-form-terms {
   flex-direction: row;
   align-items: flex-start;
   gap: var(--space-2);
}

.order-form-terms label {
   cursor: pointer;
   font-weight: 400;
   text-transform: none;
   letter-spacing: normal;
   line-height: 1.5;
}

.order-form-terms input {
   flex: 0 0 auto;
   width: 1rem;
   height: 1rem;
   margin-top: .1875rem;
   accent-color: var(--color-primary-500);
}

.order-sent {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-16) var(--space-6);
   text-align: center;
}

.order-sent-icon {
   width: 3rem;
   height: 3rem;
   color: var(--color-primary-500);
   fill: none;
   stroke: currentColor;
   stroke-width: 1.2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.order-sent-title {
   margin: 0;
}

.order-sent-text,
.order-sent-partial {
   max-width: 32rem;
   margin: 0;
   color: var(--color-secondary-700);
}

.order-sent-partial {
   font-size: .875rem;
}