/* Fluxo público de pedidos migrado para o AtivaNexo Trail Design System 2.0. */
@layer ativanexo.order {
  .ds-order-hero {
    padding-block: clamp(var(--space-10), 7vw, var(--space-20));
    background: linear-gradient(145deg, var(--color-public-hero-start), var(--color-public-hero-end));
    border-block-end: 1px solid var(--color-public-border);
  }

  .ds-order-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
    gap: var(--space-10);
    align-items: end;
  }

  .ds-order-hero__copy h1 {
    max-inline-size: 48rem;
    margin: var(--space-2) 0 var(--space-4);
    color: var(--color-text-strong);
    font-size: clamp(var(--text-3xl), 6vw, var(--text-6xl));
    line-height: var(--line-height-tight);
  }

  .ds-order-hero__copy > p {
    max-inline-size: 44rem;
    margin: 0;
    color: var(--color-public-text-muted);
    font-size: var(--text-lg);
  }

  .ds-order-hero__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
  }

  .ds-order-hero__benefits li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--control-height-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg-surface) 84%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  .ds-order-hero__support {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-5);
    background: color-mix(in srgb, var(--color-bg-surface) 90%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .ds-order-hero__support-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: var(--control-height-md);
    block-size: var(--control-height-md);
    color: var(--color-brand-on-primary);
    background: var(--color-action-primary);
    border-radius: var(--radius-md);
  }

  .ds-order-hero__support strong,
  .ds-order-hero__support p {
    display: block;
    margin: 0;
  }

  .ds-order-hero__support p {
    margin-block-start: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .ds-order-flow {
    padding-block: 0 var(--space-20);
    background: var(--color-bg-canvas);
  }

  .ds-order-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
    gap: var(--space-6);
    align-items: start;
    margin-block-start: calc(var(--space-10) * -1);
  }

  .ds-order-main {
    min-inline-size: 0;
  }

  .ds-order-stepper {
    position: sticky;
    z-index: var(--z-dropdown);
    inset-block-start: var(--space-3);
    margin-block-end: var(--space-4);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-bg-surface) 96%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(1rem);
  }

  .ds-order-stepper__mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-block-end: var(--space-2);
  }

  .ds-order-stepper__mobile > div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }

  .ds-order-stepper__mobile span:first-child {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ds-order-stepper__mobile strong,
  .ds-order-stepper__percent {
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .ds-order-stepper__percent {
    color: var(--color-action-primary);
    font-weight: var(--font-weight-bold);
  }

  .ds-order-stepper__track {
    block-size: 0.375rem;
    margin-block-end: var(--space-3);
    overflow: hidden;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-pill);
  }

  .ds-order-stepper__track > span {
    display: block;
    inline-size: 25%;
    block-size: 100%;
    background: var(--color-action-primary);
    border-radius: inherit;
    transition: inline-size var(--duration-slow) var(--ease-standard);
  }

  .ds-order-stepper__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ds-order-stepper__steps li {
    min-inline-size: 0;
  }

  .ds-order-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "index copy";
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    min-block-size: var(--control-height-lg);
    padding: var(--space-2);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .ds-order-step:hover:not(:disabled) {
    color: var(--color-text-strong);
    background: var(--color-action-primary-soft);
  }

  .ds-order-step:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--color-focus-soft);
  }

  .ds-order-step.active,
  .ds-order-step[aria-current="step"] {
    color: var(--color-text-strong);
    background: var(--color-action-primary-soft);
    border-color: var(--color-control-border-hover);
  }

  .ds-order-step.completed {
    color: var(--color-action-primary);
  }

  .ds-order-step:disabled {
    cursor: not-allowed;
    opacity: 0.56;
  }

  .ds-order-step__index {
    grid-area: index;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
  }

  .ds-order-step.active .ds-order-step__index,
  .ds-order-step.completed .ds-order-step__index {
    color: var(--color-brand-on-primary);
    background: var(--color-action-primary);
  }

  .ds-order-step__icon {
    display: none;
  }

  .ds-order-step__copy {
    grid-area: copy;
    min-inline-size: 0;
  }

  .ds-order-step__copy strong,
  .ds-order-step__copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ds-order-step__copy strong {
    font-size: var(--text-xs);
    line-height: var(--line-height-heading);
  }

  .ds-order-step__copy small {
    margin-block-start: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
  }

  .ds-order-step-panel[hidden] {
    display: none;
  }

  .ds-order-panel {
    padding: clamp(var(--space-5), 4vw, var(--space-8));
  }

  .ds-order-panel__header {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-divider);
  }

  .ds-order-panel__header h2 {
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-strong);
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    line-height: var(--line-height-tight);
  }

  .ds-order-panel__header p {
    max-inline-size: 46rem;
    margin: 0;
    color: var(--color-text-muted);
  }

  .ds-order-panel__number {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 3rem;
    block-size: 3rem;
    color: var(--color-brand-on-primary);
    background: var(--color-action-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-xs);
  }

  .ds-order-subcard {
    margin-block-start: var(--space-4);
    padding: var(--space-5);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .ds-order-subcard__header {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-block-end: var(--space-5);
  }

  .ds-order-subcard__header > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    color: var(--color-action-primary);
    background: var(--color-action-primary-soft);
    border-radius: var(--radius-sm);
  }

  .ds-order-subcard__header h3,
  .ds-order-section-heading h3 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--text-lg);
  }

  .ds-order-subcard__header p,
  .ds-order-section-heading p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .ds-order-grid {
    display: grid;
    gap: var(--space-4);
  }

  .ds-order-grid--trip {
    grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
  }

  .ds-order-grid--contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-order-field--wide {
    grid-column: 1 / -1;
  }

  .ds-order-grid--address {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .ds-order-field--cep { grid-column: span 5; }
  .ds-order-field--address { grid-column: span 7; }
  .ds-order-field--number { grid-column: span 3; }
  .ds-order-field--complement { grid-column: span 5; }
  .ds-order-field--neighborhood { grid-column: span 4; }
  .ds-order-field--city { grid-column: span 5; }
  .ds-order-field--state { grid-column: span 3; }
  .ds-order-field--reference { grid-column: span 4; }

  .ds-order-input-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  .ds-order-field-label-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .ds-order-field-label-row small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  .ds-order-flow .is-invalid .ds-input,
  .ds-order-flow .is-invalid .ds-select,
  .ds-order-flow .is-invalid .ds-textarea,
  .ds-order-flow .ds-field--invalid .ds-input,
  .ds-order-flow .ds-field--invalid .ds-select,
  .ds-order-flow .ds-field--invalid .ds-textarea {
    border-color: var(--color-danger-border);
  }

  .ds-order-flow .is-valid .ds-input,
  .ds-order-flow .is-valid .ds-select,
  .ds-order-flow .is-valid .ds-textarea {
    border-color: var(--color-success-border);
  }

  .ds-order-inline-error {
    margin-block-end: var(--space-5);
  }

  .ds-order-trip-preview {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    margin-block-start: var(--space-4);
    overflow: hidden;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .ds-order-trip-preview.hidden {
    display: none;
  }

  .trip-preview-media {
    min-block-size: 11rem;
    background: var(--color-public-surface-subtle);
  }

  .trip-preview-media img,
  .trip-preview-media .image-placeholder {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 11rem;
    object-fit: cover;
  }

  .trip-preview-content {
    padding: var(--space-5);
  }

  .trip-preview-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
  }

  .trip-preview-content h3 {
    margin: var(--space-2) 0 var(--space-1);
    color: var(--color-text-strong);
    font-size: var(--text-xl);
  }

  .trip-preview-content p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .trip-deadline,
  .trip-preview-meta span,
  .availability-badges span,
  .shirt-gallery-sleeves button,
  .catalog-added-count {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  .trip-deadline {
    color: var(--color-warning-text);
    background: var(--color-warning-surface);
    border: 1px solid var(--color-warning-border);
  }

  .trip-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
  }

  .trip-preview-meta span,
  .availability-badges span {
    color: var(--color-text);
    background: var(--color-bg-subtle);
  }

  .ds-order-guidance,
  .ds-order-after-submit {
    margin-block-start: var(--space-4);
  }

  .ds-order-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
  }

  .ds-order-section-heading > div:first-child {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    min-inline-size: 0;
  }

  .ds-order-section-heading__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    color: var(--color-action-primary);
    background: var(--color-action-primary-soft);
    border-radius: var(--radius-sm);
  }

  .ds-order-catalog {
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-divider);
  }

  .ds-order-catalog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .shirt-card-v3 {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow: hidden;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }

  .shirt-card-v3:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-0.125rem);
  }

  .shirt-card-v3.has-items {
    border-color: var(--color-success-border);
  }

  .shirt-card-media {
    position: relative;
    padding: var(--space-3);
    background: var(--color-public-surface-subtle);
    border-block-end: 1px solid var(--color-border);
  }

  .shirt-card-media > img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
  }

  .catalog-added-count {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    color: var(--color-success-text);
    background: var(--color-success-surface);
    border: 1px solid var(--color-success-border);
  }

  .shirt-card-body {
    display: grid;
    gap: var(--space-3);
    flex: 1;
    padding: var(--space-5);
  }

  .shirt-code {
    color: var(--color-action-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .shirt-card-body h3,
  .shirt-card-body p {
    margin: 0;
  }

  .shirt-card-body h3 {
    color: var(--color-text-strong);
    font-size: var(--text-xl);
  }

  .shirt-card-body p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .availability-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .shirt-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-block-start: auto;
  }

  .shirt-price-grid > span {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
  }

  .shirt-price-grid small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .shirt-price-grid strong {
    color: var(--color-text-strong);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
  }

  .shirt-card-actions {
    padding: 0 var(--space-5) var(--space-5);
  }

  .shirt-card-actions .ds-button,
  .shirt-card-actions .button {
    inline-size: 100%;
  }

  .ds-order-items {
    padding-block-start: var(--space-6);
  }

  .ds-order-items__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .ds-order-items__list {
    display: grid;
    gap: var(--space-4);
  }

  .ds-order-empty.hidden {
    display: none;
  }

  .ds-order-empty {
    border: 1px dashed var(--color-border-strong);
  }

  .order-item-card-v3 {
    position: relative;
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }

  .item-number {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--color-brand-on-primary);
    background: var(--color-action-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
  }

  .item-image-panel {
    min-inline-size: 0;
  }

  .item-image {
    overflow: hidden;
    background: var(--color-public-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .item-image > img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    padding: var(--space-2);
    object-fit: contain;
  }

  .item-image-caption {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .item-image-caption strong {
    color: var(--color-text);
  }

  .item-fields {
    min-inline-size: 0;
  }

  .item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }

  .item-card-header h3,
  .item-card-header p {
    margin: 0;
  }

  .item-card-header h3 {
    color: var(--color-text-strong);
    font-size: var(--text-xl);
  }

  .item-quick-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
  }

  .item-utility-button,
  .remove-item-button,
  .review-edit-button,
  .item-notes-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-block-size: var(--control-height-sm);
    padding: var(--space-1) var(--space-2);
    color: var(--color-action-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
  }

  .item-utility-button:hover,
  .review-edit-button:hover,
  .item-notes-toggle:hover {
    background: var(--color-action-primary-soft);
  }

  .remove-item-button {
    color: var(--color-danger-text);
  }

  .remove-item-button:hover {
    background: var(--color-danger-surface);
  }

  .item-utility-button:focus-visible,
  .remove-item-button:focus-visible,
  .review-edit-button:focus-visible,
  .item-notes-toggle:focus-visible,
  .quantity-control button:focus-visible,
  .shirt-gallery-tabs button:focus-visible,
  .shirt-gallery-sleeves button:focus-visible,
  .shirt-gallery-zoom:focus-visible,
  .shirt-viewer-arrow:focus-visible,
  .shirt-viewer-close:focus-visible,
  .shirt-viewer-tabs button:focus-visible,
  .shirt-workspace-tabs button:focus-visible,
  .mobile-add-shirt:focus-visible,
  .ds-order-icon-button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--color-focus-soft);
  }

  .order-item-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .shirt-select-field,
  .item-notes-field {
    grid-column: 1 / -1;
  }

  .quantity-control {
    display: grid;
    grid-template-columns: var(--control-height-md) minmax(0, 1fr) var(--control-height-md);
    overflow: hidden;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-sm);
  }

  .quantity-control button,
  .quantity-control input {
    min-block-size: var(--control-height-md);
    border: 0;
    border-radius: 0;
  }

  .quantity-control button {
    display: grid;
    place-items: center;
    color: var(--color-action-primary);
    background: var(--color-action-primary-soft);
    cursor: pointer;
  }

  .quantity-control input {
    inline-size: 100%;
    color: var(--color-text-strong);
    background: var(--color-control-bg);
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
  }

  .size-control {
    display: grid;
    gap: var(--space-2);
  }

  .size-guide-button {
    justify-self: start;
  }

  .size-preservation-message {
    display: block;
    margin-block-start: var(--space-2);
    color: var(--color-success-text);
    font-size: var(--text-xs);
  }

  .size-preservation-message.is-warning {
    color: var(--color-warning-text);
  }

  .item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-divider);
  }

  .item-footer span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .item-footer strong {
    color: var(--color-text-strong);
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
  }

  .item-collapsed-summary {
    display: none;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .order-item-card-v3.is-collapsed .item-image-panel,
  .order-item-card-v3.is-collapsed .order-item-fields,
  .order-item-card-v3.is-collapsed .item-footer {
    display: none;
  }

  .order-item-card-v3.is-collapsed {
    grid-template-columns: 1fr;
  }

  .order-item-card-v3.is-collapsed .item-collapsed-summary {
    display: flex;
    flex-wrap: wrap;
  }

  .item-notes-wrap[hidden] {
    display: none;
  }

  .shirt-workspace-tabs {
    display: none;
  }

  .add-shirt-bottom {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
  }

  .add-shirt-bottom small {
    color: var(--color-text-muted);
  }

  .mobile-add-shirt {
    display: none;
  }

  .ds-order-freight-preview {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-block-start: var(--space-5);
    padding: var(--space-4);
    color: var(--color-info-text);
    background: var(--color-info-surface);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
  }

  .ds-order-freight-preview strong,
  .ds-order-freight-preview p {
    display: block;
    margin: 0;
  }

  .ds-order-freight-preview p {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
  }

  .ds-order-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
  }

  .ds-order-actions--end {
    justify-content: flex-end;
  }

  .ds-order-review {
    display: grid;
    gap: var(--space-4);
  }

  .review-grid-v3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .review-section-card {
    padding: var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .review-products-card {
    grid-column: 1 / -1;
  }

  .review-section-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    margin-block-end: var(--space-4);
  }

  .review-section-heading > span {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--color-brand-on-primary);
    background: var(--color-action-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
  }

  .review-section-heading h3,
  .review-section-heading small {
    display: block;
    margin: 0;
  }

  .review-section-heading h3 {
    color: var(--color-text-strong);
    font-size: var(--text-md);
  }

  .review-section-heading small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .review-detail-row,
  .review-product,
  .review-contact-lines,
  .review-address,
  .review-note {
    display: grid;
    gap: var(--space-1);
  }

  .review-detail-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--color-divider);
  }

  .review-detail-row span,
  .review-contact-lines,
  .review-address span,
  .review-note span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .review-products-list {
    display: grid;
    gap: var(--space-2);
  }

  .review-product {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
  }

  .review-product-index {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--color-text);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
  }

  .review-product-main {
    min-inline-size: 0;
  }

  .review-product-main strong,
  .review-product-main span,
  .review-product-main small {
    display: block;
  }

  .review-product-main span,
  .review-product-main small {
    margin-block-start: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .review-product-price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .review-total-v3 {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .review-total-v3 > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .review-total-v3 span {
    color: var(--color-text-muted);
  }

  .review-total-v3 strong {
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
  }

  .review-grand-total {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border-strong);
    font-size: var(--text-lg);
  }

  .ds-order-confirmation {
    inline-size: 100%;
    margin-block-start: var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .ds-order-privacy {
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .ds-order-privacy a {
    color: var(--color-action-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .ds-order-submit-status {
    margin-block-start: var(--space-4);
    padding: var(--space-3) var(--space-4);
    color: var(--color-info-text);
    background: var(--color-info-surface);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
  }

  .ds-order-submit-status.is-error {
    color: var(--color-danger-text);
    background: var(--color-danger-surface);
    border-color: var(--color-danger-border);
  }

  .ds-order-summary {
    position: sticky;
    inset-block-start: var(--space-3);
    min-inline-size: 0;
    padding: var(--space-5);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .ds-order-summary__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--color-divider);
  }

  .ds-order-summary__header h2 {
    margin: var(--space-1) 0 0;
    color: var(--color-text-strong);
    font-size: var(--text-xl);
  }

  .ds-order-icon-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: var(--control-height-sm);
    block-size: var(--control-height-sm);
    padding: 0;
    color: var(--color-text);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .summary-close {
    display: none;
  }

  .ds-order-summary__trip {
    display: grid;
    gap: var(--space-1);
    margin-block: var(--space-4);
    padding: var(--space-3);
    background: var(--color-action-primary-soft);
    border-radius: var(--radius-md);
  }

  .summary-trip-label,
  .summary-empty {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .ds-order-summary__trip strong {
    color: var(--color-text-strong);
  }

  .ds-order-summary__trip small {
    color: var(--color-text-muted);
  }

  .ds-order-summary__section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .ds-order-summary__items {
    display: grid;
    gap: var(--space-2);
    max-block-size: 18rem;
    overflow: auto;
  }

  .summary-item-v3 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
  }

  .summary-item-index {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--color-brand-on-primary);
    background: var(--color-action-primary);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
  }

  .summary-item-v3 strong,
  .summary-item-v3 small {
    display: block;
    min-inline-size: 0;
  }

  .summary-item-v3 strong {
    color: var(--color-text-strong);
    font-size: var(--text-sm);
  }

  .summary-item-v3 small {
    margin-block-start: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .summary-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    margin-block-start: var(--space-1);
  }

  .summary-item-quantity {
    padding: var(--space-1) var(--space-2);
    color: var(--color-text);
    background: var(--color-bg-surface);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  .summary-items-empty {
    margin: 0;
    padding: var(--space-4);
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    text-align: center;
  }

  .ds-order-summary__totals {
    display: grid;
    gap: 0;
    margin: var(--space-4) 0 0;
  }

  .ds-order-summary__totals > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--color-divider);
  }

  .ds-order-summary__totals dt {
    color: var(--color-text-muted);
  }

  .ds-order-summary__totals dd {
    margin: 0;
    color: var(--color-text-strong);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .ds-order-summary__totals .grand-total {
    border-block-end: 0;
    font-size: var(--text-lg);
  }

  .ds-order-summary__safe-note {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-block-start: var(--space-4);
    padding: var(--space-3);
    color: var(--color-success-text);
    background: var(--color-success-surface);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
  }

  .ds-order-summary__safe-note small {
    font-size: var(--text-xs);
  }

  .ds-order-summary-backdrop,
  .ds-order-mobile-summary {
    display: none;
  }

  .ds-order-size-dialog,
  .shirt-image-viewer {
    inline-size: min(56rem, calc(100% - var(--space-6)));
    max-block-size: calc(100dvh - var(--space-6));
    padding: 0;
    overflow: auto;
    color: var(--color-text);
    background: var(--color-bg-surface);
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }

  .ds-order-size-dialog::backdrop,
  .shirt-image-viewer::backdrop {
    background: var(--color-overlay);
  }

  .ds-order-size-dialog > .modal-close {
    position: sticky;
    z-index: 3;
    inset-block-start: var(--space-3);
    float: inline-end;
    margin: var(--space-3);
  }

  .size-dialog-heading,
  .size-chart-frame,
  .notice {
    margin: var(--space-5);
  }

  .size-dialog-heading h2 {
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-strong);
  }

  .size-dialog-heading p,
  .notice span {
    color: var(--color-text-muted);
  }

  .size-chart-frame {
    overflow: hidden;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .size-chart {
    inline-size: 100%;
    max-block-size: 70dvh;
    object-fit: contain;
  }

  .notice {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-info-surface);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
  }

  .shirt-preview-gallery,
  .item-gallery {
    display: grid;
    gap: var(--space-2);
    inline-size: 100%;
  }

  .shirt-gallery-main {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-public-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .shirt-gallery-main > img {
    inline-size: 100%;
    block-size: 100%;
    padding: var(--space-2);
    object-fit: contain;
  }

  .shirt-gallery-main > [data-gallery-label] {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-start: var(--space-2);
    padding: var(--space-1) var(--space-2);
    color: var(--color-brand-on-primary);
    background: var(--color-action-primary);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  .shirt-gallery-zoom {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: var(--control-height-sm);
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-strong);
    background: color-mix(in srgb, var(--color-bg-surface) 94%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
  }

  .shirt-gallery-sleeves,
  .shirt-gallery-tabs,
  .shirt-viewer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .shirt-gallery-sleeves button,
  .shirt-gallery-tabs button,
  .shirt-viewer-tabs button {
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    cursor: pointer;
  }

  .shirt-gallery-sleeves button.active,
  .shirt-gallery-tabs button.active,
  .shirt-viewer-tabs button.active,
  .shirt-gallery-sleeves button[aria-pressed="true"],
  .shirt-gallery-tabs button[aria-selected="true"],
  .shirt-viewer-tabs button[aria-selected="true"] {
    color: var(--color-text-strong);
    background: var(--color-action-primary-soft);
    border-color: var(--color-action-primary);
  }

  .shirt-gallery-tabs button,
  .shirt-viewer-tabs button {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--control-height-md);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    font: inherit;
    text-align: start;
  }

  .shirt-gallery-tabs img,
  .shirt-viewer-tabs img {
    inline-size: 2.5rem;
    block-size: 2.25rem;
    padding: var(--space-1);
    object-fit: contain;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-xs);
  }

  .catalog-gallery-tabs {
    display: none;
  }

  .shirt-viewer-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-block-size: calc(100dvh - var(--space-6));
  }

  .shirt-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-block-end: 1px solid var(--color-divider);
  }

  .shirt-viewer-header span,
  .shirt-viewer-header h2,
  .shirt-viewer-header p {
    display: block;
    margin: 0;
  }

  .shirt-viewer-header span {
    color: var(--color-action-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .shirt-viewer-header h2 {
    margin-block-start: var(--space-1);
    color: var(--color-text-strong);
  }

  .shirt-viewer-header p {
    margin-block-start: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .shirt-viewer-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: var(--control-height-md);
    block-size: var(--control-height-md);
    color: var(--color-text);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .shirt-viewer-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 20rem;
    padding: var(--space-5) var(--space-16);
    overflow: auto;
    background: var(--color-public-surface-subtle);
  }

  .shirt-viewer-stage > img {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 42rem;
    max-block-size: 65dvh;
    object-fit: contain;
  }

  .shirt-viewer-arrow {
    position: absolute;
    inset-block-start: 50%;
    display: grid;
    place-items: center;
    inline-size: var(--control-height-md);
    block-size: var(--control-height-md);
    color: var(--color-text-strong);
    background: color-mix(in srgb, var(--color-bg-surface) 94%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transform: translateY(-50%);
  }

  .shirt-viewer-arrow.previous { inset-inline-start: var(--space-3); }
  .shirt-viewer-arrow.next { inset-inline-end: var(--space-3); }

  .shirt-viewer-tabs {
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--color-bg-surface);
    border-block-start: 1px solid var(--color-divider);
  }

  .loading-v3,
  .ds-order-loading {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-8);
    color: var(--color-text-muted);
  }

  .loading-v3 .ds-icon,
  .ds-order-loading .ds-icon {
    animation: ds-spin var(--duration-slow) linear infinite;
  }

  @media (max-width: 64rem) {
    .ds-order-hero__grid {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }

    .ds-order-hero__support {
      max-inline-size: 42rem;
    }

    .ds-order-shell {
      grid-template-columns: minmax(0, 1fr) minmax(17rem, 19rem);
    }

    .ds-order-step__copy small {
      display: none;
    }

    .order-item-card-v3 {
      grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
    }
  }

  @media (max-width: 51.25rem) {
    .ds-order-hero {
      padding-block: var(--space-10) var(--space-16);
    }

    .ds-order-hero__copy > p {
      font-size: var(--text-md);
    }

    .ds-order-shell {
      display: block;
      margin-block-start: calc(var(--space-8) * -1);
    }

    .ds-order-stepper {
      inset-block-start: var(--space-2);
      padding: var(--space-3);
    }

    .ds-order-stepper__steps {
      grid-template-columns: repeat(4, 1fr);
    }

    .ds-order-step {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas: "index";
      justify-items: center;
      min-block-size: 2.75rem;
      padding: var(--space-1);
    }

    .ds-order-step__copy,
    .ds-order-step__icon {
      display: none;
    }

    .ds-order-step__index {
      inline-size: 1.875rem;
      block-size: 1.875rem;
    }

    .ds-order-panel {
      padding: var(--space-5);
    }

    .ds-order-grid--trip,
    .ds-order-grid--contact,
    .review-grid-v3 {
      grid-template-columns: 1fr;
    }

    .ds-order-field--wide,
    .review-products-card {
      grid-column: auto;
    }

    .ds-order-catalog__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-item-card-v3 {
      grid-template-columns: 1fr;
    }

    .item-image-panel {
      display: grid;
      grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
      gap: var(--space-3);
      align-items: center;
    }

    .order-item-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-order-summary {
      position: fixed;
      z-index: var(--z-modal);
      inset: auto 0 0;
      max-block-size: min(80dvh, 46rem);
      overflow: auto;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      box-shadow: var(--shadow-lg);
      transform: translateY(110%);
      transition: transform var(--duration-slow) var(--ease-standard);
    }

    .summary-close {
      display: inline-grid;
    }

    .summary-open {
      overflow: hidden;
    }

    .summary-open .ds-order-summary {
      transform: translateY(0);
    }

    .ds-order-summary-backdrop {
      position: fixed;
      z-index: calc(var(--z-modal) - 1);
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      padding: 0;
      visibility: hidden;
      background: var(--color-overlay);
      border: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--duration-normal) var(--ease-standard), visibility var(--duration-normal) var(--ease-standard);
    }

    .summary-open .ds-order-summary-backdrop {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    .ds-order-mobile-summary {
      position: fixed;
      z-index: var(--z-dropdown);
      inset-inline: var(--space-3);
      inset-block-end: calc(var(--space-3) + env(safe-area-inset-bottom));
      display: none;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-3);
      min-block-size: var(--control-height-lg);
      padding: var(--space-2) var(--space-4);
      color: var(--color-brand-on-primary);
      background: var(--color-action-primary);
      border: 0;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      font: inherit;
      text-align: start;
      cursor: pointer;
    }

    .ds-order-mobile-summary.is-visible {
      display: flex;
    }

    .ds-order-mobile-summary small,
    .ds-order-mobile-summary strong {
      display: block;
    }

    .ds-order-mobile-summary small {
      color: var(--color-brand-on-primary-muted);
      font-size: var(--text-xs);
    }

    .ds-order-mobile-summary strong {
      font-size: var(--text-md);
      font-variant-numeric: tabular-nums;
    }

    .ds-order-mobile-summary__action {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      font-size: var(--text-sm);
      font-weight: var(--font-weight-semibold);
    }

    .ds-order-flow {
      padding-block-end: calc(var(--space-24) + env(safe-area-inset-bottom));
    }

    .shirt-workspace-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-1);
      margin-block-end: var(--space-4);
      padding: var(--space-1);
      background: var(--color-bg-subtle);
      border-radius: var(--radius-md);
    }

    .shirt-workspace-tabs button {
      min-block-size: var(--control-height-md);
      color: var(--color-text-muted);
      background: transparent;
      border: 0;
      border-radius: var(--radius-sm);
      font: inherit;
      font-size: var(--text-sm);
      font-weight: var(--font-weight-semibold);
      cursor: pointer;
    }

    .shirt-workspace-tabs button.is-active {
      color: var(--color-text-strong);
      background: var(--color-bg-surface);
      box-shadow: var(--shadow-xs);
    }

    .shirt-config-workspace:not(.show-items) .selected-items-section,
    .shirt-config-workspace.show-items .catalog-section {
      display: none;
    }

    .mobile-add-shirt {
      position: fixed;
      z-index: var(--z-dropdown);
      inset-inline-end: var(--space-4);
      inset-block-end: calc(var(--space-20) + env(safe-area-inset-bottom));
      display: none;
      align-items: center;
      gap: var(--space-2);
      min-block-size: var(--control-height-md);
      padding: var(--space-2) var(--space-4);
      color: var(--color-brand-on-primary);
      background: var(--color-action-primary);
      border: 0;
      border-radius: var(--radius-pill);
      box-shadow: var(--shadow-md);
      font: inherit;
      font-weight: var(--font-weight-semibold);
    }

    .mobile-add-shirt.is-visible {
      display: inline-flex;
    }
  }

  @media (max-width: 40rem) {
    .ds-order-hero__benefits {
      display: grid;
    }

    .ds-order-hero__benefits li {
      border-radius: var(--radius-md);
    }

    .ds-order-panel__header {
      gap: var(--space-3);
    }

    .ds-order-panel__number {
      inline-size: 2.5rem;
      block-size: 2.5rem;
    }

    .ds-order-grid--address {
      grid-template-columns: 1fr 1fr;
    }

    .ds-order-field--cep,
    .ds-order-field--address,
    .ds-order-field--complement,
    .ds-order-field--neighborhood,
    .ds-order-field--city,
    .ds-order-field--reference {
      grid-column: 1 / -1;
    }

    .ds-order-field--number,
    .ds-order-field--state {
      grid-column: span 1;
    }

    .ds-order-catalog__grid {
      grid-template-columns: 1fr;
    }

    .item-image-panel {
      grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
    }

    .order-item-fields {
      grid-template-columns: 1fr;
    }

    .shirt-select-field,
    .item-notes-field {
      grid-column: auto;
    }

    .item-card-header {
      display: grid;
    }

    .item-quick-actions {
      justify-content: flex-start;
    }

    .ds-order-actions {
      display: grid;
      grid-template-columns: 1fr;
    }

    .ds-order-actions .ds-button {
      inline-size: 100%;
    }

    .ds-order-actions .ds-button--ghost {
      order: 2;
    }

    .review-product {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .review-product-price {
      grid-column: 2;
    }

    .ds-order-input-action {
      grid-template-columns: 1fr;
    }

    .shirt-viewer-stage {
      min-block-size: 16rem;
      padding-inline: var(--space-12);
    }

    .shirt-viewer-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 22.5rem) {
    .ds-order-panel,
    .ds-order-subcard,
    .order-item-card-v3 {
      padding: var(--space-4);
    }

    .ds-order-section-heading,
    .ds-order-section-heading--items {
      align-items: flex-start;
      flex-direction: column;
    }

    .ds-order-items__actions {
      inline-size: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ds-order-stepper__track > span,
    .ds-order-summary,
    .ds-order-summary-backdrop,
    .shirt-card-v3 {
      transition-duration: 0ms;
    }
  }
}

/* Portal permanente de acompanhamento por token público. */
@layer ativanexo.order-portal {
  .ds-order-portal,
  .ds-order-portal *,
  .ds-order-portal *::before,
  .ds-order-portal *::after {
    box-sizing: border-box;
  }

  .ds-order-portal {
    min-block-size: 70dvh;
    padding-block: clamp(var(--space-6), 5vw, var(--space-12));
    color: var(--color-text);
    background: var(--color-bg-subtle);
  }

  .ds-order-portal__container {
    display: grid;
    gap: var(--space-6);
    max-inline-size: var(--container-wide);
  }

  .ds-order-portal__hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-5);
    align-items: center;
    padding: clamp(var(--space-5), 4vw, var(--space-8));
    background: linear-gradient(145deg, var(--color-public-hero-start), var(--color-public-hero-end));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }

  .ds-order-portal__hero-icon,
  .ds-order-portal__tracking-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    color: var(--color-action-primary);
    background: var(--color-action-primary-soft);
    border-radius: var(--radius-lg);
  }

  .ds-order-portal__hero-icon--success { color: var(--color-success-text); background: var(--color-success-surface); }
  .ds-order-portal__hero-icon--warning { color: var(--color-warning-text); background: var(--color-warning-surface); }
  .ds-order-portal__hero-icon--danger { color: var(--color-danger-text); background: var(--color-danger-surface); }
  .ds-order-portal__hero-icon--info { color: var(--color-info-text); background: var(--color-info-surface); }

  .ds-order-portal__hero-copy h1 {
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-strong);
    font-family: var(--font-mono);
    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
  }

  .ds-order-portal__hero-copy > p {
    max-inline-size: 46rem;
    margin: 0;
    color: var(--color-text-muted);
  }

  .ds-order-portal__badges,
  .ds-order-portal__hero-actions,
  .ds-order-portal__button-grid,
  .ds-order-portal__actions-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .ds-order-portal__badges { margin-block-start: var(--space-4); }

  .ds-order-portal__hero-actions {
    justify-content: flex-end;
    max-inline-size: 22rem;
  }

  .ds-order-portal__notice { margin: 0; }

  .ds-order-portal__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.85fr);
    gap: var(--space-6);
    align-items: start;
  }

  .ds-order-portal__main,
  .ds-order-portal__side {
    display: grid;
    gap: var(--space-5);
    min-inline-size: 0;
  }

  .ds-order-portal__side {
    position: sticky;
    inset-block-start: var(--space-5);
  }

  .ds-order-portal__card {
    min-inline-size: 0;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
  }

  .ds-order-portal__card-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: flex-start;
    margin-block-end: var(--space-5);
  }

  .ds-order-portal__card-header h2,
  .ds-order-portal__permanent-link h2 {
    margin: var(--space-1) 0 0;
    color: var(--color-text-strong);
    font-size: var(--text-xl);
    line-height: var(--line-height-tight);
  }

  .ds-order-portal__eyebrow {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ds-order-portal__total {
    color: var(--color-text-strong);
    font-size: var(--text-2xl);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ds-order-portal__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-6);
  }

  .ds-order-portal__facts > div {
    min-inline-size: 0;
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
  }

  .ds-order-portal__facts dt,
  .ds-order-portal__totals dt,
  .ds-order-portal__item-quantity span,
  .ds-order-portal__item-price span,
  .ds-order-portal__tracking > div > span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  .ds-order-portal__facts dd,
  .ds-order-portal__totals dd {
    margin: var(--space-1) 0 0;
    color: var(--color-text-strong);
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
  }

  .ds-order-portal__items {
    display: grid;
    border-block: 1px solid var(--color-divider);
  }

  .ds-order-portal__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(5rem, auto) minmax(6.5rem, auto);
    gap: var(--space-4);
    align-items: center;
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--color-divider);
  }

  .ds-order-portal__item:last-child { border-block-end: 0; }

  .ds-order-portal__item-index {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--color-action-primary);
    background: var(--color-action-primary-soft);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
  }

  .ds-order-portal__item-copy,
  .ds-order-portal__item-quantity,
  .ds-order-portal__item-price {
    display: grid;
    gap: var(--space-1);
    min-inline-size: 0;
  }

  .ds-order-portal__item-copy strong,
  .ds-order-portal__item-quantity strong,
  .ds-order-portal__item-price strong {
    color: var(--color-text-strong);
  }

  .ds-order-portal__item-copy span,
  .ds-order-portal__item-copy small {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }

  .ds-order-portal__item-quantity,
  .ds-order-portal__item-price { text-align: end; }

  .ds-order-portal__totals {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-5) 0 0 auto;
    max-inline-size: 25rem;
  }

  .ds-order-portal__totals > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    align-items: baseline;
  }

  .ds-order-portal__totals dd {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ds-order-portal__totals-grand {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border-strong);
  }

  .ds-order-portal__totals-grand dt,
  .ds-order-portal__totals-grand dd {
    color: var(--color-text-strong);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
  }

  .ds-order-portal__timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ds-order-portal__step {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
    min-block-size: 6rem;
  }

  .ds-order-portal__step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block: 2.5rem 0;
    inset-inline-start: calc(1.25rem - 1px);
    inline-size: 2px;
    background: var(--color-divider);
  }

  .ds-order-portal__step-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
  }

  .ds-order-portal__step.is-done .ds-order-portal__step-marker {
    color: var(--color-text-inverse);
    background: var(--color-success-text);
    border-color: var(--color-success-text);
  }

  .ds-order-portal__step.is-current .ds-order-portal__step-marker {
    color: var(--color-warning-text);
    background: var(--color-warning-surface);
    border-color: var(--color-warning-border);
  }

  .ds-order-portal__step > div { padding-block: var(--space-1) var(--space-5); }
  .ds-order-portal__step strong { color: var(--color-text-strong); }
  .ds-order-portal__step time { display: block; margin-block-start: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
  .ds-order-portal__step p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

  .ds-order-portal__tracking {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-5);
    background: var(--color-bg-subtle);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
  }

  .ds-order-portal__tracking > div {
    display: grid;
    gap: var(--space-1);
    min-inline-size: 0;
  }

  .ds-order-portal__tracking code {
    color: var(--color-text-strong);
    font: var(--font-weight-bold) var(--text-xl)/var(--line-height-tight) var(--font-mono);
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
  }

  .ds-order-portal__tracking small { color: var(--color-text-muted); }

  .ds-order-portal__button-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--space-3);
  }

  .ds-order-portal__payment { overflow: hidden; }

  .ds-order-portal__pix-frame {
    display: grid;
    place-items: center;
    padding: var(--space-4);
    margin-block-end: var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .ds-order-portal__pix-frame img {
    display: block;
    inline-size: min(100%, 16rem);
    block-size: auto;
  }

  .ds-order-portal__support-copy {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .ds-order-portal__code-field {
    min-block-size: 6rem;
    margin-block: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    resize: vertical;
  }

  .ds-order-portal__empty {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-5);
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
  }

  .ds-order-portal__empty > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: var(--color-action-primary);
    background: var(--color-action-primary-soft);
    border-radius: var(--radius-md);
  }

  .ds-order-portal__empty strong { display: block; color: var(--color-text-strong); }
  .ds-order-portal__empty p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
  .ds-order-portal__empty--compact { padding: var(--space-4); }

  .ds-order-portal__actions-list { display: grid; }

  .ds-order-portal__permanent-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    color: var(--color-text-muted);
    background: var(--color-action-primary-soft);
  }

  .ds-order-portal__permanent-link > span { color: var(--color-action-primary); }
  .ds-order-portal__permanent-link h2 { font-size: var(--text-lg); }
  .ds-order-portal__permanent-link p { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
  .ds-order-portal__permanent-link .ds-button { grid-column: 1 / -1; }

  .ds-order-portal__copy-feedback {
    min-block-size: 1.5rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  @media (max-width: 64rem) {
    .ds-order-portal__layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.75fr); }
    .ds-order-portal__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 51.25rem) {
    .ds-order-portal__hero {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
    }

    .ds-order-portal__hero-actions {
      grid-column: 1 / -1;
      justify-content: stretch;
      max-inline-size: none;
    }

    .ds-order-portal__hero-actions .ds-button { flex: 1 1 12rem; }
    .ds-order-portal__layout { grid-template-columns: 1fr; }
    .ds-order-portal__side { position: static; }
  }

  @media (max-width: 40rem) {
    .ds-order-portal { padding-block: var(--space-4) var(--space-8); }
    .ds-order-portal__container { gap: var(--space-4); }
    .ds-order-portal__hero { padding: var(--space-5); border-radius: var(--radius-lg); }
    .ds-order-portal__hero-icon { inline-size: 3rem; block-size: 3rem; }
    .ds-order-portal__card { padding: var(--space-5); border-radius: var(--radius-lg); }
    .ds-order-portal__card-header { align-items: flex-start; flex-direction: column; }
    .ds-order-portal__facts { grid-template-columns: 1fr; }

    .ds-order-portal__item {
      grid-template-columns: auto minmax(0, 1fr);
      gap: var(--space-3);
    }

    .ds-order-portal__item-quantity,
    .ds-order-portal__item-price {
      grid-column: 2;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline;
      text-align: start;
    }

    .ds-order-portal__item-quantity strong,
    .ds-order-portal__item-price strong { text-align: end; }
    .ds-order-portal__totals { max-inline-size: none; }
    .ds-order-portal__button-grid { grid-template-columns: 1fr; }
    .ds-order-portal__tracking { align-items: flex-start; }
  }

  @media (max-width: 22.5rem) {
    .ds-order-portal__hero {
      grid-template-columns: 1fr;
    }

    .ds-order-portal__hero-actions,
    .ds-order-portal__badges {
      display: grid;
      grid-template-columns: 1fr;
    }

    .ds-order-portal__hero-actions .ds-button,
    .ds-order-portal__badges .ds-badge { inline-size: 100%; }
  }
}