.shopify-section--product-lookup {
  @media (max-width: 767px) {
    & .section-header {
      padding-block-end: 1rem;
    }
  }

  & .mx-product-lookup {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--flex-gap);
    padding: 1.5rem 1rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: var(--block-shadows);

    --flex-gap: 0.5rem;

    @media (min-width: 768px) {
      padding: 2rem 3rem;

      --flex-gap: 1rem;
    }

    & > .lookup-container {
      display: flex;
      flex-flow: row wrap;
      gap: var(--flex-gap);
      width: 100%;
      max-width: 60rem;
      margin: 0 auto;
    }

    & .lookup-container > div {
      display: flex;
      flex-flow: column wrap;
      align-items: flex-start;
      justify-content: flex-start;
      inline-size: 100%;

      @media (min-width: 768px) {
        inline-size: calc((100% - 2 * var(--flex-gap)) / 3);
      }
    }

    & label {
      margin-block-end: 0.0625rem;
      color: black;
    }

    & select {
      width: 100%;
      margin: 0;
      background-color: white;
    }

    & option {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      &[hidden],
      &:disabled {
        display: none;
      }
    }

    & button {
      display: inline;
      width: 100%;
      margin-block-start: 1rem;
      text-wrap: balance;

      & span {
        /* margin-inline: 0.5ch; */
        white-space: nowrap;
      }

      @media (min-width: 768px) {
        margin-block-start: 0.5rem;
      }
    }

    & .accessory-button-group {
      display: flex;
      flex-flow: row wrap !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 1rem;
      inline-size: 100% !important;
      max-inline-size: 35rem;
      margin-inline: auto;
      margin-block: 0;

      @media (width >= 48rem) {
        inline-size: 80%;
      }

      & button {
        inline-size: auto;
        block-size: 2.5rem;
        margin: 0;
        padding: 0 2rem;
        font-size: 1rem;
        white-space: nowrap;
        border: 0.0625rem solid transparent;
        transition: 0.15s ease-out;

        &[data-excluded] {
          background-color: color-mix(in srgb, var(--solid-button-background) 10%, transparent);
          color: var(--solid-button-background);
          border-color: color-mix(in srgb, var(--solid-button-background) 40%, transparent);
        }
      }

      & input {
        inline-size: 0.875rem;
        pointer-events: none;
      }
    }
  }

  &:has(.accessory-button-group) .lookup-container > div:not([class]) {
    display: none;
  }
}