protected-content-gate.liquid

{% if section.settings.procon_full_width %}</div>{% endif %}
  <div class="protected-bg">
    <div id="protected-content">
      {% if section.settings.procon_title %}
        <h1>{{ section.settings.procon_title }}</h1>
      {% endif %}

      {% if section.settings.procon_body %}  
        {{ section.settings.procon_body }}
      {% endif %}
  
      <div class="protected-content--actions">
        {% unless customer %}
        {% if section.settings.procon_show_login %}
          {% assign redirect_url = canonical_url | remove: shop.url %}
          <a href="/account/login?checkout_url={{ redirect_url }}" class="button button--primary">Login</a>
        {% endif %}
        {% endunless %}
        {% if section.settings.procon_button_link %}
          <a href="{{ section.settings.procon_button_link }}" class="button button--primary">{{ section.settings.procon_button_label }}</a>
        {% endif %}
      </div>

      {% if section.settings.procon_show_custom_html %}
      <div class="protected-content--custom-html">
        {{ section.settings.procon_custom_html }}
      </div>
      {% endif %}

    </div>
  </div>
{% if section.settings.procon_full_width %}<div>{% endif %}

<style>
{% if section.settings.procon_desktop_bg %}
  .protected-bg {
    background-image: url('{{ section.settings.procon_desktop_bg | img_url: '600x' }}');
  }  
  @media (min-width: 601px) and (max-width: 1200px) {
    .protected-bg {
      background-image: url('{{ section.settings.procon_desktop_bg | img_url: '1200x' }}');
    }
  }
  @media (min-width: 1201px) {
    .protected-bg {
      background-image: url('{{ section.settings.procon_desktop_bg | img_url: '2000x' }}');
    }
  }
{% endif %}
{% if section.settings.procon_mobile_bg %}
  @media (max-width: 599px) {
    .protected-bg {
      background-image: url('{{ section.settings.procon_mobile_bg | img_url: '600x' }}');
    }
  }
{% endif %}
.protected-bg {
  background-size: cover;
  background-position: {{ section.settings.procon_bg_position }};
  display: flex;
  justify-content: center;
}

{% assign opacity = section.settings.procon_text_bg_opacity | times: 0.01 %}
.protected-bg #protected-content {
  border-radius: 3px;
  background-color: {{ section.settings.procon_text_bg | color_modify: 'alpha', opacity }};
  padding: 7%;
  margin:10%;
}
#protected-content {
  text-align: center;
}
.protected-content--actions {
  display: flex;
  justify-content: space-evenly;
}
@media screen and (max-width: 425px) {
  .protected-content--actions {
    flex-direction: column;
    align-items: center;
  }
}
.protected-content--actions a {
  min-width: 180px;
}
@media screen and (max-width: 425px) {
  .protected-content--actions a:last-child {
    margin-top:10px;
  }
}

</style>