/* The order UI shares the site's black/white typography palette. */
:where(.tag-order-page-body, .simple-order-page) {
  --ink: #000;
  --ink-deep: #000;
  --forest: #000;
  --forest-soft: #000;
  --line: rgba(0, 0, 0, .14);
  color: #000;
}
html[data-theme="dark"] :where(.tag-order-page-body, .simple-order-page) {
  --ink: #f3f3f3;
  --forest: #d6d6d6;
  --forest-soft: #c4c4c4;
  --line: rgba(255, 255, 255, .18);
  color: var(--ink);
}

/* Shared geometry for every product order page. Product-specific image rules
   stay in tag-order.css and crate-order.css; the page frame stays centralized. */
.tag-order-page-body .tag-order-main {
  padding-top: clamp(28px, 4vw, 64px);
}

.tag-order-page-body .tag-order-shell {
  align-items: stretch;
  display: grid;
  gap: clamp(32px, 4.5vw, 68px);
    grid-template-columns: minmax(0, 1fr) minmax(700px, 1.1fr);
  margin: 0 auto;
  width: min(calc(100% - 48px), 1440px);
}

.tag-order-page-body .tag-order-product__surface {
  border-radius: 28px;
  min-height: min(54vw, 700px);
}

.tag-order-page-body .tag-order-config {
  align-self: start;
  max-width: none;
  padding: 0;
  transform: none;
}

.tag-order-page-body .tag-order-choice {
  min-height: 104px;
  padding-block: 24px;
}

.tag-order-page-body .tag-order-config__step-one .tag-order-submit {
  width: min(100%, 260px);
}

@media (min-width: 761px) {
  .tag-order-page-body .tag-order-choice-grid {
    margin-right: -24px;
    width: calc(100% + 24px);
  }
}

@media (max-width: 940px) {
  .tag-order-page-body .tag-order-shell {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 34px;
  }

  .tag-order-page-body .tag-order-product__surface {
    min-height: 620px;
  }
}

@media (max-width: 760px) {
  .tag-order-page-body .tag-order-shell {
    display: block;
    width: min(calc(100% - 32px), 620px);
  }

  .tag-order-page-body .tag-order-product__surface {
    min-height: min(112vw, 540px);
  }

  .tag-order-page-body .tag-order-config {
    max-width: none;
    padding: 54px 0 0;
  }

  .tag-order-page-body .tag-order-choice-grid {
    margin-right: 0;
    width: 100%;
  }
}

:where(.tag-order-page-body, .simple-order-page) .bag-link b {
  background: #fff;
  color: #000;
}