/* WooCommerce checks: three cards with small looping scenes. */
.jp-woo-tests{position:relative;background:var(--sky);color:var(--ink);padding:110px 0}
.jp-woo-tests .wc-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:end;margin-bottom:50px}
.jp-woo-tests .wc-title{color:var(--ink)}
.jp-woo-tests .wc-head p{font-size:17px;max-width:30em;color:#2e3d48}
.jp-woo-tests .tests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.jp-woo-tests .test{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:28px;box-shadow:7px 7px 0 var(--ink);padding:18px 18px 26px;display:flex;flex-direction:column;gap:14px;transition:transform .6s var(--spring),box-shadow .35s}
.jp-woo-tests .test:hover{transform:translate(-3px,-5px) rotate(-1deg);box-shadow:11px 12px 0 var(--ink)}
.jp-woo-tests .test-title{color:var(--ink);font-size:26px;padding:0 8px}
.jp-woo-tests .test p{color:#33424c;font-size:15.5px;padding:0 8px}
.jp-woo-tests .mini{position:relative;height:190px;border:3px solid var(--ink);border-radius:18px;background:var(--c);overflow:hidden;display:grid;place-items:center}
/* backup ring */
.jp-woo-tests .ringbox{position:relative;width:120px;height:120px}
.jp-woo-tests .ringbox svg{width:100%;height:100%;transform:rotate(-90deg)}
.jp-woo-tests .ringbox circle{fill:none;stroke-width:12}
.jp-woo-tests .ringbox .bg{stroke:rgba(28,29,30,.18)}
.jp-woo-tests .ringbox .fg{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:0}
.js-motion .jp-woo-tests .ringbox .fg{animation:jp-woo-tests-fill 3.6s var(--out) infinite}
@keyframes jp-woo-tests-fill{0%{stroke-dashoffset:283}55%,100%{stroke-dashoffset:0}}
.jp-woo-tests .ringbox b{position:absolute;inset:0;display:grid;place-items:center;font:800 18px/1.1 var(--jp-display);text-align:center}
/* checkout */
.jp-woo-tests .co{width:78%;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:7px;box-shadow:4px 4px 0 var(--ink)}
.jp-woo-tests .co i{display:block;height:14px;border-radius:6px;background:var(--light);border:2px solid #c9d0d5;position:relative;overflow:hidden}
.jp-woo-tests .co i::after{content:"";position:absolute;inset:0;background:#d4ecfb;transform-origin:0 50%}
.js-motion .jp-woo-tests .co i::after{animation:jp-woo-tests-type 3.6s var(--out) infinite;animation-delay:calc(var(--n) * .25s)}
@keyframes jp-woo-tests-type{0%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
.jp-woo-tests .co .place{margin-top:4px;min-height:26px;border-radius:9px;background:var(--sun);border:2.5px solid var(--ink);font:700 12px/21px Poppins,sans-serif;text-align:center;box-shadow:2px 2px 0 var(--ink)}
.js-motion .jp-woo-tests .co .place{animation:jp-woo-tests-press 3.6s infinite}
@keyframes jp-woo-tests-press{0%,60%{transform:none;background:var(--sun)}66%{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}72%,100%{transform:none;background:#2fbf71}}
/* email */
.jp-woo-tests .env{position:relative;width:132px;height:88px}
.jp-woo-tests .env .back{position:absolute;inset:0;background:#fff;border:3px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink)}
.jp-woo-tests .env .flap{position:absolute;left:0;right:0;top:0;height:56px;clip-path:polygon(0 0,100% 0,50% 100%);background:var(--ink)}
.jp-woo-tests .env .flap::after{content:"";position:absolute;inset:3px 6px 6px;clip-path:polygon(0 0,100% 0,50% 100%);background:#ffe27a}
.jp-woo-tests .env .note{position:absolute;left:50%;top:-48px;translate:-50% 0;white-space:nowrap;background:#2fbf71;color:var(--ink);border:2.5px solid var(--ink);border-radius:10px;padding:5px 9px;font:700 12px/1 Poppins,sans-serif}
.js-motion .jp-woo-tests .env{animation:jp-woo-tests-env 3.6s var(--spring) infinite}
.js-motion .jp-woo-tests .env .note{animation:jp-woo-tests-note 3.6s var(--spring) infinite}
@keyframes jp-woo-tests-env{0%,20%{transform:translateX(-30px) rotate(-8deg);opacity:0}35%,80%{transform:none;opacity:1}100%{transform:translateX(40px) rotate(8deg);opacity:0}}
@keyframes jp-woo-tests-note{0%,40%{scale:0}55%,85%{scale:1}100%{scale:0}}

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

@media (max-width:980px){
  .jp-woo-tests .wc-head{grid-template-columns:minmax(0,1fr)}
  .jp-woo-tests .tests{grid-template-columns:minmax(0,1fr);max-width:520px}
}