<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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);}
  :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-fade{from{opacity:0;}to{opacity:1;}}
  @keyframes waw-pop{0%{transform:scale(.96);opacity:0;}100%{transform:scale(1);opacity:1;}}
</style>
</helmet>
<div lang="el" style="font-family:var(--font-body);color:var(--text-body);background:var(--surface-page);min-height:100vh;">

  <!-- ============ 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 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="Home v2.dc.html" 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;">{{ cartCount }}</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;">
          <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>
          <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>
          <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>

        <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>
              <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>

        <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;">
              <sc-for list="{{ professions }}" as="p" hint-placeholder-count="8">
                <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="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>
                  <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;">{{ p }}</span>
                </a>
              </sc-for>
            </div>
          </div>
        </sc-if>
      </div>
    </nav>
  </header>

  <!-- ============ BREADCRUMB ============ -->
  <div style="border-bottom:1px solid var(--border-subtle);background:#fff;">
    <div style="max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text-muted);">
      <sc-for list="{{ crumbs }}" as="c" hint-placeholder-count="6">
        <a href="#" onClick="{{ onNav }}" style="color:{{ c.color }};text-decoration:none;font-weight:{{ c.weight }};transition:color .14s;" style-hover="color:#F47C20;">{{ c.label }}</a>
        <span style="color:var(--gray-300);">/</span>
      </sc-for>
      <span style="font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-strong);">Manchester Service Pant</span>
    </div>
  </div>

  <!-- ============ PRODUCT ============ -->
  <section style="max-width:1280px;margin:0 auto;padding:32px 24px 8px;">
    <div style="display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:52px;align-items:start;">

      <!-- ---- GALLERY (left) ---- -->
      <div style="display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;position:sticky;top:170px;animation:waw-fadeup .6s cubic-bezier(.2,0,.1,1) both;">
        <div style="display:flex;flex-direction:column;gap:10px;">
          <sc-for list="{{ gallery }}" as="g" hint-placeholder-count="4">
            <button onClick="{{ g.select }}" style="width:78px;height:92px;padding:6px;background:#fff;border:1px solid {{ g.border }};border-radius:4px;cursor:pointer;box-shadow:{{ g.ring }};transition:border-color .16s,box-shadow .16s;" style-hover="border-color:#8e9cc4;">
              <img src="{{ g.src }}" alt="{{ g.alt }}" style="width:100%;height:100%;object-fit:contain;display:block;">
            </button>
          </sc-for>
        </div>
        <div style="position:relative;background:#fff;border:1px solid var(--border-subtle);border-radius:6px;overflow:hidden;aspect-ratio:4/5;">
          <span style="position:absolute;top:16px;right:16px;z-index:3;display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:var(--radius-sm);line-height:1;background:#f47c20;color:#ffffff;border:1px solid #f47c20;">-40%</span>
          <span style="position:absolute;top:16px;left:16px;z-index:3;display:flex;align-items:center;justify-content:center;width:74px;height:56px;background:#fff;border:1px solid var(--border-subtle);border-radius:4px;padding:6px;box-sizing:border-box;">
            <img src="uploads/hh.svg" alt="Helly Hansen Workwear" style="max-width:100%;max-height:100%;object-fit:contain;">
          </span>
          <img src="{{ mainImage }}" alt="Manchester Service Pant" style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:26px;box-sizing:border-box;transition:transform .35s cubic-bezier(.2,0,.1,1);" style-hover="transform:scale(1.09);">
          <button onClick="{{ openZoom }}" aria-label="Μεγέθυνση" title="Μεγέθυνση" style="position:absolute;right:16px;bottom:16px;z-index:3;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border:1px solid var(--border-subtle);border-radius:3px;color:#141540;cursor:pointer;transition:background .16s,color .16s;" style-hover="background:#141540;color:#fff;">
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/><path d="M11 8v6"/><path d="M8 11h6"/></svg>
          </button>
          <button onClick="{{ prevImage }}" aria-label="Προηγούμενη" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);border:1px solid var(--border-subtle);border-radius:50%;color:#141540;cursor:pointer;transition:background .16s,color .16s;" style-hover="background:#141540;color:#fff;">
            <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="m15 18-6-6 6-6"/></svg>
          </button>
          <button onClick="{{ nextImage }}" aria-label="Επόμενη" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);border:1px solid var(--border-subtle);border-radius:50%;color:#141540;cursor:pointer;transition:background .16s,color .16s;" style-hover="background:#141540;color:#fff;">
            <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>
          </button>
        </div>
      </div>

      <!-- ---- INFO (right) ---- -->
      <div style="display:flex;flex-direction:column;animation:waw-fadeup .6s cubic-bezier(.2,0,.1,1) both;animation-delay:.08s;">

        <div style="display:flex;align-items:center;gap:10px;">
          <span style="font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#162554;">Helly Hansen Workwear</span>
          <span style="width:4px;height:4px;border-radius:50%;background:var(--gray-300);"></span>
          <span style="font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--text-muted);">77525</span>
        </div>

        <h1 style="font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,42px);line-height:1.04;text-transform:uppercase;letter-spacing:-.02em;color:#141540;margin:10px 0 0;">Manchester Service Pant</h1>
        <p style="font-size:16px;line-height:1.55;color:var(--text-muted);margin:12px 0 0;max-width:520px;">Παντελόνι εργασίας service</p>

        <div style="height:1px;background:var(--border-subtle);margin:24px 0;"></div>

        <!-- price -->
        <div style="display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;">
          <span style="font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-.02em;color:{{ priceColor }};line-height:1;">{{ priceStr }}</span>
          <sc-if value="{{ hasDiscount }}" hint-placeholder-val="{{ true }}">
            <span style="font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--gray-400);text-decoration:line-through;">68,20 €</span>
          </sc-if>
        </div>
        <div style="font-size:13.5px;color:var(--text-muted);margin-top:7px;">{{ exVatStr }} χωρίς ΦΠΑ · Κωδικός προϊόντος: <span style="color:var(--text-strong);">{{ variantCode }}</span></div>

        <!-- colour -->
        <div style="margin-top:26px;">
          <div style="display:flex;align-items:baseline;gap:8px;">
            <span style="font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong);">Χρώμα</span>
            <span style="font-size:13px;color:var(--text-muted);">{{ colorLabel }}</span>
          </div>
          <div style="display:flex;gap:12px;margin-top:12px;">
            <sc-for list="{{ colors }}" as="c" hint-placeholder-count="3">
              <button onClick="{{ c.select }}" title="{{ c.label }}" style="width:34px;height:34px;padding:0;border-radius:50%;background:{{ c.hex }};border:2px solid #fff;box-shadow:{{ c.ring }};cursor:pointer;transition:box-shadow .16s,transform .16s;" style-hover="transform:translateY(-2px);"></button>
            </sc-for>
          </div>
        </div>

        <!-- size -->
        <div style="margin-top:26px;">
          <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
            <div style="display:flex;align-items:baseline;gap:8px;">
              <span style="font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong);">Μέγεθος</span>
              <span style="font-size:13px;color:var(--text-muted);">{{ sizeLabel }}</span>
            </div>
            <a href="#" onClick="{{ onNav }}" style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#162554;text-decoration:underline;text-underline-offset:3px;">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 8.7 8.7 21.3a1 1 0 0 1-1.4 0l-4.6-4.6a1 1 0 0 1 0-1.4L15.3 2.7a1 1 0 0 1 1.4 0l4.6 4.6a1 1 0 0 1 0 1.4Z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/></svg>
              Οδηγός μεγεθών
            </a>
          </div>
          <div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;">
            <sc-for list="{{ sizes }}" as="s" hint-placeholder-count="24">
              <button onClick="{{ s.select }}" disabled="{{ s.disabled }}" title="{{ s.title }}" style="min-width:52px;height:38px;padding:0 10px;background:{{ s.bg }};color:{{ s.color }};border:1px solid {{ s.border }};border-radius:3px;cursor:{{ s.cursor }};font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.02em;text-decoration:{{ s.strike }};transition:background .14s,color .14s,border-color .14s;" style-hover="border-color:#141540;">{{ s.label }}</button>
            </sc-for>
          </div>
          <div style="display:flex;align-items:center;gap:18px;margin-top:12px;flex-wrap:wrap;">
            <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:{{ stockColor }};">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
              {{ stockLabel }}
            </span>
          </div>
        </div>

        <!-- buy row -->
        <div style="display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;">
          <div style="display:flex;align-items:center;height:52px;border:1px solid var(--border-default);border-radius:3px;overflow:hidden;">
            <button onClick="{{ dec }}" aria-label="Μείωση" style="width:44px;height:100%;background:#fff;border:none;cursor:pointer;font-size:20px;color:#141540;transition:background .14s;" style-hover="background:var(--gray-50);">−</button>
            <span style="width:44px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--text-strong);">{{ qty }}</span>
            <button onClick="{{ inc }}" aria-label="Αύξηση" style="width:44px;height:100%;background:#fff;border:none;cursor:pointer;font-size:20px;color:#141540;transition:background .14s;" style-hover="background:var(--gray-50);">+</button>
          </div>
          <button onClick="{{ addToCart }}" style="flex:1;min-width:240px;height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#141540;color:#fff;border:none;border-radius:3px;cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.09em;text-transform:uppercase;transition:filter .16s;" style-hover="filter:brightness(1.35);">
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
            {{ cartLabel }}
          </button>
          <button onClick="{{ toggleWish }}" title="Προσθήκη στη λίστα επιθυμιών" style="width:52px;height:52px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:{{ wishColor }};border:1px solid {{ wishBorder }};border-radius:3px;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="21" height="21" viewBox="0 0 24 24" fill="{{ wishFill }}" 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>

        <!-- reassurance -->
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;">
          <div style="display:flex;align-items:center;gap:9px;padding:13px 14px;background:var(--gray-50);border:1px solid var(--border-subtle);border-radius:4px;">
            <span style="color:#162554;display:inline-flex;flex-shrink:0;"><svg width="19" height="19" 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-size:12.5px;line-height:1.3;color:var(--text-body);">Δωρεάν αποστολή <strong>άνω των 120€</strong></span>
          </div>
          <div style="display:flex;align-items:center;gap:9px;padding:13px 14px;background:var(--gray-50);border:1px solid var(--border-subtle);border-radius:4px;">
            <span style="color:#162554;display:inline-flex;flex-shrink:0;"><svg width="19" height="19" 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>
            <span style="font-size:12.5px;line-height:1.3;color:var(--text-body);">Δωρεάν επιστροφή <strong>30 ημέρες</strong></span>
          </div>
          <div style="display:flex;align-items:center;gap:9px;padding:13px 14px;background:var(--gray-50);border:1px solid var(--border-subtle);border-radius:4px;">
            <span style="color:#162554;display:inline-flex;flex-shrink:0;"><svg width="19" height="19" 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-size:12.5px;line-height:1.3;color:var(--text-body);"><strong>Άμεση αποστολή</strong> σε Ελλάδα και Κύπρο</span>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- ============ TABS ============ -->
  <section style="max-width:1280px;margin:0 auto;padding:52px 24px 8px;">
    <div style="display:flex;gap:0;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;">
      <sc-for list="{{ tabs }}" as="t" hint-placeholder-count="3">
        <button onClick="{{ t.select }}" style="padding:14px 22px;background:transparent;border:none;border-bottom:3px solid {{ t.border }};margin-bottom:-1px;cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:{{ t.color }};transition:color .16s,border-color .16s;">{{ t.label }}</button>
      </sc-for>
    </div>

    <sc-if value="{{ tabDesc }}" hint-placeholder-val="{{ true }}">
      <div style="display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;padding:32px 0 8px;animation:waw-fade .25s ease both;">
        <div>
          <p style="font-size:16px;line-height:1.7;color:var(--text-body);margin:0;">Με το <strong>Manchester Service pant</strong> η HH μπορεί περήφανα πια να προσφέρει ποιοτικό stretch παντελόνι εργασίας σε όλα τα επίπεδα κόστους. Όπως φημίζεται όλη η σειρά Manchester έτσι κι αυτό είναι πρακτικό, άνετο και έτοιμο για δουλειά. Ανακλαστικές λεπτομέρειες μεγιστοποιούν την ασφάλεια όσο δουλεύεις σε συνθήκες χαμηλότερου φωτισμού.</p>
        </div>
        <div style="background:var(--gray-50);border:1px solid var(--border-subtle);border-radius:6px;padding:24px;">
          <div style="font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong);margin-bottom:14px;">Σύνθεση</div>
          <div style="display:flex;flex-direction:column;gap:11px;font-size:14px;color:var(--text-body);">
            <div style="display:flex;justify-content:space-between;gap:16px;"><span style="color:var(--text-muted);">Σύνθεση</span><span style="font-weight:700;text-align:right;">68% Cotton, 32% Polyester</span></div>
            <div style="display:flex;justify-content:space-between;gap:16px;"><span style="color:var(--text-muted);">Βάρος</span><span style="font-weight:700;">235 g/m²</span></div>
            <div style="display:flex;justify-content:space-between;gap:16px;"><span style="color:var(--text-muted);">Features</span><span style="font-weight:700;text-align:right;">STRETCH 4WAY/2WAY</span></div>
          </div>
        </div>
      </div>
    </sc-if>

    <sc-if value="{{ tabSpecs }}" hint-placeholder-val="{{ false }}">
      <div style="padding:32px 0 8px;animation:waw-fade .25s ease both;">
        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;">
          <sc-for list="{{ specs }}" as="s" hint-placeholder-count="8">
            <div style="display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--border-subtle);font-size:14.5px;">
              <span style="color:var(--text-muted);">{{ s.k }}</span>
              <span style="font-weight:700;color:var(--text-strong);text-align:right;">{{ s.v }}</span>
            </div>
          </sc-for>
        </div>
      </div>
    </sc-if>

    <sc-if value="{{ tabShip }}" hint-placeholder-val="{{ false }}">
      <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:32px 0 8px;animation:waw-fade .25s ease both;">
        <div>
          <div style="font-family:var(--font-display);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-strong);margin-bottom:8px;">Αποστολή</div>
          <p style="font-size:15px;line-height:1.65;color:var(--text-body);margin:0;">Παράδοση σε 1-3 εργάσιμες σε όλη την Ελλάδα. Δωρεάν μεταφορικά για παραγγελίες άνω των 120€.</p>
        </div>
        <div>
          <div style="font-family:var(--font-display);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-strong);margin-bottom:8px;">Επιστροφές</div>
          <p style="font-size:15px;line-height:1.65;color:var(--text-body);margin:0;">Δωρεάν επιστροφή εντός 30 ημερών, εφόσον το προϊόν δεν έχει χρησιμοποιηθεί και διατηρεί τις ετικέτες του.</p>
        </div>
        <div>
          <div style="font-family:var(--font-display);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-strong);margin-bottom:8px;">Εταιρικές παραγγελίες</div>
          <p style="font-size:15px;line-height:1.65;color:var(--text-body);margin:0;">Για ποσότητες, κεντήματα ή εταιρικό branding επικοινωνήστε μαζί μας στο +30 210 9704488.</p>
        </div>
      </div>
    </sc-if>
  </section>

  <!-- ============ RELATED ============ -->
  <section style="max-width:1280px;margin:0 auto;padding:56px 24px 64px;">
    <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(4,1fr);gap:20px;">
      <sc-for list="{{ related }}" 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;">
            <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;transition:transform .3s cubic-bezier(.2,0,.1,1);" style-hover="transform:scale(1.04);">
          </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="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>
            <button onClick="{{ onNav }}" style="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:background .16s;" style-hover="background:#F47C20;">Επιλογή</button>
          </div>
        </div>
      </sc-for>
    </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="Home v2.dc.html" style="color:rgba(255,255,255,.68);font-size:14px;transition:color .14s;" style-hover="color:#F47C20;">Αρχική</a>
        <a href="About us.dc.html" 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="Category Page.dc.html" 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>

  <!-- Lightbox -->
  <sc-if value="{{ zoomOpen }}" hint-placeholder-val="{{ false }}">
    <div onClick="{{ closeZoom }}" style="position:fixed;inset:0;z-index:120;background:rgba(20,21,64,.88);display:flex;align-items:center;justify-content:center;padding:48px;animation:waw-fade .18s ease both;cursor:zoom-out;">
      <img src="{{ mainImage }}" alt="Manchester Service Pant" style="max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:6px;padding:24px;box-sizing:border-box;animation:waw-pop .22s cubic-bezier(.2,0,.1,1) both;">
      <button onClick="{{ closeZoom }}" aria-label="Κλείσιμο" style="position:absolute;top:22px;right:26px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:3px;color:#fff;cursor:pointer;transition:background .16s;" style-hover="background:rgba(255,255,255,.14);">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>
    </div>
  </sc-if>

  <!-- Sticky buy bar -->
  <sc-if value="{{ showStickyBar }}" hint-placeholder-val="{{ false }}">
    <div style="position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--border-default);box-shadow:0 -6px 24px rgba(20,21,64,.1);animation:waw-fade .2s ease both;">
      <div style="max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px;">
        <img src="{{ mainImage }}" alt="" style="width:46px;height:46px;object-fit:contain;">
        <div style="display:flex;flex-direction:column;min-width:0;">
          <span style="font-family:var(--font-display);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Manchester Service Pant</span>
          <span style="font-size:12px;color:var(--text-muted);">{{ colorLabel }} · {{ sizeLabel }}</span>
        </div>
        <span style="margin-left:auto;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.01em;color:{{ priceColor }};white-space:nowrap;">{{ priceStr }}</span>
        <button onClick="{{ addToCart }}" style="height:44px;padding:0 26px;background:#141540;color:#fff;border:none;border-radius:3px;cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .16s;" style-hover="background:#F47C20;">{{ cartLabel }}</button>
      </div>
    </div>
  </sc-if>

</div>
</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;}}">
class Component extends DCLogic {
  state = { menu: null, color: 'navy', size: 'C50', qty: 1, tab: 'desc', img: 0, wish: false, added: false, cart: 2, sticky: false, zoom: false };

  renderVals() {
    const st = this.state, menu = st.menu;
    const eur = (n) => n.toLocaleString('el-GR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';

    const colorDefs = [
      { value: 'black', label: 'Black', hex: '#141414', code: '990' },
      { value: 'grey',  label: 'Grey / Ebony', hex: '#9aa0a8', code: '950' },
      { value: 'navy',  label: 'Navy', hex: '#1d2a52', code: '590' },
    ];
    const activeColor = colorDefs.find(c => c.value === st.color) || colorDefs[2];

    const sizeDefs = [
      ['C44','sale'],['C46','ok'],['C48','ok'],['C50','ok'],['C52','ok'],['C54','ok'],['C56','ok'],
      ['C58','sale'],['C60','sale'],['C62','sale'],['C64','sale'],['C66','sale'],['C68','sale'],
      ['D88','sale'],['D92','sale'],['D96','ok'],['D100','ok'],['D104','ok'],
      ['D108','sale'],['D112','sale'],['D116','sale'],['D120','oos'],['D124','oos'],
      ['C146','sale'],['C148','sale'],['C150','sale'],['C152','sale'],['C154','sale'],['C156','sale'],
    ];
    const activeSize = sizeDefs.find(s => s[0] === st.size);
    const backorder = !!activeSize && activeSize[1] === 'sale';
    const inStock = !!activeSize && activeSize[1] === 'ok';

    const sizes = sizeDefs.map(([label, status]) => {
      const sel = st.size === label;
      const oos = status === 'oos';
      return {
        label, disabled: oos, cursor: oos ? 'not-allowed' : 'pointer',
        title: oos ? 'Μη διαθέσιμο' : (status === 'sale' ? 'Διαθέσιμο κατόπιν παραγγελίας' : 'Άμεσα διαθέσιμο'),
        bg: sel ? '#141540' : (oos ? 'var(--gray-100)' : '#fff'),
        color: sel ? '#fff' : (oos ? 'var(--gray-400)' : (status === 'sale' ? '#F47C20' : '#162554')),
        border: sel ? '#141540' : (oos ? 'var(--gray-200)' : (status === 'sale' ? '#F47C20' : '#162554')),
        strike: oos ? 'line-through' : 'none',
        select: () => { if (!oos) this.setState({ size: label, added: false }); },
      };
    });

    const onSale = inStock;
    const price = st.size ? (onSale ? 40.92 : 68.20) : null;
    const exVat = st.size ? (onSale ? 33.00 : 55.00) : null;

    const images = [
      { src: 'uploads/8877525_590A-2100cac0.webp', alt: 'Manchester Service Pant, μπροστά' },
      { src: 'uploads/8877525_590A.webp', alt: 'Manchester Service Pant, λεπτομέρεια' },
    ];
    const gallery = images.map((im, i) => ({
      src: im.src, alt: im.alt,
      border: st.img === i ? '#141540' : 'var(--border-subtle)',
      ring: st.img === i ? '0 0 0 1px #141540' : 'none',
      select: () => this.setState({ img: i }),
    }));

    const tabDefs = [['desc','Περιγραφή'],['specs','Χαρακτηριστικά'],['ship','Αποστολή & Επιστροφές']];
    const tabs = tabDefs.map(([id, label]) => ({
      label,
      color: st.tab === id ? '#141540' : 'var(--text-muted)',
      border: st.tab === id ? '#F47C20' : 'transparent',
      select: () => this.setState({ tab: id }),
    }));

    const related = [
      { title: 'Manchester Work Pant', brand: 'Helly Hansen', sku: '77523', price: 118.90, exVat: 95.89, image: 'uploads/8877523_229A.webp' },
      { title: 'Manchester Stretch Pant', brand: 'Helly Hansen', sku: '77554', price: 124.00, exVat: 100.00, image: 'uploads/8877554_591A.webp' },
      { title: 'Manchester MXR Mid S7S', brand: 'Helly Hansen', sku: '78324', price: 179.80, exVat: 145.00, image: 'uploads/8878324_992.webp' },
      { title: 'Kensington Service Pant', brand: 'Helly Hansen', sku: '77360', price: 148.80, exVat: 120.00, image: 'uploads/8877360_595.webp' },
    ].map(p => ({ ...p, priceStr: eur(p.price), exVatStr: eur(p.exVat) }));

    return {
      // header
      navStatic: ['Οδηγός Προϊόντων','Βιωσιμότητα','Σχετικά με μας','Επικοινωνία'],
      professions: ['Υπηρεσίες / Logistics','Τεχνίτες / Εγκαταστάσεις','Σκληρή καταπόνηση / Κατασκευές','Ελαιοχρωματιστές / Ξηρά δόμηση','Χαμηλές Θερμοκρασίες / Βροχή','Υψηλή Διακριτότητα HiVis','Υψηλή Τάση & Φωτιά','Εστίαση'],
      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:['Γάντια','Κράνη','Γυαλιά προστασίας','Οργάνωση Εργαλείων','Προστασία Πτώσης','Επιγονατίδες','Κάλτσες'] },
        ] },
      ],
      productsOpen: menu === 'products',
      professionsOpen: menu === 'professions',
      productsColor: menu === 'products' ? 'var(--yellow-400)' : '#fff',
      productsBorder: menu === 'products' ? 'var(--yellow-500)' : 'transparent',
      professionsColor: menu === 'professions' ? 'var(--yellow-400)' : 'rgba(255,255,255,.9)',
      professionsBorder: menu === 'professions' ? 'var(--yellow-500)' : 'transparent',
      openProducts: () => this.setState({ menu: 'products' }),
      openProfessions: () => this.setState({ menu: 'professions' }),
      closeMenu: () => this.setState({ menu: null }),
      bannerVisible: this.props.bannerVisible ?? true,
      cartCount: st.cart,

      crumbs: [
        { label: 'Αρχική σελίδα', color: 'var(--text-muted)', weight: 400 },
        { label: 'Ανδρικά', color: 'var(--text-muted)', weight: 400 },
        { label: 'Κάτω Ένδυση', color: 'var(--text-muted)', weight: 400 },
        { label: 'Παντελόνια', color: 'var(--text-muted)', weight: 400 },
        { label: 'Work Pants', color: '#162554', weight: 600 },
      ],
      tags: ['Work Pants','4-Way Stretch','Knee-pad ready','Unisex'],

      gallery, mainImage: images[st.img].src,
      prevImage: () => this.setState({ img: (st.img + images.length - 1) % images.length }),
      nextImage: () => this.setState({ img: (st.img + 1) % images.length }),

      colors: colorDefs.map(c => ({
        label: c.label, hex: c.hex,
        ring: st.color === c.value ? '0 0 0 2px #141540' : '0 0 0 1px var(--gray-300)',
        select: () => this.setState({ color: c.value }),
      })),
      colorLabel: activeColor.label,
      variantCode: '8877525_' + activeColor.code + (st.size ? '_' + st.size.replace(/[A-Z]/g, '') : ''),

      sizes,
      sizeLabel: st.size ? st.size : 'Επιλέξτε μέγεθος',
      clearSize: () => this.setState({ size: null, added: false }),
      stockLabel: !st.size ? 'Επιλέξτε μέγεθος για διαθεσιμότητα' : (inStock ? 'Άμεσα διαθέσιμο' : 'Διαθέσιμο κατόπιν παραγγελίας'),
      stockColor: !st.size ? 'var(--text-muted)' : (inStock ? '#2e7d32' : '#F47C20'),

      priceStr: price == null ? '40,92 € – 68,20 €' : eur(price),
      exVatStr: exVat == null ? '33,00 € – 55,00 €' : eur(exVat),
      priceColor: onSale ? '#F47C20' : '#141540',
      hasDiscount: onSale,

      qty: st.qty,
      inc: () => this.setState({ qty: Math.min(99, st.qty + 1) }),
      dec: () => this.setState({ qty: Math.max(1, st.qty - 1) }),
      addToCart: () => {
        if (!st.size) return;
        this.setState({ added: true, cart: st.cart + st.qty });
        clearTimeout(this._t);
        this._t = setTimeout(() => this.setState({ added: false }), 2000);
      },
      cartLabel: st.added ? 'Προστέθηκε ✓' : 'Προσθήκη στο καλάθι',

      wishFill: st.wish ? '#F47C20' : 'var(--heart,none)',
      wishColor: st.wish ? '#F47C20' : '#141540',
      wishBorder: st.wish ? '#F47C20' : 'var(--border-default)',
      toggleWish: () => this.setState({ wish: !st.wish }),

      tabs, tabDesc: st.tab === 'desc', tabSpecs: st.tab === 'specs', tabShip: st.tab === 'ship',
      specs: [
        { k: 'Κωδικός', v: '77525' },
        { k: 'Brand', v: 'Helly Hansen Workwear' },
        { k: 'Σειρά', v: 'Manchester' },
        { k: 'Τύπος', v: 'Service Pant' },
        { k: 'Ύφασμα', v: '68% Cotton, 32% Polyester' },
        { k: 'Βάρος υφάσματος', v: '235 g/m²' },
        { k: 'Μεγέθη', v: 'C44 – C156 / D88 – D124' },
        { k: 'Χρώματα', v: 'Black · Grey · Navy' },
        { k: 'Features', v: 'STRETCH 4WAY/2WAY' },
        { k: 'Ανακλαστικά', v: 'Ανακλαστικές λεπτομέρειες' },
        { k: 'Φροντίδα', v: 'Πλύσιμο 40°C · Όχι χλώριο · Όχι σιδέρωμα · Όχι στεγνό καθάρισμα' },
        { k: 'Πιστοποίηση', v: 'OEKO-TEX® Standard 100' },
      ],
      related,

      zoomOpen: st.zoom,
      openZoom: () => this.setState({ zoom: true }),
      closeZoom: () => this.setState({ zoom: false }),
      showStickyBar: st.sticky,
      onNav: (e) => { if (e && e.preventDefault) e.preventDefault(); },
    };
  }

  componentDidMount() {
    this._onScroll = () => {
      const s = window.scrollY > 780;
      if (s !== this.state.sticky) this.setState({ sticky: 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);
    setTimeout(() => { document.querySelectorAll('[data-reveal]').forEach(reveal); }, 4000);
  }

  componentWillUnmount() {
    if (this._onScroll) window.removeEventListener('scroll', this._onScroll);
    clearTimeout(this._t);
  }
}
</script>
</body>
</html>
