/* ============================================================
   ELECTRIC COMPETITIONS
   Original brand styling — clean motorsport-tech.
   Mostly white background, electric blue accents,
   angled motorsport-inspired sections.
   ============================================================ */

:root {
  /* brand colors */
  --ec-blue:      #022D8D;   /* primary electric blue */
  --ec-blue-2:    #1446A7;   /* bright blue accent */
  --ec-blue-3:    #3B63B0;   /* soft blue */
  --ec-cyan:      #00B7FF;   /* electric highlight */
  --ec-green:     #7ED957;   /* optional accent */
  --ec-black:     #070707;
  --ec-charcoal:  #191B1E;
  --ec-grey-900:  #2A2D33;
  --ec-grey-600:  #5B6270;
  --ec-grey-400:  #99A1B0;
  --ec-grey-200:  #D6DEEB;
  --ec-grey-100:  #EEF2F7;
  --ec-white:     #FFFFFF;

  --ec-shadow-sm: 0 1px 2px rgba(7,7,7,.06);
  --ec-shadow:    0 6px 24px -8px rgba(2,45,141,.18), 0 2px 6px rgba(7,7,7,.04);
  --ec-shadow-lg: 0 30px 60px -30px rgba(2,45,141,.30), 0 8px 20px -10px rgba(7,7,7,.10);
  --ec-shadow-glow: 0 0 0 1px rgba(2,45,141,.08), 0 20px 60px -20px rgba(20,70,167,.45);

  --ec-radius:     14px;
  --ec-radius-sm:  8px;
  --ec-radius-lg:  22px;
  --ec-radius-pill:999px;

  --font-display: "Exo 2", "Rajdhani", "Helvetica Neue", sans-serif;
  --font-body:    "Inter", "Urbanist", "Helvetica Neue", sans-serif;
  --font-label:   "Montserrat", "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --container: 1240px;
  --gutter: 24px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ec-charcoal);
  background: var(--ec-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; }
em { font-style: italic; color: var(--ec-blue-2); }

::selection { background: var(--ec-blue); color: #fff; }

.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ec-blue-2);
}
.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--ec-blue-2);
}
.section-eyebrow.light { color: #fff; }
.section-eyebrow.light::before { background: var(--ec-cyan); }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 58px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-style: italic;
  margin: 14px 0 12px;
}
.section-title.light { color: #fff; }
.section-title em { color: var(--ec-blue); font-style: italic; }
.section-title.light em { color: var(--ec-cyan); }

.section-sub {
  color: var(--ec-grey-600);
  font-size: 17px;
  max-width: 560px;
  margin: 0;
}
.section-sub.light { color: rgba(255,255,255,.72); }

.section-head { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.section-head.between {
  display: flex; align-items: end; justify-content: space-between;
  text-align: left; max-width: none; gap: 24px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.primary-btn, .ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--ec-radius-pill);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}
.primary-btn {
  background: var(--ec-blue);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(2,45,141,.55), inset 0 -2px 0 rgba(0,0,0,.18);
}
.primary-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%);
  border-radius: inherit;
  transform: translateX(-120%);
  transition: transform .6s ease;
  z-index: -1;
}
.primary-btn:hover {
  background: var(--ec-blue-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(2,45,141,.65), inset 0 -2px 0 rgba(0,0,0,.18);
}
.primary-btn:hover::after { transform: translateX(120%); }
.primary-btn.lg { padding: 16px 28px; font-size: 14px; }
.primary-btn.xl { padding: 20px 36px; font-size: 16px; letter-spacing: 0.14em; }
.primary-btn.full { width: 100%; }

.ghost-btn {
  background: rgba(2,45,141,.04);
  color: var(--ec-charcoal);
  border: 1.5px solid rgba(2,45,141,.14);
}
.ghost-btn:hover {
  background: rgba(2,45,141,.08);
  border-color: var(--ec-blue);
  color: var(--ec-blue);
  transform: translateY(-1px);
}
.ghost-btn.lg { padding: 14px 24px; font-size: 13px; }
.ghost-btn.xl { padding: 18px 30px; font-size: 14px; }
.ghost-btn.light {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.ghost-btn.light:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--ec-cyan);
  color: #fff;
}

/* ============================================================
   TOP MARQUEE — sits right under the header
   ============================================================ */
.top-marquee {
  position: fixed;
  top: 100px; /* sits under sticky header */
  left: 0; right: 0;
  z-index: 90;
  background: var(--ec-black);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  transition: top .25s ease;
}
.header.scrolled ~ .top-marquee { top: 74px; }
.top-marquee-inner {
  display: flex;
  align-items: center;
  height: 36px;
  position: relative;
}
.tm-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ec-blue);
  color: #fff;
  padding: 0 14px;
  height: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  position: relative;
}
.tm-tag::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -10px;
  width: 10px;
  background: var(--ec-blue);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tm-tag .live-dot { background: var(--ec-cyan); }
.tm-track {
  display: flex;
  gap: 18px;
  white-space: nowrap;
  padding-left: 30px;
  animation: tmScroll 60s linear infinite;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,.85);
}
.tm-track strong {
  color: var(--ec-cyan);
  font-weight: 600;
}
.tm-sep {
  color: var(--ec-blue);
  font-size: 12px;
}
@keyframes tmScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* push hero down to clear marquee */
.hero { padding-top: 190px; }
@media (max-width: 720px) { .hero { padding-top: 160px; } }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease, padding .25s ease;
  padding: 12px 0;
}
.header.scrolled {
  background: rgba(255,255,255,.96);
  border-bottom-color: rgba(2,45,141,.10);
  padding: 8px 0;
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand img {
  height: 76px;
  transition: height .25s ease;
}
.header.scrolled .brand img { height: 58px; }

.nav {
  display: flex;
  gap: 6px;
  margin-left: 20px;
}
.nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ec-charcoal);
  padding: 10px 14px;
  border-radius: var(--ec-radius-sm);
  transition: color .2s, background .2s;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 2px; background: var(--ec-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav a:hover { color: var(--ec-blue); }
.nav a:hover::after { transform: scaleX(1); }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-actions .ghost-btn {
  padding: 10px 16px;
  font-size: 12px;
}
.header-actions .cart {
  position: relative;
  padding-right: 18px;
}
.cart-count {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  background: var(--ec-blue);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0;
  border: 2px solid #fff;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: 130px;
  padding-bottom: 60px;
  background: var(--ec-white);
  overflow: hidden;
}
.hero::after {
  /* angled bottom edge — motorsport */
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  bottom: -1px;
  height: 50px;
  background: var(--ec-grey-100);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(2,45,141,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,45,141,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
  pointer-events: none;
}
.hero-stripes {
  position: absolute;
  top: 0; right: 0;
  width: 320px; height: 100%;
  pointer-events: none;
  opacity: .65;
}
.hero-stripes span {
  position: absolute;
  top: -50px; bottom: -50px;
  width: 32px;
  transform: skewX(-18deg);
  background: linear-gradient(180deg, rgba(2,45,141,.10), rgba(2,45,141,0));
}
.hero-stripes span:nth-child(1) { right: 40px; }
.hero-stripes span:nth-child(2) { right: 110px; width: 12px; background: linear-gradient(180deg, rgba(0,183,255,.30), rgba(0,183,255,0)); }
.hero-stripes span:nth-child(3) { right: 160px; width: 6px; }

.hero-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ec-blue);
  padding: 8px 14px;
  background: rgba(2,45,141,.06);
  border: 1px solid rgba(2,45,141,.12);
  border-radius: var(--ec-radius-pill);
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ec-cyan);
  position: relative;
  box-shadow: 0 0 0 0 rgba(0,183,255,.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,183,255,.55); }
  70% { box-shadow: 0 0 0 8px rgba(0,183,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,183,255,0); }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 8.4vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 22px 0 24px;
  color: var(--ec-black);
}
.hero-title .line {
  display: block;
  transform-origin: left;
}
.hero-title em {
  font-style: italic;
  color: var(--ec-charcoal);
  display: inline-block;
  transform: skewX(-6deg);
  position: relative;
}
.hero-title em::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%;
  bottom: 12%;
  height: 16%;
  background: linear-gradient(90deg, var(--ec-cyan), transparent);
  z-index: -1;
  opacity: .35;
}
.hero-title .accent {
  color: var(--ec-blue);
  position: relative;
  display: inline-block;
}
.hero-title .accent::before {
  content: "";
  position: absolute;
  left: -14px; top: 14%;
  width: 5px; height: 72%;
  background: var(--ec-blue);
  border-radius: 4px;
}

.hero-sub {
  font-size: 19px;
  color: var(--ec-grey-600);
  max-width: 520px;
  margin: 0 0 32px;
  text-wrap: pretty;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ec-charcoal);
}
.hero-trust svg { color: var(--ec-blue); }

/* ============================================================
   HERO — competition slider (right column)
   ============================================================ */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-visual-eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
  padding-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-visual-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--ec-blue);
}

.hero-slider {
  position: relative;
}
.slider-viewport {
  overflow: hidden;
  border-radius: var(--ec-radius-lg);
  background: #fff;
  border: 1px solid rgba(2,45,141,.08);
  box-shadow: var(--ec-shadow-lg);
}
.slider-track {
  display: flex;
  transition: transform .6s cubic-bezier(.6,.2,.1,1);
  will-change: transform;
}
.slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.slide-media {
  position: relative;
  aspect-ratio: 1 / 1 !important;
  background: var(--ec-grey-100);
  overflow: hidden;
}
.slide-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}
.slide-badge {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--ec-radius-pill);
  background: var(--ec-charcoal);
  color: #fff;
  z-index: 2;
}
.slide-badge.ending { background: #ff3b3b; }
.slide-badge.hot { background: linear-gradient(120deg, #ff5e1f, #ff3b3b); }
.slide-badge.new { background: var(--ec-blue); }
.slide-badge.cash { background: linear-gradient(120deg, #157f3a, var(--ec-green)); color: var(--ec-black); }

.slide-cat {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--ec-radius-pill);
  background: rgba(255,255,255,.92);
  color: var(--ec-blue);
  z-index: 2;
}
.slide-cat.light {
  background: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* ── Low Odds Alert Banner ── */
.ec-low-odds-alert {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #00B7FF 0%, #022D8D 50%, #00B7FF 100%);
  background-size: 200% 100%;
  color: #fff;
  font-family: var(--font-label);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: ec-odds-shimmer 3s ease-in-out infinite, ec-odds-pulse 2s ease-in-out infinite;
}
.ec-low-odds-alert svg {
  flex-shrink: 0;
  stroke: #FFD700;
  filter: drop-shadow(0 0 4px rgba(255,215,0,.6));
}
@keyframes ec-odds-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ec-odds-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,183,255,.3); }
  50% { box-shadow: 0 0 20px rgba(0,183,255,.6), 0 0 40px rgba(0,183,255,.2); }
}
.ec-low-odds-alert[data-tier="great"] {
  background: linear-gradient(90deg, #15803d 0%, #064e3b 50%, #15803d 100%);
  background-size: 200% 100%;
}
.ec-low-odds-alert[data-tier="great"] svg {
  stroke: #fbbf24;
}

.slide-spec {
  position: absolute;
  bottom: 16px; left: 16px;
  background: rgba(7,7,7,.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}
.spec-key {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.spec-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ec-cyan);
  letter-spacing: 0.04em;
}

/* cash media */
.cash-media {
  background: linear-gradient(135deg, var(--ec-blue) 0%, var(--ec-blue-2) 60%, #0a1f5e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cash-media::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.cash-headline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.cash-headline-amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(56px, 7vw, 88px);
  letter-spacing: -0.025em;
  line-height: 1;
}
.cash-headline-sub {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

.slide-foot {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--ec-grey-100);
}
.slide-info { display: flex; flex-direction: column; gap: 10px; }
.slide-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ec-black);
  margin: 0;
  line-height: 1.1;
}
.slide-title em {
  font-weight: 600;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ec-grey-600);
  display: block;
  margin-top: 2px;
}
.progress-row.tight { margin-bottom: 6px; }

.slide-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* arrows */
.slider-arrow {
  position: absolute;
  top: calc(50% - 36px);
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--ec-blue);
  border: 1px solid rgba(2,45,141,.10);
  box-shadow: 0 6px 16px -6px rgba(2,45,141,.30);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: all .25s;
}
.slider-arrow:hover {
  background: var(--ec-blue);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.slider-arrow.prev { left: -22px; }
.slider-arrow.next { right: -22px; }

/* foot — dots + counter */
.slider-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin-top: 4px;
}
.slider-dots {
  display: flex;
  gap: 6px;
}
.slider-dots button,
.slider-dots .slider-dot {
  width: 24px; height: 4px;
  border-radius: 2px;
  background: rgba(2,45,141,.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s, width .25s;
  display: inline-block;
}
.slider-dots button.active,
.slider-dots .slider-dot.active {
  width: 36px;
  background: var(--ec-blue);
}
.slider-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ec-grey-600);
  letter-spacing: 0.04em;
}

/* shared placeholder / progress utilities */
.placeholder-stripes { width: 100%; height: 100%; }
.placeholder-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.placeholder-label code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ec-grey-600);
  background: rgba(255,255,255,.7);
  padding: 6px 12px;
  border-radius: 6px;
}
.placeholder-label.small { position: absolute; top: 12px; left: 12px; right: auto; bottom: auto; }
.placeholder-label.small code { font-size: 11px; padding: 4px 8px; }

.progress-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.progress-label { color: var(--ec-blue); }
.progress-remaining { color: var(--ec-grey-600); }
.progress-track {
  height: 6px;
  background: var(--ec-grey-100);
  border-radius: var(--ec-radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ec-blue) 0%, var(--ec-blue-2) 60%, var(--ec-cyan) 100%);
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(0,183,255,.5);
  transition: width 1s ease;
}
.progress-fill.ending {
  background: linear-gradient(90deg, var(--ec-blue) 0%, #ff5a5a 100%);
  box-shadow: 0 0 12px rgba(255,90,90,.4);
}

@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0   rgba(255,59,59,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(255,59,59,0); }
  100% { box-shadow: 0 0 0 0   rgba(255,59,59,0); }
}
  display: flex;
  justify-content: space-between;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.progress-label { color: var(--ec-blue); }
.progress-remaining { color: var(--ec-grey-600); }
.progress-track {
  height: 6px;
  background: var(--ec-grey-100);
  border-radius: var(--ec-radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ec-blue) 0%, var(--ec-blue-2) 60%, var(--ec-cyan) 100%);
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(0,183,255,.5);
  transition: width 1s ease;
}
.progress-fill.ending {
  background: linear-gradient(90deg, var(--ec-blue) 0%, #ff5a5a 100%);
  box-shadow: 0 0 12px rgba(255,90,90,.4);
}

.float-pill {
  position: absolute;
  bottom: -16px; left: -16px;
  background: var(--ec-black);
  color: #fff;
  padding: 12px 18px 12px 16px;
  border-radius: var(--ec-radius-pill);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--ec-shadow-lg);
  transform: rotate(-2deg);
}
.float-pill strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ec-cyan);
}
.float-pill small {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
.pulse-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ec-cyan);
  box-shadow: 0 0 0 0 rgba(0,183,255,.6);
  animation: pulse 1.8s infinite;
  flex-shrink: 0;
}

/* ============================================================
   VALUE STRIP — replaces stats bar
   ============================================================ */
.value-strip {
  background: var(--ec-grey-100);
  padding: 22px 0;
  border-bottom: 1px solid var(--ec-grey-200);
}
.value-strip-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}
.vs-item {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.vs-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ec-grey-200);
  color: var(--ec-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vs-text { display: flex; flex-direction: column; gap: 2px; }
.vs-text strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ec-black);
  font-style: italic;
}
.vs-text span {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
}
.vs-divider {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, transparent, var(--ec-grey-200), transparent);
}

/* ============================================================
   LIVE DRAW
   ============================================================ */
.live-draw {
  padding: 64px 0 48px;
  background: var(--ec-grey-100);
  position: relative;
}
.live-draw::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(0,183,255,.06), transparent 50%),
    radial-gradient(circle at 20% 50%, rgba(2,45,141,.05), transparent 50%);
  pointer-events: none;
}
.live-draw-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.live-draw-card {
  background: #fff;
  border-radius: var(--ec-radius-lg);
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 32px;
  box-shadow: var(--ec-shadow-glow);
  border: 1.5px solid rgba(2,45,141,.10);
  position: relative;
  overflow: hidden;
}
.live-draw-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 60%, rgba(0,183,255,.06) 78%, transparent 92%);
  pointer-events: none;
}
.live-draw-card::after {
  /* angled accent stripe */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -2px; width: 5px;
  background: linear-gradient(180deg, var(--ec-blue), var(--ec-cyan));
  border-radius: 5px 0 0 5px;
}

.ld-left { display: flex; flex-direction: column; gap: 6px; }
.ld-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ec-blue);
}
.ld-pill .live-dot { background: #ff3b3b; }
.ld-pill .live-dot::after { background: rgba(255,59,59,.6); }
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(255,59,59,.55); }
  70% { box-shadow: 0 0 0 8px rgba(255,59,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); }
}
.ld-pill .live-dot { animation: pulse-red 1.5s infinite; }

.ld-prize {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin: 0;
  color: var(--ec-black);
  letter-spacing: -0.01em;
  font-style: italic;
}

.ld-clock {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ld-unit {
  background: var(--ec-grey-100);
  border: 1.5px solid var(--ec-grey-200);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 62px;
  text-align: center;
  position: relative;
}
.ld-unit.active {
  background: var(--ec-blue);
  border-color: var(--ec-blue);
}
.ld-unit.active .ld-num { color: #fff; }
.ld-unit.active .ld-lbl { color: rgba(255,255,255,.78); }
.ld-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  font-style: italic;
  color: var(--ec-black);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ld-lbl {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--ec-grey-600);
}
.ld-colon {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ec-grey-200);
  font-style: italic;
}

.ld-watch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(120deg, var(--ec-blue), var(--ec-blue-2));
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--ec-radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px -10px rgba(2,45,141,.55);
  transition: transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.ld-watch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .8s ease;
}
.ld-watch:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(2,45,141,.65); }
.ld-watch:hover::after { transform: translateX(100%); }

.ld-foot {
  text-align: center;
  margin: 18px 0 0;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
}

/* ============================================================
   COMPETITIONS
   ============================================================ */
.competitions {
  padding: 100px 0;
  background: #fff;
  position: relative;
}

.comp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}
.filter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: var(--ec-radius-pill);
  background: var(--ec-grey-100);
  color: var(--ec-grey-600);
  border: 1.5px solid transparent;
  transition: all .25s;
}
.filter:hover { color: var(--ec-blue); border-color: rgba(2,45,141,.18); }
.filter.on {
  background: var(--ec-black);
  color: #fff;
  border-color: var(--ec-black);
}

.comp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.comp-card {
  background: #fff;
  border-radius: var(--ec-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ec-grey-200);
  box-shadow: var(--ec-shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
}
.comp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ec-shadow);
  border-color: rgba(2,45,141,.20);
}

.comp-media {
  position: relative;
  aspect-ratio: 1 / 1 !important;
  background: var(--ec-grey-100);
  overflow: hidden;
}
.comp-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.comp-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--ec-radius-pill);
  background: var(--ec-charcoal);
  color: #fff;
  z-index: 2;
}
.comp-badge.ending { background: #ff3b3b; }
.comp-badge.hot { background: linear-gradient(120deg, #ff5e1f, #ff3b3b); }
.comp-badge.new { background: var(--ec-blue); }
.comp-badge.cash { background: linear-gradient(120deg, #157f3a, var(--ec-green)); color: var(--ec-black); }

.comp-fav {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--ec-grey-600);
  cursor: pointer;
  transition: color .2s, background .2s, transform .2s;
  z-index: 2;
}
.comp-fav:hover { color: #ff3b3b; transform: scale(1.08); }

.cash-prize {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ec-blue) 0%, var(--ec-blue-2) 60%, #0a1f5e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  overflow: hidden;
}
.cash-prize::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.cash-amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 52px;
  letter-spacing: -0.02em;
  font-style: italic;
  position: relative;
}
.cash-sub {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  position: relative;
}

.comp-body { padding: 18px 18px 18px; }
.comp-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.comp-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-blue);
}
.comp-odds {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ec-grey-600);
  background: var(--ec-grey-100);
  padding: 2px 8px;
  border-radius: 4px;
}
.comp-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ec-black);
  margin: 0 0 14px;
  text-transform: uppercase;
  font-style: italic;
}
.comp-title span {
  font-weight: 600;
  color: var(--ec-grey-600);
  font-size: 13px;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  display: block;
  margin-top: 2px;
}

.comp-progress { margin-bottom: 16px; }
.comp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.comp-price {
  display: flex; flex-direction: column;
}
.comp-price small {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
}
.comp-price strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ec-black);
  font-style: italic;
}

/* ── Sold Out State ── */
.ec-sold-out { opacity: 0.7; pointer-events: auto; }
.ec-sold-out .comp-media img,
.ec-sold-out .slide-media img { filter: grayscale(40%) brightness(0.85); }
.comp-badge.sold-out,
.slide-badge.sold-out {
  background: #555 !important;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.sold-out-btn {
  background: #888 !important;
  border-color: #888 !important;
  color: #fff !important;
  cursor: default;
  pointer-events: none;
}
.sold-out-btn:hover { transform: none !important; box-shadow: none !important; }
.progress-fill.sold-out { background: #888 !important; }
.draw-closed-btn {
  background: var(--ec-charcoal) !important;
  border-color: var(--ec-charcoal) !important;
  color: #fff !important;
  cursor: default;
  pointer-events: none;
}
.ec-draw-closed { opacity: 0.65; }

.see-all-wrap { margin-top: 40px; text-align: center; }

/* ============================================================
   HOW IT WORKS — dark contrast section
   ============================================================ */
.how {
  padding: 110px 0;
  background: var(--ec-black);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.how::before {
  /* glow corners */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(20,70,167,.30), transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(0,183,255,.10), transparent 50%);
  pointer-events: none;
}
.how::after {
  /* grid background */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.how .section-inner { position: relative; }
.how .section-title { color: #fff; }
.how .section-title em { color: var(--ec-cyan); }
.how .section-sub { color: rgba(255,255,255,.70); }
.how .section-eyebrow { color: var(--ec-cyan); }
.how .section-eyebrow::before { background: var(--ec-cyan); }

.how-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.how-step {
  background: rgba(255,255,255,.04);
  padding: 36px 28px;
  border-radius: var(--ec-radius-lg);
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  transition: transform .3s, border-color .3s, background .3s;
  backdrop-filter: blur(8px);
}
.how-step:hover {
  transform: translateY(-4px);
  border-color: rgba(0,183,255,.40);
  background: rgba(0,183,255,.04);
}
.how-num {
  position: absolute;
  top: 20px; right: 24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 56px;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,.06);
  line-height: 1;
}
.how-icon {
  width: 60px; height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ec-blue), var(--ec-blue-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px -8px rgba(0,183,255,.50);
}
.how-icon::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: rotate(-20deg) translateX(-80%);
}
.how-step h3 {
  font-size: 22px;
  text-transform: uppercase;
  font-style: italic;
  margin-bottom: 10px;
  color: #fff;
}
.how-step p {
  margin: 0;
  color: rgba(255,255,255,.65);
  font-size: 15px;
}

.how-connector {
  align-self: center;
  width: 60px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--ec-cyan) 0 6px, transparent 6px 12px);
  position: relative;
}
.how-connector::after {
  content: "";
  position: absolute;
  right: -2px; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--ec-cyan);
}

/* ============================================================
   TRUST / TRUSTPILOT — light section
   ============================================================ */
.trust {
  padding: 110px 0;
  background: var(--ec-grey-100);
  position: relative;
  overflow: hidden;
}
.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(0,183,255,.10), transparent 50%),
    radial-gradient(ellipse at 5% 90%, rgba(2,45,141,.08), transparent 50%);
  pointer-events: none;
}
.trust .section-inner { position: relative; }

.trust-head { text-align: center; margin: 0 auto 56px; max-width: 760px; }
.trust-head .section-title { margin-top: 14px; }

/* ---------- Trustpilot hero panel ---------- */
.tp-panel {
  background: #fff;
  border-radius: var(--ec-radius-lg);
  border: 1px solid var(--ec-grey-200);
  box-shadow: var(--ec-shadow);
  padding: 36px 44px;
  display: grid;
  grid-template-columns: 1.1fr auto 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.tp-panel::before {
  /* TP-green accent bar on the left */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 5px;
  background: linear-gradient(180deg, #00B67A, #00B7FF);
}

.tp-left { display: flex; flex-direction: column; gap: 14px; }

.tp-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tp-star-mark {
  width: 32px; height: 32px;
  background: #00B67A;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.tp-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ec-black);
}

.tp-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tp-stars {
  display: flex;
  gap: 3px;
}
.tp-star {
  width: 30px; height: 30px;
  background: #00B67A;
  display: inline-block;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.6 14.9 8 22 8.5l-5.4 4.7 1.7 7-6.3-3.8L5.7 20.3l1.7-7L2 8.5 9.1 8z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.6 14.9 8 22 8.5l-5.4 4.7 1.7 7-6.3-3.8L5.7 20.3l1.7-7L2 8.5 9.1 8z'/></svg>") center / contain no-repeat;
  position: relative;
}
.tp-stars.small .tp-star { width: 18px; height: 18px; }
.tp-rating-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ec-black);
}

.tp-score {
  margin: 0;
  font-size: 15px;
  color: var(--ec-grey-600);
}
.tp-score strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 38px;
  color: var(--ec-black);
  margin-right: 8px;
  letter-spacing: -0.02em;
}
.tp-score a { color: var(--ec-blue); text-decoration: underline; }

.tp-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--ec-grey-200), transparent);
}

.tp-distribution {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tp-distribution li {
  display: grid;
  grid-template-columns: 50px 1fr 40px;
  gap: 12px;
  align-items: center;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
}
.tp-d-bar {
  height: 8px;
  background: var(--ec-grey-100);
  border-radius: var(--ec-radius-pill);
  overflow: hidden;
  display: block;
}
.tp-d-bar > span {
  display: block;
  height: 100%;
  background: #00B67A;
  border-radius: inherit;
  transition: width 1s ease;
}
.tp-distribution li:nth-child(4) .tp-d-bar > span,
.tp-distribution li:nth-child(5) .tp-d-bar > span { background: var(--ec-grey-400); }
.tp-d-pct { color: var(--ec-charcoal); font-weight: 700; text-align: right; }

/* ---------- Review cards ---------- */
.tp-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.tp-review {
  background: #fff;
  border: 1px solid var(--ec-grey-200);
  border-radius: var(--ec-radius);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  position: relative;
}
.tp-review::before {
  content: "“";
  position: absolute;
  top: -20px; right: 18px;
  font-family: Georgia, serif;
  font-size: 100px;
  line-height: 1;
  color: var(--ec-grey-200);
  font-weight: 700;
  pointer-events: none;
}
.tp-review:hover {
  transform: translateY(-4px);
  box-shadow: var(--ec-shadow);
  border-color: rgba(2,45,141,.18);
}
.tp-review-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ec-black);
  margin: 0;
}
.tp-review-body {
  margin: 0;
  font-size: 14px;
  color: var(--ec-grey-600);
  line-height: 1.6;
  flex: 1;
}
.tp-review-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--ec-grey-100);
}
.tp-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tp-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ec-blue), var(--ec-blue-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.tp-author strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ec-black);
}
.tp-author small {
  display: block;
  font-size: 11px;
  color: var(--ec-grey-600);
  margin-top: 1px;
}
.tp-date {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ec-grey-400);
}

/* ---------- Trust pillars ---------- */
.trust-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.trust-pillar {
  background: #fff;
  border: 1px solid var(--ec-grey-200);
  border-radius: var(--ec-radius);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.trust-pillar:hover {
  border-color: rgba(2,45,141,.25);
  transform: translateY(-2px);
  box-shadow: var(--ec-shadow);
}
.tp-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(2,45,141,.06);
  color: var(--ec-blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.trust-pillar strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ec-black);
}
.trust-pillar span {
  font-size: 13px;
  color: var(--ec-grey-600);
  line-height: 1.5;
}

/* ---------- Payment strip ---------- */
.payment-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 28px;
  background: #fff;
  border: 1px solid var(--ec-grey-200);
  border-radius: var(--ec-radius);
}
.payment-label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
}
.payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pay-chip {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 8px 14px;
  border: 1px solid var(--ec-grey-200);
  border-radius: 6px;
  color: var(--ec-grey-600);
  background: var(--ec-grey-100);
}

/* ============================================================
   WINNERS
   ============================================================ */
.winners {
  padding: 100px 0 60px;
  background: #fff;
  position: relative;
}
.winners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.winner-card {
  background: #fff;
  border: 1px solid var(--ec-grey-200);
  border-radius: var(--ec-radius);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.winner-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ec-shadow);
  border-color: rgba(2,45,141,.20);
}
.winner-avatar {
  aspect-ratio: 4/3;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='40' height='40' fill='none' stroke='%2399A1B0' stroke-width='1.5'><circle cx='12' cy='9' r='4'/><path d='M3 21c0-5 4-8 9-8s9 3 9 8'/></svg>") no-repeat center,
    repeating-linear-gradient(-18deg, var(--ec-grey-100) 0 22px, var(--ec-grey-200) 22px 24px);
  background-size: 44px, auto;
  position: relative;
}
.winner-avatar::after {
  content: "winner";
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ec-blue);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}
.winner-info { padding: 16px 18px 20px; }
.winner-meta {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
}
.winner-info h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  margin: 4px 0 6px;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: -0.01em;
}
.winner-prize {
  display: block;
  font-size: 14px;
  color: var(--ec-blue);
  font-weight: 600;
  margin-bottom: 8px;
}
.winner-ticket {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ec-grey-600);
  padding: 3px 8px;
  background: var(--ec-grey-100);
  border-radius: 4px;
  display: inline-block;
}

.winner-marquee {
  overflow: hidden;
  background: var(--ec-grey-100);
  border-top: 1px solid var(--ec-grey-200);
  border-bottom: 1px solid var(--ec-grey-200);
  padding: 14px 0;
  margin: 0 calc(-1 * var(--gutter));
  border-radius: var(--ec-radius);
}
.marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ec-charcoal);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: 100px 0;
  background: var(--ec-grey-100);
  position: relative;
}
.faq-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.faq-head { position: sticky; top: 100px; }
.faq-head .section-title { margin-bottom: 16px; }
.faq-head .section-sub { margin-bottom: 24px; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #fff;
  border-radius: var(--ec-radius);
  border: 1px solid var(--ec-grey-200);
  overflow: hidden;
  transition: border-color .25s;
}
.faq-item[open] { border-color: rgba(2,45,141,.25); box-shadow: var(--ec-shadow-sm); }
.faq-item summary {
  list-style: none;
  padding: 22px 28px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ec-black);
  text-transform: uppercase;
  font-style: italic;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--ec-blue);
  font-style: normal;
  margin-left: 16px;
  transition: transform .3s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0;
  padding: 0 28px 24px;
  color: var(--ec-grey-600);
  font-size: 15px;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  padding: 100px 0 110px;
  background: linear-gradient(120deg, var(--ec-blue) 0%, var(--ec-blue-2) 45%, #0a1f5e 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.cta-stripes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cta-stripes span {
  position: absolute;
  top: -10%; bottom: -10%;
  width: 24px;
  transform: skewX(-18deg);
  opacity: .15;
  background: var(--ec-cyan);
}
.cta-stripes span:nth-child(1) { left: 6%; }
.cta-stripes span:nth-child(2) { left: 12%; width: 8px; opacity: .25; }
.cta-stripes span:nth-child(3) { right: 8%; width: 14px; opacity: .20; }

.cta-inner { position: relative; }
.cta-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 86px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  font-style: italic;
  margin: 16px 0 18px;
}
.cta-title em { color: var(--ec-cyan); }
.cta-sub {
  font-size: 18px;
  color: rgba(255,255,255,.78);
  margin: 0 0 32px;
}
.cta-sub strong { color: #fff; font-weight: 700; }
.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-actions .primary-btn {
  background: #fff;
  color: var(--ec-blue);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.30);
}
.cta-actions .primary-btn:hover {
  background: var(--ec-cyan);
  color: var(--ec-black);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ec-black);
  color: rgba(255,255,255,.7);
  padding: 80px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 60px;
  align-items: start;
}
.footer-brand img {
  height: 60px;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}
.footer-brand img.footer-logo {
  height: 85px;
  width: auto;
  margin-left: -4px;
  margin-bottom: 4px;
  filter: none;
  display: block;
}
.footer-col h5 { margin-top: 12px; }
.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 320px;
  color: rgba(255,255,255,.55);
}
.social { display: flex; gap: 8px; }
.social a {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .25s, border-color .25s, color .25s;
}
.social a:hover { background: var(--ec-blue); border-color: var(--ec-blue); color: #fff; }

.footer-col h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  transition: color .2s;
}
.footer-col a:hover { color: var(--ec-cyan); }

.sub-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  background: #050505;
}
.sub-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
.sub-footer p { margin: 0; }
.sub-footer a { color: var(--ec-cyan); }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks-panel {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 280px;
  background: #fff;
  border-radius: var(--ec-radius);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.25);
  border: 1px solid var(--ec-grey-200);
  z-index: 200;
  padding: 18px;
  display: none;
}
.tweaks-panel.open { display: block; }
.tweaks-panel h6 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ec-blue);
  display: flex; align-items: center; gap: 8px;
}
.tweaks-panel h6::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ec-blue);
}
.tweaks-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tweaks-row label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
}
.tweaks-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--ec-grey-100);
  border-radius: var(--ec-radius-sm);
}
.tweaks-seg button {
  padding: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
  border-radius: 6px;
  transition: all .2s;
}
.tweaks-seg button.on { background: #fff; color: var(--ec-blue); box-shadow: var(--ec-shadow-sm); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .cat-card:nth-child(2), .cat-card:nth-child(3) { transform: none; }
  .value-strip-inner { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .value-strip-inner .vs-divider { display: none; }
  .live-draw-card { grid-template-columns: 1fr; row-gap: 20px; }
  .ld-clock { justify-content: center; }
  .comp-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: 1fr; }
  .how-connector { display: none; }
  .tp-panel { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
  .tp-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--ec-grey-200), transparent); }
  .tp-reviews { grid-template-columns: 1fr; }
  .winners-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-head { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .nav { display: none; }
}
@media (max-width: 720px) {
  .hero { padding-top: 110px; }
  .hero-title { font-size: 56px; }
  .comp-grid { grid-template-columns: 1fr; }
  .winners-grid { grid-template-columns: 1fr; }
  .ld-clock { gap: 4px; flex-wrap: wrap; justify-content: center; }
  .ld-unit { min-width: 54px; padding: 8px 10px; }
  .ld-num { font-size: 22px; }
  .header-actions .ghost-btn span { display: none; }
  .header-actions .primary-btn { padding: 10px 16px; font-size: 11px; }
  .footer-inner { grid-template-columns: 1fr; }
  .section-head.between { flex-direction: column; align-items: start; }
  .brand img { height: 56px; }
  .header.scrolled .brand img { height: 46px; }
}

/* ============================================================
   SINGLE PRODUCT PAGE
   Scoped to .single-product body class
   ============================================================ */

/* --- Product gallery --- */
.single-product .iconic-woothumbs-all-images-wrap {
  border-radius: var(--ec-radius);
  overflow: hidden;
  box-shadow: var(--ec-shadow);
}
.single-product .iconic-woothumbs-images__image {
  border-radius: var(--ec-radius);
}
.single-product .iconic-woothumbs-thumbnails__image-wrapper {
  border-radius: var(--ec-radius-sm) !important;
  overflow: hidden;
  border: 2px solid transparent !important;
  transition: border-color .2s ease;
}
.single-product .iconic-woothumbs-thumbnails__image-wrapper:hover,
.single-product .slick-current .iconic-woothumbs-thumbnails__image-wrapper {
  border-color: var(--ec-blue) !important;
}
.single-product .iconic-woothumbs-images__arrow {
  width: 36px;
  height: 36px;
  background: transparent !important;
  backdrop-filter: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, transform .2s;
  opacity: .7;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.single-product .iconic-woothumbs-images__arrow:hover {
  background: transparent !important;
  opacity: 1;
  transform: translateY(-50%) scale(1.12) !important;
}

/* --- Breadcrumb --- */
.single-product .woocommerce-breadcrumb {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ec-grey-400);
  letter-spacing: 0.02em;
}
.single-product .woocommerce-breadcrumb a {
  color: var(--ec-blue-2);
  transition: color .2s;
}
.single-product .woocommerce-breadcrumb a:hover {
  color: var(--ec-blue);
}

/* --- Product title --- */
.single-product .product_title,
.single-product .elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.08 !important;
}
.single-product h1.elementor-heading-title {
  font-size: 28px !important;
}

/* --- Price --- */
.single-product .lottery-price,
.single-product .elementor-widget-woocommerce-product-price .price {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  color: var(--ec-charcoal) !important;
}
.single-product .lottery-price .woocommerce-Price-amount,
.single-product .elementor-widget-woocommerce-product-price .woocommerce-Price-amount {
  color: var(--ec-blue) !important;
  font-size: 36px;
}
.single-product .lottery-price .per-ticket-text,
.single-product .lottery-price small {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ec-grey-400);
}

/* --- Countdown timer --- */
.single-product .lottery-time.countdown {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px;
  margin: 16px 0;
  white-space: nowrap;
}
.single-product .lottery-time .lottery-time-text {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ec-grey-400);
  margin-bottom: 6px;
}
.single-product .wc_lotery_countdown-section {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: var(--ec-grey-100) !important;
  border: 1px solid rgba(2,45,141,.08) !important;
  border-radius: var(--ec-radius-sm) !important;
  padding: 12px 16px !important;
  min-width: 72px !important;
  height: auto !important;
  transition: border-color .2s;
}
.single-product .wc_lotery_countdown-section:hover {
  border-color: var(--ec-blue);
}
.single-product .wc_lotery_countdown-amount {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  color: var(--ec-charcoal) !important;
  line-height: 1 !important;
}
.single-product .wc_lotery_countdown-period {
  font-family: var(--font-label) !important;
  font-weight: 600 !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ec-grey-400) !important;
  margin-top: 4px !important;
}

/* --- Progress bar --- */
.single-product .wcl-progress-meter {
  margin: 20px 0;
}
.single-product .wcl-progress-meter .progress-label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.single-product .wcl-progress-meter progress,
.single-product .wcl-progress-meter .lottery_progressbar {
  width: 100%;
  height: 10px;
  border-radius: var(--ec-radius-pill);
  overflow: hidden;
  background: var(--ec-grey-200) !important;
  border: none;
  appearance: none;
  -webkit-appearance: none;
}
.single-product .wcl-progress-meter progress::-webkit-progress-bar {
  background: var(--ec-grey-200) !important;
  border-radius: var(--ec-radius-pill);
}
.single-product .wcl-progress-meter progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--ec-blue), var(--ec-cyan)) !important;
  border-radius: var(--ec-radius-pill);
  transition: width .6s ease;
}
.single-product .wcl-progress-meter progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--ec-blue), var(--ec-cyan)) !important;
  border-radius: var(--ec-radius-pill);
}

/* --- Ticket selector buttons (1, 10, 25, 50) --- */
.single-product .ticket-selector-btn,
.single-product .elementor-product-lottery .quantity-button,
.single-product .pick-ticket .ticket-option,
.single-product .elementor-lucky-dip .lucky_dip button {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: 2px solid var(--ec-grey-200) !important;
  background: var(--ec-white) !important;
  color: var(--ec-charcoal) !important;
  border-radius: var(--ec-radius-sm) !important;
  padding: 12px 20px !important;
  cursor: pointer;
  transition: all .2s ease !important;
  text-transform: none !important;
}
.single-product .ticket-selector-btn:hover,
.single-product .elementor-product-lottery .quantity-button:hover,
.single-product .pick-ticket .ticket-option:hover,
.single-product .elementor-lucky-dip .lucky_dip button:hover {
  border-color: var(--ec-blue) !important;
  color: var(--ec-blue) !important;
  background: rgba(2,45,141,.04) !important;
}
.single-product .ticket-selector-btn.active,
.single-product .ticket-selector-btn.selected,
.single-product .pick-ticket .ticket-option.active {
  background: var(--ec-blue) !important;
  border-color: var(--ec-blue) !important;
  color: #fff !important;
}

/* --- Quantity input --- */
.single-product .quantity .qty {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--ec-charcoal) !important;
  border: 2px solid var(--ec-grey-200) !important;
  border-radius: var(--ec-radius-sm) !important;
  padding: 10px 16px !important;
  text-align: center;
  min-width: 60px;
  transition: border-color .2s !important;
  background: var(--ec-white) !important;
}
.single-product .quantity .qty:focus {
  border-color: var(--ec-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(2,45,141,.12);
}
.single-product .quantity button,
.single-product .quantity .minus,
.single-product .quantity .plus {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ec-grey-200) !important;
  border-radius: var(--ec-radius-sm) !important;
  background: var(--ec-white) !important;
  color: var(--ec-charcoal) !important;
  cursor: pointer;
  transition: all .2s !important;
}
.single-product .quantity button:hover,
.single-product .quantity .minus:hover,
.single-product .quantity .plus:hover {
  border-color: var(--ec-blue) !important;
  color: var(--ec-blue) !important;
}

/* --- Range slider --- */
.single-product input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--ec-grey-200);
  border-radius: var(--ec-radius-pill);
  outline: none;
  margin: 12px 0 20px;
}
.single-product input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ec-blue);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(2,45,141,.35);
  border: 3px solid #fff;
  transition: transform .15s;
}
.single-product input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.single-product input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ec-blue);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(2,45,141,.35);
  border: 3px solid #fff;
}

/* --- Add to cart / Buy button --- */
.single-product .single_add_to_cart_button {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: var(--ec-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ec-radius-pill) !important;
  padding: 18px 36px !important;
  box-shadow: 0 6px 20px -6px rgba(2,45,141,.55), inset 0 -2px 0 rgba(0,0,0,.18);
  transition: all .3s ease !important;
  position: relative;
  overflow: hidden;
}
.single-product .single_add_to_cart_button:hover {
  background: var(--ec-blue-2) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(2,45,141,.65), inset 0 -2px 0 rgba(0,0,0,.18) !important;
}
.single-product .single_add_to_cart_button:active {
  transform: translateY(0);
}

/* --- Free postal entry button --- */
.single-product a[href*="popup"] .elementor-button,
.single-product .free-postal-entry,
.single-product [class*="postal"] .elementor-button {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--ec-charcoal) !important;
  border: 2px solid var(--ec-grey-200) !important;
  border-radius: var(--ec-radius-pill) !important;
  padding: 12px 24px !important;
  transition: all .2s ease !important;
}
.single-product a[href*="popup"] .elementor-button:hover,
.single-product .free-postal-entry:hover,
.single-product [class*="postal"] .elementor-button:hover {
  border-color: var(--ec-blue) !important;
  color: var(--ec-blue) !important;
}

/* --- Tabs (Instant Wins / Description / FAQs) --- */
.single-product .elementor-widget-nav-menu.nav-comp .elementor-nav-menu--main .elementor-item,
.single-product .woocommerce-tabs .wc-tabs li a,
.single-product .e-con.nav-comp .elementor-nav-menu .elementor-item {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ec-grey-400) !important;
  padding: 18px 24px !important;
  border-bottom: 3px solid transparent !important;
  transition: color .2s, border-color .2s !important;
  background: none !important;
}
.single-product .elementor-widget-nav-menu.nav-comp .elementor-nav-menu--main .elementor-item:hover,
.single-product .elementor-widget-nav-menu.nav-comp .elementor-nav-menu--main .elementor-item.elementor-item-active,
.single-product .woocommerce-tabs .wc-tabs li.active a,
.single-product .e-con.nav-comp .elementor-nav-menu .elementor-item:hover,
.single-product .e-con.nav-comp .elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--ec-blue) !important;
  border-bottom-color: var(--ec-blue) !important;
}

/* --- Instant wins section --- */
.single-product .single-product-instant-wins,
.single-product [class*="instant-wins"] {
  background: var(--ec-grey-100);
  border-radius: var(--ec-radius-lg);
  padding: 48px 32px;
}
.single-product .instant-win-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ec-white);
  border: 1px solid var(--ec-grey-200);
  border-radius: var(--ec-radius-pill);
  padding: 10px 20px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 14px;
  color: var(--ec-charcoal);
  margin-bottom: 32px;
}
.single-product .instant-win-counter strong,
.single-product .instant-win-counter .count {
  color: var(--ec-blue);
  font-weight: 700;
}

/* --- Prize cards (BMW, Rolex, Cash etc) --- */
.single-product .instant-win-table-grouping .elementor-grid-item,
.single-product .elementor-widget-loop-grid .e-loop-item {
  border-radius: var(--ec-radius) !important;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.single-product .instant-win-table-grouping .elementor-grid-item:hover,
.single-product .elementor-widget-loop-grid .e-loop-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--ec-shadow-lg);
}

/* --- Description section --- */
.single-product .woocommerce-Tabs-panel,
.single-product .elementor-widget-text-editor {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ec-grey-600);
}
.single-product .woocommerce-Tabs-panel h2,
.single-product .woocommerce-Tabs-panel h3,
.single-product .elementor-widget-text-editor h2,
.single-product .elementor-widget-text-editor h3,
.single-product .elementor-widget-text-editor strong {
  color: var(--ec-charcoal);
}

/* --- FAQ accordion on product page --- */
.single-product .faq-accordion .faq-question,
.single-product .elementor-toggle .elementor-toggle-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ec-charcoal) !important;
  padding: 18px 24px !important;
  border: 1px solid var(--ec-grey-200) !important;
  border-radius: var(--ec-radius-sm) !important;
  background: var(--ec-white) !important;
  transition: all .2s !important;
  cursor: pointer;
}
.single-product .faq-accordion .faq-question:hover,
.single-product .elementor-toggle .elementor-toggle-title:hover {
  border-color: var(--ec-blue) !important;
  color: var(--ec-blue) !important;
}
.single-product .faq-accordion .faq-question.open,
.single-product .elementor-toggle .elementor-toggle-title.active {
  background: var(--ec-grey-100) !important;
  border-color: var(--ec-blue) !important;
  color: var(--ec-blue) !important;
}
.single-product .faq-accordion .faq-answer,
.single-product .elementor-toggle .elementor-toggle-content {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ec-grey-600);
  padding: 16px 24px;
}

/* --- Pagination in instant wins --- */
.single-product .prize-pagination .page-numbers,
.single-product .woocommerce-pagination .page-numbers li a,
.single-product .woocommerce-pagination .page-numbers li span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ec-grey-200);
  border-radius: var(--ec-radius-sm);
  color: var(--ec-charcoal);
  transition: all .2s;
}
.single-product .prize-pagination .page-numbers:hover,
.single-product .woocommerce-pagination .page-numbers li a:hover {
  border-color: var(--ec-blue);
  color: var(--ec-blue);
}
.single-product .prize-pagination .page-numbers.current,
.single-product .woocommerce-pagination .page-numbers li span.current {
  background: var(--ec-blue);
  border-color: var(--ec-blue);
  color: #fff;
}

/* --- "Other Competition" section background --- */
.single-product .elementor-element-81a7fb7 {
  background-color: var(--ec-blue) !important;
}

/* --- "Other Competition" related products --- */
.single-product .elementor-widget-woocommerce-product-related .products li.product,
.single-product .related.products li.product {
  border-radius: var(--ec-radius);
  overflow: hidden;
  box-shadow: var(--ec-shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.single-product .elementor-widget-woocommerce-product-related .products li.product:hover,
.single-product .related.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--ec-shadow);
}

/* ============================================================
   HERO — slider-only layout (no left copy)
   Multi-slide: 3 on desktop, 2 on tablet, 1 on mobile
   ============================================================ */
/* ============================================================
   Product Detail Refinements
   ============================================================ */

/* Remove the header payment logo strip without touching checkout/payment logic. */
.elementor-location-header .elementor-element-4e0bee0 {
  display: flex !important;
  min-height: 0 !important;
  height: 0 !important;
  margin-bottom: -48px !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}

.elementor-location-header .elementor-element-502bf0a {
  display: none !important;
}

/* Countdown timer */
.single-product .lottery-time.countdown {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center !important;
  gap: 10px 14px;
  width: 100%;
  max-width: 430px;
  margin: 18px 0 24px !important;
  white-space: normal;
}

.single-product .lottery-time .lottery-time-text {
  margin: 0;
  color: var(--ec-grey-600);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.single-product .lottery-time-countdown.is-wc_lotery_countdown,
.single-product .lottery-time-countdown {
  display: grid !important;
  width: 100%;
  max-width: 220px;
}

.single-product .lottery-time-countdown .wc_lotery_countdown-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 10px;
  width: 100%;
}

.single-product .wc_lotery_countdown-section {
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px;
  padding: 10px 12px !important;
  background: #fff !important;
  border: 1px solid rgba(2,45,141,.14) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px -20px rgba(2,45,141,.45);
}

.single-product .wc_lotery_countdown-amount {
  font-size: 20px !important;
}

.single-product .wc_lotery_countdown-period {
  color: var(--ec-grey-600) !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
}

/* Sold progress */
.single-product .wcl-progress-meter {
  position: relative;
  width: 100%;
  margin: 16px 0 28px !important;
  font-family: var(--font-body);
}

.single-product .ec-progress-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  margin-bottom: 9px;
}

.single-product .ec-progress-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--ec-grey-600);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.single-product .ec-progress-count-left {
  justify-content: flex-end;
}

.single-product .ec-progress-count strong {
  color: var(--ec-charcoal);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.single-product .ec-progress-percent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 5px 10px;
  border-radius: var(--ec-radius-pill);
  background: rgba(2,45,141,.08);
  color: var(--ec-blue);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.single-product .ec-progress-track {
  position: relative;
  height: 16px;
  overflow: hidden;
  border: 1px solid rgba(2,45,141,.08);
  border-radius: var(--ec-radius-pill);
  background: #eaf0f8;
  box-shadow: inset 0 1px 3px rgba(2,45,141,.10);
}

.single-product .ec-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ec-blue) 0%, var(--ec-blue-2) 62%, var(--ec-cyan) 100%);
  box-shadow: 0 0 16px rgba(0,183,255,.26);
  transition: width .6s ease;
}

.single-product .wcl-progress-meter.full .ec-progress-fill {
  background: linear-gradient(90deg, #0c7f3a 0%, var(--ec-green) 100%);
}

.single-product .ec-progress-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

/* Product FAQ section */
.single-product .elementor-element-7af6f4d {
  padding: 72px clamp(18px, 8vw, 126px) 112px !important;
  border-top: 1px solid rgba(2,45,141,.14);
  background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
}

.single-product .elementor-element-2b2b263 {
  width: min(880px, 100%) !important;
  max-width: 880px !important;
  margin: 0 auto !important;
}

.single-product .elementor-element-97dc8e4 .elementor-heading-title {
  color: var(--ec-charcoal) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 4.2vw, 46px) !important;
  font-style: italic;
  font-weight: 900 !important;
  letter-spacing: 0;
  line-height: 1.02 !important;
  text-transform: uppercase;
}

.single-product .faq-accordion {
  display: grid;
  gap: 12px;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 0 !important;
}

.single-product .faq-accordion .faq-item {
  overflow: hidden;
  border: 1px solid rgba(2,45,141,.13);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px -32px rgba(2,45,141,.42);
}

.single-product .faq-accordion .faq-question,
.single-product .elementor-toggle .elementor-toggle-title {
  width: 100%;
  min-height: 64px;
  justify-content: space-between;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--ec-charcoal) !important;
  letter-spacing: 0.08em !important;
}

.single-product .faq-accordion .faq-question:hover,
.single-product .elementor-toggle .elementor-toggle-title:hover,
.single-product .faq-accordion .faq-question.open,
.single-product .elementor-toggle .elementor-toggle-title.active {
  background: #f6f8fc !important;
  color: var(--ec-blue) !important;
}

.single-product .faq-accordion .faq-answer,
.single-product .elementor-toggle .elementor-toggle-content {
  padding: 0 24px 24px !important;
  border-top: 1px solid rgba(2,45,141,.08);
  background: #fff;
  color: #3a3f4b;
}

.single-product .faq-accordion .faq-answer[hidden] {
  display: none !important;
}

/* Other Competition cards */
.single-product .elementor-element-81a7fb7 {
  padding: 88px clamp(18px, 8vw, 126px) 96px !important;
  background: var(--ec-blue) !important;
}

.single-product .elementor-element-81a7fb7 .elementor-heading-title {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 3.5vw, 42px) !important;
  font-style: italic;
  font-weight: 900 !important;
  letter-spacing: 0;
  text-transform: uppercase;
}

.single-product .elementor-element-81a7fb7 .elementor-loop-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px !important;
  align-items: stretch;
}

.single-product .elementor-element-81a7fb7 .e-loop-item {
  display: flex !important;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(2,45,141,.12);
  border-radius: 8px;
  background: #fff !important;
  box-shadow: 0 28px 54px -34px rgba(0,0,0,.42);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.single-product .elementor-element-81a7fb7 .e-loop-item:hover {
  transform: translateY(-5px);
  border-color: rgba(0,183,255,.36);
  box-shadow: 0 34px 68px -34px rgba(0,0,0,.58);
}

.single-product .elementor-element-81a7fb7 .e-loop-item > .e-con,
.single-product .elementor-element-81a7fb7 .e-loop-item .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.single-product .elementor-element-81a7fb7 .e-loop-item .e-con-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.single-product .elementor-element-81a7fb7 .elementor-widget-theme-post-featured-image,
.single-product .elementor-element-81a7fb7 .elementor-widget-theme-post-featured-image .elementor-widget-container {
  width: 100%;
}

.single-product .elementor-element-81a7fb7 .elementor-widget-theme-post-featured-image img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.single-product .elementor-element-81a7fb7 .elementor-element-4e9c689 {
  width: 100%;
  padding: 18px 18px 8px !important;
}

.single-product .elementor-element-81a7fb7 .wcl-progress-meter {
  margin: 12px 0 0 !important;
}

.single-product .elementor-element-81a7fb7 .ec-progress-meta {
  gap: 8px;
}

.single-product .elementor-element-81a7fb7 .ec-progress-count {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.single-product .elementor-element-81a7fb7 .ec-progress-count strong {
  font-size: 13px;
}

.single-product .elementor-element-81a7fb7 .ec-progress-percent {
  min-width: 40px;
  padding: 4px 8px;
  font-size: 12px;
}

.single-product .elementor-element-81a7fb7 .ec-progress-track {
  height: 14px;
}

.single-product .elementor-element-81a7fb7 .elementor-widget-button {
  width: 100%;
  margin-top: auto;
  padding: 16px 18px 20px !important;
}

.single-product .elementor-element-81a7fb7 .elementor-button,
.single-product .elementor-element-81a7fb7 .elementor-button-link {
  width: 100%;
  min-height: 52px;
  border-radius: 8px !important;
  background: var(--ec-blue) !important;
  box-shadow: 0 16px 30px -22px rgba(2,45,141,.70);
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.single-product .elementor-element-81a7fb7 .elementor-button:hover,
.single-product .elementor-element-81a7fb7 .elementor-button-link:hover {
  background: var(--ec-blue-2) !important;
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .single-product .elementor-element-81a7fb7 .elementor-loop-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .single-product .lottery-time.countdown {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 10px;
  }

  .single-product .lottery-time-countdown.is-wc_lotery_countdown,
  .single-product .lottery-time-countdown {
    max-width: none;
  }

  .single-product .ec-progress-meta {
    grid-template-columns: 1fr 1fr;
  }

  .single-product .ec-progress-percent {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .single-product .elementor-element-7af6f4d {
    padding: 50px 16px 80px !important;
  }

  .single-product .faq-accordion .faq-question,
  .single-product .elementor-toggle .elementor-toggle-title {
    min-height: 58px;
    padding: 16px 18px !important;
    font-size: 14px !important;
  }

  .single-product .faq-accordion .faq-answer,
  .single-product .elementor-toggle .elementor-toggle-content {
    padding: 0 18px 20px !important;
  }

  .single-product .elementor-element-81a7fb7 {
    padding: 64px 16px 76px !important;
  }

  .single-product .elementor-element-81a7fb7 .elementor-loop-container {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

.hero--slider-only {
  --slides-per-view: 3;
  --slide-gap: 20px;
  padding-top: 130px;
  padding-bottom: 40px;
}
.hero--slider-only .hero-inner--centered {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero--slider-only .hero-slider {
  width: 100%;
}
.hero--slider-only .slider-viewport {
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.hero--slider-only .slider-track {
  gap: 20px;
}
/* Desktop: 3 per view — (100% - 2*20px) / 3 */
.hero--slider-only .slide {
  flex: 0 0 calc((100% - 40px) / 3);
  border-radius: var(--ec-radius-lg);
  background: #fff;
  border: 1px solid rgba(2,45,141,.08);
  box-shadow: var(--ec-shadow-lg);
  overflow: hidden;
}
.hero--slider-only .slide-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.hero--slider-only .slide-media {
  aspect-ratio: auto;
  background: var(--ec-grey-100);
}
.hero--slider-only .slide-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}
.hero--slider-only .slider-arrow {
  top: 40%;
}

/* Draw date styling — hero slides */
.slide-draw-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ec-blue);
  margin: 0;
}
.slide-draw-date svg {
  flex-shrink: 0;
  color: var(--ec-blue);
}

/* Draw date styling — comp grid */
.comp-draw-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ec-blue);
  margin: 0 0 4px;
}
.comp-draw-date svg {
  flex-shrink: 0;
  color: var(--ec-blue);
}

/* ============================================================
   COUNTDOWN URGENCY SYSTEM
   ============================================================ */

/* --- Warning: < 24 hours --- */
.ec-card-countdown.ec-cd-warning {
  color: #e67e00;
}
.ec-card-countdown.ec-cd-warning svg { color: #e67e00; }

/* --- Critical: < 1 hour --- */
.ec-card-countdown.ec-cd-critical {
  color: #e63946;
  animation: ec-pulse-text 1.5s ease-in-out infinite;
}
.ec-card-countdown.ec-cd-critical svg { color: #e63946; }

/* Card glow when critical */
.ec-cd-card-critical {
  box-shadow: 0 0 20px -4px rgba(230, 57, 70, .35), var(--ec-shadow-lg) !important;
  border-color: rgba(230, 57, 70, .25) !important;
}

/* "Enter Now" button pulse when critical */
.ec-cd-card-critical .primary-btn {
  animation: ec-btn-glow 1.5s ease-in-out infinite;
}

/* --- Final minute: < 60 seconds --- */
.ec-card-countdown.ec-cd-final {
  color: #e63946;
  font-weight: 800;
  animation: ec-flash-red .5s steps(1) infinite;
}
.ec-card-countdown.ec-cd-final svg { color: #e63946; }

/* Card shake in final minute */
.ec-cd-card-final {
  animation: ec-shake .4s ease-in-out infinite;
  box-shadow: 0 0 30px -4px rgba(230, 57, 70, .5), var(--ec-shadow-lg) !important;
  border-color: rgba(230, 57, 70, .4) !important;
}

/* --- Ended --- */
.ec-card-countdown.ec-cd-ended {
  color: var(--ec-grey-500);
}
.ec-card-countdown.ec-cd-ended svg { color: var(--ec-grey-500); }
.ec-cd-card-ended {
  opacity: .55;
  filter: grayscale(.4);
  transition: opacity .6s, filter .6s;
}

/* --- Keyframes --- */
@keyframes ec-pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@keyframes ec-btn-glow {
  0%, 100% { box-shadow: 0 0 8px 0 rgba(0, 183, 255, .2); }
  50% { box-shadow: 0 0 22px 4px rgba(0, 183, 255, .55), 0 0 60px 8px rgba(0, 183, 255, .15); }
}

@keyframes ec-flash-red {
  0%, 49% { color: #e63946; }
  50%, 100% { color: #ff8a94; }
}

@keyframes ec-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px) rotate(-.3deg); }
  40% { transform: translateX(2px) rotate(.3deg); }
  60% { transform: translateX(-1px) rotate(-.2deg); }
  80% { transform: translateX(1px) rotate(.2deg); }
}

/* --- Progress bar sparkle on hover --- */
.progress-track {
  position: relative;
  overflow: hidden;
}
.progress-track::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transition: none;
  pointer-events: none;
}
.comp-card:hover .progress-track::after,
.slide:hover .progress-track::after {
  animation: ec-sparkle-sweep .8s ease-out forwards;
}
@keyframes ec-sparkle-sweep {
  0% { left: -50%; }
  100% { left: 110%; }
}

/* ============================================================
   EASTER EGG: Lightning storm overlay
   ============================================================ */
.ec-lightning-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: transparent;
}
.ec-lightning-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .9);
  opacity: 0;
  animation: ec-lightning-strike .15s ease-out forwards;
}
@keyframes ec-lightning-strike {
  0% { opacity: .95; }
  20% { opacity: .2; }
  40% { opacity: .85; }
  60% { opacity: .1; }
  80% { opacity: .6; }
  100% { opacity: 0; }
}
.ec-lightning-bolt {
  position: absolute;
  font-size: 120px;
  animation: ec-bolt-drop .6s cubic-bezier(.2, .8, .3, 1) forwards;
  filter: drop-shadow(0 0 30px rgba(0, 183, 255, .8)) drop-shadow(0 0 60px rgba(2, 45, 141, .5));
  z-index: 2;
  pointer-events: none;
}
@keyframes ec-bolt-drop {
  0% { transform: translateY(-120vh) scale(1.5) rotate(-15deg); opacity: 1; }
  60% { transform: translateY(30vh) scale(1) rotate(5deg); opacity: 1; }
  100% { transform: translateY(50vh) scale(.8) rotate(10deg); opacity: 0; }
}

/* ============================================================
   EASTER EGG: Dirt bike ride-across
   ============================================================ */
.ec-bike-rider {
  position: fixed;
  bottom: 10%;
  left: -200px;
  z-index: 99998;
  font-size: 100px;
  pointer-events: none;
  animation: ec-bike-ride 4s cubic-bezier(.25, .46, .45, .94) forwards;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.3));
}
.ec-bike-rider .ec-bike-wheelie {
  display: inline-block;
  animation: ec-bike-bounce .15s ease-in-out infinite alternate;
}
.ec-bike-trail {
  position: fixed;
  bottom: 12%;
  left: -200px;
  z-index: 99997;
  pointer-events: none;
  width: 160px;
  height: 30px;
  background: linear-gradient(90deg, rgba(139, 90, 43, .5), transparent);
  border-radius: 50%;
  filter: blur(6px);
  animation: ec-bike-ride 4s cubic-bezier(.25, .46, .45, .94) forwards;
}
@keyframes ec-bike-ride {
  0% { left: -200px; transform: scaleX(-1); }
  45% { transform: scaleX(-1) rotate(0deg); }
  50% { transform: scaleX(-1) rotate(12deg); } /* wheelie! */
  65% { transform: scaleX(-1) rotate(8deg); }
  100% { left: calc(100vw + 200px); transform: scaleX(-1) rotate(0deg); }
}
@keyframes ec-bike-bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* ============================================================
   EASTER EGG: Fortune Spinner (long-press "Enter now")
   ============================================================ */
/* ═══ FORTUNE SPINNER — Electric Competitions themed ═══ */
.ec-fortune-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(2, 15, 45, .88);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ec-fortune-fade-in .3s ease-out;
  transition: opacity .3s;
}
@keyframes ec-fortune-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ec-fortune-box {
  background: linear-gradient(170deg, #0a1628 0%, #0d2244 40%, #091a36 100%);
  border-radius: 24px;
  padding: 40px 44px 32px;
  max-width: 440px;
  width: 92%;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 183, 255, .2);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, .7),
    0 0 60px -10px rgba(0, 183, 255, .15),
    inset 0 1px 0 rgba(255,255,255,.05);
  animation: ec-fortune-pop .4s cubic-bezier(.2, .8, .3, 1.2);
}
.ec-fortune-box.ec-fortune-surge {
  animation: ec-fortune-surge-flash .6s ease-out;
}
@keyframes ec-fortune-surge-flash {
  0% { box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px rgba(0,183,255,.15), inset 0 1px 0 rgba(255,255,255,.05); }
  30% { box-shadow: 0 0 80px 20px rgba(0,255,136,.4), 0 0 120px 40px rgba(0,183,255,.3), inset 0 0 40px rgba(0,255,136,.1); border-color: rgba(0,255,136,.6); }
  100% { box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px rgba(0,183,255,.15), inset 0 1px 0 rgba(255,255,255,.05); }
}
@keyframes ec-fortune-pop {
  from { transform: scale(.7) translateY(30px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* sparks */
.ec-fortune-sparks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ec-fortune-spark {
  position: absolute;
  bottom: 100%;
  width: 2px;
  height: 8px;
  background: linear-gradient(to bottom, transparent, var(--ec-cyan));
  border-radius: 2px;
  animation: ec-spark-fall linear infinite;
  opacity: .6;
}
@keyframes ec-spark-fall {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .7; }
  90% { opacity: .4; }
  100% { transform: translateY(500px); opacity: 0; }
}

/* mini logo */
.ec-fortune-logo-mini {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  color: rgba(0, 183, 255, .35);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ec-fortune-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 28px;
  color: rgba(255,255,255,.25);
  cursor: pointer;
  line-height: 1;
  transition: color .2s, transform .2s;
  z-index: 2;
}
.ec-fortune-close:hover {
  color: var(--ec-cyan);
  transform: rotate(90deg);
}

/* wheel area */
.ec-fortune-wheel-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
  width: 110px;
  height: 110px;
}
.ec-fortune-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 183, 255, .25);
  box-shadow: 0 0 20px rgba(0, 183, 255, .15), inset 0 0 20px rgba(0, 183, 255, .08);
  animation: ec-ring-pulse 2s ease-in-out infinite;
}
@keyframes ec-ring-pulse {
  0%, 100% { border-color: rgba(0, 183, 255, .25); box-shadow: 0 0 20px rgba(0,183,255,.15), inset 0 0 20px rgba(0,183,255,.08); }
  50% { border-color: rgba(0, 183, 255, .5); box-shadow: 0 0 35px rgba(0,183,255,.3), inset 0 0 30px rgba(0,183,255,.15); }
}
.ec-fortune-wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  line-height: 1;
  display: inline-block;
  transition: transform 2.5s cubic-bezier(.2,.8,.3,1);
  filter: drop-shadow(0 0 20px rgba(0,183,255,.4));
}

.ec-fortune-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 20px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #00B7FF, #00ff88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 6px;
  letter-spacing: .02em;
}
.ec-fortune-msg {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  margin: 0 0 20px;
  min-height: 44px;
  transition: opacity .3s;
}

/* voltage meter */
.ec-fortune-meter {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  margin: 0 0 8px;
  overflow: hidden;
}
.ec-fortune-meter-bar {
  height: 100%;
  width: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #00B7FF, #fff);
  box-shadow: 0 0 12px rgba(0,183,255,.5);
  transition: width 2.2s cubic-bezier(.1,.8,.2,1);
}
.ec-fortune-meter-label {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  color: rgba(0,183,255,.6);
  text-align: right;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 18px;
  margin-top: 4px;
}

/* spin button */
.ec-fortune-spin {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  padding: 12px 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 183, 255, .3) !important;
  background: rgba(0, 183, 255, .1) !important;
  color: var(--ec-cyan) !important;
  cursor: pointer;
  transition: all .25s ease !important;
}
.ec-fortune-spin:hover {
  background: rgba(0, 183, 255, .2) !important;
  border-color: var(--ec-cyan) !important;
  box-shadow: 0 0 20px rgba(0, 183, 255, .2) !important;
  color: #fff !important;
}

.hero--slider-only .slider-arrow.prev { left: -54px; }
.hero--slider-only .slider-arrow.next { right: -54px; }

/* Tablet: 2 per view — (100% - 16px) / 2 */
@media (max-width: 1024px) {
  .hero--slider-only .slider-track {
    gap: 16px;
  }
  .hero--slider-only .slide {
    flex: 0 0 calc((100% - 16px) / 2);
  }
  .hero--slider-only .hero-inner--centered {
    max-width: 100%;
  }
  .hero--slider-only .slider-arrow.prev { left: 8px; }
  .hero--slider-only .slider-arrow.next { right: 8px; }
  .hero--slider-only .slider-arrow {
    background: rgba(255,255,255,.85);
    width: 36px; height: 36px;
  }
}

/* Mobile: 1 per view */
@media (max-width: 640px) {
  .hero--slider-only .slider-track {
    gap: 0px;
  }
  .hero--slider-only .slide {
    flex: 0 0 100%;
  }
  .hero--slider-only {
    padding-top: 110px;
    padding-bottom: 20px;
  }
  .hero--slider-only .slide-title {
    font-size: 16px;
  }
  .hero--slider-only .slide-foot {
    padding: 14px 16px 16px;
    gap: 12px;
  }
}

/* --- Back to top button --- */
.twd-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ec-blue);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(2,45,141,.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s, background .2s;
  pointer-events: none;
}
.twd-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.twd-back-to-top:hover {
  background: var(--ec-blue-2);
  transform: translateY(-2px);
}
.twd-back-to-top span {
  font-size: 0;
}
.twd-back-to-top::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-left: 2.5px solid #fff;
  border-top: 2.5px solid #fff;
  transform: rotate(45deg) translateY(2px);
}

/* --- Single product responsive --- */
@media (max-width: 767px) {
  .single-product .wc_lotery_countdown-section {
    padding: 8px 12px;
    min-width: 56px;
  }
  .single-product .wc_lotery_countdown-amount {
    font-size: 20px !important;
  }
  .single-product .single_add_to_cart_button {
    padding: 16px 24px !important;
    font-size: 13px !important;
    width: 100%;
  }
  .single-product .single-product-instant-wins,
  .single-product [class*="instant-wins"] {
    padding: 24px 16px;
    border-radius: var(--ec-radius);
  }
}

/* --- FAQ chevron fix --- */
.single-product .faq-chevron {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
.single-product .faq-chevron::before {
  content: "\f078" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
.single-product .faq-question.open .faq-chevron::before {
  content: "\f077" !important;
}

/* ============================================================
   ADD TO CART / QUANTITY SLIDER — EC Branded
   ============================================================ */
.single-product .slider-main-wrapper {
  width: 100% !important;
  max-width: 600px;
}
.single-product .slider-main-wrapper h3,
.single-product h3:has(+ #wlaqsbn-button-container) {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic;
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ec-black);
}
#wlaqsbn-button-container {
  gap: 10px !important;
  margin-bottom: 20px !important;
}
#wlaqsbn-button-container button.quantity-button {
  width: auto !important;
  flex: 1;
  background: #fff !important;
  border: 2px solid var(--ec-grey-200) !important;
  color: var(--ec-black) !important;
  border-radius: var(--ec-radius-md) !important;
  padding: 12px 16px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  transition: all .2s ease;
}
#wlaqsbn-button-container button.quantity-button:hover {
  border-color: var(--ec-blue) !important;
  color: var(--ec-blue) !important;
  background: rgba(2,45,141,.04) !important;
}
#wlaqsbn-button-container button.quantity-button.active {
  background: var(--ec-blue) !important;
  border-color: var(--ec-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(2,45,141,.25);
}
#wlaqsbn-button-container button.quantity-button span {
  border: none !important;
  border-radius: var(--ec-radius-pill) !important;
  font-family: var(--font-label) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
  letter-spacing: 0.04em;
}
.single-product .ui-widget.ui-widget-content {
  background: var(--ec-grey-200) !important;
  border: 0 !important;
  height: 6px !important;
  border-radius: 3px !important;
}
.single-product .ui-slider .ui-slider-range {
  background: var(--ec-blue) !important;
  height: 6px !important;
  border-radius: 3px !important;
}
.single-product .ui-slider-handle {
  background: var(--ec-blue) !important;
  width: 20px !important;
  height: 20px !important;
  top: -7px !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(2,45,141,.3) !important;
  cursor: grab;
}
.single-product .ui-slider-handle:active { cursor: grabbing; }
.ui-slider-handle .slider-handle-value {
  background: var(--ec-blue) !important;
  border-radius: var(--ec-radius-sm) !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 3px 8px !important;
}
.single-product .new_add_to_card,
.single-product button.single_add_to_cart_button {
  background: var(--ec-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ec-radius-pill) !important;
  padding: 16px 32px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all .25s ease;
  box-shadow: 0 4px 16px rgba(2,45,141,.25);
}
.single-product .new_add_to_card:hover,
.single-product button.single_add_to_cart_button:hover {
  background: var(--ec-cyan) !important;
  color: var(--ec-black) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,183,255,.3);
}
.single-product .btn-range {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: var(--ec-blue) !important;
}
.slider-discount-labels .discount-label {
  font-family: var(--font-label) !important;
  border-radius: 4px;
  background-color: var(--ec-charcoal) !important;
}
.slider-discount-labels .discount-label.highlight {
  background-color: var(--ec-blue) !important;
}
.slider-discount-labels .discount-label::after {
  border-top-color: var(--ec-charcoal) !important;
}
.slider-discount-labels .discount-label.highlight::after {
  border-top-color: var(--ec-blue) !important;
}

/* ============================================================
   CHECKOUT PAGE — EC Branded
   ============================================================ */
.woocommerce-checkout h3,
.woocommerce-checkout h2 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic;
  text-transform: uppercase;
  color: var(--ec-black);
}
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  border: 2px solid var(--ec-grey-200) !important;
  border-radius: var(--ec-radius-md) !important;
  padding: 12px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  transition: border-color .2s ease;
  background: #fff !important;
}
.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout .woocommerce-input-wrapper textarea:focus,
.woocommerce-checkout select:focus {
  border-color: var(--ec-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(2,45,141,.1) !important;
}
.woocommerce-checkout label {
  font-family: var(--font-label) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ec-grey-600) !important;
}
/* Order summary box */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--ec-grey-50, #f8f9fa) !important;
  border-radius: var(--ec-radius-lg) !important;
  padding: 28px !important;
  border: 1px solid var(--ec-grey-200) !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  font-family: var(--font-body) !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: var(--ec-black);
}
/* Place order button */
.woocommerce-checkout #place_order,
.woocommerce-checkout button[type="submit"] {
  background: var(--ec-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ec-radius-pill) !important;
  padding: 16px 40px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 4px 16px rgba(2,45,141,.25);
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button[type="submit"]:hover {
  background: var(--ec-cyan) !important;
  color: var(--ec-black) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,183,255,.3);
}
/* Payment methods */
.woocommerce-checkout .wc_payment_methods {
  list-style: none !important;
  padding: 0 !important;
}
.woocommerce-checkout .wc_payment_method {
  background: #fff;
  border: 2px solid var(--ec-grey-200);
  border-radius: var(--ec-radius-md) !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
  transition: border-color .2s ease;
}
.woocommerce-checkout .wc_payment_method:has(input:checked) {
  border-color: var(--ec-blue);
  background: rgba(2,45,141,.02);
}
.woocommerce-checkout .wc_payment_method label {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ec-black) !important;
}
/* Coupon area */
.woocommerce-checkout .checkout_coupon input[type="text"] {
  border: 2px solid var(--ec-grey-200) !important;
  border-radius: var(--ec-radius-md) !important;
  padding: 12px 14px !important;
  font-family: var(--font-body) !important;
}
.woocommerce-checkout .checkout_coupon button {
  background: var(--ec-charcoal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ec-radius-pill) !important;
  padding: 12px 24px !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px !important;
}

/* ============================================================
   MY ACCOUNT PAGE — EC Branded
   ============================================================ */
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-MyAccount-navigation ul li {
  margin-bottom: 4px !important;
}
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 14px 20px !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ec-black) !important;
  background: var(--ec-grey-50, #f8f9fa) !important;
  border-radius: var(--ec-radius-md) !important;
  border: 2px solid transparent;
  transition: all .2s ease;
  text-decoration: none !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: rgba(2,45,141,.04) !important;
  border-color: var(--ec-blue);
  color: var(--ec-blue) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--ec-blue) !important;
  color: #fff !important;
  border-color: var(--ec-blue) !important;
  box-shadow: 0 4px 12px rgba(2,45,141,.2);
}
.woocommerce-MyAccount-content {
  font-family: var(--font-body) !important;
  font-size: 15px;
  line-height: 1.7;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic;
  text-transform: uppercase;
}
.woocommerce-MyAccount-content a {
  color: var(--ec-blue) !important;
  font-weight: 600;
}
.woocommerce-MyAccount-content a:hover {
  color: var(--ec-cyan) !important;
}
/* My Account tables (orders, etc) */
.woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-MyAccount-content table th {
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
  background: var(--ec-grey-50, #f8f9fa);
  padding: 12px 16px;
  border-bottom: 2px solid var(--ec-grey-200);
}
.woocommerce-MyAccount-content table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ec-grey-100, #eee);
  font-family: var(--font-body) !important;
  font-size: 14px;
}
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content .button {
  background: var(--ec-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ec-radius-pill) !important;
  padding: 10px 22px !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all .2s ease;
  text-decoration: none !important;
}
.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-MyAccount-content .button:hover {
  background: var(--ec-cyan) !important;
  color: var(--ec-black) !important;
}
/* My Account form inputs */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  border: 2px solid var(--ec-grey-200) !important;
  border-radius: var(--ec-radius-md) !important;
  padding: 12px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  width: 100%;
  transition: border-color .2s ease;
}
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
  border-color: var(--ec-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(2,45,141,.1) !important;
}
/* Login form on My Account (when logged out) */
.woocommerce-form-login,
.woocommerce-form-register {
  background: #fff;
  border: 2px solid var(--ec-grey-200);
  border-radius: var(--ec-radius-lg) !important;
  padding: 32px !important;
}
.woocommerce-form-login .woocommerce-button,
.woocommerce-form-register .woocommerce-button {
  background: var(--ec-blue) !important;
  color: #fff !important;
  border-radius: var(--ec-radius-pill) !important;
  padding: 14px 32px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none !important;
  width: 100%;
  cursor: pointer;
}

/* ============================================================
   MOBILE MENU — EC Branded
   ============================================================ */
/* The Elementor hamburger toggle button (mobile-only widget) */
.elementor-menu-toggle {
  background: var(--ec-blue) !important;
  color: #fff !important;
  border-radius: var(--ec-radius-md) !important;
  padding: 8px !important;
  border: none !important;
}
/* Hamburger icon widget (element-2767979, hidden on desktop) — EC blue circle */
.elementor-element-2767979 .elementor-icon {
  background: var(--ec-blue) !important;
  border-color: var(--ec-blue) !important;
  color: #fff !important;
}
.elementor-element-2767979 .elementor-icon svg {
  fill: #fff !important;
}

/* ---- Popup overlay (elementor-43612) ---- */
/* Entire popup background — EC blue */
.elementor-popup-modal .dialog-widget-content {
  background: var(--ec-blue) !important;
}
/* Menu nav background — EC blue */
.elementor-popup-modal .elementor-nav-menu--main,
.elementor-popup-modal .elementor-nav-menu__container {
  background: var(--ec-blue) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
}
/* Menu link styling */
.elementor-popup-modal .elementor-nav-menu a {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic;
  font-size: 20px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff !important;
  padding: 14px 24px !important;
  transition: color .2s ease;
}
.elementor-popup-modal .elementor-nav-menu a:hover {
  color: var(--ec-cyan) !important;
  background: rgba(255,255,255,.1) !important;
}

/* Close / X icon — remove navy stacked bg, keep white */
.elementor-popup-modal .elementor-element-1166ccf7 .elementor-icon {
  background: transparent !important;
  color: #fff !important;
  padding: 10px !important;
}
.elementor-popup-modal .elementor-element-1166ccf7 .elementor-icon svg {
  fill: #fff !important;
  width: 24px !important;
  height: 24px !important;
}
.elementor-popup-modal .elementor-element-1166ccf7 .elementor-icon svg polygon,
.elementor-popup-modal .elementor-element-1166ccf7 .elementor-icon svg path {
  fill: #fff !important;
}
/* Also hide the default dialog close button if present */
.elementor-popup-modal .dialog-close-button {
  display: none !important;
}
/* Wallet row in popup — all content white */
.elementor-popup-modal .elementor-element-7ce6e11,
.elementor-popup-modal .elementor-element-7ce6e11 .elementor-widget-container,
.elementor-popup-modal .elementor-element-7ce6e11 .elementor-icon-list-text,
.elementor-popup-modal .elementor-element-7ce6e11 a,
.elementor-popup-modal .elementor-element-7ce6e11 .woocommerce-Price-amount,
.elementor-popup-modal .elementor-element-7ce6e11 .woocommerce-Price-currencySymbol,
.elementor-popup-modal .elementor-element-7ce6e11 span {
  color: #fff !important;
}
.elementor-popup-modal .elementor-element-7ce6e11 .elementor-icon-list-icon,
.elementor-popup-modal .elementor-element-7ce6e11 .elementor-icon-list-icon i,
.elementor-popup-modal .elementor-element-7ce6e11 .fas.fa-wallet {
  color: #fff !important;
}
.elementor-popup-modal .elementor-element-7ce6e11 .elementor-icon-list-icon svg {
  fill: #fff !important;
}
.elementor-popup-modal .elementor-element-7ce6e11 .elementor-icon-list-item {
  border: 2px solid #fff !important;
  border-radius: var(--ec-radius-pill) !important;
  padding: 6px 16px !important;
}

/* ---- Bottom icon row: social + account — equal size, spacing ---- */
.elementor-popup-modal .elementor-element-5e9ce293 {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 20px 0 !important;
}
/* Social + account icons in popup — uniform white outline circles.
   The custom SVGs have a hardcoded <circle fill="#12334C"> baked in,
   so we hide that background circle and let the CSS border show instead. */
.elementor-popup-modal .elementor-social-icon {
  background: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
}
.elementor-popup-modal .elementor-social-icon svg {
  color: #fff !important;
  width: 28px !important;
  height: 28px !important;
}
/* Hide the baked-in navy circle in the custom SVGs */
.elementor-popup-modal .elementor-social-icon svg > circle,
.elementor-popup-modal .elementor-element-6e07063 svg > circle {
  fill: transparent !important;
}
/* Keep the icon paths white */
.elementor-popup-modal .elementor-social-icon svg path,
.elementor-popup-modal .elementor-element-6e07063 svg path {
  fill: #fff !important;
}

/* Account icon in popup — match social icons */
.elementor-popup-modal .elementor-element-6e07063 .elementor-icon {
  background: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  overflow: hidden !important;
}
.elementor-popup-modal .elementor-element-6e07063 svg {
  fill: #fff !important;
  width: 28px !important;
  height: 28px !important;
}

/* ============================================================
   SOCIAL ICONS — EC Branded (global)
   ============================================================ */
.elementor-social-icon {
  background: var(--ec-blue) !important;
  color: #fff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all .25s ease !important;
  font-size: 18px !important;
}
.elementor-social-icon:hover {
  background: var(--ec-cyan) !important;
  color: var(--ec-black) !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,183,255,.3);
}
.elementor-social-icon i {
  color: inherit !important;
  font-size: 18px !important;
}
.elementor-social-icon svg {
  fill: currentColor !important;
  width: 18px !important;
  height: 18px !important;
}

/* Footer social icons (custom SVG markup) */
.social {
  display: flex !important;
  gap: 12px;
}
.social a {
  background: var(--ec-blue) !important;
  color: #fff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all .25s ease !important;
  text-decoration: none !important;
}
.social a:hover {
  background: var(--ec-cyan) !important;
  color: var(--ec-black) !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,183,255,.3);
}
.social a svg {
  stroke: #fff !important;
  width: 20px !important;
  height: 20px !important;
  transition: stroke .25s ease;
}
.social a:hover svg {
  stroke: var(--ec-black) !important;
}

/* ============================================================
   WC PAGE TITLES — EC Branded
   ============================================================ */
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.woocommerce-cart .entry-title,
.page-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic;
  text-transform: uppercase;
  color: var(--ec-black) !important;
}

/* ============================================================
   WC NOTICES / ALERTS — EC Branded
   ============================================================ */
.woocommerce-message {
  border-top-color: var(--ec-blue) !important;
  background: rgba(2,45,141,.04) !important;
  font-family: var(--font-body) !important;
}
.woocommerce-message::before {
  color: var(--ec-blue) !important;
}
.woocommerce-error {
  border-top-color: #ff3b3b !important;
}
.woocommerce-info {
  border-top-color: var(--ec-cyan) !important;
}

/* ============================================================
   ABOUT PAGE — EC Branded
   ============================================================ */
.ec-about-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px 80px;
  font-family: var(--font-body);
  color: var(--ec-charcoal);
}
.ec-about-section {
  margin-bottom: 72px;
}
.ec-about-section:last-child {
  margin-bottom: 0;
}
.ec-about-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 4vw, 40px);
  text-transform: uppercase;
  color: var(--ec-blue);
  margin: 0 0 20px;
  letter-spacing: 0.02em;
}
.ec-about-section p {
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 16px;
  color: #3a3f47;
}

/* Pillars grid */
.ec-about-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.ec-about-pillar {
  background: #f4f7fb;
  border-radius: var(--ec-radius-lg);
  padding: 32px 28px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ec-about-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(2,45,141,.1);
}
.ec-pillar-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 14px;
}
.ec-about-pillar h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--ec-blue);
  margin: 0 0 10px;
}
.ec-about-pillar p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* Steps */
.ec-about-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-top: 32px;
}
.ec-about-step {
  text-align: center;
  padding: 28px 20px;
}
.ec-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ec-blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 16px;
}
.ec-about-step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--ec-charcoal);
  margin: 0 0 10px;
}
.ec-about-step p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* Closing / CTA */
.ec-about-closing {
  text-align: center;
  background: var(--ec-charcoal);
  border-radius: var(--ec-radius-lg);
  padding: 56px 32px;
}
.ec-about-tagline {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  text-transform: uppercase;
  color: #fff !important;
  line-height: 1.4;
  margin: 0 0 28px !important;
}
.ec-about-cta {
  display: inline-block;
  background: var(--ec-blue);
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 14px 40px;
  border-radius: var(--ec-radius-pill);
  transition: all .25s ease;
}
.ec-about-cta:hover {
  background: var(--ec-cyan);
  color: var(--ec-charcoal) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,183,255,.3);
}

/* ==========================================================================
   FAQs Page – EC Branded Accordion
   Page ID 3264
   ========================================================================== */

/* Keep the hero title bright on the dark intro panel. */
.page-id-3264 .ec-page-hero .elementor-heading-title,
.page-id-3264 [data-id="5255150"] .elementor-heading-title {
  color: #fff !important;
  letter-spacing: 0 !important;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}

/* FAQs heading above the accordion columns */
.page-id-3264 [data-id="22153bc"] .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic;
  color: var(--ec-blue) !important;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 40px !important;
  margin-bottom: 8px;
}

/* Hide the divider between hero and FAQ content */
.page-id-3264 [data-id="840a99b"] {
  display: none !important;
}

/* FAQ content wrapper – heading container */
.page-id-3264 [data-id="d370071"] {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px;
  background: linear-gradient(180deg, #fff 0%, #f6f8fc 100%);
  border: 1px solid rgba(2, 45, 141, 0.10);
  border-bottom: 0;
  border-radius: var(--ec-radius-lg) var(--ec-radius-lg) 0 0;
  padding: 48px 40px 16px !important;
  margin: 72px auto 0 !important;
  box-shadow: 0 24px 70px -52px rgba(2, 45, 141, 0.45);
  overflow: hidden;
}

/* FAQ content wrapper – accordion columns container */
.page-id-3264 [data-id="4fcaa0a"] {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px;
  background: #f6f8fc;
  border: 1px solid rgba(2, 45, 141, 0.10);
  border-top: 0;
  border-radius: 0 0 var(--ec-radius-lg) var(--ec-radius-lg);
  padding: 0 40px 56px !important;
  margin: 0 auto 80px !important;
  box-shadow: 0 30px 80px -58px rgba(2, 45, 141, 0.45);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.page-id-3264 [data-id="4fcaa0a"]::before {
  opacity: 0.05;
  pointer-events: none;
}

.page-id-3264 [data-id="4fcaa0a"] > * {
  position: relative;
  z-index: 1;
}

.page-id-3264 .elementor-widget-n-accordion .e-n-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-id-3264 .e-n-accordion-item {
  background: #fff;
  border: 1px solid rgba(2, 45, 141, 0.11);
  border-radius: 8px;
  box-shadow: 0 8px 22px -20px rgba(2, 45, 141, 0.38);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-3264 .e-n-accordion-item[open] {
  border-color: rgba(2, 45, 141, 0.28);
  box-shadow: 0 14px 34px -24px rgba(2, 45, 141, 0.45);
}

/* Accordion item titles */
.page-id-3264 .e-n-accordion-item-title {
  min-height: 58px;
  padding: 18px 20px !important;
  border-bottom: 0 !important;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.page-id-3264 .e-n-accordion-item-title:hover {
  background: rgba(2, 45, 141, 0.04);
}

.page-id-3264 .e-n-accordion-item-title:focus-visible {
  outline: 2px solid rgba(0, 183, 255, 0.65);
  outline-offset: -2px;
}

/* Accordion title text */
.page-id-3264 .e-n-accordion-item-title-text {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ec-charcoal) !important;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.25;
}

/* Active/open item title highlight */
.page-id-3264 .e-n-accordion-item[open] > .e-n-accordion-item-title {
  background: rgba(2, 45, 141, 0.06);
  border-bottom: 1px solid rgba(2, 45, 141, 0.10) !important;
}

.page-id-3264 .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text {
  color: var(--ec-blue) !important;
}

/* Chevron icons */
.page-id-3264 .e-n-accordion-item-title-icon i,
.page-id-3264 .e-n-accordion-item-title-icon svg {
  color: var(--ec-blue) !important;
  fill: var(--ec-blue) !important;
  font-size: 14px !important;
  transition: transform 0.25s ease, color 0.2s ease;
  flex-shrink: 0;
}

/* Answer content area */
.page-id-3264 .e-n-accordion-item > .e-con {
  background: #fff;
  border-bottom: 0;
  padding: 20px 20px 24px !important;
}

.page-id-3264 .e-n-accordion-item > .e-con p,
.page-id-3264 .e-n-accordion-item > .e-con .elementor-widget-text-editor {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #3a3f4b !important;
}

.page-id-3264 .e-n-accordion-item > .e-con p {
  margin: 0 0 14px !important;
}

.page-id-3264 .e-n-accordion-item > .e-con p:last-child {
  margin-bottom: 0 !important;
}

/* Links inside answers */
.page-id-3264 .e-n-accordion-item > .e-con a {
  color: var(--ec-blue);
  text-decoration: underline;
  text-decoration-color: rgba(2, 45, 141, 0.3);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.page-id-3264 .e-n-accordion-item > .e-con a:hover {
  color: var(--ec-cyan);
  text-decoration-color: var(--ec-cyan);
}

/* Lists inside answers */
.page-id-3264 .e-n-accordion-item > .e-con ul,
.page-id-3264 .e-n-accordion-item > .e-con ol {
  padding-left: 24px;
  margin: 12px 0;
}

.page-id-3264 .e-n-accordion-item > .e-con li {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #3a3f4b !important;
  margin-bottom: 6px;
}

.page-id-3264 .e-n-accordion-item > .e-con li::marker {
  color: var(--ec-blue);
}

/* Two-column gap adjustment */
.page-id-3264 [data-id="4fcaa0a"] {
  gap: 40px !important;
}

/* ── FAQs page responsive ── */
@media screen and (max-width: 768px) {
  .page-id-3264 [data-id="d370071"],
  .page-id-3264 [data-id="4fcaa0a"] {
    width: calc(100% - 24px) !important;
  }

  .page-id-3264 [data-id="d370071"] {
    padding: 28px 16px 12px !important;
    border-radius: 16px 16px 0 0;
    margin-top: 28px !important;
  }

  .page-id-3264 [data-id="4fcaa0a"] {
    padding: 0 16px 36px !important;
    border-radius: 0 0 16px 16px;
    margin-bottom: 48px !important;
  }

  .page-id-3264 [data-id="22153bc"] .elementor-heading-title {
    font-size: 32px !important;
  }

  .page-id-3264 .e-n-accordion-item-title {
    min-height: 54px;
    padding: 15px 14px !important;
  }

  .page-id-3264 .e-n-accordion-item-title-text {
    font-size: 13px !important;
  }

  .page-id-3264 .e-n-accordion-item > .e-con {
    padding: 16px 14px 20px !important;
  }

  .page-id-3264 [data-id="4fcaa0a"] {
    gap: 0 !important;
  }
}

/* ============================================================
   404 Page
   ============================================================ */
.error404 .site-main {
  background: var(--ec-white);
}

.ec-404-page {
  min-height: calc(100vh - 1px);
}

.ec-404-hero {
  position: relative;
  min-height: 680px;
  padding: 150px 0 90px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 76% 26%, rgba(0, 183, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #071022 0%, #0b1733 48%, #031b27 100%);
}

.ec-404-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 74% 70% at 50% 35%, #000 25%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 74% 70% at 50% 35%, #000 25%, transparent 82%);
}

.ec-404-stripes {
  position: absolute;
  top: -90px;
  right: 4vw;
  bottom: -90px;
  width: 360px;
  opacity: 0.5;
  pointer-events: none;
}

.ec-404-stripes span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38px;
  transform: skewX(-18deg);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0));
}

.ec-404-stripes span:nth-child(1) { right: 20px; }
.ec-404-stripes span:nth-child(2) {
  right: 105px;
  width: 14px;
  background: linear-gradient(180deg, rgba(0,183,255,.36), rgba(0,183,255,0));
}
.ec-404-stripes span:nth-child(3) { right: 156px; width: 7px; }

.ec-404-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: 70px;
}

.ec-404-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 8px 14px;
  border: 1px solid rgba(0,183,255,.42);
  border-radius: var(--ec-radius-pill);
  color: var(--ec-cyan);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.ec-404-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ec-cyan);
  box-shadow: 0 0 0 6px rgba(0,183,255,.12);
}

.ec-404-copy h1 {
  max-width: 780px;
  margin: 0;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: clamp(54px, 8vw, 112px) !important;
  font-style: italic;
  font-weight: 900 !important;
  letter-spacing: 0;
  line-height: 0.92 !important;
  text-transform: uppercase;
}

.ec-404-sub {
  max-width: 600px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.75);
  font-size: 19px;
  line-height: 1.65;
}

.ec-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.ec-404-card {
  position: relative;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--ec-radius-lg);
  background: rgba(255,255,255,.08);
  box-shadow: 0 24px 70px -36px rgba(0,0,0,.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ec-404-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 44%);
}

.ec-404-card > * {
  position: relative;
  z-index: 1;
}

.ec-404-card-label {
  display: block;
  margin-bottom: 10px;
  color: var(--ec-cyan);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ec-404-card strong {
  display: block;
  color: #fff;
  font-family: var(--font-mono);
  font-size: clamp(72px, 10vw, 112px);
  line-height: 1;
}

.ec-404-card p {
  margin: 12px 0 24px;
  color: rgba(255,255,255,.72);
}

.ec-404-card ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ec-404-card a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff !important;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ec-404-card a::after {
  content: "\2192";
  color: var(--ec-cyan);
}

.ec-404-card a:hover {
  color: var(--ec-cyan) !important;
  border-color: rgba(0,183,255,.42);
}

@media (max-width: 900px) {
  .ec-404-hero {
    min-height: auto;
    padding: 125px 0 72px;
  }

  .ec-404-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .ec-404-card {
    max-width: 520px;
  }
}

@media (max-width: 640px) {
  .ec-404-hero {
    padding: 96px 0 56px;
  }

  .ec-404-copy h1 {
    font-size: 48px !important;
  }

  .ec-404-sub {
    font-size: 16px;
  }

  .ec-404-actions,
  .ec-404-actions .primary-btn,
  .ec-404-actions .ghost-btn {
    width: 100%;
  }

  .ec-404-card {
    padding: 24px;
  }
}

/* ============================================================
   Contact Page
   ============================================================ */
.page-id-109 [data-id="72eb3c4"] .elementor-heading-title {
  color: #fff !important;
  letter-spacing: 0 !important;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}

.page-id-109 [data-id="f734892"] {
  display: none !important;
}

.page-id-109 [data-id="48c1aef"] {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px;
  margin: 72px auto 0 !important;
  padding: 48px 40px 16px !important;
  border: 1px solid rgba(2, 45, 141, 0.10);
  border-bottom: 0;
  border-radius: var(--ec-radius-lg) var(--ec-radius-lg) 0 0;
  background: linear-gradient(180deg, #fff 0%, #f6f8fc 100%);
  box-shadow: 0 24px 70px -52px rgba(2, 45, 141, 0.45);
  overflow: hidden;
}

.page-id-109 [data-id="fc212f3"] .elementor-heading-title {
  color: var(--ec-blue) !important;
  font-family: var(--font-display) !important;
  font-size: 40px !important;
  font-style: italic;
  font-weight: 800 !important;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: uppercase;
}

.page-id-109 [data-id="503f5cf"] {
  position: relative;
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px;
  margin: 0 auto 80px !important;
  padding: 0 40px 56px !important;
  border: 1px solid rgba(2, 45, 141, 0.10);
  border-top: 0;
  border-radius: 0 0 var(--ec-radius-lg) var(--ec-radius-lg);
  background: #f6f8fc;
  box-shadow: 0 30px 80px -58px rgba(2, 45, 141, 0.45);
  isolation: isolate;
  overflow: hidden;
}

.page-id-109 [data-id="503f5cf"]::before {
  display: none !important;
}

.page-id-109 [data-id="8e8c461"] {
  display: none !important;
}

.page-id-109 [data-id="63b5bfe"] {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.page-id-109 [data-id="63b5bfe"]::before {
  display: none !important;
}

.page-id-109 [data-id="7559830"] {
  width: 100%;
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-items {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px !important;
  align-items: stretch;
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-item {
  position: relative;
  min-height: 178px;
  height: 100%;
  align-items: flex-start !important;
  gap: 16px;
  margin: 0 !important;
  padding-block-start: 28px !important;
  padding-block-end: 28px !important;
  padding: 28px;
  border: 1px solid rgba(2, 45, 141, 0.11);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px -24px rgba(2, 45, 141, 0.46);
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-item:not(:first-child) {
  margin-block-start: 0 !important;
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-item::before {
  content: "Email";
  position: absolute;
  left: 78px;
  top: 28px;
  color: var(--ec-blue);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-item:nth-child(2)::before {
  content: "Office";
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-icon {
  width: 54px;
  height: 54px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(2, 45, 141, 0.12);
  color: var(--ec-blue) !important;
  box-shadow: 0 10px 22px -16px rgba(2, 45, 141, 0.55);
  flex: 0 0 54px;
  line-height: 1;
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-icon svg,
.page-id-109 [data-id="7559830"] .elementor-icon-list-icon i {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  fill: var(--ec-blue) !important;
  color: var(--ec-blue) !important;
  margin: auto !important;
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-icon svg circle {
  fill: transparent !important;
  stroke: transparent !important;
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-icon svg path {
  fill: var(--ec-blue) !important;
  stroke: var(--ec-blue) !important;
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-text,
.page-id-109 [data-id="7559830"] .elementor-icon-list-item > a {
  margin-top: 26px;
  color: var(--ec-charcoal) !important;
  font-family: var(--font-body) !important;
  font-size: 17px;
  font-weight: 600 !important;
  letter-spacing: 0;
  line-height: 1.55;
  transition: color 0.2s ease;
}

.page-id-109 [data-id="7559830"] .elementor-icon-list-item > a:hover,
.page-id-109 [data-id="7559830"] .elementor-icon-list-item:hover .elementor-icon-list-text {
  color: var(--ec-blue) !important;
}

@media (max-width: 768px) {
  .page-id-109 [data-id="48c1aef"],
  .page-id-109 [data-id="503f5cf"] {
    width: calc(100% - 24px) !important;
  }

  .page-id-109 [data-id="48c1aef"] {
    margin-top: 28px !important;
    padding: 28px 16px 12px !important;
    border-radius: 16px 16px 0 0;
  }

  .page-id-109 [data-id="503f5cf"] {
    padding: 0 16px 36px !important;
    border-radius: 0 0 16px 16px;
    margin-bottom: 48px !important;
  }

  .page-id-109 [data-id="fc212f3"] .elementor-heading-title {
    font-size: 32px !important;
    text-align: center;
  }

  .page-id-109 [data-id="7559830"] .elementor-icon-list-items {
    grid-template-columns: 1fr;
  }

  .page-id-109 [data-id="7559830"] .elementor-icon-list-item {
    min-height: 150px;
    padding: 24px;
  }

  .page-id-109 [data-id="7559830"] .elementor-icon-list-item::before {
    left: 74px;
    top: 26px;
  }

  .page-id-109 [data-id="7559830"] .elementor-icon-list-text,
  .page-id-109 [data-id="7559830"] .elementor-icon-list-item > a {
    font-size: 15px;
    word-break: break-word;
  }

  .page-id-109 [data-id="7559830"] .elementor-icon-list-item:first-child .elementor-icon-list-text,
  .page-id-109 [data-id="7559830"] .elementor-icon-list-item:first-child > a {
    font-size: 14px;
    white-space: nowrap;
    word-break: normal;
  }
}

/* ============================================================
   Legal Pages
   ============================================================ */
.ec-legal-page {
  background: var(--ec-white);
  color: var(--ec-charcoal);
  font-family: var(--font-body);
}

.ec-legal-hero {
  position: relative;
  overflow: hidden;
  padding: 180px 20px 120px;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, #050a16 0%, #0b1326 100%);
}

.ec-legal-hero::before {
  display: none;
}

.ec-legal-hero > * {
  position: relative;
  z-index: 1;
}

.ec-legal-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  padding: 8px 18px;
  border: 1px solid rgba(0,183,255,.42);
  border-radius: var(--ec-radius-pill);
  color: #4af0ff;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.ec-legal-kicker::before {
  display: none;
}

.ec-legal-hero h1 {
  max-width: 820px;
  margin: 0 auto 24px;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 72px !important;
  font-style: normal;
  font-weight: 800 !important;
  letter-spacing: 0;
  line-height: 1.02 !important;
  text-transform: uppercase;
}

.ec-legal-hero > p:not(.ec-legal-kicker) {
  max-width: 820px;
  margin: 0 auto;
  color: rgba(255,255,255,.70);
  font-size: 18px;
  line-height: 1.6;
}

.ec-legal-wrap {
  width: min(1180px, calc(100% - 48px));
  margin: 72px auto 88px;
  padding: 44px 40px 52px;
  border: 1px solid rgba(2, 45, 141, 0.10);
  border-radius: var(--ec-radius-lg);
  background: linear-gradient(180deg, #fff 0%, #f6f8fc 100%);
  box-shadow: 0 30px 80px -58px rgba(2, 45, 141, 0.45);
}

.ec-legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ec-legal-card {
  padding: 28px;
  border: 1px solid rgba(2, 45, 141, 0.11);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px -24px rgba(2, 45, 141, 0.46);
}

.ec-legal-card h2,
.ec-legal-card h3 {
  margin: 0 0 16px;
  color: var(--ec-blue);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
  text-transform: uppercase;
}

.ec-legal-card p,
.ec-legal-card li {
  color: #3a3f4b;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
}

.ec-legal-card p {
  margin: 0 0 14px;
}

.ec-legal-card p:last-child {
  margin-bottom: 0;
}

.ec-legal-card a {
  color: var(--ec-blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(2, 45, 141, 0.28);
  text-underline-offset: 2px;
}

.ec-legal-card a:hover {
  color: var(--ec-cyan);
  text-decoration-color: var(--ec-cyan);
}

@media (max-width: 900px) {
  .ec-legal-grid {
    grid-template-columns: 1fr;
  }

  .ec-legal-hero h1 {
    font-size: 52px !important;
  }
}

@media (max-width: 640px) {
  .ec-legal-hero {
    padding: 120px 20px 80px;
  }

  .ec-legal-hero h1 {
    font-size: 36px !important;
  }

  .ec-legal-hero > p:not(.ec-legal-kicker) {
    font-size: 16px;
  }

  .ec-legal-wrap {
    width: calc(100% - 24px);
    margin: 34px auto 54px;
    padding: 18px 16px 24px;
    border-radius: 16px;
  }

  .ec-legal-card {
    padding: 22px;
  }
}

/* ============================================================
   BLOG — archive grid ([ec_blog_grid]) + single post (single.php)
   Cards reuse .comp-card / .comp-grid base styles.
   ============================================================ */

/* Page wrapper spacing when shortcode lives on a plain page */
.ec-blog-listing { padding-bottom: 80px; }
.ec-blog-grid { margin-top: 8px; }

.ec-blog-head { padding-top: 72px; margin-bottom: 40px; }

@media (max-width: 767px) {
  .ec-blog-head { padding-top: 48px; }
  .ec-blog-listing { padding-bottom: 56px; }
}

/* Card tweaks specific to blog */
.ec-blog-card .comp-card-link { display: block; height: 100%; }
.ec-blog-card { display: flex; flex-direction: column; }

.ec-blog-date {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ec-grey-400);
}

.ec-blog-title {
  font-size: 20px;
  margin: 0 0 10px;
  /* clamp to 3 lines for even card heights */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ec-blog-excerpt {
  color: var(--ec-grey-600);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ec-blog-foot { justify-content: flex-start; }

.ec-blog-readmore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ec-blue);
  transition: gap .2s ease, color .2s ease;
}
.ec-blog-card:hover .ec-blog-readmore { gap: 12px; color: var(--ec-blue-2); }

/* Placeholder when a post has no featured image */
.ec-blog-noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ec-blue) 0%, var(--ec-blue-2) 60%, #0a1f5e 100%);
}
.ec-blog-noimg span {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 44px;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.85);
}

/* Pagination */
.ec-blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 44px 0 8px;
}
.ec-blog-pageinfo {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ec-grey-600);
}
.ghost-btn.sm { padding: 9px 16px; font-size: 12px; }

/* ---------- Single post ---------- */
.ec-single { padding-bottom: 72px; }

.ec-single-hero {
  background: linear-gradient(135deg, var(--ec-blue) 0%, var(--ec-blue-2) 55%, #0a1f5e 100%);
  color: #fff;
  padding: 56px 0 60px;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
.ec-single-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.ec-single-hero-inner { position: relative; z-index: 1; max-width: 880px; }

.ec-single-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 18px;
  transition: color .2s, gap .2s;
}
.ec-single-back:hover { color: #fff; gap: 11px; }

.ec-single-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  margin: 12px 0 16px;
}

.ec-single-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.ec-single-dot { opacity: .5; }

.ec-single-feature {
  max-width: 880px;
  margin: -36px auto 0;
  position: relative;
  z-index: 2;
  border-radius: var(--ec-radius-lg);
  overflow: hidden;
  box-shadow: var(--ec-shadow-lg);
  border: 1px solid var(--ec-grey-200);
}
.ec-single-feature img { width: 100%; height: auto; display: block; }

.ec-single-body {
  max-width: 760px;
  margin: 44px auto 0;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--ec-charcoal);
}
.ec-single-body > * { margin-bottom: 1.3em; }
.ec-single-body h2 {
  font-size: 28px;
  margin: 1.6em 0 .5em;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.ec-single-body h3 { font-size: 22px; margin: 1.4em 0 .4em; }
.ec-single-body a { color: var(--ec-blue); text-decoration: underline; text-underline-offset: 3px; }
.ec-single-body a:hover { color: var(--ec-blue-2); }
.ec-single-body img { border-radius: var(--ec-radius); margin: 1.5em auto; }
.ec-single-body blockquote {
  border-left: 4px solid var(--ec-blue);
  background: var(--ec-grey-100);
  padding: 18px 24px;
  border-radius: 0 var(--ec-radius-sm) var(--ec-radius-sm) 0;
  font-style: italic;
  color: var(--ec-grey-900);
}
.ec-single-body ul, .ec-single-body ol { padding-left: 1.4em; margin-bottom: 1.3em; }
.ec-single-body ul { list-style: disc; }
.ec-single-body ol { list-style: decimal; }
.ec-single-body li { margin-bottom: .5em; }

.ec-single-terms {
  max-width: 760px;
  margin: 8px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ec-term-chip {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-blue);
  background: var(--ec-grey-100);
  border: 1px solid var(--ec-grey-200);
  padding: 6px 12px;
  border-radius: var(--ec-radius-pill);
  transition: background .2s, color .2s;
}
.ec-term-chip:hover { background: var(--ec-blue); color: #fff; }

.ec-single-cta {
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--ec-grey-200);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 640px) {
  .ec-single-hero { padding: 40px 0 46px; }
  .ec-single-body { font-size: 16.5px; }
  .ec-single-cta { flex-direction: column; align-items: stretch; }
  .ec-single-cta .ghost-btn, .ec-single-cta .primary-btn { text-align: center; justify-content: center; }
}

/* ============================================================
   ELEMENTOR SINGLE-POST TEMPLATE (ID 40) — EC styling
   Scoped to classes injected on the template sections:
   .ec-blog-hero (splash), .ec-blog-main (content+sidebar), .ec-blog-more
   ============================================================ */

/* ---------- Hero / splash ---------- */
.ec-blog-hero {
  background: linear-gradient(135deg, var(--ec-blue) 0%, var(--ec-blue-2) 55%, #0a1f5e 100%) !important;
  position: relative;
  overflow: hidden;
}
.ec-blog-hero > .elementor-background-overlay { display: none !important; }
.ec-blog-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.ec-blog-hero .elementor-container { position: relative; z-index: 1; }

/* breadcrumb */
.ec-blog-hero .rank-math-breadcrumb,
.ec-blog-hero .rank-math-breadcrumb p,
.ec-blog-hero .ec-crumb {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65) !important;
  margin: 0 0 14px;
}
.ec-blog-hero .rank-math-breadcrumb a,
.ec-blog-hero .ec-crumb a { color: rgba(255,255,255,.85) !important; }
.ec-blog-hero .rank-math-breadcrumb a:hover,
.ec-blog-hero .ec-crumb a:hover { color: #fff !important; text-decoration: underline; }
.ec-blog-hero .ec-crumb .ec-crumb-sep { color: rgba(255,255,255,.4); margin: 0 2px; }
.ec-blog-hero .ec-crumb .ec-crumb-current { color: rgba(255,255,255,.55); }

/* post title (dynamic) */
.ec-blog-hero .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic !important;
  text-transform: uppercase;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  font-size: clamp(32px, 4.4vw, 56px) !important;
  margin: 0 !important;
}

/* ---------- Main content area ---------- */
.ec-blog-main { padding-top: 56px; padding-bottom: 56px; }

/* featured image */
.ec-blog-main .elementor-widget-theme-post-featured-image img {
  width: 100%;
  border-radius: var(--ec-radius-lg);
  box-shadow: var(--ec-shadow-lg);
  border: 1px solid var(--ec-grey-200);
}

/* excerpt subtitle (heading right after the featured image) */
.ec-blog-main .elementor-widget-theme-post-featured-image + .elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-body) !important;
  font-style: normal;
  color: var(--ec-grey-600) !important;
  font-weight: 500 !important;
  border-left: 3px solid var(--ec-blue);
  padding-left: 16px;
}

/* post content typography */
.single-post-content { font-size: 17.5px; line-height: 1.75; color: var(--ec-charcoal); }
.single-post-content p { margin: 0 0 1.3em; }
.single-post-content h2 {
  font-family: var(--font-display);
  font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: -0.01em; font-size: 28px; margin: 1.6em 0 .5em;
  color: var(--ec-black);
}
.single-post-content h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin: 1.4em 0 .4em; }
.single-post-content a { color: var(--ec-blue); text-decoration: underline; text-underline-offset: 3px; }
.single-post-content a:hover { color: var(--ec-blue-2); }
.single-post-content img { border-radius: var(--ec-radius); margin: 1.5em 0; }
.single-post-content ul, .single-post-content ol { padding-left: 1.4em; margin: 0 0 1.3em; }
.single-post-content ul { list-style: disc; }
.single-post-content ol { list-style: decimal; }
.single-post-content li { margin-bottom: .5em; }
.single-post-content blockquote {
  border-left: 4px solid var(--ec-blue);
  background: var(--ec-grey-100);
  padding: 18px 24px;
  border-radius: 0 var(--ec-radius-sm) var(--ec-radius-sm) 0;
  font-style: italic;
  color: var(--ec-grey-900);
  margin: 1.5em 0;
}

/* ---------- Sidebar card ---------- */
.single-post-sidebar > .elementor-widget-wrap,
.single-post-sidebar > .elementor-element-populated {
  background: var(--ec-grey-100) !important;
  border: 1px solid var(--ec-grey-200) !important;
  border-top: 3px solid var(--ec-blue) !important;
  border-radius: var(--ec-radius-lg);
  padding: 26px 24px !important;
  box-shadow: var(--ec-shadow-sm);
}
.single-post-sidebar .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 18px !important;
  color: var(--ec-black) !important;
}
.single-post-sidebar .elementor-posts .elementor-post__title a { color: var(--ec-charcoal); }
.single-post-sidebar .elementor-posts .elementor-post__title a:hover { color: var(--ec-blue); }

/* "View all articles" link under Recent Posts */
.single-post-sidebar .ec-viewall {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ec-blue);
  transition: gap .2s ease, color .2s ease;
}
.single-post-sidebar .ec-viewall:hover {
  gap: 12px;
  color: var(--ec-blue-2);
}
.single-post-sidebar .ec-viewall span { font-size: 15px; line-height: 1; }

/* ---------- "More posts" section ---------- */
.ec-blog-more { padding-top: 8px; padding-bottom: 64px; }
.ec-blog-more > .elementor-container > .elementor-column .elementor-widget-heading:first-child .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: italic !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 3vw, 40px) !important;
  color: var(--ec-black) !important;
}
.ec-blog-more .elementor-posts--skin-cards .elementor-post {
  background: #fff;
  border-radius: var(--ec-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ec-grey-200);
  box-shadow: var(--ec-shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ec-blog-more .elementor-posts--skin-cards .elementor-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--ec-shadow);
  border-color: rgba(2,45,141,.20);
}
.ec-blog-more .elementor-post__card .elementor-post__title { padding: 0 16px; }
.ec-blog-more .elementor-post__card .elementor-post__title a {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--ec-black);
}
.ec-blog-more .elementor-post__read-more {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ec-blue) !important;
}

@media (max-width: 1024px) {
  .ec-blog-main .elementor-column { margin-right: 0 !important; }
}
@media (max-width: 767px) {
  .ec-blog-main { padding-top: 40px; padding-bottom: 40px; }
}