/* WooCommerce page only: the How We Work preview drawn as a WordPress / WooCommerce admin screen (.wa), on the
   technology page kit's step mechanics and 640 x 420 canvas (tech-page.css). Only the look and the six scenes are
   this page's own, as the Shopify page draws a Shopify-admin screen (.sa). Generic marks only: no WordPress or
   WooCommerce logo. The sidebar item that matches the active step is lit with :has(), so it needs no script. */
.hwj .wa{position:absolute;inset:0;display:grid;grid-template-rows:26px minmax(0,1fr);background:#1d2327;color:#1d2327;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
/* Admin bar */
.wa__bar{display:flex;align-items:center;gap:14px;padding:0 10px;font-size:10.5px;color:#f0f0f1}
.wa__mark{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid #a7aaad;border-radius:50%;font-size:8px;font-weight:800;color:#a7aaad}
.wa__bar span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.wa__bar .wa__new::before{content:"+";font-size:13px;font-weight:700;color:#a7aaad}
.wa__bar .wa__home::before{content:"";width:9px;height:8px;border:1.5px solid #a7aaad;border-top-width:3px;border-radius:1px}
.wa__howdy{margin-left:auto}
.wa__howdy i{display:inline-block;width:14px;height:14px;border-radius:2px;background:#00B26B}
/* Sidebar and content */
.wa__body{display:grid;grid-template-columns:118px minmax(0,1fr);min-height:0}
.wa__nav{display:flex;flex-direction:column;padding:6px 0;background:#1d2327}
.wa__nav > span{position:relative;display:flex;align-items:center;gap:7px;height:21px;padding:0 9px;font-size:10.5px;color:#f0f0f1;transition:background-color .3s,color .3s}
.wa__nav > span::before{content:"";flex:none;width:10px;height:10px;border-radius:2px;background:#a7aaad;opacity:.7;transition:background-color .3s,opacity .3s}
.wa__nav > span[data-nav="woo"]::before{border-radius:3px 3px 3px 0;background:#c9aee8;opacity:1}
.wa__sep{height:6px}
/* the lit item: WordPress's blue current-menu, with its submenu open below it */
.wa:has(#hwj-s0.is-active) [data-nav="woo"],
.wa:has(#hwj-s4.is-active) [data-nav="woo"],
.wa:has(#hwj-s1.is-active) [data-nav="appearance"],
.wa:has(#hwj-s2.is-active) [data-nav="appearance"],
.wa:has(#hwj-s3.is-active) [data-nav="appearance"],
.wa:has(#hwj-s5.is-active) [data-nav="analytics"]{background:#2271b1;color:#fff}
.wa:has(#hwj-s0.is-active) [data-nav="woo"]::before,
.wa:has(#hwj-s4.is-active) [data-nav="woo"]::before,
.wa:has(#hwj-s1.is-active) [data-nav="appearance"]::before,
.wa:has(#hwj-s2.is-active) [data-nav="appearance"]::before,
.wa:has(#hwj-s3.is-active) [data-nav="appearance"]::before,
.wa:has(#hwj-s5.is-active) [data-nav="analytics"]::before{background:#fff;opacity:1}
.wa__sub{display:none;flex-direction:column;padding:4px 0 5px;background:#2c3338}
.wa__sub i{display:block;height:17px;padding-left:26px;font-size:9.5px;font-style:normal;line-height:17px;color:#c3c4c7;white-space:nowrap}
.wa__sub i.is-on{font-weight:700;color:#fff}
.wa:has(#hwj-s0.is-active) [data-sub="woo-home"],
.wa:has(#hwj-s4.is-active) [data-sub="woo-status"],
.wa:has(#hwj-s1.is-active) [data-sub="app-themes"],
.wa:has(#hwj-s2.is-active) [data-sub="app-editor"],
.wa:has(#hwj-s3.is-active) [data-sub="app-files"],
.wa:has(#hwj-s5.is-active) [data-sub="analytics"]{display:flex}
.wa__main{position:relative;min-height:0;background:#f0f0f1}
.hwj .wa .hwj__scene{padding:0}
/* WooCommerce admin header strip, then the page body */
.wa-hd{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-bottom:1px solid #dcdcde;background:#fff}
.wa-hd b{font-size:13px;font-weight:600;color:#1d2327}
.wa-hd small{font-size:10.5px;color:#646970}
.wa-hd .wa-btn{margin-left:auto}
.wa-pg{padding:12px 14px}
/* WordPress / WooCommerce parts */
.wa-card{border:1px solid #dcdcde;border-radius:2px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.wa-btn{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid #2271b1;border-radius:3px;background:#2271b1;color:#fff;font-size:10.5px;font-weight:500;white-space:nowrap}
.wa-btn--sec{background:#f6f7f7;color:#2271b1}
.wa-badge{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:4px;background:#e5e5e5;font-size:10px;font-weight:500;color:#454545;white-space:nowrap}
.wa-badge--ok{background:#c6e1c6;color:#2c4700}      /* WooCommerce "Processing" */
.wa-badge--info{background:#c8d7e1;color:#2e4453}    /* "Completed" */
.wa-badge--warn{background:#f8dda7;color:#573b00}    /* "On hold" */
.wa-t{display:block;font-size:12px;font-weight:600;color:#1d2327}
.wa-s{display:block;font-size:10.5px;color:#646970}
.wa-link{font-size:10.5px;color:#2271b1}
.wa-ck{position:relative;flex:none;width:18px;height:18px}
.wa-ck::before{content:"";position:absolute;inset:0;border:1.5px solid #c3c4c7;border-radius:50%}
.wa-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#2271b1;color:#fff;transform:scale(0)}
.hwj .wa-ck .i{width:10px;height:10px}
.hwj .is-active .wa-ck i{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 380ms + 700ms) forwards}
@keyframes waGrow{to{transform:scaleX(1)}}
/* 1. Discovery call: WooCommerce Home's setup task list, filled from the call */
.wa0{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;align-items:start}
.wa0__tasks{padding:12px 14px}
.wa0__bar{height:5px;margin:9px 0 2px;border-radius:999px;background:#dcdcde;overflow:hidden}
.wa0__bar i{display:block;width:100%;height:100%;border-radius:inherit;background:#2271b1;transform:scaleX(0);transform-origin:left}
.hwj .is-active .wa0__bar i{animation:waGrow 1.9s ease-out .9s forwards}
.wa0__row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #f0f0f1}
.wa0__row:first-of-type{margin-top:8px}
.wa0__row div{flex:1}
.wa0__row .sk{height:6px;margin-top:5px}
.wa0__row--goal .wa-t{color:#2c4700}
.wa0__call{padding:12px;text-align:center}
.wa0__avs{display:flex;justify-content:center;margin:8px 0}
.wa0__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:#dcdcde;font-size:10.5px;font-weight:700}
.wa0__avs span:first-child{margin-left:0}
.wa0__avs span:last-child{background:#00B26B;color:#04150D}
.wa0__call .wa-badge{margin-top:8px}
/* 2. Plan and scope: Themes, then the import mapped */
.wa1{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.wa1 .wa-card{padding:11px 12px}
.wa1__theme{position:relative;display:flex;align-items:center;gap:9px;margin-top:8px;padding:8px 9px;border:1px solid #dcdcde;border-radius:2px;background:#fff}
.wa1__shot{flex:none;width:40px;height:30px;border:1px solid #dcdcde;background:linear-gradient(180deg,#50575e 0 22%,#f6f7f7 22% 62%,#dcdcde 62%)}
.wa1__theme div{flex:1}
.hwj .is-active .wa1__pick{animation:hwjIn .55s var(--ease) 390ms both,waPick .35s ease 1.5s forwards}
@keyframes waPick{to{border-color:#2271b1;box-shadow:0 0 0 2px rgba(34,113,177,.25)}}
.wa1__pick .s1__tick{top:50%;right:9px;background:#2271b1;transform:translateY(-50%) scale(0)}
.hwj .is-active .wa1__pick .s1__tick{animation:waTick .35s var(--ease) 1.6s forwards}
@keyframes waTick{to{transform:translateY(-50%) scale(1)}}
.wa1__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.wa1__row{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11px;font-weight:600}
.wa1__row span{flex:none;width:72px}
.wa1__track{flex:1;height:5px;border-radius:999px;background:#dcdcde;overflow:hidden}
.wa1__track i{display:block;width:100%;height:100%;border-radius:inherit;background:#2271b1;transform:scaleX(0);transform-origin:left}
.hwj .is-active .wa1__track i{animation:waGrow .9s ease-out calc(var(--d,0) * 300ms + 900ms) forwards}
.wa1__note{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:10.5px;color:#646970}
/* 3. Design: the Site Editor, block list on the left, the shop page on the right */
.wa2{display:grid;grid-template-columns:138px minmax(0,1fr);gap:10px;height:calc(100% - 58px)}
.wa2__list{padding:9px}
.wa2__list .wa-t{margin-bottom:5px;font-size:11px}
.wa2__blk{display:flex;align-items:center;gap:6px;height:23px;padding:0 6px;font-size:10.5px;color:#1d2327;white-space:nowrap;overflow:hidden}
.wa2__blk::before{content:"";flex:none;width:9px;height:9px;border:1.5px solid #8c8f94;border-radius:2px}
.wa2__blk.is-on{background:#2271b1;color:#fff}
.wa2__blk.is-on::before{border-color:#fff}
.wa2__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}
.wa2__view{position:relative;padding:10px;overflow:hidden}
.wa2__view .s2{height:auto}
.wa2__view .s2__hero{padding:12px}
.wa2__view .s2__img{height:88px}
.wa2__view .s2__pi{height:50px}
.wa2__view .s2__prods{gap:8px}
/* 4. Build on staging: the theme file editor, with feedback going straight in */
.wa3{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:10px;height:calc(100% - 58px)}
.wa3__files{padding:9px;font-size:10.5px}
.wa3__files small{display:block;margin:7px 0 3px;font-size:9.5px;font-weight:600;color:#646970}
.wa3__files small:first-child{margin-top:0}
.wa3__files span{display:block;height:19px;padding:0 5px;line-height:19px;color:#2271b1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa3__files span.is-on{background:#f0f0f1;font-weight:600;color:#1d2327}
.wa3 .s3__code{border-radius:2px;background:#1e1e1e}
.wa3 .s3__tabs{gap:4px}
.wa3 .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)}
.wa3 .s3__tabs b:first-child{background:rgba(114,174,230,.25);color:#9ec2e6}
.wa3 .s3__msg--you{right:146px;bottom:84px}
.wa3 .s3__msg--us{right:160px;bottom:22px}
/* 5. QA and launch: the status checks pass, then staging is pushed live */
.wa4{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;align-items:start}
.wa4 .s4__list{padding:11px 13px;border-radius:2px}
.wa4 .s4__row{padding:8px 0;font-size:12px}
.wa4 .s4__spin{border-top-color:#2271b1}
.wa4 .s4__ok{background:#00a32a}
.wa4__push{padding:11px 12px}
.wa4__env{display:flex;align-items:center;gap:8px;margin-top:9px}
.wa4__env span{flex:1;padding:7px 8px;border:1px solid #dcdcde;border-radius:2px;font-size:10.5px;font-weight:600;text-align:center}
.wa4__env span:last-child{border-color:#c6e1c6;background:#f0f6f0;color:#2c4700}
.wa4__env em{flex:none;font-style:normal;color:#2271b1}
.wa4__pub{position:relative;height:22px;margin-top:11px}
.wa4__pub > *{position:absolute;left:0;top:0}
.wa4__live{top:2px;opacity:0}
.hwj .is-active .wa4__btn{animation:hwjOut .25s ease 2.4s forwards}
.hwj .is-active .wa4__live{animation:hwjIn .4s var(--ease) 2.55s both}
.wa4__note{display:block;margin-top:9px;font-size:10px;line-height:14px;color:#646970}
/* 6. Run and grow: WooCommerce Analytics */
.wa5{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:9px;height:calc(100% - 58px)}
.wa5__kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dcdcde;background:#fff}
.wa5__kpi{padding:9px 11px;border-left:1px solid #f0f0f1}
.wa5__kpi:first-child{border-left:0}
.wa5__kpi .sk{width:55%;height:9px;margin-top:7px;background:#dcdcde}
.wa5__kpi em{float:right;padding:0 5px;border-radius:2px;background:#c6e1c6;font-size:9.5px;font-style:normal;font-weight:600;color:#2c4700}
.wa5 .s5__chart{padding:11px;border-radius:2px}
.wa5 .s5__toasts{gap:7px}
.wa5 .s5__toast{padding:7px 9px;border-radius:2px}
.wa5 .s5__keep{gap:7px}
.wa5 .s5__keep span{padding:4px 11px;border-radius:2px;background:#fff;font-size:11px}
/* Neutral browser bar, so the screen reads as a WordPress admin 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:#646970}
.hwj .hwj__status.is-live{background:#c6e1c6;color:#2c4700}