/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 19:5 Unexpected "{"
Line 19:25 Expected ":"
Line 20:4 Unexpected "{"
Line 20:5 Unexpected "{"
Line 20:7 Expected identifier but found "'section-password.css'"
Line 22:4 Unexpected "<"
Line 246:4 Unexpected "<"
Line 275:9 Expected identifier but found "%"
Line 277:10 Unexpected "<"
... and 7 more hidden warnings

**/
<!doctype html>
<html class="js" lang="{{ request.locale.iso_code }}">
  <head>
    {{ content_for_header }}
    {{ 'section-password.css' | asset_url | stylesheet_tag }}

    <style>
      html,body{
        margin:0;
        min-height:100%;
        background:#090909;
      }

      body{
        overflow-x:hidden;
      }

      .ws-lock{
        position:relative;
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        background:#090909;
        color:#fff;
        font-family:Arial,Helvetica,sans-serif;
      }

      .ws-grid{
        position:absolute;
        inset:0;
        background:
          linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
          linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
        background-size:40px 40px;
        animation:wsgrid 12s linear infinite;
      }

      .ws-grid:after{
        content:"";
        position:absolute;
        left:0;
        top:-40%;
        width:100%;
        height:40%;
        background:linear-gradient(transparent,rgba(255,255,255,.08),transparent);
        animation:wsscan 4s linear infinite;
      }

      .ws-lock__box{
        position:relative;
        z-index:2;
        width:min(430px,90%);
        padding:0 22px 20px;
        border:1px solid #555;
        border-radius:18px;
        background:linear-gradient(#222,#0d0d0d);
        box-shadow:0 20px 70px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.2);
        text-align:center;
        animation:wsin .7s ease both;
      }

      .ws-lock__top{
        height:54px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-bottom:1px solid #444;
        font-weight:700;
      }

      .ws-lock__icon{
        width:68px;
        height:68px;
        margin:28px auto 16px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid #888;
        border-radius:50%;
        background:linear-gradient(#fff,#ccc);
        color:#111;
        font-size:26px;
        box-shadow:inset 0 1px #fff,0 4px 14px #000;
        animation:wspulse 2s ease-in-out infinite;
      }

      .ws-lock h1{
        margin:0;
        font-size:30px;
        letter-spacing:.08em;
      }

      .ws-status{
        margin:10px 0;
        color:#aaa;
        font-size:11px;
        letter-spacing:.18em;
      }

      .ws-status i{
        display:inline-block;
        width:7px;
        height:7px;
        margin-left:6px;
        border-radius:50%;
        background:#fff;
        box-shadow:0 0 12px #fff;
        animation:wsblink 1.2s infinite;
      }

      .ws-line{
        height:1px;
        margin:20px 0;
        background:linear-gradient(90deg,transparent,#888,transparent);
      }

      .ws-text{
        margin:0;
        color:#ccc;
        font-size:14px;
        line-height:1.5;
      }

      .ws-form{
        margin-top:20px;
      }

      .ws-input{
        width:100%;
        height:48px;
        box-sizing:border-box;
        padding:0 14px;
        border:1px solid #777;
        border-radius:12px;
        background:#111;
        color:#fff;
        outline:none;
        text-align:center;
      }

      .ws-input::placeholder{
        color:#888;
      }

      .ws-input:focus{
        border-color:#fff;
        box-shadow:0 0 15px rgba(255,255,255,.15);
      }

      .ws-button{
        width:100%;
        height:50px;
        margin-top:10px;
        border:1px solid #999;
        border-radius:14px;
        background:linear-gradient(#fff,#d8d8d8);
        color:#222;
        font-weight:700;
        letter-spacing:.05em;
        cursor:pointer;
        box-shadow:inset 0 1px #fff,0 2px 4px #000;
        transition:.2s;
      }

      .ws-button:hover{
        transform:translateY(-2px);
        background:linear-gradient(#fff,#eee);
        box-shadow:inset 0 1px #fff,0 4px 10px #000;
      }

      .ws-button:active{
        transform:translateY(1px);
        box-shadow:inset 0 2px 4px #999;
      }

      .ws-error{
        margin:12px 0 0;
        color:#fff;
        font-size:12px;
        font-weight:700;
      }

      .ws-bottom{
        display:flex;
        justify-content:space-between;
        margin-top:24px;
        padding-top:12px;
        border-top:1px solid #444;
        color:#777;
        font-size:9px;
        letter-spacing:.12em;
      }

      @keyframes wsgrid{
        from{background-position:0 0,0 0}
        to{background-position:0 40px,40px 0}
      }

      @keyframes wsscan{
        from{transform:translateY(0)}
        to{transform:translateY(350%)}
      }

      @keyframes wspulse{
        0%,100%{transform:scale(1)}
        50%{transform:scale(1.06)}
      }

      @keyframes wsin{
        from{opacity:0;transform:translateY(20px) scale(.98)}
        to{opacity:1;transform:none}
      }

      @keyframes wsblink{
        0%,100%{opacity:.3}
        50%{opacity:1}
      }

      @media(max-width:600px){
        .ws-lock__box{
          width:90%;
          padding:0 16px 16px;
        }

        .ws-lock h1{
          font-size:24px;
        }
      }
    </style>
  </head>

  <body>
    <main class="ws-lock">
      <div class="ws-grid"></div>

      <div class="ws-lock__box">

        <div class="ws-lock__top">
          <span>WORNSTREET™</span>
          <span>☰</span>
        </div>

        <div class="ws-lock__icon">🔒</div>

        <h1>STORE LOCKED</h1>

        <p class="ws-status">
          PRIVATE ACCESS<i></i>
        </p>

        <div class="ws-line"></div>

        <p class="ws-text">
          Enter the password to access<br>
          WORNSTREET.
        </p>

        {% form 'storefront_password', class: 'ws-form' %}

          <input
            type="password"
            name="password"
            class="ws-input"
            placeholder="ENTER PASSWORD"
            autocomplete="current-password"
          >

          <button type="submit" class="ws-button">
            ENTER STORE
          </button>

          {% if form.errors %}
            <p class="ws-error">
              ACCESS DENIED — TRY AGAIN
            </p>
          {% endif %}

        {% endform %}

        <div class="ws-bottom">
          <span>WORNSTREET HOUSE</span>
          <span>ACCESS // 001</span>
        </div>

      </div>
    </main>
  </body>
</html>