/* BigCommerce page only: the How We Work preview drawn as a BigCommerce control panel (.ba), on the technology page
   kit's step mechanics and 640 x 420 canvas (tech-page.css), as the WooCommerce page draws a WordPress admin
   (woocommerce-admin.css, whose layout this restyles) and the Shopify page a Shopify admin (UD-029). Generic marks only:
   no BigCommerce logo. The sidebar item that matches the active step is lit with :has(), so it needs no script. */
.hwj .ba{position:absolute;inset:0;display:grid;grid-template-rows:30px minmax(0,1fr);background:#fff;color:#1c1f2b;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
/* Admin bar */
.ba__bar{display:flex;align-items:center;gap:12px;padding:0 10px;border-bottom:1px solid #d9dce9;font-size:10.5px;color:#313440}
.ba__mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:#1c1f2b;font-size:9px;font-weight:800;color:#fff}
.ba__search{display:flex;align-items:center;gap:6px;flex:1;max-width:230px;height:20px;margin:0 auto;padding:0 8px;border:1px solid #d9dce9;border-radius:4px;background:#f5f7fa;font-size:9.5px;color:#8f95b2}
.ba__search::before{content:"";width:8px;height:8px;border:1.5px solid #8f95b2;border-radius:50%}
.ba__bar span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.ba__howdy{margin-left:auto;font-weight:600}
.ba__howdy i{display:inline-block;width:14px;height:14px;border-radius:2px;background:#00B26B}
/* Sidebar and content */
.ba__body{display:grid;grid-template-columns:118px minmax(0,1fr);min-height:0}
.ba__nav{display:flex;flex-direction:column;gap:1px;padding:8px 0;background:#1c1f2b}
.ba__nav > span{position:relative;display:flex;align-items:center;gap:7px;height:21px;padding:0 9px;font-size:10.5px;color:#f5f7fa;transition:background-color .3s,color .3s}
.ba__nav > span::before{content:"";flex:none;width:10px;height:10px;border-radius:2px;background:#8f95b2;opacity:.7;transition:background-color .3s,opacity .3s}
.ba__sep{height:6px}
/* the lit item: a blue bar on the left and its submenu open below it, as the control panel marks the current page */
.ba:has(#hwj-s0.is-active) [data-nav="home"],
.ba:has(#hwj-s4.is-active) [data-nav="home"],
.ba:has(#hwj-s1.is-active) [data-nav="storefront"],
.ba:has(#hwj-s2.is-active) [data-nav="storefront"],
.ba:has(#hwj-s3.is-active) [data-nav="storefront"],
.ba:has(#hwj-s5.is-active) [data-nav="analytics"]{background:#262a3a;color:#fff;box-shadow:inset 3px 0 0 #3c64f4}
.ba:has(#hwj-s0.is-active) [data-nav="home"]::before,
.ba:has(#hwj-s4.is-active) [data-nav="home"]::before,
.ba:has(#hwj-s1.is-active) [data-nav="storefront"]::before,
.ba:has(#hwj-s2.is-active) [data-nav="storefront"]::before,
.ba:has(#hwj-s3.is-active) [data-nav="storefront"]::before,
.ba:has(#hwj-s5.is-active) [data-nav="analytics"]::before{background:#9fb3ff;opacity:1}
.ba__sub{display:none;flex-direction:column;padding:4px 0 5px;background:#262a3a}
.ba__sub i{display:block;height:17px;padding-left:26px;font-size:9.5px;font-style:normal;line-height:17px;color:#b8bdd1;white-space:nowrap}
.ba__sub i.is-on{font-weight:700;color:#fff}
.ba:has(#hwj-s0.is-active) [data-sub="home-setup"],
.ba:has(#hwj-s4.is-active) [data-sub="home-launch"],
.ba:has(#hwj-s1.is-active) [data-sub="sf-themes"],
.ba:has(#hwj-s2.is-active) [data-sub="sf-builder"],
.ba:has(#hwj-s3.is-active) [data-sub="sf-files"],
.ba:has(#hwj-s5.is-active) [data-sub="analytics"]{display:flex}
.ba__main{position:relative;min-height:0;background:#f5f7fa}
.hwj .ba .hwj__scene{padding:0}
/* Page header strip, then the page body */
.ba-hd{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-bottom:1px solid #d9dce9;background:#fff}
.ba-hd b{font-size:13px;font-weight:600;color:#1c1f2b}
.ba-hd small{font-size:10.5px;color:#5e637a}
.ba-hd .ba-btn{margin-left:auto}
.ba-pg{padding:12px 14px}
/* Control-panel parts */
.ba-card{border:1px solid #d9dce9;border-radius:4px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.ba-btn{display:inline-flex;align-items:center;height:22px;padding:0 10px;border:1px solid #3c64f4;border-radius:4px;background:#3c64f4;color:#fff;font-size:10.5px;font-weight:500;white-space:nowrap}
.ba-btn--sec{background:#f6f7f7;color:#3c64f4}
.ba-badge{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:999px;background:#e5e5e5;font-size:10px;font-weight:500;color:#454545;white-space:nowrap}
.ba-badge--ok{background:#e6f8ea;color:#1d7a30}      /* control panel success */
.ba-badge--info{background:#eef1ff;color:#3049c7}    /* info */
.ba-badge--warn{background:#fff3d1;color:#8a6400}    /* pending */
.ba-t{display:block;font-size:12px;font-weight:600;color:#1c1f2b}
.ba-s{display:block;font-size:10.5px;color:#5e637a}
.ba-link{font-size:10.5px;color:#3c64f4}
.ba-ck{position:relative;flex:none;width:18px;height:18px}
.ba-ck::before{content:"";position:absolute;inset:0;border:1.5px solid #b8bdd1;border-radius:50%}
.ba-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#3c64f4;color:#fff;transform:scale(0)}
.hwj .ba-ck .i{width:10px;height:10px}
.hwj .is-active .ba-ck i{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 380ms + 700ms) forwards}
@keyframes waGrow{to{transform:scaleX(1)}}
/* 1. Discovery call: the Home setup guide, filled from the call */
.ba0{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;align-items:start}
.ba0__tasks{padding:12px 14px}
.ba0__bar{height:5px;margin:9px 0 2px;border-radius:999px;background:#d9dce9;overflow:hidden}
.ba0__bar i{display:block;width:100%;height:100%;border-radius:inherit;background:#3c64f4;transform:scaleX(0);transform-origin:left}
.hwj .is-active .ba0__bar i{animation:waGrow 1.9s ease-out .9s forwards}
.ba0__row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #f5f7fa}
.ba0__row:first-of-type{margin-top:8px}
.ba0__row div{flex:1}
.ba0__row .sk{height:6px;margin-top:5px}
.ba0__row--goal .ba-t{color:#1d7a30}
.ba0__call{padding:12px;text-align:center}
.ba0__avs{display:flex;justify-content:center;margin:8px 0}
.ba0__avs span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:-8px;border:2px solid #fff;border-radius:50%;background:#d9dce9;font-size:10.5px;font-weight:700}
.ba0__avs span:first-child{margin-left:0}
.ba0__avs span:last-child{background:#00B26B;color:#04150D}
.ba0__call .ba-badge{margin-top:8px}
/* 2. Plan and scope: Storefront > My Themes, then the import mapped */
.ba1{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.ba1 .ba-card{padding:11px 12px}
.ba1__theme{position:relative;display:flex;align-items:center;gap:9px;margin-top:8px;padding:8px 9px;border:1px solid #d9dce9;border-radius:2px;background:#fff}
.ba1__shot{flex:none;width:40px;height:30px;border:1px solid #d9dce9;background:linear-gradient(180deg,#262a3a 0 22%,#f6f7f7 22% 62%,#d9dce9 62%)}
.ba1__theme div{flex:1}
.hwj .is-active .ba1__pick{animation:hwjIn .55s var(--ease) 390ms both,waPick .35s ease 1.5s forwards}
@keyframes waPick{to{border-color:#3c64f4;box-shadow:0 0 0 2px rgba(60,100,244,.25)}}
.ba1__pick .s1__tick{top:50%;right:9px;background:#3c64f4;transform:translateY(-50%) scale(0)}
.hwj .is-active .ba1__pick .s1__tick{animation:waTick .35s var(--ease) 1.6s forwards}
@keyframes waTick{to{transform:translateY(-50%) scale(1)}}
.ba1__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.ba1__row{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11px;font-weight:600}
.ba1__row span{flex:none;width:72px}
.ba1__track{flex:1;height:5px;border-radius:999px;background:#d9dce9;overflow:hidden}
.ba1__track i{display:block;width:100%;height:100%;border-radius:inherit;background:#3c64f4;transform:scaleX(0);transform-origin:left}
.hwj .is-active .ba1__track i{animation:waGrow .9s ease-out calc(var(--d,0) * 300ms + 900ms) forwards}
.ba1__note{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:10.5px;color:#5e637a}
/* 3. Design: Page Builder, widgets on the left, the home page on the right */
.ba2{display:grid;grid-template-columns:138px minmax(0,1fr);gap:10px;height:calc(100% - 58px)}
.ba2__list{padding:9px}
.ba2__list .ba-t{margin-bottom:5px;font-size:11px}
.ba2__blk{display:flex;align-items:center;gap:6px;height:23px;padding:0 6px;font-size:10.5px;color:#1c1f2b;white-space:nowrap;overflow:hidden}
.ba2__blk::before{content:"";flex:none;width:9px;height:9px;border:1.5px solid #8c8f94;border-radius:2px}
.ba2__blk.is-on{background:#3c64f4;color:#fff}
.ba2__blk.is-on::before{border-color:#fff}
.ba2__add{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:6px 0 0 6px;border-radius:2px;background:#1e1e1e;color:#fff;font-size:14px;line-height:1}
.ba2__view{position:relative;padding:10px;overflow:hidden}
.ba2__view .s2{height:auto}
.ba2__view .s2__hero{padding:12px}
.ba2__view .s2__img{height:88px}
.ba2__view .s2__pi{height:50px}
.ba2__view .s2__prods{gap:8px}
/* 4. Build on staging: the Stencil theme's files on a theme preview, with feedback going straight in */
.ba3{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:10px;height:calc(100% - 58px)}
.ba3__files{padding:9px;font-size:10.5px}
.ba3__files small{display:block;margin:7px 0 3px;font-size:9.5px;font-weight:600;color:#5e637a}
.ba3__files small:first-child{margin-top:0}
.ba3__files span{display:block;height:19px;padding:0 5px;line-height:19px;color:#3c64f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba3__files span.is-on{background:#f5f7fa;font-weight:600;color:#1c1f2b}
.ba3 .s3__code{border-radius:2px;background:#1e1e1e}
.ba3 .s3__tabs{gap:4px}
.ba3 .s3__tabs b{padding:3px 8px;border-radius:2px;background:rgba(255,255,255,.08);font-size:9.5px;font-weight:600;color:rgba(255,255,255,.55)}
.ba3 .s3__tabs b:first-child{background:rgba(143,168,255,.25);color:#b9c8ff}
.ba3 .s3__msg--you{right:146px;bottom:84px}
.ba3 .s3__msg--us{right:160px;bottom:22px}
/* 5. QA and launch: the checks pass, then the theme is applied to the live store */
.ba4{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;align-items:start}
.ba4 .s4__list{padding:11px 13px;border-radius:2px}
.ba4 .s4__row{padding:8px 0;font-size:12px}
.ba4 .s4__spin{border-top-color:#3c64f4}
.ba4 .s4__ok{background:#1d7a30}
.ba4__push{padding:11px 12px}
.ba4__env{display:flex;align-items:center;gap:8px;margin-top:9px}
.ba4__env span{flex:1;padding:7px 8px;border:1px solid #d9dce9;border-radius:2px;font-size:10.5px;font-weight:600;text-align:center}
.ba4__env span:last-child{border-color:#e6f8ea;background:#effaf1;color:#1d7a30}
.ba4__env em{flex:none;font-style:normal;color:#3c64f4}
.ba4__pub{position:relative;height:22px;margin-top:11px}
.ba4__pub > *{position:absolute;left:0;top:0}
.ba4__live{top:2px;opacity:0}
.hwj .is-active .ba4__btn{animation:hwjOut .25s ease 2.4s forwards}
.hwj .is-active .ba4__live{animation:hwjIn .4s var(--ease) 2.55s both}
.ba4__note{display:block;margin-top:9px;font-size:10px;line-height:14px;color:#5e637a}
/* 6. Run and grow: Analytics */
.ba5{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:9px;height:calc(100% - 58px)}
.ba5__kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #d9dce9;background:#fff}
.ba5__kpi{padding:9px 11px;border-left:1px solid #f5f7fa}
.ba5__kpi:first-child{border-left:0}
.ba5__kpi .sk{width:55%;height:9px;margin-top:7px;background:#d9dce9}
.ba5__kpi em{float:right;padding:0 5px;border-radius:2px;background:#e6f8ea;font-size:9.5px;font-style:normal;font-weight:600;color:#1d7a30}
.ba5 .s5__chart{padding:11px;border-radius:2px}
.ba5 .s5__toasts{gap:7px}
.ba5 .s5__toast{padding:7px 9px;border-radius:2px}
.ba5 .s5__keep{gap:7px}
.ba5 .s5__keep span{padding:4px 11px;border-radius:2px;background:#fff;font-size:11px}
/* Neutral browser bar, so the screen reads as a store control panel rather than the site's green */
.hwj .hwj__browser{border-color:#d4d4d4}
.hwj .hwj__bar{background:linear-gradient(180deg,#f3f3f3,#e8e8e8);border-bottom:1px solid #d4d4d4}
.hwj .hwj__url{background:#fff;border-color:#dcdcdc;color:#5e637a}
.hwj .hwj__status.is-live{background:#e6f8ea;color:#1d7a30}