/* ==========================================================================
   Appslin — E-Commerce Development page
   Layer on top of the approved Portal / Dynamic / CMS / Static design system.
   Only additive rules; nothing here overrides production files.
   ========================================================================== */

.page-ecom .ec-hero-visual{ position:relative; }
.page-ecom .ec-hero-art{ margin:0; position:relative; border-radius:26px; overflow:hidden;
  box-shadow:0 34px 80px -34px rgba(8,16,38,.55); background:#0b1226; }
.page-ecom .ec-hero-art img{ display:block; width:100%; height:auto; }
.page-ecom .ec-hero-cap{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:12px 14px; background:linear-gradient(180deg,rgba(9,16,36,.06),rgba(9,16,36,.1)); }
.page-ecom .ec-hero-cap span{ font:600 12px/1 "Plus Jakarta Sans",sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:#0b1226; background:#fff; border:1px solid rgba(11,18,38,.1);
  border-radius:999px; padding:8px 14px; }

.page-ecom .ec-hero-tags-title{ margin:18px 0 10px; font:700 13px/1 "Plus Jakarta Sans",sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.page-ecom .ec-hero-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.page-ecom .ec-hero-tags li{ font:600 13px/1 "Plus Jakarta Sans",sans-serif; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:8px 13px; backdrop-filter:blur(6px); }

/* ---- Sticky / progressive media (same behaviour as approved UI Design page) --- */
.page-ecom .ec-media{ margin:0; border-radius:24px; overflow:hidden; align-self:start;
  box-shadow:0 30px 70px -34px rgba(8,16,38,.42); background:#f3f5fb; }
.page-ecom .ec-media img{ display:block; width:100%; height:auto; }
@media (min-width:993px){
  .page-ecom .ec-media{ position:sticky; top:110px; }
}

/* ---- Numbered step rail ---- */
.page-ecom .ec-steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.page-ecom .ec-step{ position:relative; display:grid; grid-template-columns:54px 1fr; gap:16px;
  padding:20px 22px; background:#fff; border:1px solid rgba(11,18,38,.08); border-radius:20px;
  box-shadow:0 18px 44px -30px rgba(8,16,38,.35); transition:transform .35s ease, box-shadow .35s ease; }
.page-ecom .ec-step:hover{ transform:translateY(-4px); box-shadow:0 26px 56px -30px rgba(8,16,38,.45); }
.page-ecom .ec-step-num{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font:800 18px/1 "Sora",sans-serif; color:#fff;
  background:linear-gradient(135deg,#12b886,#0b8f68); }
.page-ecom .ec-step h5{ margin:2px 0 6px; font:700 17px/1.3 "Sora",sans-serif; color:#0b1226; }
.page-ecom .ec-step p{ margin:0; }
.page-ecom .ec-step figure{ margin:0; }
.page-ecom .ec-step-ico{ width:54px; height:54px; border-radius:16px; overflow:hidden;
  background:#eef2fb; display:grid; place-items:center; }
.page-ecom .ec-step-ico img{ width:34px; height:34px; object-fit:contain; }

/* ---- Feature / benefit card grids ---- */
.page-ecom .ec-grid{ display:grid; gap:18px; }
.page-ecom .ec-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.page-ecom .ec-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.page-ecom .ec-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.page-ecom .ec-card{ background:#fff; border:1px solid rgba(11,18,38,.08); border-radius:20px;
  padding:24px; box-shadow:0 18px 44px -32px rgba(8,16,38,.34);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.page-ecom .ec-card:hover{ transform:translateY(-5px); border-color:rgba(18,184,134,.34);
  box-shadow:0 28px 60px -30px rgba(8,16,38,.44); }
.page-ecom .ec-card h4,
.page-ecom .ec-card h5{ margin:0 0 8px; font:700 17px/1.35 "Sora",sans-serif; color:#0b1226; }
.page-ecom .ec-card p{ margin:0; }
.page-ecom .ec-ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:14px; color:#0b8f68; background:rgba(18,184,134,.12); }
.page-ecom .ec-ico svg{ width:23px; height:23px; }
.page-ecom .ec-card--dark{ background:linear-gradient(150deg,#0b1226,#152046); border-color:rgba(255,255,255,.1); }
.page-ecom .ec-card--dark h4,
.page-ecom .ec-card--dark h5{ color:#fff; }
.page-ecom .ec-card--dark p{ color:rgba(255,255,255,.76); }
.page-ecom .ec-card--dark .ec-ico{ background:rgba(18,184,134,.18); color:#3ddc9a; }

/* ---- Checklist cards ---- */
.page-ecom .ec-checks{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.page-ecom .ec-checks li{ display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start;
  background:#fff; border:1px solid rgba(11,18,38,.08); border-radius:16px; padding:18px 20px;
  box-shadow:0 14px 36px -30px rgba(8,16,38,.34); }
.page-ecom .ec-checks li svg{ width:22px; height:22px; color:#0b8f68; margin-top:2px; }

/* ---- Package ---- */
.page-ecom .ec-pk-note{ margin:14px 0 0; font:600 13px/1.5 "Plus Jakarta Sans",sans-serif; color:#5a6480; }

/* ---- Join CTA band ---- */
.page-ecom .ec-join{ position:relative; overflow:hidden; border-radius:26px; padding:44px 38px;
  text-align:center; background:linear-gradient(135deg,#0b1226 0%,#16224c 55%,#0b8f68 140%);
  box-shadow:0 34px 80px -40px rgba(8,16,38,.6); }
.page-ecom .ec-join p{ margin:0 auto; max-width:920px; color:rgba(255,255,255,.86); }
.page-ecom .ec-join p strong{ display:block; margin-bottom:10px; color:#fff;
  font:800 24px/1.2 "Sora",sans-serif; letter-spacing:.02em; }
.page-ecom .ec-join-actions{ margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- Responsive ---- */
@media (max-width:1100px){
  .page-ecom .ec-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:992px){
  .page-ecom .ec-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-ecom .ec-media{ position:static; }
}
@media (max-width:720px){
  .page-ecom .ec-grid--2,
  .page-ecom .ec-grid--3,
  .page-ecom .ec-grid--4{ grid-template-columns:1fr; }
  .page-ecom .ec-step{ grid-template-columns:44px 1fr; gap:12px; padding:18px; }
  .page-ecom .ec-step-num,
  .page-ecom .ec-step-ico{ width:44px; height:44px; border-radius:13px; font-size:16px; }
  .page-ecom .ec-join{ padding:32px 20px; }
  .page-ecom .ec-join p strong{ font-size:20px; }
}

/* ---- Form helpers (requirement note + agreement checkbox) ---- */
.dyf-form .field-note{ margin:8px 0 0; font:500 12.5px/1.5 "Plus Jakarta Sans",sans-serif; color:#5a6480; }
.dyf-form .field--check label{ display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  font:500 13.5px/1.5 "Plus Jakarta Sans",sans-serif; color:#38405a; }
.dyf-form .field--check input[type="checkbox"]{ width:17px; height:17px; margin-top:2px; accent-color:#0b8f68; flex:0 0 auto; }