/** Shopify CDN: Minification failed

Line 98:0 Unexpected "<"
Line 110:10 Unexpected "{"
Line 110:22 Expected ":"
Line 110:25 Unexpected "{"
Line 110:26 Expected identifier but found "%"
Line 110:73 Unexpected "{"
Line 110:79 Expected ":"
Line 110:87 Unexpected "{"
Line 110:88 Expected identifier but found "%"
Line 110:102 Unexpected "<"
... and 74 more hidden warnings

**/
:root{
  --teal:#008270;--dark-green:#005949;--coral:#E06A4D;
  --beige:#CBBDA9;--beige-light:#F2EDE6;--gold:#FAB317;
  --text-dark:#231F20;--text-mid:#6a6560;
  --font-serif:'Amoitar',Georgia,serif;
  --font-head:'Gilroy','Arial Black',sans-serif;
  --font-sans:'Open Sans',sans-serif;
  --r:12px;--r-lg:20px;
  --shadow:0 2px 16px rgba(0,0,0,.06);
  --shadow-md:0 6px 32px rgba(0,89,73,.1);
  --max:1280px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--text-dark);overflow-x:hidden;background:#fff}
img{display:block;max-width:100%}a{text-decoration:none}
h1,h2,h3{font-family:var(--font-serif)}
.mbar{background:var(--coral);overflow:hidden;padding:9px 0;white-space:nowrap}
.mtrack{display:inline-flex;animation:marquee 28s linear infinite}
.mtrack:hover{animation-play-state:paused}
.mitem{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:700;padding:0 36px;font-family:var(--font-head)}
.msep{color:rgba(255,255,255,.35);padding:0 4px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.site-nav{background:var(--dark-green);position:sticky;top:0;z-index:200;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 48px;height:72px;display:flex;align-items:center;gap:32px}
.nav-logo img{height:60px;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:#fff;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;font-family:var(--font-head);transition:color .18s}
.nav-links a:hover,.nav-links a.active{color:var(--coral)}
.nav-cta{margin-left:auto;background:var(--coral);color:#fff !important;padding:10px 24px;border-radius:50px;font-size:12px;font-weight:700;font-family:var(--font-head);letter-spacing:.5px;transition:all .2s}
.nav-cta:hover{background:#c85a3d !important;transform:translateY(-1px)}
.site-footer{background:#001f17;padding:40px 48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{color:rgba(242,237,230,.5);font-size:13px;transition:color .2s}
.footer-links a:hover{color:var(--teal)}
.footer-copy{color:rgba(242,237,230,.25);font-size:12px}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.sec-lbl{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--coral);font-family:var(--font-head);margin-bottom:12px;display:block}
.star{width:15px;height:15px;color:var(--gold)}
@media(max-width:768px){.nav-inner{padding:0 14px !important;height:68px !important;position:relative !important}.nav-links{display:none}.site-footer{padding:32px 24px;flex-direction:column;align-items:flex-start}.nav-logo{position:absolute !important;left:50% !important;transform:translateX(-50%) !important}.nav-logo img{height:60px !important}.nav-right{position:relative !important;z-index:2 !important}}
.nav-links a { color: #fff !important; }
.menu-trigger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  align-items: center;
  justify-content: center;
}
.menu-trigger svg {
  width: 24px;
  height: 24px;
  color: white;
  stroke: white;
  display: block;
}
@media (max-width: 768px) {
  .menu-trigger {
    display: flex !important;
  }
}

@media (max-width: 768px) {
  nav.site-nav {
    display: block !important;
    height: 68px !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
    background: #005949 !important;
  }
  nav.site-nav .nav-inner {
    display: flex !important;
    height: 68px !important;
    width: 100% !important;
  }
}
<!DOCTYPE html>
<html lang="nl">
<head>
  <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KVPW9SGG');</script>
<!-- End Google Tag Manager -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ page_title }}{% unless page_title contains shop.name %} — {{ shop.name }}{% endunless %}</title>
  <meta name="description" content="{{ page_description | escape }}">

{% if request.page_type == 'product' %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "description": "{{ product.description | strip_html | escape }}",
  "image": "{{ product.featured_image | image_url: width: 800 }}",
  "brand": {
    "@type": "Brand",
    "name": "Home of Creations"
  },
  "offers": {
    "@type": "Offer",
    "price": "{{ product.price | divided_by: 100.0 }}",
    "priceCurrency": "EUR",
    "availability": "{% if product.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}",
    "url": "{{ shop.url }}{{ product.url }}"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "90",
    "bestRating": "5"
  }
}
</script>
{% endif %}

{% if request.page_type == 'product' %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Heb ik ervaring nodig?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Helemaal niet. De kit is speciaal ontworpen voor mensen die nog nooit eerder iets gemaakt hebben. De stap-voor-stap handleiding legt alles rustig uit."
      }
    },
    {
      "@type": "Question",
      "name": "Is alles inbegrepen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja, alles zit in de doos. Je hebt alleen een kookplaat of gasfornuis nodig om de sojawas te smelten."
      }
    },
    {
      "@type": "Question",
      "name": "Is het geschikt als cadeau?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Absoluut. De kit wordt geleverd in een prachtige cadeauverpakking die je direct kunt geven, zonder extra inpakken."
      }
    },
    {
      "@type": "Question",
      "name": "Hoe snel wordt het bezorgd?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Bestel je vóór 16:00 op een werkdag? Dan ligt het de volgende werkdag al bij je thuis. Altijd gratis bezorging."
      }
    },
    {
      "@type": "Question",
      "name": "Wat is het retourbeleid?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Je hebt 30 dagen retourrecht. Neem contact op en we regelen het voor je. Je geld is binnen 5 werkdagen terug."
      }
    }
  ]
}
</script>
{% endif %}

{% if request.page_type == 'index' %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Home of Creations",
  "url": "https://homeofcreations.com",
  "logo": "/cdn/shop/files/logo_HOC_wit.png?v=1773843600",
  "description": "Creatieve kits voor een rustgevend moment. Kaarsen maken, zeep, pottery en meer.",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Schepenlaan 10",
    "addressLocality": "Weert",
    "postalCode": "6002EE",
    "addressCountry": "NL"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "email": "hallo@homeofcreations.nl",
    "contactType": "customer service",
    "availableLanguage": "Dutch"
  },
  "sameAs": [
    "https://www.instagram.com/homeofcreations.eu",
    "https://www.facebook.com/profile.php?id=61587476807237",
    "https://www.tiktok.com/@homeofcreations"
  ]
}
</script>
{% endif %}
  {{ content_for_header }}

  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
  {{ 'theme.css' | asset_url | stylesheet_tag }}

  <style>
    @font-face {
      font-family: 'Amoitar';
      src: url('{{ "Amoitar_Regular.otf" | asset_url }}') format('opentype');
      font-weight: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Gilroy';
      src: url('{{ "Gilroy-ExtraBold.otf" | asset_url }}') format('opentype');
      font-weight: 800;
      font-display: swap;
    }

    html, body { max-width: 100%; overflow-x: hidden; }
    *, *::before, *::after { box-sizing: border-box; }
    img { max-width: 100%; height: auto; }
    #MainContent { width: 100%; overflow-x: hidden; }

    /* POPUP */
    .hoc-popup-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1000;
      display: flex; align-items: center; justify-content: center; padding: 20px;
      opacity: 0; pointer-events: none; transition: opacity 0.4s;
    }
    .hoc-popup-overlay.show { opacity: 1; pointer-events: all; }
    .hoc-popup {
      background: white; border-radius: 24px; max-width: 420px; width: 100%;
      overflow: hidden; position: relative; transform: translateY(20px); transition: transform 0.4s;
    }
    .hoc-popup-overlay.show .hoc-popup { transform: translateY(0); }
    .hoc-popup-top {
      background: #005949; height: 180px; display: flex; align-items: center;
      justify-content: center; position: relative; overflow: hidden;
    }
    .hoc-popup-body { padding: 24px 28px 24px; text-align: center; }
    .hoc-popup-tag {
      font-size: 10px; color: #E06A4D; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; font-family: 'Open Sans', sans-serif; margin-bottom: 8px; display: block;
    }
    .hoc-popup-title { font-family: 'Amoitar', serif; font-size: 32px; color: #005949; line-height: 1.1; margin-bottom: 8px; }
    .hoc-popup-title span { color: #E06A4D; }
    .hoc-popup-sub { font-size: 13px; color: #7a726c; font-family: 'Open Sans', sans-serif; line-height: 1.5; margin-bottom: 18px; }
    .hoc-popup-input-row { display: flex; gap: 8px; margin-bottom: 12px; }
    .hoc-popup-input { flex: 1; border: 1.5px solid #e0dbd2; border-radius: 50px; padding: 11px 16px; font-size: 14px; font-family: 'Open Sans', sans-serif; outline: none; }
    .hoc-popup-input:focus { border-color: #005949; }
    .hoc-popup-btn { background: #E06A4D; color: white; border: none; border-radius: 50px; padding: 11px 18px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'Open Sans', sans-serif; white-space: nowrap; transition: background 0.2s; }
    .hoc-popup-btn:hover { background: #c85a3d; }
    .hoc-popup-skip { font-size: 12px; color: #aaa; cursor: pointer; font-family: 'Open Sans', sans-serif; background: none; border: none; text-decoration: underline; }
    .hoc-popup-close { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.2); border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: white; font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 2; }

    @media (max-width: 768px) {
      .hoc-popup-input-row { flex-direction: column; }
      .hoc-popup-btn { width: 100%; }
      .hoc-popup-title { font-size: 26px; }
    }

    @media (max-width: 768px) {
      .menu-trigger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 600 !important;
        width: 40px !important;
        height: 40px !important;
        clip: auto !important;
        clip-path: none !important;
      }
      .menu-trigger svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        color: white !important;
        fill: none !important;
        stroke: white !important;
      }
    }
  </style>
</head>
<body>

  <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KVPW9SGG"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

{% render 'marquee' %}
{% render 'nav' %}

<main id="MainContent">
  {{ content_for_layout }}
</main>

<div class="hoc-popup-overlay" id="hoc-popup">
  <div class="hoc-popup">
    <button class="hoc-popup-close" type="button" onclick="closePopup()">×</button>
      <div class="hoc-popup-top" style="position:relative;height:200px;overflow:hidden;padding:0;">
        <img src="/cdn/shop/files/hf_20260323_111036_40d3c15b-5591-4c52-bb52-41679069729f.jpg?v=1774264501" alt="Home of Creations" style="width:100%;height:100%;object-fit:cover;display:block;">
        <div style="position:absolute;inset:0;background:rgba(0,89,73,0.45);display:flex;align-items:center;justify-content:center;">
          <div style="text-align:center;">
            <div style="font-family:'Amoitar',serif;font-size:72px;color:#E06A4D;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,0.3);">10%</div>
            <div style="font-family:'Amoitar',serif;font-size:26px;color:white;line-height:1;margin-top:-4px;text-shadow:0 2px 8px rgba(0,0,0,0.3);">korting</div>
          </div>
        </div>
      </div>
    <div class="hoc-popup-body">
      <span class="hoc-popup-tag">✦ Alleen voor nieuwe bezoekers </span>
      <div class="hoc-popup-title">Maak iets moois en bespaar <span>meteen</span></div>
      <p class="hoc-popup-sub">Schrijf je in voor onze nieuwsbrief en krijg 10% korting op je eerste bestelling.</p>
      {% form 'customer' %}
          <input type="hidden" name="contact[tags]" value="newsletter,popup">
          <div class="hoc-popup-input-row" id="popup-input-row">
            <input class="hoc-popup-input" type="email" name="contact[email]" placeholder="Jouw e-mailadres" required id="popup-email">
            <button class="hoc-popup-btn" type="submit">Geef mij 10% korting</button>
          </div>
          {% if form.posted_successfully? %}
            <div style="background:#f0faf5;border:1.5px solid #008270;border-radius:16px;padding:20px;text-align:center;margin-bottom:12px;">
              <div style="font-size:15px;font-weight:700;color:#005949;margin-bottom:12px;">🎉 Welkom bij Home of Creations!</div>
              <div style="font-size:13px;color:#6a6560;margin-bottom:14px;">Gebruik deze code bij je bestelling:</div>
              <div style="background:#005949;color:#fff;font-family:'Gilroy','Arial Black',sans-serif;font-size:22px;font-weight:700;letter-spacing:3px;padding:12px 20px;border-radius:10px;margin-bottom:12px;cursor:pointer;" onclick="navigator.clipboard.writeText('WELKOMHOC');this.innerHTML='✓ Gekopieerd!'">WELKOMHOC</div>
              <div style="font-size:12px;color:#aaa;">Klik op de code om te kopiëren</div>
            </div>
            <script>setTimeout(function(){ closePopup(); }, 6000);</script>
          {% endif %}
        {% endform %}
        <button class="hoc-popup-skip" type="button" onclick="closePopup()">Nee, Bedankt</button>
    </div>
  </div>
</div>

<footer style="background:#001f17;padding:64px 0 32px;color:rgba(242,237,230,0.5);font-family:'Open Sans',sans-serif;">
  <div style="max-width:1400px;margin:0 auto;padding:0 60px;">

  <!-- FOOTER GRID -->
  <div style="display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.6fr;gap:48px;margin-bottom:48px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.08);">
    <!-- BRAND -->
    <div>
      <img src="/cdn/shop/files/logo_HOC_wit.png?v=1773843600" alt="{{ shop.name }}" style="height:60px;width:auto;margin-bottom:16px;display:block;opacity:0.8;">
      <p style="font-size:14px;line-height:1.7;margin-bottom:20px;font-weight:300;">Creatieve kits voor een rustgevend moment. Alles zit erin, je kan meteen aan de slag. Alles zit erin, je kan meteen aan de slag.</p>
      <div style="display:flex;gap:10px;">
<a href="https://www.instagram.com/homeofcreations.eu?igsh=MTkxbmc1NjZvem1kMw==" target="_blank" style="width:36px;height:36px;background:rgba(255,255,255,0.07);border-radius:8px;display:flex;align-items:center;justify-content:center;" onmouseover="this.style.background='#008270'" onmouseout="this.style.background='rgba(255,255,255,0.07)'">          <svg width="16" height="16" fill="currentColor" style="color:rgba(242,237,230,0.7)" viewBox="0 0 24 24"><path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"/></svg>
        </a>
        <a href="https://www.facebook.com/profile.php?id=61587476807237&locale=nl_NL" style="width:36px;height:36px;background:rgba(255,255,255,0.07);border-radius:8px;display:flex;align-items:center;justify-content:center;" onmouseover="this.style.background='#008270'" onmouseout="this.style.background='rgba(255,255,255,0.07)'">
          <svg width="16" height="16" fill="currentColor" style="color:rgba(242,237,230,0.7)" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
        </a>
        <a href="https://www.tiktok.com/@homeofcreations" style="width:36px;height:36px;background:rgba(255,255,255,0.07);border-radius:8px;display:flex;align-items:center;justify-content:center;" onmouseover="this.style.background='#008270'" onmouseout="this.style.background='rgba(255,255,255,0.07)'">
          <svg width="16" height="16" fill="currentColor" style="color:rgba(242,237,230,0.7)" viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.17 8.17 0 004.78 1.53V6.79a4.85 4.85 0 01-1.01-.1z"/></svg>
        </a>
      </div>
    </div>

    <!-- SHOP -->
    <div>
      <h5 style="color:#fff;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;font-family:'Open Sans',sans-serif;">Shop</h5>
      <ul style="list-style:none;display:flex;flex-direction:column;gap:10px;">
        <li><a href="/collections/alle-kits" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Alle kits</a></li>
        <li><a href="/products/pottery-kit" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Pottery & Klei</a></li>
        <li><a href="/products/candle-making-kit" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Kaarsen maken</a></li>
        <li><a href="/collections/alle-kits#gifting" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Cadeaus</a></li></ul>
    </div>

    <!-- INFO -->
    <div>
      <h5 style="color:#fff;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;font-family:'Open Sans',sans-serif;">Info</h5>
      <ul style="list-style:none;display:flex;flex-direction:column;gap:10px;">
        <li><a href="/pages/over-ons" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Over ons</a></li>
        <li><a href="/pages/community" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Community</a></li>
        <li><a href="/pages/contact" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Contact</a></li>
      </ul>
    </div>

    <!-- SERVICE -->
    <div>
      <h5 style="color:#fff;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;font-family:'Open Sans',sans-serif;">Service</h5>
      <ul style="list-style:none;display:flex;flex-direction:column;gap:10px;">
        <li><a href="/pages/contact" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Veelgestelde vragen</a></li>
        <li><a href="/pages/contact" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Bezorging & retour</a></li>
        <li><a href="/pages/privacy" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Privacy</a></li>
        <li><a href="/pages/algemene-voorwaarden" style="color:rgba(242,237,230,0.5);font-size:14px;font-weight:300;" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Algemene voorwaarden</a></li>
      </ul>
    </div>

    <!-- NIEUWSBRIEF -->
    <div>
      <h5 style="color:#fff;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;font-family:'Open Sans',sans-serif;">Community</h5>
<div style="font-family:'Amoitar',serif;font-size:20px;color:#fff;margin-bottom:8px;line-height:1.2;">Word onderdeel van de <span style="color:#E06A4D;">community</span>!</div>      <div style="font-size:13px;color:rgba(242,237,230,0.6);margin-bottom:16px;line-height:1.5;">Nieuwe kits, exclusieve acties en creatieve inspiratie rechtstreeks in je inbox.</div>
      {% form 'customer' %}
        <input type="hidden" name="contact[tags]" value="newsletter">
        {% if form.posted_successfully? %}
          <div style="background:rgba(0,130,112,0.2);border:1px solid rgba(0,130,112,0.4);border-radius:12px;padding:14px 18px;text-align:center;color:#fff;font-size:13px;">
            🎉 Welkom! Bedankt voor het aanmelden!
          </div>
        {% else %}
          <input type="email" name="contact[email]" placeholder="Jouw e-mailadres" required style="width:100%;border:1.5px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.07);border-radius:50px;padding:11px 18px;font-size:13px;color:#fff;font-family:'Open Sans',sans-serif;outline:none;margin-bottom:10px;display:block;" onfocus="this.style.borderColor='#E06A4D'" onblur="this.style.borderColor='rgba(255,255,255,0.2)'">
          <button type="submit" style="width:100%;background:#E06A4D;color:#fff;border:none;border-radius:50px;padding:11px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Open Sans',sans-serif;" onmouseover="this.style.background='#c85a3d'" onmouseout="this.style.background='#E06A4D'">Ja, houd mij op de hoogte</button>
        {% endif %}
      {% endform %}
    </div>
  </div>

<!-- BEDRIJFSGEGEVENS -->
    <div style="margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,0.06);">
    <p style="font-size:12px;line-height:1.8;">Spijkerman E-commerce B.V. · KvK: 90714873 · BTW: NL865426090B01 · Schepenlaan 10, 6002EE Weert</p>
  </div>
  </div>

  <!-- BOTTOM -->
  <div style="max-width:1400px;margin:0 auto;padding:0 60px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;">
    <p style="font-size:12px;">© {{ 'now' | date: '%Y' }} {{ shop.name }} — Spijkerman E-commerce B.V., Nederland</p>
    <div style="display:flex;gap:20px;align-items:center;flex-wrap:wrap;">
      <a href="/pages/privacy" style="font-size:12px;color:rgba(242,237,230,0.5);" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Privacy</a>
      <a href="/pages/algemene-voorwaarden" style="font-size:12px;color:rgba(242,237,230,0.5);" onmouseover="this.style.color='#E06A4D'" onmouseout="this.style.color='rgba(242,237,230,0.5)'">Algemene voorwaarden</a>
      <p style="font-size:12px;">Met ❤️ gemaakt voor creatieve zielen</p>
    </div>
  </div>

 <style>
    @media(max-width:1024px){
      footer > div > div:first-child { grid-template-columns:1fr 1fr 1fr !important; }
    }
    @media(max-width:768px){
      footer > div > div:first-child {
        grid-template-columns:1fr 1fr 1fr !important;
        gap:28px 16px !important;
      }
      /* Brand: volle breedte bovenaan */
      footer > div > div:first-child > div:nth-child(1) {
        grid-column: 1 / -1 !important;
      }
      /* Shop, Info, Service: alle 3 naast elkaar */
      footer > div > div:first-child > div:nth-child(2),
      footer > div > div:first-child > div:nth-child(3),
      footer > div > div:first-child > div:nth-child(4) {
        grid-column: span 1 !important;
      }
      /* Community/nieuwsbrief: volle breedte onderaan */
      footer > div > div:first-child > div:nth-child(5) {
        grid-column: 1 / -1 !important;
      }
      footer > div { padding:0 20px !important; }
      footer { padding:40px 0 24px !important; }
      footer h5 { margin-bottom:10px !important; font-size:10px !important; }
      footer ul { gap:7px !important; }
      footer ul a { font-size:13px !important; }
    }
    @media(max-width:380px){
      footer > div > div:first-child {
        grid-template-columns:1fr 1fr !important;
      }
      footer > div > div:first-child > div:nth-child(4) {
        grid-column: 1 / -1 !important;
      }
    }
  </style>
</footer>

<script>
  function closePopup() {
    var popup = document.getElementById('hoc-popup');
    if (popup) popup.classList.remove('show');
    sessionStorage.setItem('hoc-popup-closed', '1');
  }

  if (!sessionStorage.getItem('hoc-popup-closed')) {
    setTimeout(function() {
      var popup = document.getElementById('hoc-popup');
      if (popup) popup.classList.add('show');
    }, 15000);
  }

  var popupEl = document.getElementById('hoc-popup');
  if (popupEl) {
    popupEl.addEventListener('click', function(e) {
      if (e.target === this) closePopup();
    });
  }

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePopup();
  });
</script>

</body>
</html>

@media (max-width: 768px) {
  nav.site-nav,
  .site-nav {
    display: block !important;
    height: 68px !important;
    width: 100% !important;
  }
  nav.site-nav .nav-inner,
  .site-nav .nav-inner {
    display: flex !important;
    height: 68px !important;
    padding: 0 14px !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
  }
  nav.site-nav .nav-logo,
  .site-nav .nav-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  nav.site-nav .nav-logo img,
  .site-nav .nav-logo img {
    height: 46px !important;
  }
  nav.site-nav .nav-right,
  .site-nav .nav-right {
    margin-left: auto !important;
  }
}