/* ============================================================
   Diktiosou — E-commerce Funnel
   Φορτώνεται ΜΟΝΟ στο ecommerce.html. Χτίζει πάνω στα ίδια design
   tokens του style.css (--grad, --line, --mut, --ease, .btn, .glass,
   .reveal) και επαναχρησιμοποιεί τα layout helpers του funnel.css
   (.fn-sec, .fn-kicker, .fn-faq, .fn-form, .fn-success, .fn-sticky).
   Εδώ μπαίνει μόνο ό,τι είναι αποκλειστικά e-commerce.
   ============================================================ */

/* ============================================================
   HERO — vitrine mockup (pure CSS, χωρίς εικόνες)
   ============================================================ */
.ec-hero__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,3.5rem);align-items:center}

.ec-stage{position:relative;display:grid;place-items:center;min-height:clamp(320px,38vw,470px);perspective:1600px}
.ec-stage::before{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--violet) 34%,transparent),transparent 62%);
  filter:blur(52px);opacity:.7}

/* --- «παράθυρο» καταστήματος --- */
.ec-shop{position:relative;z-index:2;width:min(100%,520px);border-radius:22px;overflow:hidden;
  border:1px solid var(--line);background:rgba(9,12,26,.92);
  box-shadow:0 60px 110px -45px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%);
  transform:rotateY(-11deg) rotateX(5deg);transition:transform .9s var(--ease)}
.ec-stage:hover .ec-shop{transform:rotateY(-4deg) rotateX(2deg)}
.ec-shop__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03)}
.ec-shop__bar i{width:9px;height:9px;border-radius:50%;background:#2b3350}
.ec-shop__url{margin-left:.7rem;flex:1;font-family:'Space Grotesk',sans-serif;font-size:.72rem;color:var(--mut);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:100px;padding:.22rem .7rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-shop__body{padding:.9rem}

.ec-shop__nav{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.ec-shop__brand{font-family:'Space Grotesk',sans-serif;font-size:.8rem;color:var(--txt)}
.ec-shop__tabs{display:flex;gap:.35rem;margin-left:auto}
.ec-shop__tabs i{width:26px;height:6px;border-radius:100px;background:rgba(255,255,255,.12)}
.ec-shop__tabs i:first-child{background:var(--grad)}
.ec-shop__cart{width:24px;height:24px;border-radius:8px;background:var(--grad);position:relative;flex:0 0 24px}
.ec-shop__cart::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;
  border-radius:100px;background:#04060e;border:1px solid var(--line);color:var(--txt);
  font-family:'Space Grotesk',sans-serif;font-size:.58rem;display:grid;place-items:center;padding:0 3px}

.ec-shop__hero{height:74px;border-radius:12px;margin-bottom:.7rem;
  background:linear-gradient(120deg,color-mix(in srgb,var(--cyan) 34%,transparent),
    color-mix(in srgb,var(--violet) 32%,transparent));
  display:flex;align-items:center;padding:0 .9rem}
.ec-shop__hero b{font-family:'Space Grotesk',sans-serif;font-size:.82rem;color:#04060e;letter-spacing:.02em}

.ec-shop__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.ec-prod{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.04);
  padding:.45rem;display:grid;gap:.35rem}
.ec-prod i{display:block;height:52px;border-radius:9px;background:rgba(255,255,255,.07)}
.ec-prod:nth-child(1) i{background:linear-gradient(140deg,color-mix(in srgb,var(--cyan) 30%,transparent),transparent)}
.ec-prod:nth-child(3) i{background:linear-gradient(140deg,color-mix(in srgb,var(--pink) 26%,transparent),transparent)}
.ec-prod:nth-child(5) i{background:linear-gradient(140deg,color-mix(in srgb,var(--violet) 30%,transparent),transparent)}
.ec-prod u{display:block;height:6px;width:70%;border-radius:100px;background:rgba(255,255,255,.16);text-decoration:none}
.ec-prod s{display:block;height:6px;width:38%;border-radius:100px;background:var(--grad);opacity:.9;text-decoration:none}

/* --- κινητό μπροστά από το κατάστημα --- */
.ec-mobile{position:absolute;z-index:3;right:2%;bottom:-2%;width:clamp(104px,11vw,132px);
  aspect-ratio:9/19;border-radius:26px;padding:6px;
  background:linear-gradient(160deg,#20263a,#0a0e1a 60%);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.22)}
.ec-mobile__screen{height:100%;border-radius:21px;overflow:hidden;background:#070b16;padding:16px 8px 8px;
  display:flex;flex-direction:column;gap:6px}
.ec-mobile__screen i{display:block;border-radius:7px;background:rgba(255,255,255,.07)}
.ec-mobile__screen .h{height:34%;background:linear-gradient(140deg,color-mix(in srgb,var(--cyan) 32%,transparent),
  color-mix(in srgb,var(--violet) 28%,transparent))}
.ec-mobile__screen .l{height:5px;width:66%}
.ec-mobile__screen .l.s{width:40%}
.ec-mobile__screen .b{height:22px;border-radius:100px;background:var(--grad);margin-top:auto}

/* --- toast «νέα παραγγελία» --- */
.ec-toast{position:absolute;z-index:5;left:-4%;top:12%;width:min(240px,62%);
  border:1px solid var(--line);border-radius:18px;padding:.7rem .85rem;display:flex;gap:.6rem;align-items:flex-start;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),rgba(8,12,24,.9);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95);
  animation:ecToast 9s var(--ease) infinite}
.ec-toast i{flex:0 0 26px;height:26px;border-radius:8px;background:var(--grad)}
.ec-toast b{display:block;font-family:'Space Grotesk',sans-serif;font-size:.76rem;color:var(--txt)}
.ec-toast span{font-size:.72rem;color:var(--mut);line-height:1.4}
@keyframes ecToast{0%,8%{opacity:0;transform:translateY(-14px) scale(.96)}
  16%,46%{opacity:1;transform:none}56%,100%{opacity:0;transform:translateY(-10px) scale(.98)}}

/* ============================================================
   ΠΑΛΙΟΣ → ΝΕΟΣ ΤΡΟΠΟΣ
   ============================================================ */
.ec-ways{display:grid;gap:1.2rem}
.ec-way{border:1px solid var(--line);border-radius:26px;padding:1.5rem 1.6rem 1.7rem;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));position:relative;overflow:hidden}
.ec-way__tag{display:inline-flex;align-items:center;gap:.5rem;font-family:'Space Grotesk',sans-serif;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding:.32rem .8rem;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);margin-bottom:1.1rem}
.ec-way--old .ec-way__tag{color:#ff9a9a;border-color:rgba(255,154,154,.3);background:rgba(255,154,154,.09)}
.ec-way--new{border-color:color-mix(in srgb,var(--cyan) 34%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 14%,transparent),rgba(255,255,255,.02));
  box-shadow:0 45px 95px -55px color-mix(in srgb,var(--violet) 85%,transparent)}
.ec-way--new .ec-way__tag{color:#04060e;background:var(--grad);border-color:transparent}
.ec-way h3{font-size:1.15rem;margin-bottom:.35rem}
.ec-way>p{color:var(--mut);font-size:.92rem;margin:0 0 1.3rem;max-width:62ch}

.ec-rail{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem}
.ec-rail li{flex:1 1 130px;min-width:0;border:1px solid var(--line);border-radius:16px;padding:.75rem .85rem;
  background:rgba(255,255,255,.03);position:relative;
  display:flex;flex-direction:column;gap:.2rem}
.ec-rail li b{font-family:'Space Grotesk',sans-serif;font-size:.86rem;color:var(--txt);line-height:1.3}
.ec-rail li span{font-size:.76rem;color:var(--mut);line-height:1.45}
.ec-rail li::after{content:"";position:absolute;top:50%;right:-.5rem;width:.5rem;height:1px;
  background:var(--line);z-index:1}
.ec-rail li:last-child::after{display:none}
.ec-way--old .ec-rail li{border-style:dashed;border-color:rgba(255,154,154,.26)}
.ec-way--new .ec-rail li{border-color:color-mix(in srgb,var(--cyan) 26%,transparent)}
.ec-way--new .ec-rail li:last-child{background:linear-gradient(160deg,
  color-mix(in srgb,var(--cyan) 22%,transparent),color-mix(in srgb,var(--violet) 20%,transparent));
  border-color:transparent}
.ec-way__out{margin:1.2rem 0 0;font-size:.88rem;color:var(--txt);
  border-left:2px solid color-mix(in srgb,var(--cyan) 50%,transparent);padding-left:.9rem}
.ec-way--old .ec-way__out{border-left-color:rgba(255,154,154,.5);color:var(--mut)}

/* ============================================================
   ΓΙΑ ΠΟΙΟΥΣ ΕΙΝΑΙ
   ============================================================ */
.ec-fits{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ec-fit{border:1px solid var(--line);border-radius:22px;padding:1.3rem 1.35rem 1.4rem;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.ec-fit::after{content:"";position:absolute;inset:auto -35% -70% auto;width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 22%,transparent),transparent 65%);
  opacity:0;transition:opacity .5s}
.ec-fit:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--cyan) 38%,transparent);
  box-shadow:0 40px 80px -45px rgba(0,0,0,.9)}
.ec-fit:hover::after{opacity:1}
.ec-fit__ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;margin-bottom:.9rem;
  border:1px solid var(--line);background:rgba(255,255,255,.05);position:relative;z-index:1}
.ec-fit__ico svg{width:21px;height:21px;fill:none;stroke:url(#ecGrad);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ec-fit h3{font-size:1.02rem;margin-bottom:.4rem;position:relative;z-index:1}
.ec-fit p{color:var(--mut);font-size:.86rem;margin:0;position:relative;z-index:1;line-height:1.55}

/* ============================================================
   ΠΡΙΝ / ΜΕΤΑ
   ============================================================ */
.ec-ba{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:stretch}
.ec-ba__col{border:1px solid var(--line);border-radius:26px;padding:1.6rem 1.6rem 1.8rem;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014))}
.ec-ba__col--after{border-color:color-mix(in srgb,var(--cyan) 34%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 13%,transparent),rgba(255,255,255,.02))}
.ec-ba__label{font-family:'Space Grotesk',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#ff9a9a;margin-bottom:.8rem;display:block}
.ec-ba__col--after .ec-ba__label{color:var(--cyan)}
.ec-ba__col h3{font-size:1.2rem;margin-bottom:1.2rem}
.ec-ba__list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.ec-ba__list li{font-size:.92rem;color:var(--mut);display:flex;gap:.6rem;align-items:flex-start;line-height:1.55}
.ec-ba__list li::before{content:"";flex:0 0 18px;width:18px;height:18px;margin-top:.2rem;border-radius:50%}
.ec-ba__col--before .ec-ba__list li::before{background:rgba(255,154,154,.85);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6L6 18M6 6l12 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/12px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6L6 18M6 6l12 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/12px no-repeat}
.ec-ba__col--after .ec-ba__list li::before{background:var(--grad);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat}
.ec-ba__col--after .ec-ba__list li{color:var(--txt)}

/* ============================================================
   ΕΝΣΤΑΣΕΙΣ
   ============================================================ */
.ec-objs{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.ec-obj{border:1px solid var(--line);border-radius:22px;padding:1.4rem 1.5rem;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  transition:border-color .4s,transform .4s var(--ease)}
.ec-obj:hover{border-color:color-mix(in srgb,var(--cyan) 38%,transparent);transform:translateY(-4px)}
.ec-obj__q{font-family:'Space Grotesk',sans-serif;font-size:1rem;color:var(--txt);margin:0 0 .6rem;
  padding-left:1.5rem;position:relative;line-height:1.4}
.ec-obj__q::before{content:"«";position:absolute;left:0;top:-.15rem;font-size:1.5rem;line-height:1;color:var(--cyan)}
.ec-obj__a{color:var(--mut);font-size:.92rem;margin:0;line-height:1.6}
.ec-obj__a b{color:var(--txt);font-weight:700}

/* ============================================================
   ΤΙ ΠΕΡΙΛΑΜΒΑΝΕΙ / ΛΥΣΗ — feature → όφελος
   ============================================================ */
.ec-feats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.ec-feats li{background:rgba(8,12,24,.72);padding:1.25rem 1.3rem;transition:background .35s;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ec-feats li:hover{background:rgba(255,255,255,.06)}
.ec-feats b{display:flex;align-items:center;gap:.55rem;font-family:'Space Grotesk',sans-serif;
  font-size:.97rem;color:var(--txt);margin-bottom:.35rem}
.ec-feats b::before{content:"";flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--grad);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat}
.ec-feats span{display:block;color:var(--mut);font-size:.85rem;line-height:1.55;padding-left:1.55rem}
.ec-feats em{font-style:normal;color:var(--cyan)}

/* ============================================================
   ΔΙΑΔΙΚΑΣΙΑ — 5 βήματα
   ============================================================ */
.ec-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
.ec-steps li{border-top:1px solid var(--line);padding-top:1.3rem;position:relative}
.ec-steps li::after{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--grad);
  transition:width 1s var(--ease) .15s}
.ec-steps li.in::after{width:100%}
.ec-steps__n{font-family:'Space Grotesk',sans-serif;font-size:.76rem;letter-spacing:.24em;color:var(--cyan)}
.ec-steps h3{margin:.45rem 0 .5rem;font-size:1.05rem}
.ec-steps p{color:var(--mut);font-size:.88rem;margin:0 0 .7rem;line-height:1.55}
.ec-steps__out{font-size:.8rem;color:var(--txt);opacity:.9;margin:0!important;
  border-left:2px solid color-mix(in srgb,var(--cyan) 50%,transparent);padding-left:.8rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .ec-feats{grid-template-columns:repeat(2,1fr)}
  .ec-steps{grid-template-columns:repeat(3,1fr)}
  .ec-fits{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .ec-hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .ec-stage{order:-1;min-height:auto;padding-bottom:1.5rem}
  .ec-shop{transform:none;width:min(100%,520px)}
  .ec-stage:hover .ec-shop{transform:none}
  .ec-mobile{width:clamp(96px,17vw,124px);right:0;bottom:-4%}
  .ec-toast{left:0}
  .ec-fits{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .ec-ba{grid-template-columns:1fr}
  .ec-objs{grid-template-columns:1fr}
  .ec-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .ec-fits,.ec-feats,.ec-steps{grid-template-columns:1fr}
  .ec-rail{flex-direction:column}
  .ec-rail li{flex:1 1 auto}
  .ec-rail li::after{top:auto;bottom:-.5rem;right:auto;left:1.2rem;width:1px;height:.5rem}
  .ec-mobile{display:none}
  .ec-toast{left:auto;right:0;top:4%;width:min(210px,74%)}
  .ec-shop__grid{grid-template-columns:repeat(2,1fr)}
  .ec-shop__grid .ec-prod:nth-child(n+5){display:none}
  .ec-way{padding:1.3rem 1.2rem 1.5rem}
  .ec-ba__col{padding:1.4rem 1.3rem 1.6rem}
}

@media(prefers-reduced-motion:reduce){
  .ec-toast{animation:none;opacity:1}
}