/* ==========================================================================
   EcomSouq Blocks — shared stylesheet
   Everything is scoped under .es so it cannot collide with Elementor or Hello.
   Change a brand colour ONCE here and every section updates.
   ========================================================================== */

:root{
  /* --- swap these for your real brand hex codes --- */
  --es-ink:        #0B0B0D;
  --es-surface:    #141418;
  --es-surface-2:  #1C1C22;
  --es-line:       #2A2A32;
  --es-accent:     #E3A93C;
  --es-accent-ink: #0B0B0D;

  /* functional only — metric deltas, never decoration */
  --es-up:   #4FD18B;
  --es-down: #F2685C;

  --es-fg:      #F5F5F3;
  --es-fg-mute: #9A9AA6;

  /* Register these three in Elementor > Site Settings > Global Fonts
     so Elementor loads them once instead of each widget importing them. */
  --es-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --es-body:    'Inter Tight', system-ui, sans-serif;
  --es-mono:    'JetBrains Mono', ui-monospace, monospace;

  --es-r:   14px;
  --es-r-s: 8px;
}

.es{ font-family:var(--es-body); color:var(--es-fg); line-height:1.55; -webkit-font-smoothing:antialiased; }
.es *,.es *::before,.es *::after{ box-sizing:border-box; }

/* ---------- shared type ---------- */
.es .es-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--es-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--es-fg-mute);
  border:1px solid var(--es-line); border-radius:100px;
  padding:7px 14px; margin:0 0 22px;
}
.es .es-eyebrow b{ color:var(--es-accent); font-weight:700; }

.es .es-h2{
  font-family:var(--es-display); font-weight:800;
  font-size:clamp(28px,4.2vw,50px); line-height:1.08;
  letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance;
}
.es .es-lede{ font-size:clamp(15px,1.5vw,18px); color:var(--es-fg-mute); max-width:62ch; margin:0 0 44px; }
.es .es-num{ font-family:var(--es-mono); font-variant-numeric:tabular-nums; font-weight:700; }

.es .es-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--es-accent); color:var(--es-accent-ink);
  font-family:var(--es-body); font-weight:600; font-size:14px; letter-spacing:.02em;
  text-decoration:none; padding:14px 26px; border:0; border-radius:100px; cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}
.es .es-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.es a:focus-visible,.es button:focus-visible{ outline:2px solid var(--es-accent); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  .es *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- BLOCK B — logo marquee ---------- */
.es .es-marquee-head{
  text-align:center; font-family:var(--es-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--es-fg-mute); margin:0 0 34px;
}
.es .es-marquee{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.es .es-marquee + .es-marquee{ margin-top:18px; }
.es .es-track{
  display:flex; align-items:center; gap:56px; width:max-content;
  list-style:none; margin:0; padding:0;
  animation:es-slide 46s linear infinite;
}
.es .es-marquee--rev .es-track{ animation-direction:reverse; animation-duration:58s; }
.es .es-marquee:hover .es-track{ animation-play-state:paused; }
.es .es-track img{
  height:30px; width:auto; display:block;
  filter:grayscale(1) brightness(1.9); opacity:.6;
  transition:opacity .25s ease, filter .25s ease;
}
.es .es-track li:hover img{ filter:grayscale(0) brightness(1); opacity:1; }
@keyframes es-slide{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} }

/* ---------- BLOCK C — stat bar ---------- */
.es .es-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--es-line); border-radius:var(--es-r);
  overflow:hidden; background:var(--es-surface);
}
.es .es-stat{ padding:38px 26px; border-right:1px solid var(--es-line); }
.es .es-stat:last-child{ border-right:0; }
.es .es-stat-val{
  font-family:var(--es-display); font-weight:800;
  font-size:clamp(32px,4vw,50px); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  margin:0 0 10px; color:var(--es-fg);
}
.es .es-stat-lbl{ font-size:14px; color:var(--es-fg-mute); margin:0; }
@media(max-width:900px){
  .es .es-stats{ grid-template-columns:repeat(2,1fr); }
  .es .es-stat:nth-child(2n){ border-right:0; }
  .es .es-stat:nth-child(-n+2){ border-bottom:1px solid var(--es-line); }
}
@media(max-width:520px){
  .es .es-stats{ grid-template-columns:1fr; }
  .es .es-stat{ border-right:0; border-bottom:1px solid var(--es-line); }
  .es .es-stat:last-child{ border-bottom:0; }
}

/* ---------- BLOCK D — testimonial wall ---------- */
.es .es-wall{
  display:grid; grid-template-columns:repeat(var(--es-wall-cols,3),1fr); gap:16px;
  height:var(--es-wall-h,640px); overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.es .es-col{ display:flex; flex-direction:column; gap:16px; animation:es-up 44s linear infinite; }
.es .es-col:nth-child(2){ animation-duration:58s; }
.es .es-col:nth-child(3){ animation-duration:50s; }
.es .es-wall:hover .es-col{ animation-play-state:paused; }
.es .es-card{ background:var(--es-surface); border:1px solid var(--es-line); border-radius:var(--es-r); padding:20px; flex:none; }
.es .es-card img{ width:100%; height:auto; display:block; border-radius:var(--es-r-s); }
.es .es-quote{ font-size:15px; margin:0 0 14px; }
.es .es-who{ font-family:var(--es-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--es-fg-mute); margin:0; }
@keyframes es-up{ from{transform:translate3d(0,0,0);} to{transform:translate3d(0,-50%,0);} }
@media(max-width:860px){ .es .es-wall{ grid-template-columns:repeat(2,1fr); height:520px; } }
@media(max-width:560px){ .es .es-wall{ grid-template-columns:1fr; height:460px; } }

/* ---------- BLOCK E — before/after case switcher ---------- */
.es .es-tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 40px; }
.es .es-tab{
  background:var(--es-surface); border:1px solid var(--es-line);
  border-radius:var(--es-r-s); padding:14px 20px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.es .es-tab img{ height:22px; width:auto; display:block; filter:grayscale(1) brightness(1.9); opacity:.55; transition:.2s; }
.es .es-tab:hover{ border-color:var(--es-fg-mute); }
.es .es-tab[aria-selected="true"]{ background:var(--es-surface-2); border-color:var(--es-accent); }
.es .es-tab[aria-selected="true"] img{ filter:none; opacity:1; }

.es .es-panel{ display:none; }
.es .es-panel.is-open{ display:block; animation:es-fade .35s ease; }
@keyframes es-fade{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }

.es .es-ba{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.es .es-side{ background:var(--es-surface); border:1px solid var(--es-line); border-radius:var(--es-r); padding:30px; }
.es .es-side--after{ border-color:var(--es-accent); }
.es .es-side h3{
  font-family:var(--es-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--es-fg-mute); margin:0 0 18px; font-weight:700;
}
.es .es-side--after h3{ color:var(--es-accent); }
.es .es-side p{ font-size:15px; color:var(--es-fg-mute); margin:0 0 24px; min-height:72px; }
.es .es-metrics{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.es .es-metrics li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-bottom:12px; border-bottom:1px solid var(--es-line);
}
.es .es-metrics li:last-child{ border-bottom:0; padding-bottom:0; }
.es .es-mk{ font-size:13px; color:var(--es-fg-mute); }
.es .es-mv{ font-family:var(--es-mono); font-weight:700; font-size:20px; font-variant-numeric:tabular-nums; }
.es .es-side--after .es-mv{ color:var(--es-up); }
@media(max-width:760px){ .es .es-ba{ grid-template-columns:1fr; } .es .es-side p{ min-height:0; } }

/* ---------- BLOCK F — comparison ---------- */
.es .es-vs{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.es .es-vs-col{ background:var(--es-surface); border:1px solid var(--es-line); border-radius:var(--es-r); padding:32px; }
.es .es-vs-col--us{ background:var(--es-surface-2); border-color:var(--es-accent); }
.es .es-vs-col h3{ font-family:var(--es-display); font-size:20px; font-weight:800; margin:0 0 24px; }
.es .es-vs-col--us h3{ color:var(--es-accent); }
.es .es-vs-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.es .es-vs-list li{ display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; font-size:15px; }
.es .es-vs-list span{ font-family:var(--es-mono); font-weight:700; line-height:1.5; }
.es .es-vs-col .es-vs-list span{ color:var(--es-down); }
.es .es-vs-col--us .es-vs-list span{ color:var(--es-up); }
.es .es-vs-col:not(.es-vs-col--us) .es-vs-list li{ color:var(--es-fg-mute); }
@media(max-width:760px){ .es .es-vs{ grid-template-columns:1fr; } }

/* ---------- BLOCK G — calculator ---------- */
.es .es-calc{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.es .es-panel-box{ background:var(--es-surface); border:1px solid var(--es-line); border-radius:var(--es-r); padding:32px; }
.es .es-calc-block label{ display:block; font-size:13px; color:var(--es-fg-mute); margin:0 0 8px; }
.es .es-field{ margin:0 0 22px; }
.es .es-field--last{ margin:0; }
.es .es-calc-in{
  width:100%; background:var(--es-ink); border:1px solid var(--es-line);
  border-radius:var(--es-r-s); color:var(--es-fg);
  font-family:var(--es-mono); font-size:17px; padding:13px 15px;
}
.es .es-calc-in:focus{ outline:2px solid var(--es-accent); outline-offset:1px; border-color:transparent; }
.es .es-out{ text-align:center; padding:20px 0 26px; border-bottom:1px solid var(--es-line); margin:0 0 22px; }
.es .es-out-val{
  font-family:var(--es-display); font-weight:800; font-size:clamp(46px,7vw,76px);
  line-height:1; font-variant-numeric:tabular-nums; color:var(--es-accent); margin:0 0 8px;
}
.es .es-out-lbl{ font-family:var(--es-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--es-fg-mute); margin:0; }
.es .es-rows{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:13px; }
.es .es-rows li{ display:flex; justify-content:space-between; font-size:14px; }
.es .es-rows b{ font-family:var(--es-mono); font-variant-numeric:tabular-nums; }
.es .es-verdict{ font-size:14px; color:var(--es-fg-mute); margin:0 0 22px; min-height:44px; }
@media(max-width:760px){ .es .es-calc{ grid-template-columns:1fr; } }


/* ---------- added in v2 ---------- */
.es .es-empty{
  background:var(--es-surface); border:1px dashed var(--es-line);
  border-radius:var(--es-r); padding:22px; color:var(--es-fg-mute);
  font-size:14px; margin:0;
}
.es .es-caselink{
  display:inline-block; margin-top:20px; font-size:13px;
  color:var(--es-accent); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
}
.es .es-caselink:hover{ opacity:.8; }
.es .es-tab span{
  font-family:var(--es-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:inherit;
}

/* The settings page writes --es-ink/--es-surface/--es-line/--es-accent/--es-fg/--es-up
   into :root. --es-surface-2 and --es-fg-mute are derived from those so your team
   only manages six colours instead of eight. */
:root{
  --es-surface-2: color-mix(in srgb, var(--es-surface) 88%, var(--es-fg) 12%);
  --es-fg-mute:   color-mix(in srgb, var(--es-fg) 58%, var(--es-ink) 42%);
}