<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="omelette-print-source" content="v1786696830063709 Home v2.dc.html">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="stylesheet" href="_ds/wear-at-work-design-system-a7f0e846-406d-45f3-99f4-05a666b8f665/tokens/fonts.css">
<link rel="stylesheet" href="_ds/wear-at-work-design-system-a7f0e846-406d-45f3-99f4-05a666b8f665/tokens/colors.css">
<link rel="stylesheet" href="_ds/wear-at-work-design-system-a7f0e846-406d-45f3-99f4-05a666b8f665/tokens/typography.css">
<link rel="stylesheet" href="_ds/wear-at-work-design-system-a7f0e846-406d-45f3-99f4-05a666b8f665/tokens/spacing.css">
<link rel="stylesheet" href="_ds/wear-at-work-design-system-a7f0e846-406d-45f3-99f4-05a666b8f665/tokens/effects.css">
<link rel="stylesheet" href="_ds/wear-at-work-design-system-a7f0e846-406d-45f3-99f4-05a666b8f665/tokens/base.css">
<link rel="stylesheet" href="_ds/wear-at-work-design-system-a7f0e846-406d-45f3-99f4-05a666b8f665/styles.css">
<script src="_ds/wear-at-work-design-system-a7f0e846-406d-45f3-99f4-05a666b8f665/_ds_bundle.js"></script>
<style>
  html,body{margin:0;padding:0;}
  body{background:var(--surface-page);}
  /* ===== REBRAND 2026: #162554 / #141540 / #f47c20 ===== */
  :root{
    --navy-900:#141540; --navy-800:#141540; --navy-700:#162554; --navy-600:#162554;
    --navy-500:#33488a; --navy-400:#5b6ea8; --navy-300:#8e9cc4; --navy-200:#c2c9dd;
    --navy-100:#e5e9f1; --navy-50:#f4f6fa;
    --yellow-600:#d8620c; --yellow-500:#f47c20; --yellow-400:#f7913f;
    --yellow-300:#fab273; --yellow-100:#fde7d4;
    --gray-50:#f6f7fa; --gray-100:#eceef3; --gray-200:#dcdfe8; --gray-300:#c2c7d6;
    --shadow-focus:0 0 0 3px rgba(22,37,84,.35);
  }
  a{color:var(--text-link);text-decoration:none;}
  a:hover{color:var(--text-link-hover);}
  @keyframes waw-fadeup{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
  @keyframes waw-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @keyframes waw-glow{0%,100%{opacity:.10;}50%{opacity:.22;}}
  @keyframes waw-fade{from{opacity:0;}to{opacity:1;}}
  doc-page:not(:defined){visibility:hidden;}
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  * { animation-delay: -99s !important; animation-duration: .001s !important;
      animation-iteration-count: 1 !important; animation-fill-mode: both !important;
      animation-play-state: running !important; transition-duration: 0s !important; }
  [data-print-static] { position: static !important; top: auto !important; }
  [data-print-hide] { display: none !important; }
  @media print { section, [data-reveal] { break-inside: avoid; } }
</style>
<script src="./doc-page.js"></script>
</helmet>
<doc-page margin="0">
<div lang="el" style="font-family:var(--font-body);color:var(--text-body);background:var(--surface-page);">

  <!-- ============ HEADER ============ -->
  <sc-if value="{{ bannerVisible }}" hint-placeholder-val="{{ true }}">
    <div style="background:var(--yellow-500);">
      <div style="display:flex;align-items:center;justify-content:space-between;gap:24px;height:30px;max-width:1280px;margin:0 auto;padding:0 24px;color:#fff;font-size:12px;letter-spacing:.02em;">
        <span style="display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M14 9h4l4 4v4a1 1 0 0 1-1 1h-1"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>
          Δωρεάν μεταφορικά άνω των 120€
        </span>
        <a href="tel:+302109704488" style="display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:700;text-decoration:none;">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>
          +30 210 9704488
        </a>
      </div>
    </div>
  </sc-if>
  <header data-print-static style="position:sticky;top:0;z-index:50;">

    <div style="background:#141540;border-bottom:1px solid var(--yellow-500);">
      <div style="max-width:1280px;margin:0 auto;padding:0 24px;height:76px;display:flex;align-items:center;gap:28px;">
        <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;flex-shrink:0;">
          <img src="assets/logo-2026.png" alt="Wear At Work" style="height:34px;">
        </a>
        <div style="margin:0 auto;display:flex;align-items:center;height:40px;width:100%;max-width:360px;background:#fff;border-radius:3px;padding:0 12px;gap:9px;">
          <span style="color:var(--gray-400);display:inline-flex;">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
          </span>
          <input placeholder="Αναζήτηση…" style="flex:1;border:none;outline:none;font-family:var(--font-body);font-size:13.5px;color:var(--text-strong);background:transparent;">
        </div>
        <div style="display:flex;align-items:center;gap:4px;margin-left:auto;">
          <button title="Λογαριασμός" style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:#fff;background:transparent;border:none;cursor:pointer;border-radius:3px;transition:color .16s,background .16s;" style-hover="color:var(--yellow-400);background:rgba(255,255,255,.08);">
            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          </button>
          <button title="Αγαπημένα" style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:#fff;background:transparent;border:none;cursor:pointer;border-radius:3px;transition:color .16s,background .16s;" style-hover="color:var(--yellow-400);background:rgba(255,255,255,.08);">
            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/></svg>
          </button>
          <button title="Καλάθι" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:#fff;background:transparent;border:none;cursor:pointer;border-radius:3px;transition:color .16s,background .16s;" style-hover="color:var(--yellow-400);background:rgba(255,255,255,.08);">
            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
            <span style="position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;background:var(--yellow-500);color:var(--navy-900);border-radius:999px;font-size:11px;font-weight:800;font-family:var(--font-display);display:flex;align-items:center;justify-content:center;">2</span>
          </button>
        </div>
      </div>
    </div>

    <nav style="background:#141540;" onMouseLeave="{{ closeMenu }}">
      <div style="max-width:1280px;margin:0 auto;padding:0 24px;position:relative;">
        <div style="display:flex;align-items:stretch;gap:0;height:48px;">

          <!-- Προϊόντα (mega dropdown) -->
          <button onMouseEnter="{{ openProducts }}" onClick="{{ onNav }}" style="display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 18px 0 0;background:transparent;border:none;border-bottom:3px solid {{ productsBorder }};cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:{{ productsColor }};transition:color .16s;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
            Προϊόντα
          </button>

          <span style="align-self:center;width:1px;height:20px;background:rgba(255,255,255,.16);margin:0 16px;"></span>

          <!-- Ανά Επάγγελμα (dropdown) -->
          <button onMouseEnter="{{ openProfessions }}" onClick="{{ onNav }}" style="display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 16px;white-space:nowrap;background:transparent;border:none;border-bottom:3px solid {{ professionsBorder }};cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:{{ professionsColor }};transition:color .16s;">
            Ανά Επάγγελμα
          </button>

          <!-- Static landing links -->
          <sc-for list="{{ navStatic }}" as="n" hint-placeholder-count="4">
            <button onMouseEnter="{{ closeMenu }}" onClick="{{ onNav }}" style="height:100%;padding:0 16px;white-space:nowrap;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);transition:color .16s;" style-hover="color:#F47C20;">{{ n }}</button>
          </sc-for>

        </div>

        <!-- ===== ΠΡΟΪΟΝΤΑ mega panel ===== -->
        <sc-if value="{{ productsOpen }}" hint-placeholder-val="{{ false }}">
          <div style="position:absolute;top:100%;left:24px;right:24px;background:#fff;border:1px solid var(--border-subtle);border-top:none;border-radius:0 0 6px 6px;box-shadow:var(--shadow-lg);padding:26px 28px 28px;z-index:60;animation:waw-fade .2s cubic-bezier(.2,0,.1,1) both;">
            <div style="display:grid;grid-template-columns:repeat(4,1fr) 232px;gap:24px 28px;">
              <sc-for list="{{ megaProducts }}" as="col" hint-placeholder-count="4">
                <div style="display:flex;flex-direction:column;gap:20px;">
                  <sc-for list="{{ col.groups }}" as="g" hint-placeholder-count="2">
                    <div style="display:flex;flex-direction:column;gap:8px;">
                      <div style="font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy-700);padding-bottom:6px;border-bottom:1px solid var(--border-subtle);">{{ g.title }}</div>
                      <sc-for list="{{ g.items }}" as="it" hint-placeholder-count="4">
                        <a href="#" onClick="{{ onNav }}" style="font-size:13.5px;color:var(--gray-600);text-decoration:none;transition:color .14s;" style-hover="color:#F47C20;">{{ it }}</a>
                      </sc-for>
                    </div>
                  </sc-for>
                </div>
              </sc-for>

              <!-- promo / quick access column -->
              <div style="display:flex;flex-direction:column;gap:12px;">
                <a href="#" onClick="{{ onNav }}" style="position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:16px;border-radius:6px;background:linear-gradient(160deg,rgba(22,37,84,.55),rgba(20,21,64,.9)),url('uploads/firefighter-suits-hanging-from-wall-station(1).jpg') center/cover no-repeat;color:#fff;text-decoration:none;overflow:hidden;">
                  <span style="position:absolute;top:-24px;right:-24px;width:96px;height:96px;background:var(--yellow-500);opacity:.16;border-radius:50%;"></span>
                  <span style="font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow-400);">Μόλις κυκλοφόρησαν</span>
                  <span style="font-family:var(--font-display);font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:-.01em;margin-top:4px;">Νέα Προϊόντα</span>
                </a>
                <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:6px;background:#F47C20;color:#141540;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;transition:background .16s;" style-hover="background:var(--yellow-600);">
                  Outlet
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                </a>
              </div>
            </div>
          </div>
        </sc-if>

        <!-- ===== ΑΝΑ ΕΠΑΓΓΕΛΜΑ panel ===== -->
        <sc-if value="{{ professionsOpen }}" hint-placeholder-val="{{ false }}">
          <div style="position:absolute;top:100%;left:24px;right:24px;background:#fff;border:1px solid var(--border-subtle);border-top:none;border-radius:0 0 6px 6px;box-shadow:var(--shadow-lg);padding:22px 24px;z-index:60;animation:waw-fade .2s cubic-bezier(.2,0,.1,1) both;">
            <div style="font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy-700);margin-bottom:14px;">Βρείτε εξοπλισμό για το επάγγελμά σας</div>
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;">

              <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:5px;background:var(--gray-50);text-decoration:none;transition:border-color .14s,background .14s;" style-hover="border-color:#F47C20;background:#fff;box-shadow:0 0 0 1px #F47C20;">
                <span style="display:inline-flex;flex-shrink:0;width:30px;height:30px;align-items:center;justify-content:center;border-radius:5px;background:#162554;color:var(--yellow-400);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M14 9h4l4 4v4a1 1 0 0 1-1 1h-1"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span>
                <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);line-height:1.15;">Υπηρεσίες / Logistics</span>
              </a>

              <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:5px;background:var(--gray-50);text-decoration:none;transition:border-color .14s,background .14s;" style-hover="border-color:#F47C20;background:#fff;box-shadow:0 0 0 1px #F47C20;">
                <span style="display:inline-flex;flex-shrink:0;width:30px;height:30px;align-items:center;justify-content:center;border-radius:5px;background:#162554;color:var(--yellow-400);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span>
                <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);line-height:1.15;">Τεχνίτες / Εγκαταστάσεις</span>
              </a>

              <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:5px;background:var(--gray-50);text-decoration:none;transition:border-color .14s,background .14s;" style-hover="border-color:#F47C20;background:#fff;box-shadow:0 0 0 1px #F47C20;">
                <span style="display:inline-flex;flex-shrink:0;width:30px;height:30px;align-items:center;justify-content:center;border-radius:5px;background:#162554;color:var(--yellow-400);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M2 18a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5"/><path d="M4 15v-3a6 6 0 0 1 6-6"/><path d="M14 6a6 6 0 0 1 6 6v3"/></svg></span>
                <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);line-height:1.15;">Σκληρή καταπόνηση / Κατασκευές</span>
              </a>

              <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:5px;background:var(--gray-50);text-decoration:none;transition:border-color .14s,background .14s;" style-hover="border-color:#F47C20;background:#fff;box-shadow:0 0 0 1px #F47C20;">
                <span style="display:inline-flex;flex-shrink:0;width:30px;height:30px;align-items:center;justify-content:center;border-radius:5px;background:#162554;color:var(--yellow-400);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2v2"/><path d="M10 2v2"/><path d="M14 2v2"/><path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/></svg></span>
                <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);line-height:1.15;">Ελαιοχρωματιστές / Ξηρά δόμηση</span>
              </a>

              <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:5px;background:var(--gray-50);text-decoration:none;transition:border-color .14s,background .14s;" style-hover="border-color:#F47C20;background:#fff;box-shadow:0 0 0 1px #F47C20;">
                <span style="display:inline-flex;flex-shrink:0;width:30px;height:30px;align-items:center;justify-content:center;border-radius:5px;background:#162554;color:var(--yellow-400);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/></svg></span>
                <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);line-height:1.15;">Χαμηλές Θερμοκρασίες / Βροχή</span>
              </a>

              <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:5px;background:var(--gray-50);text-decoration:none;transition:border-color .14s,background .14s;" style-hover="border-color:#F47C20;background:#fff;box-shadow:0 0 0 1px #F47C20;">
                <span style="display:inline-flex;flex-shrink:0;width:30px;height:30px;align-items:center;justify-content:center;border-radius:5px;background:#162554;color:var(--yellow-400);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg></span>
                <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);line-height:1.15;">Υψηλή Διακριτότητα HiVis</span>
              </a>

              <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:5px;background:var(--gray-50);text-decoration:none;transition:border-color .14s,background .14s;" style-hover="border-color:#F47C20;background:#fff;box-shadow:0 0 0 1px #F47C20;">
                <span style="display:inline-flex;flex-shrink:0;width:30px;height:30px;align-items:center;justify-content:center;border-radius:5px;background:#162554;color:var(--yellow-400);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg></span>
                <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);line-height:1.15;">Υψηλή Τάση &amp; Φωτιά</span>
              </a>

              <a href="#" onClick="{{ onNav }}" style="display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:5px;background:var(--gray-50);text-decoration:none;transition:border-color .14s,background .14s;" style-hover="border-color:#F47C20;background:#fff;box-shadow:0 0 0 1px #F47C20;">
                <span style="display:inline-flex;flex-shrink:0;width:30px;height:30px;align-items:center;justify-content:center;border-radius:5px;background:#162554;color:var(--yellow-400);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M14 19.9V16h3a2 2 0 0 0 2-2v-2H5v2c0 1.1.9 2 2 2h3v3.9a2 2 0 1 0 4 0Z"/><path d="M6 12V2h12v10"/><path d="M14 2v4"/><path d="M10 2v2"/></svg></span>
                <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);line-height:1.15;">Εστίαση</span>
              </a>

            </div>
          </div>
        </sc-if>

      </div>
    </nav>
  </header>
  <sc-if value="{{ anyMenuOpen }}" hint-placeholder-val="{{ false }}">
    <div data-print-hide style="position:fixed;left:0;right:0;bottom:0;top:0;background:rgba(20,21,64,.4);z-index:40;animation:waw-fade .2s ease both;pointer-events:none;"></div>
  </sc-if>

  <!-- ============ HERO ============ -->
  <section style="background:#141540;color:#fff;position:relative;overflow:hidden;">
    <div style="position:absolute;inset:0;background:#141540;"></div>
    <div style="position:absolute;top:0;right:0;width:50%;height:100%;overflow:hidden;">
      <img src="uploads/builder-uniform-wooden-background-flat-lay.webp" alt="Εξοπλισμός εργασίας" style="width:100%;height:100%;object-fit:cover;animation:waw-fadeup 1s cubic-bezier(.2,0,.1,1) both;animation-delay:.1s;">
      <div style="position:absolute;inset:0;background:linear-gradient(90deg,var(--navy-700) 0%,rgba(22,37,84,.55) 35%,rgba(22,37,84,.12) 100%);"></div>
    </div>
    <div style="position:absolute;top:-80px;right:44%;width:90px;height:140%;background:var(--yellow-500);opacity:.25;transform:skewX(-12deg);"></div>
    <div style="max-width:1280px;margin:0 auto;padding:84px 24px 92px;position:relative;">
      <span style="display:inline-block;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow-400);animation:waw-fadeup .6s cubic-bezier(.2,0,.1,1) both;animation-delay:.05s;">Inspiring Workwear</span>
      <h1 style="color:#fff;font-family:var(--font-display);font-weight:900;font-size:clamp(42px,6.2vw,80px);line-height:.98;text-transform:uppercase;letter-spacing:-.02em;margin:16px 0 0;max-width:600px;animation:waw-fadeup .7s cubic-bezier(.2,0,.1,1) both;animation-delay:.12s;">Αναδείξτε<br>την αξία σας</h1>
      <p style="font-size:20px;line-height:1.5;margin:22px 0 34px;max-width:520px;color:rgba(255,255,255,.85);animation:waw-fadeup .7s cubic-bezier(.2,0,.1,1) both;animation-delay:.2s;">Μείνετε <strong style="color:#fff;">ασφαλής</strong> και κερδίστε τις <strong style="color:#fff;">εντυπώσεις</strong>. Ρούχα εργασίας για επαγγελματίες που θέλουν να ξεχωρίζουν.</p>
    </div>
  </section>

  <!-- ============ SHOP BY TYPE ============ -->
  <section style="max-width:1280px;margin:0 auto;padding:64px 24px 8px;">
    <div style="display:flex;flex-direction:column;gap:6px;margin-bottom:26px;">
      <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#162554;">Αγοράστε ανά κατηγορία</span>
      <h2 style="font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.1;text-transform:uppercase;letter-spacing:-.02em;color:#141540;margin:0;">Τι ψάχνετε;</h2>
    </div>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">

      <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,0,.1,1),transform .6s cubic-bezier(.2,0,.1,1),box-shadow .2s,border-color .2s;position:relative;display:block;overflow:hidden;border-radius:6px;aspect-ratio:5/6;border:1px solid var(--border-subtle);background:var(--gray-50);text-decoration:none;" style-hover="box-shadow:var(--shadow-md);border-color:var(--navy-300);">
        <img src="uploads/ΕΝΔΥΣΗ.webp" alt="Ένδυση" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
        <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,37,84,0) 30%,rgba(22,37,84,.92) 100%);"></div>
        <div style="position:absolute;left:22px;bottom:22px;right:22px;color:#fff;">
          <div style="font-family:var(--font-display);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:-.01em;line-height:1;">Ένδυση</div>
          <div style="font-size:13.5px;color:rgba(255,255,255,.82);margin-top:6px;">Τζάκετ · Παντελόνια · Fleece · Hi-Vis</div>
        </div>
      </a>

      <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,0,.1,1),transform .6s cubic-bezier(.2,0,.1,1),box-shadow .2s,border-color .2s;position:relative;display:block;overflow:hidden;border-radius:6px;aspect-ratio:5/6;border:1px solid var(--border-subtle);background:var(--gray-50);text-decoration:none;" style-hover="box-shadow:var(--shadow-md);border-color:var(--navy-300);">
        <img src="uploads/ypodisi.webp" alt="Υπόδηση" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
        <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,37,84,0) 30%,rgba(22,37,84,.92) 100%);"></div>
        <div style="position:absolute;left:22px;bottom:22px;right:22px;color:#fff;">
          <div style="font-family:var(--font-display);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:-.01em;line-height:1;">Υπόδηση</div>
          <div style="font-size:13.5px;color:rgba(255,255,255,.82);margin-top:6px;">Παπούτσια ασφαλείας S3 · S3S · BOA</div>
        </div>
      </a>

      <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,0,.1,1),transform .6s cubic-bezier(.2,0,.1,1),box-shadow .2s,border-color .2s;position:relative;display:block;overflow:hidden;border-radius:6px;aspect-ratio:5/6;border:1px solid var(--border-subtle);background:var(--gray-50);text-decoration:none;" style-hover="box-shadow:var(--shadow-md);border-color:var(--navy-300);">
        <img src="uploads/accessories.jpg" alt="Αξεσουάρ" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
        <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,37,84,0) 30%,rgba(22,37,84,.92) 100%);"></div>
        <div style="position:absolute;left:22px;bottom:22px;right:22px;color:#fff;">
          <div style="font-family:var(--font-display);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:-.01em;line-height:1;">Αξεσουάρ</div>
          <div style="font-size:13.5px;color:rgba(255,255,255,.82);margin-top:6px;">Γάντια · Κράνη · Γυαλιά · Προστασία</div>
        </div>
      </a>

    </div>
  </section>

  <!-- ============ HI-VIS FEATURED GRID ============ -->
  <section style="max-width:1280px;margin:0 auto;padding:56px 24px;">
    <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px;">
      <div style="display:flex;flex-direction:column;gap:6px;">
        <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#162554;">Hi-Vis · Υψηλή διακριτότητα</span>
        <h2 style="font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.1;text-transform:uppercase;letter-spacing:-.02em;color:#141540;margin:0;">Νέα προϊόντα</h2>
      </div>
      <button onClick="{{ onNav }}" style="background:transparent;border:none;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#162554;display:inline-flex;align-items:center;gap:8px;padding:8px 2px;">Δείτε όλα
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
      </button>
    </div>
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;">
      <sc-for list="{{ featured }}" as="p" hint-placeholder-count="4">
        <div data-reveal style="height:100%;opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,0,.1,1),transform .6s cubic-bezier(.2,0,.1,1),box-shadow .18s,border-color .18s;display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;" style-hover="box-shadow:var(--shadow-md);border-color:var(--border-default);">
          <div style="position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;">
            <sc-if value="{{ p.badgeLabel }}" hint-placeholder-val="{{ true }}">
              <span style="position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-sm);line-height:1;background:{{ p.badgeBg }};color:{{ p.badgeColor }};border:1px solid {{ p.badgeBorder }};">{{ p.badgeLabel }}</span>
            </sc-if>
            <span style="position:absolute;top:12px;right:12px;z-index:2;font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--gray-400);">{{ p.sku }}</span>
            <img src="{{ p.image }}" alt="{{ p.title }}" style="width:100%;height:100%;object-fit:contain;padding:18px;box-sizing:border-box;">
          </div>
          <div style="padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;">
            <span style="font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#162554;">{{ p.brand }}</span>
            <h3 style="font-size:15px;font-weight:700;line-height:1.25;color:var(--text-strong);text-transform:uppercase;letter-spacing:-.01em;margin:0;">{{ p.title }}</h3>
            <div style="display:flex;gap:6px;">
              <sc-for list="{{ p.colors }}" as="c" hint-placeholder-count="2">
                <span title="{{ c.label }}" style="width:14px;height:14px;border-radius:999px;border:1px solid var(--border-default);background:{{ c.hex }};"></span>
              </sc-for>
            </div>
            <div style="margin-top:auto;display:flex;flex-direction:column;gap:1px;padding-top:6px;">
              <span style="font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--text-strong);white-space:nowrap;letter-spacing:-.01em;">{{ p.priceStr }}</span>
              <span style="font-size:12px;color:var(--text-muted);white-space:nowrap;">{{ p.exVatStr }} χωρίς ΦΠΑ</span>
            </div>
            <div style="display:flex;gap:8px;margin-top:2px;">
              <button onClick="{{ onNav }}" style="flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;background:#141540;color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:filter .16s;" style-hover="filter:brightness(1.35);">
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
                Καλάθι
              </button>
              <button onClick="{{ onNav }}" title="Αγαπημένα" style="width:42px;height:42px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#141540;border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s;" style-hover="border-color:#F47C20;background:#fff;color:#F47C20;--heart:#F47C20;--heartline:#F47C20;transform:translateY(-1px);">
                <svg width="19" height="19" viewBox="0 0 24 24" fill="var(--heart,none)" stroke="var(--heartline,currentColor)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/></svg>
              </button>
            </div>
          </div>
        </div>
      </sc-for>
    </div>
  </section>

  <!-- ============ SHOP BY PROFESSION ============ -->
  <sc-if value="{{ showProfessions }}" hint-placeholder-val="{{ true }}">
  <section style="max-width:1280px;margin:0 auto;padding:16px 24px 8px;">
    <div style="background:var(--navy-900);color:#fff;border-radius:10px;padding:48px 44px;">
      <div style="display:flex;flex-direction:column;gap:6px;margin-bottom:28px;">
        <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow-400);">Ανά επάγγελμα</span>
        <h2 style="font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.1;text-transform:uppercase;letter-spacing:-.02em;color:#fff;margin:0;">Φτιαγμένα για τη δουλειά σας</h2>
      </div>
      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;">

        <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1),background .2s,border-color .2s;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-decoration:none;min-height:118px;" style-hover="background:rgba(255,255,255,.08);border-color:var(--yellow-500);">
          <span style="color:var(--yellow-400);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M14 9h4l4 4v4a1 1 0 0 1-1 1h-1"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span>
          <span style="font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-top:auto;">Υπηρεσίες / Logistics</span>
        </a>

        <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1),background .2s,border-color .2s;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-decoration:none;" style-hover="background:rgba(255,255,255,.08);border-color:var(--yellow-500);">
          <span style="color:var(--yellow-400);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2 18a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5"/><path d="M4 15v-3a6 6 0 0 1 6-6"/><path d="M14 6a6 6 0 0 1 6 6v3"/></svg></span>
          <span style="font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-top:auto;">Σκληρή καταπόνηση / Κατασκευές</span>
        </a>

        <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1),background .2s,border-color .2s;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-decoration:none;" style-hover="background:rgba(255,255,255,.08);border-color:var(--yellow-500);">
          <span style="color:var(--yellow-400);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span>
          <span style="font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-top:auto;">Τεχνίτες / Εγκαταστάσεις</span>
        </a>

        <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1),background .2s,border-color .2s;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-decoration:none;" style-hover="background:rgba(255,255,255,.08);border-color:var(--yellow-500);">
          <span style="color:var(--yellow-400);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg></span>
          <span style="font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-top:auto;">Υψηλή τάση &amp; Φωτιά</span>
        </a>

        <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1),background .2s,border-color .2s;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-decoration:none;" style-hover="background:rgba(255,255,255,.08);border-color:var(--yellow-500);">
          <span style="color:var(--yellow-400);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><path d="M6 2v2"/><path d="M10 2v2"/><path d="M14 2v2"/></svg></span>
          <span style="font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-top:auto;">Εστίαση</span>
        </a>

        <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1),background .2s,border-color .2s;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-decoration:none;min-height:118px;" style-hover="background:rgba(255,255,255,.08);border-color:var(--yellow-500);">
          <span style="color:var(--yellow-400);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 19.9V16h3a2 2 0 0 0 2-2v-2H5v2c0 1.1.9 2 2 2h3v3.9a2 2 0 1 0 4 0Z"/><path d="M6 12V2h12v10"/><path d="M14 2v4"/><path d="M10 2v2"/></svg></span>
          <span style="font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-top:auto;">Ελαιοχρωματιστές / Ξηρά δόμηση</span>
        </a>

        <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1),background .2s,border-color .2s;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-decoration:none;min-height:118px;" style-hover="background:rgba(255,255,255,.08);border-color:var(--yellow-500);">
          <span style="color:var(--yellow-400);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/></svg></span>
          <span style="font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-top:auto;">Χαμηλές θερμοκρασίες / Βροχή</span>
        </a>

        <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1),background .2s,border-color .2s;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-decoration:none;min-height:118px;" style-hover="background:rgba(255,255,255,.08);border-color:var(--yellow-500);">
          <span style="color:var(--yellow-400);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg></span>
          <span style="font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-top:auto;">Υψηλή διακριτότητα HiVis</span>
        </a>

      </div>
    </div>
  </section>
  </sc-if>

  <!-- ============ VALUE PROPS BAND ============ -->
  <section style="max-width:1280px;margin:0 auto;padding:30px 24px;">
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;">
      <div data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1);display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--surface-subtle);">
        <span style="color:var(--brand-primary);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M14 9h4l4 4v4a1 1 0 0 1-1 1h-1"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span>
        <div style="font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-strong);">Άμεση αποστολή</div>
        <div style="font-size:13px;color:var(--text-muted);">Σε Ελλάδα και Κύπρο</div>
      </div>
      <div data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1);display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--surface-subtle);">
        <span style="color:var(--brand-primary);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg></span>
        <div style="font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-strong);">Δωρεάν επιστροφή</div>
        <div style="font-size:13px;color:var(--text-muted);">Εντός 30 ημερών</div>
      </div>
      <div data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1);display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--surface-subtle);">
        <span style="color:var(--brand-primary);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1Z"/></svg></span>
        <div style="font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-strong);">Πιστοποιημένα</div>
        <div style="font-size:13px;color:var(--text-muted);">EN ISO πρότυπα ασφαλείας</div>
      </div>
      <div data-reveal style="opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.2,0,.1,1),transform .55s cubic-bezier(.2,0,.1,1);display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--surface-subtle);">
        <span style="color:var(--brand-primary);display:inline-flex;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg></span>
        <div style="font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-strong);">High Quality</div>
        <div style="font-size:13px;color:var(--text-muted);">Ρούχα εργασίας & επαγγελματικές στολές</div>
      </div>
    </div>
  </section>

  <!-- ============ FOOTWEAR GRID ============ -->
  <section style="max-width:1280px;margin:0 auto;padding:0 24px;">
    <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px;">
      <div style="display:flex;flex-direction:column;gap:6px;">
        <span style="font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#162554;">Υπόδηση &amp; περισσότερα</span>
        <h2 style="font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.1;text-transform:uppercase;letter-spacing:-.02em;color:#141540;margin:0;">Ασφάλεια από το πρώτο βήμα</h2>
      </div>
      <button onClick="{{ onNav }}" style="background:transparent;border:none;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#162554;display:inline-flex;align-items:center;gap:8px;padding:8px 2px;">Δείτε τα όλα
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
      </button>
    </div>
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;">
      <sc-for list="{{ footwear }}" as="p" hint-placeholder-count="4">
        <div data-reveal style="height:100%;opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,0,.1,1),transform .6s cubic-bezier(.2,0,.1,1),box-shadow .18s,border-color .18s;display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;" style-hover="box-shadow:var(--shadow-md);border-color:var(--border-default);">
          <div style="position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;">
            <sc-if value="{{ p.badgeLabel }}" hint-placeholder-val="{{ true }}">
              <span style="position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-sm);line-height:1;background:{{ p.badgeBg }};color:{{ p.badgeColor }};border:1px solid {{ p.badgeBorder }};">{{ p.badgeLabel }}</span>
            </sc-if>
            <span style="position:absolute;top:12px;right:12px;z-index:2;font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--gray-400);">{{ p.sku }}</span>
            <img src="{{ p.image }}" alt="{{ p.title }}" style="width:100%;height:100%;object-fit:contain;padding:18px;box-sizing:border-box;">
          </div>
          <div style="padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;">
            <span style="font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#162554;">{{ p.brand }}</span>
            <h3 style="font-size:15px;font-weight:700;line-height:1.25;color:var(--text-strong);text-transform:uppercase;letter-spacing:-.01em;margin:0;">{{ p.title }}</h3>
            <div style="display:flex;gap:6px;">
              <sc-for list="{{ p.colors }}" as="c" hint-placeholder-count="2">
                <span title="{{ c.label }}" style="width:14px;height:14px;border-radius:999px;border:1px solid var(--border-default);background:{{ c.hex }};"></span>
              </sc-for>
            </div>
            <div style="margin-top:auto;display:flex;flex-direction:column;gap:1px;padding-top:6px;">
              <span style="font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--text-strong);white-space:nowrap;letter-spacing:-.01em;">{{ p.priceStr }}</span>
              <span style="font-size:12px;color:var(--text-muted);white-space:nowrap;">{{ p.exVatStr }} χωρίς ΦΠΑ</span>
            </div>
            <div style="display:flex;gap:8px;margin-top:2px;">
              <button onClick="{{ onNav }}" style="flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;background:#141540;color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:filter .16s;" style-hover="filter:brightness(1.35);">
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
                Καλάθι
              </button>
              <button onClick="{{ onNav }}" title="Αγαπημένα" style="width:42px;height:42px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#141540;border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s;" style-hover="border-color:#F47C20;background:#fff;color:#F47C20;--heart:#F47C20;--heartline:#F47C20;transform:translateY(-1px);">
                <svg width="19" height="19" viewBox="0 0 24 24" fill="var(--heart,none)" stroke="var(--heartline,currentColor)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/></svg>
              </button>
            </div>
          </div>
        </div>
      </sc-for>
    </div>
  </section>

  <!-- ============ SHOP BY GENDER ============ -->
  <section style="max-width:1280px;margin:0 auto;padding:40px 24px;">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
      <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,0,.1,1),transform .6s cubic-bezier(.2,0,.1,1);position:relative;overflow:hidden;border-radius:6px;min-height:190px;background:#141540;text-decoration:none;display:flex;align-items:center;padding:32px 34px;" style-hover="filter:brightness(1.35);">
        <div style="position:absolute;right:-30px;bottom:-40px;font-family:var(--font-display);font-weight:900;font-size:200px;line-height:1;color:rgba(255,255,255,.05);letter-spacing:-.05em;">Α</div>
        <div style="position:relative;">
          <span style="font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#F47C20;">Συλλογή</span>
          <div style="font-family:var(--font-display);font-weight:800;font-size:38px;text-transform:uppercase;letter-spacing:-.02em;color:#fff;line-height:1;margin-top:8px;">Ανδρικά</div>
          <span style="display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;">Δείτε τη συλλογή
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
          </span>
        </div>
      </a>
      <a href="#" onClick="{{ onNav }}" data-reveal style="opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,0,.1,1),transform .6s cubic-bezier(.2,0,.1,1);position:relative;overflow:hidden;border-radius:6px;min-height:190px;background:#141540;text-decoration:none;display:flex;align-items:center;padding:32px 34px;" style-hover="filter:brightness(1.35);">
        <div style="position:absolute;right:-30px;bottom:-40px;font-family:var(--font-display);font-weight:900;font-size:200px;line-height:1;color:rgba(255,255,255,.05);letter-spacing:-.05em;">Γ</div>
        <div style="position:relative;">
          <span style="font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#F47C20;">Συλλογή</span>
          <div style="font-family:var(--font-display);font-weight:800;font-size:38px;text-transform:uppercase;letter-spacing:-.02em;color:#fff;line-height:1;margin-top:8px;">Γυναικεία</div>
          <span style="display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;">Δείτε τη συλλογή
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
          </span>
        </div>
      </a>
    </div>
  </section>

  <!-- ============ BRAND MARQUEE ============ -->
  <section style="border-top:1px solid var(--border-subtle);background:var(--surface-subtle);overflow:hidden;">
    <div style="max-width:1280px;margin:0 auto;padding:36px 24px 12px;">
      <div style="text-align:center;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#162554;">Brands που εμπιστεύεστε</div>
    </div>
    <div style="padding:8px 0 40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);">
      <div style="display:flex;width:max-content;gap:14px;animation:waw-marquee {{ marqueeDur }} linear infinite;">
        <sc-for list="{{ brandsLoop }}" as="b" hint-placeholder-count="12">
          <span style="display:flex;align-items:center;justify-content:center;width:170px;height:80px;background:#fff;border:1px solid var(--border-subtle);border-radius:4px;flex-shrink:0;">
            <img src="{{ b.src }}" alt="{{ b.alt }}" style="max-width:112px;max-height:44px;width:auto;height:auto;object-fit:contain;">
          </span>
        </sc-for>
      </div>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer style="background:var(--navy-900);color:#fff;border-top:3px solid #F47C20;">
    <div style="border-bottom:1px solid rgba(255,255,255,.1);">
      <div style="max-width:1280px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;">
        <div style="max-width:520px;">
          <div style="font-family:var(--font-display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:-.01em;">Κερδίστε έκπτωση <span style="color:#F47C20;">10%</span></div>
          <div style="color:rgba(255,255,255,.7);font-size:14px;margin-top:4px;">Ενημερωθείτε πρώτοι για αποκλειστικές προσφορές στην πρώτη σας παραγγελία.</div>
        </div>
        <div style="display:flex;gap:10px;min-width:320px;flex:1;max-width:440px;">
          <div style="flex:1;display:flex;align-items:center;height:42px;background:#fff;border-radius:3px;padding:0 14px;">
            <input placeholder="Email" style="flex:1;border:none;outline:none;font-size:14px;font-family:var(--font-body);color:var(--text-strong);background:transparent;">
          </div>
          <button style="height:42px;padding:0 24px;background:#F47C20;color:#fff;border:1px solid #F47C20;cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;transition:background .16s,color .16s;" style-hover="background:#fff;color:#F47C20;">Εγγραφή</button>
        </div>
      </div>
    </div>
    <div style="max-width:1280px;margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;">
      <div style="display:flex;flex-direction:column;gap:14px;">
        <img src="assets/logo-2026.png" alt="Wear At Work" style="height:30px;align-self:flex-start;">
        <p style="color:rgba(255,255,255,.68);font-size:14px;line-height:1.6;margin:0;max-width:280px;">Φτιαγμένα για δουλειά. Ταιριαστά στην καθημερινότητα.</p>
        <div style="display:flex;gap:10px;color:rgba(255,255,255,.6);font-size:13px;align-items:center;">
          <svg style="color:#F47C20;flex-shrink:0;" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1Z"/></svg>
          Κύπρου 3 &amp; Εθνικής Αντιστάσεως, Άγιος Δημήτριος 172 36
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:12px;">
        <h4 style="font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0;padding-bottom:8px;border-bottom:2px solid #F47C20;align-self:flex-start;">Πλοήγηση</h4>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Αρχική</a>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Σχετικά με μας</a>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Οδηγός προϊόντων</a>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Επικοινωνία</a>
      </div>
      <div style="display:flex;flex-direction:column;gap:12px;">
        <h4 style="font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0;padding-bottom:8px;border-bottom:2px solid #F47C20;align-self:flex-start;">Κατάστημα</h4>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Ανδρικά</a>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Γυναικεία</a>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Αξεσουάρ</a>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Υπόδηση</a>
      </div>
      <div style="display:flex;flex-direction:column;gap:12px;">
        <h4 style="font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0;padding-bottom:8px;border-bottom:2px solid #F47C20;align-self:flex-start;">Χρήσιμα</h4>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Αποστολές</a>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Πληρωμές</a>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Επιστροφές</a>
        <a href="#" onClick="{{ onNav }}" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Όροι χρήσης</a>
      </div>
    </div>
    <div style="border-top:1px solid rgba(255,255,255,.1);">
      <div style="max-width:1280px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;">
        <span style="color:rgba(255,255,255,.5);font-size:13px;">© 2026 Wear at Work. All rights reserved.</span>
      </div>
    </div>
  </footer>

  <!-- Scroll to top -->
  <button data-print-hide onClick="{{ scrollTop }}" aria-label="Επιστροφή στην κορυφή" style="position:fixed;right:24px;bottom:24px;z-index:70;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:#141540;color:#fff;border:none;border-radius:4px;box-shadow:var(--shadow-lg);cursor:pointer;opacity:{{ scrollBtnOpacity }};transform:translateY({{ scrollBtnY }});pointer-events:{{ scrollBtnPE }};transition:opacity .25s cubic-bezier(.2,0,.1,1),transform .25s cubic-bezier(.2,0,.1,1),background .16s;" style-hover="background:#F47C20;color:#141540;">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
  </button>

</div>
</doc-page>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1280,&quot;height&quot;:900},&quot;bannerVisible&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Layout&quot;},&quot;showProfessions&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Layout&quot;},&quot;marqueeSpeed&quot;:{&quot;editor&quot;:&quot;range&quot;,&quot;default&quot;:34,&quot;min&quot;:12,&quot;max&quot;:60,&quot;step&quot;:2,&quot;unit&quot;:&quot;s&quot;,&quot;tsType&quot;:&quot;number&quot;,&quot;section&quot;:&quot;Motion&quot;}}">
class Component extends DCLogic {
  state = { menu: null, scrolled: false };
  renderVals() {
    const menu = this.state.menu;
    const megaProducts = [
      { groups: [
        { title:'Ανδρικά', items:['Άνω Ένδυση','Κάτω Ένδυση'] },
        { title:'Γυναικεία', items:['Άνω Ένδυση','Κάτω Ένδυση'] },
        { title:'High Visibility', items:['Τζάκετ','Γιλέκα','Παντελόνια','Φούτερ','T-shirt / Polo'] },
      ] },
      { groups: [
        { title:'Παντελόνια', items:['Work Pants','Shell Pants','Rain Pants','HiVis Pants','Construction Pants'] },
        { title:'Φόρμες', items:['Βερμούδες / Κάπρι','Φόρμες Τιράντα','Ολόσωμες Φόρμες'] },
      ] },
      { groups: [
        { title:'Τζάκετ', items:['Work Jackets','Fleece Jackets','Soft-shell Jackets','Shell Jackets','Rain Jackets','Winter Jackets','HiVis Jackets'] },
        { title:'Υπόδηση', items:['Χαμηλά με Προστασία Δακτ.','Μποτάκια με Προστασία','Μπότες','Χωρίς Προστασία Δακτ.'] },
      ] },
      { groups: [
        { title:'Άνω Ένδυση', items:['Γιλέκα','Φούτερ με Φερμουάρ','Φούτερ με Κουκούλα','Πουκάμισα','T-shirt / Polo','Ισοθερμικά / Base Layers','Εσώρουχα'] },
        { title:'Αξεσουάρ', items:['Γάντια','Κράνη','Γυαλιά προστασίας','Οργάνωση Εργαλείων','Προστασία Πτώσης','Επιγονατίδες','Κάλτσες','Όλα τα αξεσουάρ'] },
      ] },
    ];
    const professions = ['Υπηρεσίες / Logistics','Τεχνίτες / Εγκαταστάσεις','Σκληρή καταπόνηση / Κατασκευές','Ελαιοχρωματιστές / Ξηρά δόμηση','Χαμηλές Θερμοκρασίες / Βροχή','Υψηλή Διακριτότητα HiVis','Υψηλή Τάση & Φωτιά','Εστίαση'];
    const eur = (n) => n.toLocaleString('el-GR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
    const badgeStyle = { hivis: { bg: '#f47c20', color: '#ffffff' }, new: { bg: '#162554', color: '#ffffff' }, bestseller: { bg: '#ffffff', color: '#F47C20', border: '#F47C20' } };
    const decorate = (arr) => arr.map(p => {
      const b = p.badge ? badgeStyle[p.badge.tone] : null;
      return { ...p, priceStr: eur(p.price), exVatStr: eur(p.exVat != null ? p.exVat : p.price / 1.24),
        badgeLabel: p.badge ? p.badge.label : null,
        badgeBg: b ? b.bg : 'transparent', badgeColor: b ? b.color : 'transparent', badgeBorder: b && b.border ? b.border : 'transparent' };
    });
    const featured = [
      { title:'Alna 4X CNCT Γιλέκο', brand:'Helly Hansen', sku:'77130', price:198.40, exVat:160, image:'uploads/8877130_369.webp', colors:[{value:'y',hex:'#ffd300',label:'Yellow/Ebony'}] },
      { title:'ICU T-Shirt', brand:'Helly Hansen', sku:'79271', price:206.09, exVat:166.20, image:'uploads/8879271_269.webp', colors:[{value:'o',hex:'#ff6a13',label:'Orange/Ebony'},{value:'y',hex:'#ffd300',label:'Yellow/Ebony'}] },
      { title:'ΠΑΝΤΕΛΟΝΙ STRETCH CONSTRUCTION EN ISO 20471 CLASS 1', brand:'Projob', sku:'6540', price:206.09, exVat:166.20, badge:{tone:'bestseller',label:'Bestseller'}, image:'uploads/646540_10_Yellow_Navy_Front.webp', colors:[{value:'ob',hex:'#ff6a13',label:'Orange/Black'},{value:'yb',hex:'#ffd300',label:'Yellow/Black'},{value:'by',hex:'#1e3049',label:'Navy/Yellow'}] },
      { title:'ΜΠΟΥΦΑΝ ICU HI VIS INSULATED WINTER', brand:'Helly Hansen', sku:'71372', price:372, exVat:300, badge:{tone:'new',label:'Νέο'}, image:'uploads/8871372_269.webp', colors:[{value:'o',hex:'#ff6a13',label:'Orange'}] },
    ];
    const footwear = [
      { title:'MANCHESTER MXR MID S7S', brand:'Helly Hansen', sku:'78324', price:179.80, exVat:145, image:'uploads/8878324_992.webp', colors:[{value:'b',hex:'#20242b',label:'Black/Orange'}] },
      { title:'EVOLUTION II', brand:'Shoes For Crews', sku:'21211', price:109, exVat:87.90, image:'uploads/21211_0.webp', colors:[{value:'b',hex:'#20242b',label:'Black'}] },
      { title:'KENSINGTON MXR MID BOA S3S', brand:'Helly Hansen', sku:'78360', price:235.60, exVat:190, badge:{tone:'bestseller',label:'Bestseller'}, image:'uploads/8878360_991.webp', colors:[{value:'b',hex:'#20242b',label:'Black'}] },
      { title:'DEFENSE HIGH O2 HRO WR SRC', brand:'Shoes For Crews', sku:'62211', price:129, exVat:104.03, image:'uploads/62211_0.webp', colors:[{value:'b',hex:'#20242b',label:'Black'}] },
    ];
    const brands = [
      { src:'uploads/hh.svg', alt:'Helly Hansen' },
      { src:'uploads/projob_black.svg', alt:'Projob' },
      { src:'uploads/shoes.svg', alt:'Shoes For Crews' },
      { src:'uploads/reebok-1.svg', alt:'Reebok' },
      { src:'uploads/puma.svg', alt:'Puma' },
      { src:'uploads/guardio-1.svg', alt:'Guardio' },
      { src:'uploads/petzl.svg', alt:'Petzl' },
      { src:'uploads/salomon-1.svg', alt:'Salomon' },
      { src:'uploads/skylotec.svg', alt:'Skylotec' },
      { src:'uploads/tegera.svg', alt:'Tegera' },
      { src:'uploads/monitor-1.svg', alt:'Monitor' },
      { src:'uploads/mozo-1.svg', alt:'Mozo' },
    ];
    return {
      featured: decorate(featured), footwear: decorate(footwear),
      brandsLoop: brands.concat(brands),
      payments: ['VISA','MASTERCARD','AMEX','PAYPAL','IRIS'],
      navTypes: ['Ένδυση','Υπόδηση','Αξεσουάρ'],
      navGender: ['Ανδρικά','Γυναικεία'],
      navStatic: ['Οδηγός Προϊόντων','Βιωσιμότητα','Σχετικά με μας','Επικοινωνία'],
      megaProducts, professions,
      productsOpen: menu === 'products',
      professionsOpen: menu === 'professions',
      anyMenuOpen: menu !== null,
      productsColor: menu === 'products' ? 'var(--yellow-400)' : '#fff',
      productsBorder: menu === 'products' ? 'var(--yellow-500)' : 'transparent',
      productsChevron: menu === 'products' ? '180deg' : '0deg',
      professionsColor: menu === 'professions' ? 'var(--yellow-400)' : 'rgba(255,255,255,.9)',
      professionsBorder: menu === 'professions' ? 'var(--yellow-500)' : 'transparent',
      professionsChevron: menu === 'professions' ? '180deg' : '0deg',
      openProducts: () => this.setState({ menu: 'products' }),
      openProfessions: () => this.setState({ menu: 'professions' }),
      closeMenu: () => this.setState({ menu: null }),
      scrollTop: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
      scrollBtnOpacity: this.state.scrolled ? 1 : 0,
      scrollBtnY: this.state.scrolled ? '0' : '12px',
      scrollBtnPE: this.state.scrolled ? 'auto' : 'none',
      marqueeDur: (this.props.marqueeSpeed ?? 34) + 's',
      showProfessions: this.props.showProfessions ?? true,
      bannerVisible: this.props.bannerVisible ?? true,
      onNav: (e) => { if (e && e.preventDefault) e.preventDefault(); },
    };
  }

  componentWillUnmount() {
    if (this._onScroll) window.removeEventListener('scroll', this._onScroll);
  }

  componentDidMount() {
    window.__homeMounted = true;
    this._onScroll = () => {
      const s = window.scrollY > 400;
      if (s !== this.state.scrolled) this.setState({ scrolled: s });
    };
    window.addEventListener('scroll', this._onScroll, { passive: true });
    this._onScroll();
    const reveal = (el) => { el.style.opacity = 1; el.style.transform = 'none'; };
    let io = null;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); }
        });
      }, { threshold: 0.1, rootMargin: '0px 0px -5% 0px' });
    }
    const scan = () => {
      document.querySelectorAll('[data-reveal]:not([data-seen])').forEach(el => {
        el.setAttribute('data-seen', '');
        const sibs = Array.from(el.parentElement.querySelectorAll(':scope > [data-reveal]'));
        el.style.transitionDelay = (Math.max(0, sibs.indexOf(el)) * 70) + 'ms';
        if (io) io.observe(el); else reveal(el);
      });
    };
    scan();
    let n = 0;
    const iv = setInterval(() => { scan(); if (++n > 12) clearInterval(iv); }, 300);
    // Failsafe: never leave content hidden if the observer never fires.
    setTimeout(() => { document.querySelectorAll('[data-reveal]').forEach(reveal); }, 4000);
  }
}
</script>
</body>
</html>
