/* Customer order history */

.order-histories {
  padding-block: var(--space-6) var(--space-7);

  .section-inner { max-width: 68rem; }
  .main { min-width: 0; }

  .page-heading {
    font-size: var(--font-size-7);
    font-weight: 700;
    margin-bottom: var(--space-2);
    text-wrap: balance;
  }

  &.index {
    .title { margin-bottom: var(--space-6); }

    .search {
      display: flex;
      align-items: end;
      gap: var(--space-3);
      margin-bottom: var(--space-5);

      input[type="search"] {
        box-sizing: border-box;
        width: 100%;
        min-height: 2.75rem;
        padding-inline: var(--space-2);
        border: 1px solid var(--color-gray-8);
        border-radius: 0;
        background: var(--color-white);
        color: var(--color-black);
        font: inherit;

        &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
      }

      .query { flex: 1 1 18rem; }

      .small-button {
        flex: 0 0 auto;
        min-height: 2.75rem;
        height: 2.75rem;
      }

      @media (max-width: 48rem) {
        align-items: stretch;
        flex-wrap: wrap;

        .query { flex-basis: 100%; }
      }

      @media (max-width: 32rem) {
        .small-button { flex: 1 1 auto; }
      }
    }

    .list {
      border-top: 1px solid var(--color-gray-8);

      .list-head,
      .row {
        grid-template-columns: minmax(6rem, auto) minmax(6rem, auto) minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(7rem, auto);
      }

      .list-head {
        display: grid;
        align-items: center;
        gap: var(--space-3);
        padding-block: var(--space-3);
        border-bottom: 1px solid var(--color-gray-4);
        color: var(--color-gray-20);
        font-size: var(--font-size-2);
        font-weight: 700;
      }

      .row {
        display: grid;
        align-items: center;
        gap: var(--space-3);
        padding-block: var(--space-4);
        border-bottom: 1px solid var(--color-gray-4);
        color: var(--color-black);
        font-size: var(--font-size-3);
        line-height: 20px;
        text-decoration: none;
        transition: background-color var(--transition-fast), color var(--transition-fast);

        &:hover { background-color: var(--color-gray-1); }
        &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
      }

      @media (max-width: 48rem) {
        .list-head { display: none; }

        .row {
          grid-template-columns: 1fr;
          gap: var(--space-1);
        }
      }
    }

    .empty-state {
      max-width: 42rem;
      padding-top: var(--space-5);
      border-top: 1px solid var(--color-gray-8);

      h2 { margin-bottom: var(--space-2); font-size: var(--font-size-4); font-weight: 700; }
      p { margin: 0; }
    }
  }

  &.show {
    .title {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: var(--space-4);
      margin-bottom: var(--space-7);

      .page-heading { margin-bottom: 0; }

      .title-meta {
        margin-left: auto;
        font-size: var(--font-size-3);
        line-height: 20px;
      }

      @media (max-width: 32rem) {
        flex-direction: column;
        align-items: start;
        gap: var(--space-2);

        .title-meta { margin-left: 0; }
      }
    }

    .shipments {
      display: grid;
      gap: var(--space-6);
      margin-bottom: var(--space-7);

      .shipment {
        padding-top: var(--space-5);
        border-top: 1px solid var(--color-gray-8);

        .shipment-header {
          display: flex;
          flex-wrap: wrap;
          align-items: baseline;
          gap: var(--space-2) var(--space-4);
          margin-bottom: var(--space-4);

          h2 { margin: 0; font-size: var(--font-size-4); font-weight: 700; }

          .tracking { font-size: var(--font-size-4); }
        }

        .line-items {
          display: grid;
          gap: var(--space-3);

          .line-item {
            display: grid;
            grid-template-columns: 5rem minmax(10rem, 1fr) minmax(12rem, .75fr);
            align-items: center;
            gap: var(--space-4);
            padding-block: var(--space-3);
            border-bottom: 1px solid var(--color-gray-4);

            .line-thumb {
              display: block;
              width: 5rem;
              height: 5rem;
              aspect-ratio: 1;
              object-fit: cover;
              background-color: var(--color-gray-2);

              &.empty { border: 1px solid var(--color-gray-4); }
            }

            .line-product { margin: 0; font-size: var(--font-size-3); font-weight: 700; }
            .line-sku { margin: var(--space-1) 0 0; font-size: var(--font-size-3); line-height: 20px; }

            .line-totals {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: var(--space-2);
              text-align: right;
              font-size: var(--font-size-3);
            }

            @media (max-width: 48rem) {
              grid-template-columns: 4rem minmax(0, 1fr);

              .line-thumb { width: 4rem; height: 4rem; }
              .line-totals { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
            }
          }
        }

        .tally {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: var(--space-5);
          margin-top: var(--space-4);
          padding-top: var(--space-4);
          border-top: 1px solid var(--color-gray-4);

          .tally-note {
            max-width: 26rem;
            margin: 0;
            font-size: var(--font-size-3);
            line-height: 20px;
          }

          .totals {
            display: grid;
            gap: var(--space-1);
            min-width: 14rem;
            margin: 0;

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

            dt { font-weight: 400; }
            dd { margin: 0; }

            .total-row {
              padding-top: var(--space-2);
              border-top: 1px solid var(--color-gray-4);
              font-size: var(--font-size-4);
              font-weight: 700;
            }
          }
        }
      }
    }

    .info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
      gap: var(--space-5);
      padding-top: var(--space-5);
      border-top: 1px solid var(--color-gray-8);

      .address {
        margin: 0;

        h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-3); line-height: 20px; font-weight: 700; }
        p { margin: 0 0 var(--space-3); }
        p:last-child { margin-bottom: 0; }
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    &,
    & *,
    & *::before,
    & *::after {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
    }
  }
}