/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 26:3 Expected identifier but found "%"
Line 27:4 Unexpected "<"
Line 28:3 Expected identifier but found "%"
Line 30:28 Unexpected "-->"
Line 35:5 Unexpected "{"
Line 35:17 Expected ":"
Line 36:4 Unexpected "{"
Line 36:5 Expected identifier but found "%"
Line 36:28 Cannot use type selector "ndash" directly after nesting selector "&"
... and 61 more hidden warnings

**/
<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<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="#1B4D3E">
  <link rel="canonical" href="{{ canonical_url }}">
  <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

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

  <!-- Preload Custom Fonts -->
  <link rel="preload" href="/cdn/shop/files/TAN_-_PEARL.woff2?v=1766757826" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/cdn/shop/files/GoogleSans-Regular.woff2?v=1766758024" as="font" type="font/woff2" crossorigin>

  <title>
    {{ page_title }}
    {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
    {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
    {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
  </title>

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

  {% render 'meta-tags' %}

  {{ content_for_header }}

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'brand': {
              'green': '#1B4D3E',
              'green-dark': '#153D31',
              'cream': '#F5F5F0',
            }
          },
          fontFamily: {
            'heading': ['TAN Pearl', 'Georgia', 'serif'],
            'body': ['Google Sans', 'system-ui', 'sans-serif'],
            'serif': ['TAN Pearl', 'Georgia', 'serif'],
            'sans': ['Google Sans', 'system-ui', 'sans-serif'],
          }
        }
      }
    }
  </script>

  <style>
    /* Custom Font Faces */
    @font-face {
      font-family: 'TAN Pearl';
      src: url('/cdn/shop/files/TAN_-_PEARL.woff2?v=1766757826') format('woff2');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Google Sans';
      src: url('/cdn/shop/files/GoogleSans-Regular.woff2?v=1766758024') format('woff2');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --color-brand-green: #1B4D3E;
      --color-brand-green-dark: #153D31;
      --color-cream: #F5F5F0;
      --font-heading: 'TAN Pearl', Georgia, serif;
      --font-body: 'Google Sans', system-ui, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Google Sans', system-ui, sans-serif !important;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
    }

    /* Headings & Nav - TAN Pearl */
    h1, h2, h3, h4, h5, h6,
    .font-serif,
    .font-heading,
    .nav-link,
    .mobile-menu nav a,
    #mobile-menu nav a {
      font-family: 'TAN Pearl', Georgia, serif !important;
    }

    /* Body text - Google Sans */
    p, span, li, label, td, th,
    input, button, textarea, select,
    .font-sans,
    .font-body {
      font-family: 'Google Sans', system-ui, sans-serif !important;
    }

    /* Mobile menu styles */
    .mobile-menu {
      transform: translateX(-100%);
      transition: transform 0.3s ease-in-out;
    }

    .mobile-menu.open {
      transform: translateX(0);
    }

    .mobile-menu-overlay {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    .mobile-menu-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    /* Product card hover effect */
    .product-card img {
      transition: transform 0.3s ease;
    }

    .product-card:hover img {
      transform: scale(1.02);
    }

    /* Button styles */
    .btn-primary {
      background-color: var(--color-brand-green);
      color: white;
      padding: 12px 32px;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .btn-primary:hover {
      background-color: var(--color-brand-green-dark);
    }

    .btn-outline {
      background-color: white;
      color: #1a1a1a;
      padding: 14px 36px;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-outline:hover {
      background-color: #f5f5f5;
    }

    .btn-outline-white {
      background-color: transparent;
      color: white;
      padding: 14px 36px;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: 1px solid white;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-outline-white:hover {
      background-color: white;
      color: #1a1a1a;
    }

    /* Newsletter input */
    .newsletter-input {
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(255,255,255,0.5);
      padding: 12px 0;
      color: white;
      font-size: 14px;
      width: 100%;
      outline: none;
    }

    .newsletter-input::placeholder {
      color: rgba(255,255,255,0.7);
    }

    .newsletter-input:focus {
      border-bottom-color: white;
    }

    /* Hide scrollbar for menu */
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .hide-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  </style>

  {{ 'base.css' | asset_url | stylesheet_tag }}
</head>

<body class="bg-white text-gray-900">
  <a class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-brand-green text-white px-4 py-2" href="#MainContent">
    Skip to content
  </a>

  {% section 'header' %}

  <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
    {{ content_for_layout }}
  </main>

  {% section 'footer' %}

  <!-- Mobile Menu Overlay -->
  <div id="mobile-menu-overlay" class="mobile-menu-overlay fixed inset-0 bg-black/50 z-40" onclick="closeMobileMenu()"></div>

  <!-- Mobile Menu Drawer -->
  <div id="mobile-menu" class="mobile-menu fixed top-0 left-0 h-full w-[340px] max-w-[85vw] bg-white z-50 overflow-y-auto hide-scrollbar">
    <div class="p-6">
      <!-- Menu Header -->
      <div class="flex items-center justify-between mb-10">
        <a href="/" class="block">
          {%- if settings.logo != blank -%}
            <img src="{{ settings.logo | image_url: width: 200 }}" alt="{{ shop.name }}" class="h-10 w-auto">
          {%- else -%}
            <span class="font-serif text-2xl text-brand-green tracking-wide">{{ shop.name }}</span>
          {%- endif -%}
        </a>
        <button onclick="closeMobileMenu()" class="p-2 -mr-2 text-gray-600 hover:text-gray-900">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Menu Links -->
      <nav class="space-y-6">
        <a href="/" class="nav-link block text-sm tracking-[0.2em] uppercase text-brand-green hover:opacity-70 transition-opacity">Home</a>
        <a href="/collections/all" class="nav-link block text-sm tracking-[0.2em] uppercase text-brand-green hover:opacity-70 transition-opacity">All Products</a>
        <a href="/collections/men" class="nav-link block text-sm tracking-[0.2em] uppercase text-brand-green hover:opacity-70 transition-opacity">Men</a>
        <a href="/collections/women" class="nav-link block text-sm tracking-[0.2em] uppercase text-brand-green hover:opacity-70 transition-opacity">Women</a>
        <a href="/pages/about-us" class="nav-link block text-sm tracking-[0.2em] uppercase text-brand-green hover:opacity-70 transition-opacity">About Us</a>
      </nav>
    </div>
  </div>

  <script>
    function openMobileMenu() {
      document.getElementById('mobile-menu').classList.add('open');
      document.getElementById('mobile-menu-overlay').classList.add('open');
      document.body.style.overflow = 'hidden';
    }

    function closeMobileMenu() {
      document.getElementById('mobile-menu').classList.remove('open');
      document.getElementById('mobile-menu-overlay').classList.remove('open');
      document.body.style.overflow = '';
    }

    // Close menu on escape key
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        closeMobileMenu();
      }
    });
  </script>

  <script src="{{ 'global.js' | asset_url }}" defer></script>
</body>
</html>