.login-page {
  min-width: 0;
}

.login-layout {
  overflow: hidden;
}

.checkout-entry__header {
  margin-bottom: var(--space-xl);
}

.checkout-entry__header h1 {
  margin: 0;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.checkout-entry__header p {
  max-width: 42rem;
  margin: var(--space-sm) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.checkout-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.checkout-choice {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: 15rem;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  background-color: var(--color-canvas);
}

.checkout-choice--guest {
  background-color: var(--color-brand-soft);
}

.checkout-choice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-canvas);
}

.checkout-choice__icon img {
  width: 1.5rem;
  height: 1.5rem;
}

.checkout-choice__eyebrow {
  margin-bottom: calc(-1 * var(--space-sm));
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.checkout-choice .title {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.checkout-choice__description {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.checkout-choice .buttons {
  align-self: stretch;
  margin-top: auto;
  padding: 0;
}

.checkout-choice__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

.checkout-login-panel {
  width: min(100%, var(--technical-form-max));
  margin-inline: auto;
  border: 1px solid var(--color-border);
}

.checkout-entry.is-choice-selected .checkout-login-panel,
.checkout-entry.is-login-selected .checkout-choice-grid,
.checkout-entry.is-login-selected .checkout-entry__header {
  display: none;
}

.checkout-entry__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  align-self: flex-start;
  text-decoration: none;
}

.checkout-login-panel > .external-authentication {
  margin-top: var(--space-lg);
}

.login-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-3xl);
}

/* The "new customer" panel follows the returning-customer panel that holds
   the actual login form (to its right, or below it on narrow screens). It gets a purely decorative scattering of
   shapes cropped from hero-ornaments.svg, the Figma hero's (::before below)
   - not a second content band, just texture behind this panel's existing
   copy, the same way the artwork already sits behind the home hero's own
   text on the same background colour. position/overflow here only exist to
   host that pseudo-element. */
.login-panel--new {
  position: relative;
  overflow: hidden;
  justify-content: center;
  background-color: var(--color-brand-soft);
}

/* Keeps the title/text/buttons readable above the ornament layer: an
   absolutely positioned element paints above non-positioned in-flow content
   regardless of z-index, so the real content needs its own stacking context
   to win back the top. */
.login-panel--new > * {
  position: relative;
  z-index: 1;
}

.login-panel--new::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("../../../images/figma/hero-ornaments.svg");
  background-repeat: no-repeat;
  /* hero-ornaments.svg is a single 1200x400 scattering of shapes across the
     whole width of the home hero. This panel is far narrower than the hero,
     so stretching the whole artwork here would squash every shape - instead
     this crops one dense cluster (an X mark, a couple of dots, a small
     triangle cluster, a diagonal-line hatch and a hatched-circle swirl) the
     same way object-fit: cover + object-position would for an <img>:
     background-size: auto 100% scales the art to the panel's height (the
     panel is always narrower than 3x its own height in practice, so this is
     always the "cover" branch), and background-position picks which
     horizontal slice of the 1200-wide art is visible. */
  background-size: auto 100%;
  background-position: 61% center;
}

.login-panel--returning {
  background-color: var(--color-canvas);
}

.login-panel .title {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.login-panel .text {
  color: var(--color-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.login-panel form,
.login-panel .form-fields,
.login-panel .inputs {
  display: flex;
  flex-direction: column;
}

.login-panel form,
.login-panel .form-fields {
  gap: var(--space-lg);
}

.login-panel .inputs {
  gap: var(--space-2xs);
}

.login-panel label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.login-password {
  position: relative;
}

.login-password input {
  padding-right: var(--space-3xl);
}

.login-page .password-eye {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--admin-bar-height);
  height: var(--admin-bar-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  transform: translateY(-50%);
  cursor: pointer;
}

/* An open eye invites "click to reveal"; once revealed the icon switches to
   a slashed eye inviting "click to hide" again - not two overlapping filled
   circles, which read as a single dark blob rather than an eye. */
.login-page .password-eye::before {
  content: "";
  position: absolute;
  inset: var(--space-sm);
  background-color: currentColor;
  -webkit-mask: url("../../../images/figma/icon-eye.svg") no-repeat center / contain;
  mask: url("../../../images/figma/icon-eye.svg") no-repeat center / contain;
}

.login-page .password-eye-open::before {
  -webkit-mask-image: url("../../../images/figma/icon-eye-off.svg");
  mask-image: url("../../../images/figma/icon-eye-off.svg");
}

.login-panel .login-options {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.remember-me {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.login-page .forgot-password a {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  text-underline-offset: var(--space-3xs);
}

.login-page .buttons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.login-page .login-button,
.login-page .register-button,
.login-page .checkout-as-guest-button {
  min-width: var(--account-action-width);
}

.login-page .message-error,
.login-page .field-validation-error {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
}

@media (max-width: 61.9375rem) {
  .login-panel {
    padding: var(--space-xl);
  }
}

@media (max-width: 36.25rem) {
  /* Both checkout choices, guest and sign in, fit one phone screen, so the
     choice is made between two options the shopper can see at once. Each
     card packs its icon beside the label and title instead of above them. */
  .checkout-entry__header {
    margin-bottom: var(--space-md);
  }

  .checkout-entry__header h1 {
    font-size: var(--font-size-xl);
  }

  .checkout-entry__header p {
    margin-top: var(--space-2xs);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
  }

  .checkout-choice-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .checkout-choice {
    display: grid;
    grid-template-columns: var(--tap-target) minmax(0, 1fr);
    grid-template-areas:
      "icon        eyebrow"
      "icon        title"
      "description description"
      "action      action";
    align-items: center;
    gap: var(--space-3xs) var(--space-sm);
    min-height: 0;
    padding: var(--space-sm);
  }

  .checkout-choice__icon {
    grid-area: icon;
  }

  .checkout-choice__eyebrow {
    grid-area: eyebrow;
    margin-bottom: 0;
  }

  /* One line beside the icon, so each card's heading block is the icon's
     height and no taller. */
  .checkout-choice .title {
    grid-area: title;
    font-size: var(--font-size-md);
  }

  .checkout-choice__description {
    grid-area: description;
    margin-top: var(--space-2xs);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
  }

  .checkout-choice .buttons {
    grid-area: action;
    margin-top: var(--space-2xs);
  }

  /* A phone login fits one screen: tighter panels, and the invitation to
     register is a short band below the form rather than a second hero. */
  .login-panel {
    gap: var(--space-md);
    padding: var(--space-lg);
  }

  .login-panel form,
  .login-panel .form-fields {
    gap: var(--space-md);
  }

  .login-panel .text {
    font-size: var(--font-size-sm);
  }

  .login-page .buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .login-page .login-button,
  .login-page .register-button,
  .login-page .checkout-as-guest-button {
    width: 100%;
  }
}

/* ============================================================================
   Address list (Customer/Addresses) and order list (Order/CustomerOrders)
   ----------------------------------------------------------------------------
   Both list a "section" per item with a title, an info list and a trailing
   button row — the same card shape — so one set of rules serves both.
   ========================================================================== */

.address-list-page .address-list,
.order-list-page .order-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-lg);
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

.address-list-page .address-item,
.order-list-page .order-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  background-color: var(--color-surface);
}

.address-list-page .address-item .title,
.order-list-page .order-item .title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.address-list-page .address-item .info,
.order-list-page .order-item .info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.address-list-page .address-item .buttons,
.order-list-page .order-item .buttons {
  margin-top: auto;
  padding-top: var(--space-md);
}

/* ============================================================================
   Order details (Order/Details)
   ========================================================================== */

.order-details-page .section {
  margin-bottom: var(--space-xl);
}

.order-details-page .options {
  display: none;
}

.order-details-page .options:has(.selected-checkout-attributes) {
  display: block;
}

.order-details-page .section > .title {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.order-details-page .billing-info,
.order-details-page .shipping-info,
.order-details-page .payment-method-info,
.order-details-page .shipping-method-info {
  padding: var(--space-lg);
  background-color: var(--color-surface);
}

/* ============================================================================
   Data tables
   ----------------------------------------------------------------------------
   Upstream renders order lines, downloadable products and recurring payments
   as bare <table>. Scoped to the account/order pages that actually use one —
   not generalized sitewide, since an unrelated plugin table elsewhere might
   legitimately want a different treatment.
   ========================================================================== */

.account-page table,
.order-details-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.account-page table th,
.order-details-page table th {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.account-page table td,
.order-details-page table td {
  padding: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

/* A table cannot reflow below its content width, so it scrolls in its own box
   rather than pushing the page sideways (style-guide rule 10). */
.account-page .table-wrapper,
.order-details-page .table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/* ============================================================================
   Customer portal completion
   ----------------------------------------------------------------------------
   The account navigation above is intentionally unchanged. These rules only
   organize the task content beside it: compact forms, scan-friendly records,
   clear action hierarchy, and order detail sections.
   ========================================================================== */

.account-page,
.registration-page,
.order-details-page {
  min-width: 0;
}

.registration-page .page-body,
.change-password-page .page-body,
.address-edit-page .page-body {
  max-width: var(--technical-form-max);
}

.registration-page {
  max-width: var(--account-panel-max);
  margin-inline: auto;
}

.registration-form__field--full,
.registration-page .inputs:has(.attributes),
.registration-page .inputs:has(.accept-consent),
.customer-info-page .inputs:has(.attributes),
.customer-info-page .inputs:has(.accept-consent),
.registration-page .date-of-birth,
.customer-info-page .date-of-birth {
  grid-column: 1 / -1;
}

.account-page .page-title,
.order-details-page > .page-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

/* The title row, not the heading, keeps the space above the content: when the
   actions wrap under the heading on a phone, the heading's own margin would
   sit between them and leave the actions touching the panel below. */
.account-page .page-title h1,
.order-details-page > .page-title h1 {
  flex: 1 1 auto;
  margin: 0;
}

.account-page .fieldset,
.registration-page .fieldset,
.change-password-page .fieldset {
  border: 0;
}

.account-page .buttons,
.registration-page .buttons,
.change-password-page .buttons {
  padding-top: var(--space-sm);
}

.account-page .delete-address-button,
.order-details-page .cancel-order-button {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Stands where the address or order list would, so it keeps the list's
   bottom margin and the add button under it never touches the panel. */
.account-page .no-data {
  margin: 0 0 var(--space-xl);
  padding: var(--space-2xl);
  background-color: var(--color-brand-soft);
  color: var(--color-ink);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.account-page .add-button {
  display: flex;
  justify-content: flex-end;
}

/* Address form: the same shared partial is used by account and checkout, so
   the grouping follows the model instead of duplicating field markup. */
.address-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.address-form__section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.address-form__section legend {
  width: 100%;
  margin: 0 0 var(--space-md);
  padding: 0 0 var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.address-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.address-form__field--full {
  grid-column: 1 / -1;
}

.address-form__field--postal {
  grid-column: span 1;
}

.address-form__field--city {
  grid-column: span 1;
}

.address-edit-page .edit-address,
.opc .edit-address {
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

/* Address cards keep identity and delivery data dominant; edit/delete sit in
   a quiet footer and never compete with the card's content. */
.address-list-page .address-list {
  grid-template-columns: repeat(auto-fit, minmax(var(--filter-column-width), 1fr));
}

.address-list-page .address-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
}

/* Password changes are a short sequential task. The current password gets a
   full row; the two values the customer must compare sit side by side. */
.change-password-form {
  max-width: var(--technical-form-max);
}

.change-password-form__fields {
  gap: var(--space-md);
}

.change-password-form__field--current {
  grid-column: 1 / -1;
  max-width: calc((100% - var(--space-md)) / 2);
}

.change-password-form__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
  color: var(--color-ink);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.change-password-form__label .required {
  position: static;
  color: var(--color-danger);
}

.change-password-recovery-link {
  align-self: flex-start;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  text-underline-offset: var(--space-3xs);
}

.change-password-form .warnings:empty {
  display: none;
}

.change-password-form .warnings:not(:empty) {
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background-color: var(--color-brand-soft);
}

.change-password-form .warnings p {
  margin: 0;
}

/* Newsletter is one preference, not a full data-entry form, and it reads the
   same on registration and customer info (style guide rule 2). Keep its title
   and native checkbox behavior while presenting it as a compact setting row. */
:is(.customer-info-page, .registration-page) .fieldset:has(input[name^="NewsLetterSubscriptions"]) {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-canvas);
}

:is(.customer-info-page, .registration-page) .fieldset:has(input[name^="NewsLetterSubscriptions"]) > .title {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-md);
}

:is(.customer-info-page, .registration-page) .fieldset:has(input[name^="NewsLetterSubscriptions"]) .form-fields {
  display: block;
}

:is(.customer-info-page, .registration-page) .fieldset:has(input[name^="NewsLetterSubscriptions"]) .attributes ul {
  align-items: stretch;
  flex-direction: column;
  gap: 0;
}

:is(.customer-info-page, .registration-page) .fieldset:has(input[name^="NewsLetterSubscriptions"]) .attributes li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--tap-target);
  padding-block: var(--space-2xs);
}

:is(.customer-info-page, .registration-page) .fieldset:has(input[name^="NewsLetterSubscriptions"]) .form-check-input {
  order: -1;
  flex: 0 0 auto;
  width: var(--space-md);
  height: var(--space-md);
  margin: 0;
}

:is(.customer-info-page, .registration-page) .fieldset:has(input[name^="NewsLetterSubscriptions"]) label {
  flex: 1 1 auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.address-list-page .address-item .info label {
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
}

.address-list-page .address-item address {
  font-style: normal;
}

.address-list-page .address-item .name {
  display: none;
}

.address-list-page .address-item .buttons {
  justify-content: flex-start;
  border-top: 1px solid var(--color-border);
}

/* Order history: one horizontal information hierarchy per order on desktop,
   with a compact period selector instead of a full-row control. */
.order-filters {
  display: block;
  margin-bottom: var(--space-xl);
  padding: var(--space-md);
  background-color: var(--color-surface);
}

.order-filters__field {
  width: min(100%, var(--filter-column-width));
}

.order-list-page .order-list {
  grid-template-columns: minmax(0, 1fr);
}

.order-list-page .order-item {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(var(--filter-column-width), 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
}

.order-card__header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-2xs);
}

.order-list-page .order-item .title {
  font-size: var(--font-size-xl);
}

/* The status badge (Order/_OrderStatusBadge) on the order list and the order
   details page: the order's status, or its shipping status once shipped. Not `.order-status`: upstream themes style that class on the
   details page's plain "Order status: ..." line. The dot repeats the tone for
   readers who do not tell the fills apart. */
.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--space-lg);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  background-color: var(--order-status-fill, var(--color-brand-soft));
  color: var(--order-status-ink, var(--color-ink));
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.order-status-badge::before {
  content: "";
  flex-shrink: 0;
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: 50%;
  background-color: currentColor;
}

.order-status-badge--pending {
  --order-status-fill: var(--color-status-pending);
  --order-status-ink: var(--color-status-pending-ink);
}

.order-status-badge--processing {
  --order-status-fill: var(--color-status-processing);
  --order-status-ink: var(--color-status-processing-ink);
}

.order-status-badge--shipped {
  --order-status-fill: var(--color-status-shipped);
  --order-status-ink: var(--color-status-shipped-ink);
}

.order-status-badge--complete,
.order-status-badge--delivered {
  --order-status-fill: var(--color-status-complete);
  --order-status-ink: var(--color-status-complete-ink);
}

.order-status-badge--cancelled {
  --order-status-fill: var(--color-status-cancelled);
  --order-status-ink: var(--color-status-cancelled-ink);
}

.order-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
}

.order-card__facts div {
  min-width: 0;
}

.order-card__facts dt {
  margin-bottom: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.order-card__facts dd {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.order-card__actions {
  justify-content: flex-end;
  padding: 0;
}

/* Order details: overview first, then paired fulfillment/payment columns,
   then line items and totals. All original data and commands remain present. */
.order-details-page > .page-title .button-2 {
  flex: 0 0 auto;
}

/* The overview is the order list's card at page scale: number and status
   badge on one line, the date and total under them. A white card like the
   sections below, so the badge's tone is the only colour in it. */
.order-details-page .order-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
}

.order-details-page .order-overview .order-card__header {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
}

.order-details-page .order-number {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.order-details-page .order-overview .order-card__facts {
  grid-template-columns: repeat(2, max-content);
  column-gap: var(--space-2xl);
}

.order-details-page .order-overview .order-total dd {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.order-details-page .info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-details-page .order-details-area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.order-details-page .billing-info-wrap,
.order-details-page .shipping-info-wrap {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
}

.order-details-page .billing-info,
.order-details-page .shipping-info,
.order-details-page .payment-method-info,
.order-details-page .shipping-method-info {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
}

.order-details-page .billing-info > .title,
.order-details-page .shipping-info > .title,
.order-details-page .payment-method-info > .title,
.order-details-page .shipping-method-info > .title {
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-md);
}

.order-details-page .info-list {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.order-details-page .info-list .name,
.order-details-page .info-list .payment-method,
.order-details-page .info-list .shipping-method {
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
}

.order-details-page .shipments,
.order-details-page .order-notes,
.order-details-page .products,
.order-details-page .totals {
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
}

.order-details-page .products .picture img {
  width: var(--order-thumbnail-width);
  max-width: none;
}

.order-details-page .products .product a {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.order-details-page .products .unit-price,
.order-details-page .products .quantity,
.order-details-page .products .total {
  text-align: right;
  white-space: nowrap;
}

.order-details-page .totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--filter-column-width), var(--checkout-sidebar-width));
  align-items: end;
  gap: var(--space-xl);
  margin-left: auto;
}

.order-details-page .totals .total-info {
  grid-column: 2;
}

.order-details-page .cart-total {
  width: 100%;
  border-collapse: collapse;
}

.order-details-page .cart-total td {
  padding-block: var(--space-2xs);
}

.order-details-page .cart-total-right {
  text-align: right;
}

.order-details-page .cart-total tr:last-child td {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xl);
}

.order-details-page .totals .actions {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (hover: hover) and (pointer: fine) {
  .account-page .delete-address-button:hover,
  .order-details-page .cancel-order-button:hover {
    border-color: var(--color-danger-hover);
    background-color: var(--color-danger);
    color: var(--color-footer-ink);
  }

  .order-details-page .products .product a:hover {
    color: var(--color-action-hover);
  }
}

@media (max-width: 61.9375rem) {
  /* Below the desktop a page showing the account menu gives its first screen to
     the account, not the shell: the header's search row and the page heading go,
     the menu's one row ("My account · Orders ▾") naming the page instead. Keyed
     on the menu, not nopCommerce's html-account-page class, which a guest's
     gift-card page carries too with no menu to name it. This is CSS rather than
     a layout (style guide rule 11) because the same page keeps the search on a
     desktop and the server cannot know the width. The heading stays for screen
     readers, hidden as .visually-hidden does (base.css); a title row holding
     anything besides it stays visible. */
  .site-wrapper:has(.block-account-navigation) .site-header__search {
    display: none;
  }

  .site-main:has(.block-account-navigation) .page > .page-title:has(> h1:only-child) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .order-list-page .order-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .order-card__header {
    grid-column: 1;
  }

  .order-card__facts {
    grid-column: 1;
  }

  .order-card__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 36.25rem) {
  .address-form__grid,
  .order-details-page .order-details-area,
  .order-details-page .totals {
    grid-template-columns: minmax(0, 1fr);
  }

  .address-form__field--full,
  .address-form__field--postal,
  .address-form__field--city {
    grid-column: 1;
  }

  .change-password-form__field--current {
    grid-column: 1;
    max-width: none;
  }

  .address-edit-page .edit-address,
  .opc .edit-address {
    padding: var(--space-lg);
  }

  .order-list-page .order-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-card__header,
  .order-card__facts,
  .order-card__actions {
    grid-column: 1;
    grid-row: auto;
  }

  .order-card__actions {
    justify-content: stretch;
  }

  .order-card__actions .button-2 {
    width: 100%;
  }

  .order-details-page .order-overview {
    padding: var(--space-lg);
  }

  /* A weekday-long date and the total no longer fit side by side at their
     natural widths; the date takes what the total leaves. */
  .order-details-page .order-overview .order-card__facts {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-md);
  }

  .order-details-page .shipments,
  .order-details-page .order-notes,
  .order-details-page .products,
  .order-details-page .totals {
    padding: var(--space-lg);
  }

  .order-details-page .products .data-table thead {
    display: none;
  }

  .order-details-page .products .data-table,
  .order-details-page .products .data-table tbody,
  .order-details-page .products .data-table tr,
  .order-details-page .products .data-table td {
    display: block;
    width: 100%;
  }

  .order-details-page .products .data-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
  }

  .order-details-page .products .data-table td {
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .order-details-page .products .data-table .picture {
    grid-column: 1;
    grid-row: 1 / span 5;
  }

  .order-details-page .products .data-table td:not(.picture) {
    grid-column: 1;
  }

  .order-details-page .products .data-table tr:has(.picture) {
    grid-template-columns: var(--order-thumbnail-width) minmax(0, 1fr);
  }

  .order-details-page .products .data-table tr:has(.picture) td:not(.picture) {
    grid-column: 2;
  }

  .order-details-page .products .td-title {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
  }

  .order-details-page .totals .total-info,
  .order-details-page .totals .actions {
    grid-column: 1;
  }
}