#ticket-shop-main-view {
  .shop-item {
    --item-layout-gap: 0.8rem;

    border: 3px solid var(--toolbar-background-color);
    padding: 1.2rem;
    display: grid;
    column-gap: var(--item-layout-gap);
    overflow: clip;


    > .icon {
      grid-area: icon;
      align-self: center;
      aspect-ratio: 1 / 1;
      width: 4.8rem;
      height: auto;
    }


    > .title {
      grid-area: title;
      min-width: 0;
    }


    > .amount > .prices {
      display: none;
    }


    &[data-mode="overview"] {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "icon       title      amount"
        "dependency dependency dependency"
        "owners     owners     owners";
      align-items: center;

      &:first-child {
        border-top-left-radius: var(--content-border-radius);
        border-top-right-radius: var(--content-border-radius);
      }

      &:last-child {
        border-bottom-right-radius: var(--content-border-radius);
        border-bottom-left-radius: var(--content-border-radius);
      }

      & + .shop-item {
        border-top: none;
      }

      &.unavailable {
        border-color: oklch(from var(--color-red) l c h / 0.2);
        background: oklch(from var(--color-red) l c h / 0.1);
      }

      @media (width <= 480px) {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
          "icon       title"
          "amount     amount"
          "dependency dependency"
          "owners     owners";
        row-gap: 1.2rem;
      }


      > :is(.summary, .bullets) {
        display: none;
      }


      > .amount {
        grid-area: amount;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--item-layout-gap);

        @media (width <= 480px) {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          gap: var(--content-gap);
        }


        > :is(.price, .stats) {
          display: none;
        }


        > .amount-control {
          order: -1;
          color: black;

          @media (width <= 480px) {
            order: initial;
          }
        }


        > .prices {
          display: flex;
          align-items: center;
          gap: var(--item-layout-gap);
          white-space: nowrap;
          color: gray;
          font-size: 1.4rem;
          line-height: 1.3;

          @media (width <= 480px) {
            order: -1;
          }


          > .icon {
            aspect-ratio: 1 / 1;
            width: 1.8rem;
            height: auto;
            flex: none;
            fill: currentColor;
          }


          > .calculation {
            display: flex;
            align-items: baseline;
            gap: 0.25em;
            font-size: 1.6rem;


            > .sum {
              color: black;
              font-weight: 600;
            }
          }
        }
      }


      > .owners {
        grid-area: owners;
        padding-block: 0.8rem 1.2rem;
        padding-inline: calc(var(--section-inline-padding) - 3px - 1.2rem);

        @media (width > 480px) {
          margin-left: calc(4.8rem + var(--item-layout-gap));
          padding-left: 0;
        }

        &[hidden] {
          display: none;
        }


        > h4 {
          font-size: 1.5rem;
          font-weight: 600;
        }


        > .owner-group {
          border: none;
          min-width: 0;

          &:not(:has(> .owner-group-title)) {
            margin-top: 0.8rem;
          }

          > .owner-group-title {
            margin-block: 1.6rem 0.6rem;
            font-size: 1.3rem;
            font-weight: 600;
          }


          > .owner-fields {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            row-gap: 1.2rem;


            > label {
              grid-column: 1 / -1;
              min-width: 0;
              border: var(--toolbar-border);
              border-radius: 100vmax;
              display: grid;
              grid-template-columns: subgrid;
              align-items: stretch;
              background: white;

              &:has(input[aria-invalid="true"]:not(:disabled)) {
                border-color: var(--color-red);
              }

              &:has(input[data-issue="required"]:not(:disabled)) {
                border-color: var(--color-blue);
              }

              &:has(input:disabled) {
                opacity: 0.5;
              }

              > span {
                border-top-left-radius: 100vmax;
                border-bottom-left-radius: 100vmax;
                padding-inline: 1.4rem 1rem;
                display: grid;
                align-content: center;
                text-align: right;
                color: black;
                background: rgba(0, 0, 0, 0.04);
                font-size: 1.3rem;
                font-weight: 500;
              }


              > input {
                appearance: none;
                border: none;
                border-left: var(--toolbar-border);
                border-top-right-radius: 100vmax;
                border-bottom-right-radius: 100vmax;
                padding-inline: 0.8rem 1rem;
                width: 100%;
                height: 4rem;
                color: black;
                background: transparent;
                font-size: 1.6rem;

                &[aria-invalid="true"]:not(:disabled) {
                  border-left-color: var(--color-red);
                }

                &[data-issue="required"]:not(:disabled) {
                  border-left-color: var(--color-blue);
                  background: oklch(from var(--color-blue) l c h / 0.06);
                }
              }
            }
          }
        }
      }


      > .dependency {
        grid-area: dependency;
        border-top: var(--toolbar-border);
        margin-top: 1.2rem;
        padding-top: 1.2rem;
        display: flex;
        align-items: center;
        gap: 1.2rem;

        &[hidden] {
          display: none;
        }


        > p {
          min-width: 0;
          flex: 1;
          color: var(--color-red);
          font-size: 1.4rem;
          line-height: 1.3;
        }


        > button {
          flex: none;


          > .icon {
            width: 1.8rem;
            height: auto;
          }
        }
      }
    }
  }


  > header {
    .back {
      display: flex;
      transition: var(--viewkit-transition-duration) opacity;
      opacity: 1;

      &[hidden] {
        opacity: 0;
      }
    }
  }


  > .login-infobar {
    align-items: center;


    > .description {
      margin-left: 0.8rem;
      min-width: 0;
      min-height: 2.8em;
      flex: 1;
      align-content: center;
      font-size: 1.4rem;
      line-height: 1.4;
      color: rgba(0, 0, 0, 0.8);

      @media (width < 370px) {
        margin-left: 0.4rem;
      }


      > .summary {
        display: none;
        text-wrap: balance;
      }


      > .shop {
        display: flex;
        flex-wrap: wrap;
        column-gap: 0.4rem;


        > * {
          white-space: nowrap;
        }
      }
    }


    > .login {
      margin-left: auto;

      @media (width < 390px) {
        .icon {
          display: none;
        }
      }
    }


    > .icon-up {
      display: none;
    }
  }


  &[data-checkout-login] > .login-infobar > .description {
    > .shop {
      display: none;
    }

    > .summary {
      display: block;
    }
  }


  @supports (anchor-name: --ticket-shop-login) and (position-anchor: --ticket-shop-login) {
    &[data-login-required] > .login-infobar {
      overflow: visible;


      > .login {
        anchor-name: --ticket-shop-login;
      }


      > .icon-up {
        position: absolute;
        position-anchor: --ticket-shop-login;
        z-index: 1;
        inset: auto;
        top: anchor(bottom);
        left: anchor(center);
        width: 3.2rem;
        height: auto;
        display: block;
        fill: var(--color-blue);
        opacity: 1;
        translate: -50% 0;
        transition: opacity var(--viewkit-transition-duration);
        animation: ticket-shop-login-arrow 0.8s ease-in-out infinite alternate;
        pointer-events: none;

        @media (prefers-reduced-motion: reduce) {
          animation: none;
        }
      }
    }
  }


  .amount-control {
    --border: 1px solid var(--toolbar-border-color);

    border-radius: 100vmax;
    display: flex;
    align-items: center;
    background: white;


    > :is(button, input) {
      &:disabled {
        opacity: 0.5;
      }


      &:is(button) {
        --round-corner-inset: 0.3rem;

        border: var(--border);

        &:is(.delete, .subtract) {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          padding-left: var(--round-corner-inset);

          &:is(.item[data-selected="issue"] .delete) {
            display: flex;
          }

          &:is(.item[data-selected="issue"] .subtract) {
            display: none;
          }
        }

        &:is(.repair, .add) {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          padding-right: var(--round-corner-inset);

          &:is(.item[data-repairable] .repair) {
            display: flex;
          }

          &:is(.item[data-repairable] .add) {
            display: none;
          }
        }
      }


      &:is(input) {
        appearance: textfield;
        border: none;
        border-block: var(--border);
        border-radius: 0;
        width: 4ch;
        height: var(--viewkit-button-height);
        background: transparent;
        font-size: 1.6rem;
        text-align: center;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
          appearance: none;
          margin: 0;
        }
      }
    }
  }


  > main {
    --content-gap: 1.6rem;
    --content-border-radius: 2.3rem;
    --progress-total-height: 7.6rem;
    --section-inline-padding: 1.6rem;
    --section-height: 4.6rem;
    --card-total-height: calc(
      1.6rem +
      var(--viewkit-toolbar-border-width) +
      0.8rem +
      var(--viewkit-button-height) +
      0.8rem +
      var(--viewkit-toolbar-border-width) +
      1.6rem
    );

    position: relative;


    > article {
      padding-inline: 0.8rem;
      padding-bottom: var(--card-total-height);
      display: flex;
      flex-direction: column;
      gap: var(--content-gap);
      overflow-y: auto;

      &:is(
        #ticket-shop-steps-1-tickets-view,
        #ticket-shop-steps-2-extras-view,
        #ticket-shop-steps-3-summary-view
      ) {
        scrollbar-gutter: stable both-edges;
      }


      &::before {
        content: "";
        position: sticky;
        top: 0;
        z-index: 1;
        align-self: center;
        margin-bottom: calc(0rem - var(--content-gap) - var(--content-border-radius));
        width: 100%;
        max-width: 72rem;
        height: calc(var(--progress-total-height) + var(--content-border-radius));
        background: white;
      }


      > * {
        margin-inline: auto;
        width: 100%;
        max-width: 72rem;
      }

      > :is(.section, .item)[hidden],
      > .item[data-section-collapsed] {
        display: none;
      }


      > .filter-empty {
        position: relative;
        z-index: 2;
        border-radius: var(--content-border-radius);
        min-height: 16rem;
        flex: 1;
      }


      > .section {
        position: sticky;
        top: var(--progress-total-height);
        z-index: 2;
        height: var(--section-height);
        background: var(--toolbar-background-color);
        border-radius: var(--content-border-radius);

        > h4 {
          width: 100%;
          height: 100%;


          > button {
            border-radius: inherit;
            padding-block: 0.8rem;
            padding-inline: var(--section-inline-padding);
            width: 100%;
            height: 100%;
            justify-content: space-between;
            background: transparent;
            font-size: 2rem;
            font-weight: 600;
            text-align: left;
            transition: padding-block var(--viewkit-transition-duration) ease;

            > .labels {
              flex: 1 1 auto;
              margin-right: auto;
              min-width: 0;
              display: grid;
              gap: 0;
              text-box: normal;

              > .label {
                min-width: 0;
                line-height: 1.1;
                overflow-x: clip;
                overflow-y: visible;
                text-overflow: ellipsis;
                text-box: normal;
                white-space: nowrap;
              }

              > .selection-status {
                color: var(--color-gray);
                font-size: 1.1rem;
                font-weight: 500;
                line-height: 1;
                max-height: 1.1rem;
                overflow: hidden;
                text-box: normal;
                opacity: 1;
                visibility: visible;
                transition:
                  max-height var(--viewkit-transition-duration) ease,
                  opacity var(--viewkit-transition-duration) ease,
                  visibility 0s linear;

                &:is(.section:not([data-selected]) *) {
                  max-height: 0;
                  opacity: 0;
                  visibility: hidden;
                  transition-delay: 0s, 0s, var(--viewkit-transition-duration);
                }
              }
            }

            &:is(.section[data-selected] *) {
              padding-block: 0.5rem;
            }

            > .icon {
              flex: none;
            }

            > .icon:not(.icon-collapse, .icon-expand) {
              width: 2.8rem;
              height: 2.8rem;
            }

            &[aria-expanded="true"] > .icon-expand,
            &[aria-expanded="false"] > .icon-collapse {
              display: none;
            }
          }
        }
      }


      > .item {
        --title-height: 2.8rem;

        border-radius: var(--content-border-radius);
        padding-top: 0.8rem;
        padding-bottom: 1rem;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
          "icon    title   amount"
          "summary summary amount"
          "bullets bullets amount";

        &:has(.available:not([data-available="no"])) {
          &[data-selected] {
            border-color: rgba(0, 0, 0, 0.05);
          }

          &[data-selected=""] {
            background: oklch(from var(--color-green) l c h / 0.1);
          }

          &[data-selected="issue"] {
            background: oklch(from var(--color-red) l c h / 0.1);
          }
        }

        &:not([data-bookable]) {
          --gap: 1rem;
          background: repeating-linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.04) calc(50% - var(--gap) * 0.5) calc(50% + var(--gap) * 0.5),
            white calc(50% + var(--gap) * 0.5) calc(50% + var(--gap) * 1.5)
          );
        }

        @media (width <= 480px) {
          grid-template-columns: auto 1fr;
          grid-template-areas:
            "icon    title"
            "summary summary"
            "bullets bullets"
            "amount  amount";
        }

        > .summary {
          grid-area: summary;
          text-wrap: pretty;

          @media (width > 480px) {
            padding-right: 1.6rem;
          }


          > * {
            margin-top: 0.8rem;
          }
        }


        > .bullets {
          grid-area: bullets;
          margin-top: 0.6rem;
          margin-bottom: 0.2rem;

          @media (width <= 480px) {
            margin-bottom: 0;
          }

          &:not(:has(> *:not([hidden]))) {
            display: none;
          }


          > :is(.period, .requirements, .personal-limit, .details) {
            margin-top: 0.4rem;
            width: fit-content;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 1.4rem;
            font-weight: 500;

            &[hidden] {
              display: none;
            }


            > .icon {
              aspect-ratio: 1 / 1;
              width: 1.8rem;
              height: auto;

              path {
                fill: currentColor;
              }
            }


            > .label {
              flex: 1 1;
              line-height: 1.4;
            }
          }


          > :is(.period) {
            .icon-range-start:is(.item:not([data-period="start"]) *),
            .icon-range-end:is(.item:not([data-period="end"]) *) {
              display: none;
            }
          }


          > :is(.requirements) {
            &:is(.item[data-selected="issue"] *) {
              color: var(--color-red);
            }


            .icon-info:is(.item:is([data-selected], [data-requirements-fulfilled]) *),
            .icon-check:is(.item:not([data-requirements-fulfilled]) *),
            .icon-error:is(.item:not([data-selected="issue"]) *) {
              display: none;
            }
          }
        }


        > .amount {
          grid-area: amount;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.2em;

          &[hidden] {
            visibility: hidden;
          }

          @media (width <= 480px) {
            margin-top: 1.2rem;
            flex-direction: row;
            gap: 1.2rem;

            &[hidden] {
              display: none;
            }

            &:has(.bought:not([hidden])) {
              margin-top: 1.6rem;
            }
          }


          > .price {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            height: var(--title-height);
            text-align: center;
            font-size: 1.8rem;
            font-weight: 500;
            line-height: 1;

            @media (width <= 480px) {
              font-size: 1.6rem;
            }

            &[data-pending] {
              font-size: 1.4rem;
            }


            del {
              color: gray;
              font-weight: 400;
            }
          }


          > .stats {
            margin-top: 0.8rem;
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            color: gray;
            font-size: 1.4rem;

            @media (width <= 480px) {
              order: -1;
              margin: 0;
              margin-right: auto;
            }


            > * {
              span {
                text-box: trim-both cap alphabetic;
              }
            }


            > .available {
              align-self: center;
              width: fit-content;
              display: flex;
              align-items: center;
              gap: 0.4rem;

              @media (width <= 480px) {
                align-self: flex-start;
              }

              &::before {
                content: "";
                display: block;
                aspect-ratio: 1 / 1;
                margin-inline: 0.4rem;
                border: 1px solid rgba(0, 0, 0, 0.1);
                border-radius: 100vmax;
                width: 1rem;
                height: auto;
                background: var(--color);
              }

              &[data-available="yes"] {
                --color: var(--color-green);
              }

              &[data-available="limited"] {
                --color: var(--color-orange);
              }

              &[data-available="no"] {
                --color: var(--color-red);

                &:is(.item[data-sale="upcoming"] *) {
                  --color: var(--color-orange);
                }
              }
            }


            > .bought {
              align-self: center;
              width: fit-content;
              display: flex;
              align-items: center;
              gap: 0.4rem;
              color: black;

              &[hidden] {
                display: none;
              }

              @media (width <= 480px) {
                align-self: flex-start;
              }


              .icon {
                aspect-ratio: 1 / 1;
                width: 1.8rem;
                height: auto;
              }
            }
          }
        }
      }
    }


    > .progress-container {
      position: absolute;
      z-index: calc(infinity);
      justify-self: stretch;
      align-self: start;
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      padding-inline: 0.8rem;
      width: 100%;
      height: var(--progress-total-height);
      display: flex;
      align-items: center;
      pointer-events: none;


      > .progress {
        --progress: 20%;
        --progress-opacity-transition-duration: var(--viewkit-transition-duration);

        position: relative;
        margin-inline: auto;
        border: var(--toolbar-border);
        border-radius: 100vmax;
        width: 100%;
        max-width: 46rem;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: white;
        isolation: isolate;
        overflow: clip;
        list-style: none;
        transition: opacity var(--progress-opacity-transition-duration) ease-in-out;


        &:has(> :nth-child(5)[data-status="current"]) {
          opacity: 0.5;
        }


        &:has(> :nth-child(2)[data-status="current"]) {
          --progress: 40%;
        }

        &:has(> :nth-child(3)[data-status="current"]) {
          --progress: 60%;
        }

        &:has(> :nth-child(4)[data-status="current"]) {
          --progress: 80%;
        }

        &:has(> :nth-child(5)[data-status="current"]) {
          --progress: 100%;
        }


        &::before,
        &::after {
          content: "";
          position: absolute;
          inset-block: 2px;
          left: 2px;
          border-radius: 100vmax;
        }

        &::before {
          right: 2px;
          background: white;
        }

        &::after {
          width: min(calc(var(--progress) - 2px), calc(100% - 4px));
          background: var(--toolbar-background-color);
          transition: width var(--viewkit-transition-duration) ease-in-out;
        }


        > li {
          position: relative;
          z-index: 1;
          min-width: 0;
          color: oklch(from var(--color-gray) l c h / 0.5);
          font-size: 1rem;
          line-height: 1.2;
          transition: color var(--viewkit-transition-duration) ease-in-out;

          &[data-status="complete"],
          &[data-status="current"] {
            color: black;
          }


          > button {
            appearance: none;
            border: none;
            padding: 0.4rem 0.4rem 0.6rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.2rem;
            color: inherit;
            font: inherit;
            background: transparent;

            &:not(:disabled) {
              pointer-events: auto;
            }


            > svg {
              aspect-ratio: 1 / 1;
              width: 2rem;
              height: auto;
              fill: currentColor;
            }


            > span {
              max-width: 100%;
              text-align: center;
              white-space: nowrap;
            }
          }
        }
      }
    }


    > .cart {
      box-shadow:
        0px 0px 0px 1px rgba(0, 0, 0, 0.06),
        0px 1px 2px -1px rgba(0, 0, 0, 0.06),
        0px 2px 4px 0px rgba(0, 0, 0, 0.04);
      position: absolute;
      z-index: calc(infinity);
      justify-self: center;
      align-self: end;
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      margin: 1.6rem;
      border: var(--toolbar-border);
      border-radius: calc(1.8rem + 0.8rem);
      padding: 0.8rem;
      width: 100%;
      max-width: 32rem;
      background: var(--toolbar-background-color);
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "icon text next";
      align-items: center;
      transition: opacity 0.4s;

      &[inert] {
        opacity: 0;
      }

      &[data-mode="summary"] {
        > :is(.empty, .next) {
          display: none;
        }

        &[data-reservation-state] {
          > .summary {
            display: none;
          }

          > .reservation-state {
            display: block;
          }
        }

        &[data-reservation-state="error"] > .reservation-state {
          color: var(--color-red);
        }

        &[data-empty] {
          > .empty {
            display: block;
          }

          > :is(.summary, .reservation-state) {
            display: none;
          }
        }
      }

      &:not([data-mode="summary"]) > .buy {
        display: none;
      }

      > .buy[inert] {
        color: var(--color-blue);
        background: var(--button-background-color);
      }


      > .icon {
        grid-area: icon;
        margin-inline: 0.6rem;
        aspect-ratio: 1 / 1;
        width: 2.4rem;
        height: auto;
      }


      > :is(.empty, .summary, .reservation-state) {
        grid-area: text;
        padding-inline: 0.4rem;
        height: 100%;
        align-content: center;
        font-size: 1.5rem;
        line-height: 1.2;

        &:is(.empty) {
          color: rgba(0, 0, 0, 0.8);
        }

        &:is(.summary) {
          background: var(--toolbar-background-color);

          &:empty,
          &[data-empty] {
            visibility: hidden;
          }


          .price {
            display: flex;
            gap: 0.4rem;
            font-weight: 600;


            del {
              color: gray;
              font-weight: 400;
            }
          }
        }
      }


      > .reservation-state {
        display: none;
        text-wrap: balance;
      }


      > :is(.next, .buy) {
        grid-area: next;
        margin-left: auto;
      }
    }
  }
}


body:has(> :is(
  #ticket-shop-login-view:not([hidden]),
  #ticket-shop-registration-view:not([hidden])
)) #ticket-shop-main-view .icon-up {
  opacity: 0;
}


@keyframes ticket-shop-login-arrow {
  to {
    transform: translateY(0.4rem);
  }
}