/* WooCommerce hero: headline + cart driving the order-flow track. */
.jp-woo-hero{position:relative;background:var(--sun);color:var(--ink);padding:140px 0 100px;overflow:hidden}
.jp-woo-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(28,29,30,.16) 1.6px,transparent 1.8px);background-size:28px 28px;pointer-events:none}
.jp-woo-hero .wc-squig{position:absolute;left:-60px;top:120px;width:360px;max-width:50%;fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;pointer-events:none;opacity:.8}
.jp-woo-hero .wc-squig path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:jp-woo-hero-draw 2.4s .4s var(--out) forwards}
@keyframes jp-woo-hero-draw{to{stroke-dashoffset:0}}
.jp-woo-hero .wc-top{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:end;margin-bottom:56px}
.jp-woo-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600}
.jp-woo-hero .eyebrow i{width:12px;height:12px;border-radius:50%;background:#2fbf71}
.jp-woo-hero .wc-h1{font-family:var(--jp-display);font-weight:800;color:var(--ink);font-size:clamp(42px,6.2vw,94px);line-height:.92;letter-spacing:-.045em;margin:22px 0 0}
.jp-woo-hero .wc-h1 .hl{display:inline-block;background:#fff;padding:0 .14em .06em;border-radius:.16em;box-shadow:.06em .06em 0 var(--ink);transform:rotate(-1.5deg);margin-top:.08em}
.jp-woo-hero .wc-top p{font-size:clamp(16px,1.5vw,18.5px);font-weight:500;color:#2b2a22;margin-bottom:26px}
.jp-woo-hero .acts{display:flex;flex-wrap:wrap;gap:16px}
.jp-woo-hero .btn{white-space:normal;text-align:left}

.jp-woo-hero .track{position:relative;background:#fff;border:3px solid var(--ink);border-radius:34px;box-shadow:10px 10px 0 var(--ink);padding:18px;overflow:hidden}
.jp-woo-hero .road{position:relative;width:100%;aspect-ratio:1000/300}
.jp-woo-hero .road svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jp-woo-hero .road path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.jp-woo-hero .r-base{stroke:var(--ink);stroke-width:34}
.jp-woo-hero .r-fill{stroke:var(--blue);stroke-width:22}
.jp-woo-hero .r-lane{stroke:#fff;stroke-width:3;stroke-dasharray:2 14}
.jp-woo-hero .stops{position:absolute;inset:0}
.jp-woo-hero .stop{position:absolute;width:0;height:0}
.jp-woo-hero .stop .dot{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;transition:background .3s,transform .6s var(--spring);z-index:1}
.jp-woo-hero .stop .dot svg{position:absolute;width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--spring),opacity .2s}
.jp-woo-hero .stop .dot .ck{stroke-width:3.4;transform:scale(0);opacity:0}
.jp-woo-hero .stop .dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:4px solid transparent;border-top-color:var(--deep);border-right-color:var(--deep);opacity:0;transition:opacity .2s}
.jp-woo-hero .stop.testing .dot{transform:scale(1.12)}
.jp-woo-hero .stop.testing .dot::after{opacity:1;animation:jp-woo-hero-spin .7s linear infinite}
@keyframes jp-woo-hero-spin{to{transform:rotate(360deg)}}
.jp-woo-hero .stop.passed .dot{background:#2fbf71;transform:scale(1.06)}
.jp-woo-hero .stop.passed .dot .ic{transform:scale(0);opacity:0}
.jp-woo-hero .stop.passed .dot .ck{transform:scale(1);opacity:1}
.jp-woo-hero .stop .txt{position:absolute;left:-70px;width:140px;text-align:center;top:40px;line-height:1.2}
.jp-woo-hero .stop.up .txt{top:auto;bottom:40px}
.jp-woo-hero .stop .nm{display:block;font:800 clamp(14px,1.7vw,20px)/1.1 var(--jp-display);color:var(--ink)}
.jp-woo-hero .stop .cap{display:block;font-size:13px;color:var(--grey);margin-top:3px}
.jp-woo-hero .stop.passed .cap{color:#137a43;font-weight:600}
.jp-woo-hero .cart{position:absolute;left:0;top:0;width:clamp(56px,9%,96px);aspect-ratio:1;perspective:500px;z-index:2;will-change:transform;pointer-events:none;transition:opacity .3s}
.jp-woo-hero .cart .tilt{width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(8deg)}
.jp-woo-hero .cart .jig{width:100%;height:100%;transform-style:preserve-3d;animation:jp-woo-hero-jig .28s ease-in-out infinite alternate}
.jp-woo-hero .cart.rest .jig{animation:jp-woo-hero-hop .6s var(--spring)}
@keyframes jp-woo-hero-jig{from{transform:translateY(-2px) rotate(-1.5deg)}to{transform:translateY(2px) rotate(1.5deg)}}
@keyframes jp-woo-hero-hop{0%{transform:none}35%{transform:translateY(-18%) scale(1.05,.95)}100%{transform:none}}
.jp-woo-hero .cart.warp,.jp-woo-hero .cart:not(.placed){opacity:0}
.jp-woo-hero .status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;padding:12px 16px;border-radius:16px;background:var(--light);border:2px solid #e2e6e9;font-size:14.5px;color:var(--ink)}
.jp-woo-hero .status b{font-family:var(--jp-display)}
.jp-woo-hero .status .pass{font-weight:700;color:#137a43}

.jp-woo-hero.off *{animation-play-state:paused!important}

@media (max-width:980px){
  .jp-woo-hero .wc-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .jp-woo-hero .road{aspect-ratio:auto;height:250px}
  .jp-woo-hero .stop .dot{left:-21px;top:-21px;width:42px;height:42px}
  .jp-woo-hero .stop .dot svg{width:19px;height:19px}
  .jp-woo-hero .stop .dot::after{inset:-7px;border-width:3px}
  .jp-woo-hero .stop .txt{left:-40px;width:80px;top:28px}
  .jp-woo-hero .stop.up .txt{bottom:28px}
  .jp-woo-hero .stop .nm{font-size:13px}
  .jp-woo-hero .stop .cap{font-size:11px}
  .jp-woo-hero .r-base{stroke-width:24}
  .jp-woo-hero .r-fill{stroke-width:14}
  .jp-woo-hero .track{padding:10px;border-radius:24px;box-shadow:6px 6px 0 var(--ink)}
}
@media (max-width:560px){
  .jp-woo-hero{padding:120px 0 80px}
}