<!doctype html>
  {%- liquid
    assign iso_code  = request.locale.iso_code
    assign config_rtl  = settings.right_to_left | default: 'enable-with-list'
    assign is_rtl = false
    assign dir = 'ltr'
    if config_rtl == 'enable-with-list'
      assign iso_code_ck = iso_code | split: '-' | first | append: ';' | prepend: ';'
      assign lis_rtl = ';ae;ar;arc;bqi;ckb;dv;fa;glk;ha;he;kwh;ks;ku;mzn;nqo;pnb;ps;sd;ug;ur;yi;'
      if lis_rtl contains iso_code_ck
        assign is_rtl = true
        assign dir = 'rtl'
      endif
    elsif config_rtl == 'enable'
      assign is_rtl = true
      assign dir = 'rtl'
    endif
  -%}

<html class="no-js dir--{{ dir }}{% if request.design_mode %} shopify-design-mode{% endif %}" lang="{{ request.locale.iso_code }}" dir="{{ dir }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="">
    <link rel="canonical" href="{{ canonical_url }}">

    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
    {%- endif -%}

    {%- unless settings.type_header_font.system? -%}
      <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
    {%- endunless -%}

    <title>{{ shop.name }}</title>

    <meta name="description" content="{{ page_description | escape }}">

    {% render 'social-meta-tags' %}
    {%- render 'js-head' -%}
    {%- render 'css-variables', is_rtl: is_rtl -%}

    {{ content_for_header }}
  </head>

  <body class="password gradient">
    {%- render 's-dom-temp' -%}
    <a class="skip-to-content-link button sr-only" href="#MainContent">
      {{ 'accessibility.skip_to_text' | t }}
    </a>
    <div class="hdt-website-wrapper">
      {% section 'main-password-header' %}

      <main id="MainContent" class="hdt-password-main">
        {{ content_for_layout }}
      </main>
      {% # theme-check-disable NestedSnippet %}
      {%- render 'system-bottom' -%}
      {% # theme-check-enable NestedSnippet %}
    </div>
    <style>
      @media (min-width: 1150px){
        .hdt-website-wrapper {
          display: flex;
          flex-direction: column;
          height: 100vh;
        } 
      }
      
    </style>
    <ul hidden>
      <li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
    </ul>
  </body>
</html>