#ticket-shop-steps-3-summary-view {
  --summary-padding: var(--section-inline-padding);

  &[data-empty] {
    padding-bottom: 0;


    > :is(.checkout, .reservation) {
      display: none;
    }
  }


  > .summary {
    display: contents;


    > .groups {
      display: contents;


      > .item-group {
        display: contents;


        > h2 {
          position: sticky;
          top: var(--progress-total-height);
          z-index: 2;
          margin-inline: auto;
          border-radius: var(--content-border-radius);
          padding: 0.8rem var(--summary-padding);
          width: 100%;
          max-width: 72rem;
          height: var(--section-height);
          display: flex;
          align-items: center;
          gap: 0.8rem;
          background: var(--toolbar-background-color);
          font-size: 2rem;
          font-weight: 600;

          > .icon {
            width: 2.8rem;
            height: 2.8rem;
            flex: none;
          }
        }


        > .items {
          margin-inline: auto;
          border-radius: var(--content-border-radius);
          width: 100%;
          max-width: 72rem;
          display: block;
        }
      }
    }


    > :is(.availability-error, .price-error) {
      margin-inline: auto;
      border-radius: var(--content-border-radius);
      padding: var(--summary-padding);
      width: 100%;
      max-width: 72rem;
      background: var(--toolbar-background-color);
    }


    > .empty {
      position: relative;
      z-index: 2;
      margin-top: calc(0rem - var(--content-gap));
      margin-inline: auto;
      width: 100%;
      max-width: 72rem;
      min-height: 16rem;
      flex: 1;
    }
  }


  > .checkout {
    display: contents;


    > h2 {
      position: sticky;
      top: var(--progress-total-height);
      z-index: 2;
      margin-inline: auto;
      border-radius: var(--content-border-radius);
      padding: 0.8rem var(--summary-padding);
      width: 100%;
      max-width: 72rem;
      height: var(--section-height);
      display: flex;
      align-items: center;
      gap: 0.8rem;
      background: var(--toolbar-background-color);
      font-size: 2rem;
      font-weight: 600;

      > .icon {
        width: 2.8rem;
        height: 2.8rem;
        flex: none;
      }
    }
  }


  :is(.availability-error, .price-error, .reservation-status[data-status="error"]) {
    color: red;
  }


  del {
    color: gray;
  }


  > .checkout > :is(.discounts, .totals) {
    margin-inline: auto;
    border: 3px solid var(--toolbar-background-color);
    border-radius: var(--content-border-radius);
    padding-block: var(--summary-padding);
    padding-inline: calc(var(--summary-padding) - 3px);
    width: 100%;
    max-width: 72rem;
    background: white;


    > h3 {
      margin-bottom: 1.2rem;
      font-size: 1.8rem;
      font-weight: 600;
    }
  }


  > .checkout > .discounts {
    > ul {
      &:empty {
        display: none;
      }


      > li {
        border-radius: 1.2rem;
        padding: 0.8rem 1.2rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
        background: var(--toolbar-background-color);

        & + li {
          margin-top: 0.8rem;
        }


        > button {
          margin-left: auto;
        }


        > .status {
          color: gray;
        }


        &[data-status="no-effect"] > .status {
          color: red;
        }
      }
    }


    > form {
      margin-top: 1.2rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.6rem;


      > input {
        appearance: none;
        border: var(--toolbar-border);
        border-radius: 100vmax;
        padding-inline: 1.2rem;
        min-width: 0;
        height: var(--viewkit-button-height);
        flex: 1 1 14rem;
        color: black;
        background: white;
        font-size: 1.6rem;

        &:disabled {
          opacity: 0.5;
        }
      }
    }
  }


  > .checkout > .totals {
    padding-bottom: calc(var(--summary-padding) - 0.4rem);


    > dl {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;


      > div {
        padding-block: 0.2rem;
        display: flex;
        justify-content: space-between;
        gap: 1.6rem;

        &[hidden] {
          display: none;
        }


        > dd {
          text-align: right;
        }


        &.payment {
          border-top: var(--toolbar-border);
          margin-top: 0.4rem;
          padding-top: 1.4rem;
          font-size: 2rem;
          font-weight: 600;
        }
      }
    }
  }


  > .reservation {
    min-height: 1lh;
    display: grid;
    text-align: center;


    > p {
      grid-area: 1 / 1;
    }


    > .reservation-time {
      opacity: 0;
      transition: opacity var(--viewkit-transition-duration);

      &[data-visible] {
        opacity: 1;
      }
    }
  }
}