.shopify-section--coming-soon {
  max-inline-size: 100rem;
  margin: 0 auto;

  & .diptyque-logo {
    display: flex;
    justify-content: center;
    margin-block: 3.5rem 2.5rem;
    cursor: pointer;

    & svg {
      block-size: 3.75rem;
      inline-size: auto;
    }
  }

  & .content-wrapper {
    display: grid;
    gap: 2rem;
    inline-size: calc(100% - 4rem);
    margin-inline: auto;
  }

  & .content-wrapper:has(> :nth-child(2)) {
    grid-template-rows: auto auto;

    @media (width >= 48rem) {
      grid-template-columns: 50% calc(50% - 2rem);
      grid-template-rows: auto;
    }

    & > :first-child {
      inline-size: calc(100% + 4rem);
      margin-inline: -2rem;

      @media (width >= 48rem) {
        inline-size: calc(100% + 2rem);
        margin-inline: -2rem;
      }
    }
  }

  & img {
    display: block;
    object-fit: cover;
  }

  & .content-container {
    block-size: auto;
    max-inline-size: 25rem;
    margin: auto;

    & > * {
      margin-block: 1rem;
      text-align: center;
    }

    & > :first-child {
      margin-block-start: 0rem;
    }

    & > :last-child {
      margin-block-end: 0rem;
    }

    & h1 {
      font-family: var(
        --typography-headline-m-font-family,
        'Diptyque Saint-Germain'
      );
      font-size: var(--typography-headline-m-font-size, 32px);
      font-style: normal;
      font-weight: var(--typography-headline-m-font-weight, 400);
      line-height: var(--typography-headline-m-line-height, 38px);
      letter-spacing: var(--typography-headline-m-letter-spacing, 0);
      color: var(--Content-primary, #000);
    }

    & p {
      font-family: var(--typography-body-l-light-font-family, 'Apercu Pro');
      font-size: var(--typography-body-l-light-font-size, 16px);
      font-style: normal;
      font-weight: var(--typography-body-l-light-font-weight, 300);
      line-height: var(--typography-body-l-light-line-height, 22px);
      letter-spacing: var(--typography-body-l-light-letter-spacing, 0);
      color: var(--Content-primary, #000);
    }

    & a {
      font-family: var(--typography-body-l-light-font-family, 'Apercu Pro');
      font-size: var(--typography-body-l-light-font-size, 16px);
      font-style: normal;
      font-weight: var(--typography-body-l-light-font-weight, 300);
      line-height: var(--typography-body-l-light-line-height, 22px);
      letter-spacing: var(--typography-body-l-light-letter-spacing, 0);
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: auto;
      text-decoration-thickness: auto;
      text-underline-offset: auto;
      text-underline-position: from-font;
      color: var(--Content-primary, #000);
    }
  }

  & .popin-wrapper {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    inline-size: 100%;
    inset: 0;
    background-color: color-mix(in srgb, var(--color-black) 40%, transparent);
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    transition: 0.15s ease-out;
    z-index: 1000;
    pointer-events: none;
  }

  & > [data-popin-open] .popin-wrapper {
    visibility: visible;
    opacity: 1;
    pointer-events: initial;
  }

  & .popin-container {
    display: block;
    position: relative;
    align-items: center;
    max-block-size: calc(100svh - 8rem);
    inline-size: calc(100% - 2rem);
    max-inline-size: 30rem;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--color-white);
    border-radius: 0.125rem;
    cursor: auto;

    @media (width >= 60rem) {
      display: flex;
      align-items: stretch;
      justify-content: center;
      inline-size: 100%;
    }
  }

  & form {
    inline-size: 100%;
    max-inline-size: 20rem;
  }

  & label {
    text-align: center;
  }

  & button {
    margin-block-start: 1rem;
  }
}