/* Petopedia loading and refresh — 2026-10-22. Loaded by the site plugin. */
#peto-load-cancel[hidden], #peto-load-play[hidden], #peto-load-game[hidden], #peto-load-notice[hidden], #peto-pull-hint[hidden] { display:none!important; }
/* Keep the animation timeline ready before Safari starts a new navigation. */
#peto-page-loader[hidden] { display:flex!important; visibility:hidden; pointer-events:none; }
#peto-page-loader { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; background:rgba(255,250,245,.93); touch-action:none; user-select:none; -webkit-user-select:none; }
#peto-page-loader .peto-load-card { position:relative; width:180px; max-width:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; text-align:center; color:#5b493d; }
#peto-page-loader .peto-load-art { display:grid; place-items:center; position:relative; width:96px; height:100px; margin:0 auto; padding-bottom:4px; box-sizing:border-box; align-items:end; }
#peto-page-loader .peto-load-art::after { content:""; position:absolute; left:50%; bottom:4px; width:40px; height:5px; border-radius:50%; background:rgba(140,80,25,.15); transform:translateX(-50%); animation:peto-cat-shadow 1.8s ease-in-out infinite; }
#peto-page-loader .peto-load-cat { position:relative; z-index:1; display:block; width:64px; height:64px; }
#peto-page-loader .peto-cat-breath, #peto-pull-hint .peto-cat-breath { position:relative; display:block; width:100%; height:100%; transform-origin:50% 100%; }
#peto-page-loader .peto-cat-layer, #peto-pull-hint .peto-cat-layer { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; image-rendering:auto; }
#peto-page-loader .peto-cat-breath { animation:peto-cat-happy-hop 1.8s ease-in-out infinite; }
#peto-page-loader .peto-cat-arm, #peto-pull-hint .peto-cat-arm { position:absolute; inset:0; display:block; width:100%; height:100%; }
#peto-page-loader .peto-cat-tail { transform-origin:75% 85%; animation:peto-cat-tail 1.8s ease-in-out infinite; }
#peto-page-loader .peto-cat-head { transform-origin:46% 74%; animation:peto-cat-head 1.8s ease-in-out infinite; }
#peto-page-loader .peto-cat-arm-left { transform-origin:33.59375% 77.34375%; animation:peto-cat-arm-left 1.8s ease-in-out infinite; }
#peto-page-loader .peto-cat-arm-right { transform-origin:57.03125% 77.34375%; animation:peto-cat-arm-right 1.8s ease-in-out infinite; }
#peto-page-loader .peto-cat-fore-left { transform-origin:33.59375% 86.71875%; animation:peto-cat-fore-left 1.8s ease-in-out infinite; }
#peto-page-loader .peto-cat-fore-right { transform-origin:57.03125% 86.71875%; animation:peto-cat-fore-right 1.8s ease-in-out infinite; }
#peto-page-loader .peto-cat-leg-left { transform-origin:35.15625% 87.5%; animation:peto-cat-leg-left 1.8s ease-in-out infinite; }
#peto-page-loader .peto-cat-leg-right { transform-origin:56.25% 87.5%; animation:peto-cat-leg-right 1.8s ease-in-out infinite; }
#peto-page-loader[hidden] *, #peto-page-loader[hidden] .peto-load-art::after, #peto-page-loader[hidden] #peto-load-dots::after { animation-play-state:paused!important; }
#peto-page-loader.peto-game-active .peto-load-card { width:340px; }
#peto-page-loader.peto-game-active .peto-load-art { display:none; }
#peto-load-game { position:relative; }
#peto-page-loader.peto-game-active #peto-demo-motion { display:none!important; }
#peto-load-game canvas { display:block; width:100%; height:136px; image-rendering:pixelated; touch-action:manipulation; }
#peto-load-game .peto-game-score { position:absolute; top:0; right:0; color:#806c5d; font:400 11px/18px system-ui,sans-serif; font-variant-numeric:tabular-nums; }
#peto-load-game .peto-game-hint { margin:6px 0; color:#806c5d; font:400 11px/18px system-ui,sans-serif; }
#peto-load-play { display:block; min-height:44px; margin:14px auto 0; padding:9px 16px; border:1px solid #d9cabc; border-radius:22px; background:transparent; color:#5b493d; font:400 12px/18px system-ui,sans-serif; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
#peto-load-play:hover { border-color:#dd791e; }
#peto-load-play:disabled { opacity:.6; cursor:wait; }
#peto-load-play:focus-visible { outline:2px solid #a84c08; outline-offset:3px; }
#peto-load-message { margin:12px 0 0; font-size:12px; font-weight:400; line-height:1.45; color:#684932; }
#peto-load-label { display:inline-flex; align-items:baseline; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; white-space:nowrap; vertical-align:bottom; animation:none; clip-path:none; }
#peto-load-dots { display:inline-block; flex:0 0 3ch; width:3ch; text-align:left; }
#peto-load-dots::after { content:"..."; display:block; width:3ch; overflow:hidden; white-space:nowrap; animation:peto-load-dots 1.6s steps(3,end) infinite; }
.peto-load-sr { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
#peto-page-loader[data-peto-caption-mode="icon"] #peto-load-message { opacity:0; }
#peto-load-cancel { min-height:40px; margin:12px 0 0; padding:7px 12px; border:1px solid #ead4c1; border-radius:12px; background:#fff6ed; color:#71431e; font-size:12px; line-height:1.4; cursor:pointer; }
html.peto-pull-enabled, html.peto-pull-enabled body { overscroll-behavior-y:contain; }
#peto-pull-hint { position:fixed; z-index:2147482999; top:env(safe-area-inset-top,0px); left:50%; display:flex; align-items:center; gap:8px; width:max-content; max-width:calc(100vw - 32px); padding:9px 14px; box-sizing:border-box; border:1px solid #f1e3d6; border-radius:24px; background:#fffaf5; color:#684932; box-shadow:0 3px 12px rgba(75,37,10,.08); font-size:12px; line-height:1.4; transform:translate(-50%,var(--peto-pull-distance,0px)); pointer-events:none; }
#peto-pull-hint[data-ready="true"] { color:#9b4407; border-color:#f2c49e; }
#peto-pull-hint .peto-pull-cat { position:relative; display:block; flex:0 0 32px; width:32px; height:32px; image-rendering:auto; }
/* Keep the drawer focused; the homepage/header wishlist remains available. */
.mobile-nav .wd-nav-mob-tab.wd-swap { flex-direction:row; }
.mobile-nav .menu-item-wishlist, .mobile-nav .menu-item-compare { display:none!important; }
.mobile-nav .mobile-pages-menu .peto-menu-icon { display:block; flex:0 0 18px; width:18px; height:18px; margin-inline-end:10px; color:#ff7900; }
#peto-load-cancel:focus-visible { outline:2px solid #a84c08; outline-offset:-3px; }
body .peto-action-busy { position:relative!important; cursor:wait!important; }
body .peto-action-busy::after { position:absolute!important; inset:0!important; display:flex!important; align-items:center; justify-content:center; content:attr(data-peto-busy-label)!important; width:auto!important; height:auto!important; margin:0!important; padding:4px!important; border:0!important; border-radius:inherit; background:#ff7900!important; color:#36200c!important; font-size:13px!important; font-weight:600!important; line-height:1.3!important; text-indent:0!important; opacity:1!important; transform:none!important; animation:none!important; }
#peto-load-notice { position:fixed; z-index:2147483001; left:50%; bottom:calc(var(--peto-nav-space,80px) + env(safe-area-inset-bottom,0px) + 12px); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); padding:12px 18px; box-sizing:border-box; border:1px solid #e6c6ab; border-radius:16px; background:#fffaf5; color:#643b1a; box-shadow:0 5px 24px rgba(75,37,10,.12); font-size:13px; line-height:1.45; text-align:center; }
@keyframes peto-cat-happy-hop {
  0%,50%,100% { transform:translate(0,0) rotate(0) scale(1); }
  7%,57% { transform:translate(0,1px) scale(1.04,.93); }
  14% { transform:translate(-1px,-11px) rotate(-1deg) scale(.98,1.04); }
  25% { transform:translate(-2px,-20px) rotate(-3deg) scale(1); }
  40% { transform:translate(-1px,-5px) rotate(-1deg); }
  46% { transform:translate(0,1px) scale(1.05,.92); }
  64% { transform:translate(1px,-10px) rotate(1deg) scale(.98,1.04); }
  75% { transform:translate(2px,-18px) rotate(3deg) scale(1); }
  90% { transform:translate(1px,-4px) rotate(1deg); }
  96% { transform:translate(0,1px) scale(1.05,.92); }
}
@keyframes peto-cat-arm-left { 0%,50%,100% { transform:rotate(0); } 7%,57% { transform:rotate(-8deg); } 17% { transform:rotate(65deg); } 24% { transform:rotate(82deg); } 32% { transform:rotate(72deg); } 42% { transform:rotate(30deg); } 48%,98% { transform:rotate(0); } 67% { transform:rotate(55deg); } 75% { transform:rotate(75deg); } 83% { transform:rotate(68deg); } 92% { transform:rotate(20deg); } }
@keyframes peto-cat-arm-right { 0%,50%,100% { transform:rotate(0); } 9%,59% { transform:rotate(8deg); } 20% { transform:rotate(-60deg); } 28% { transform:rotate(-78deg); } 35% { transform:rotate(-68deg); } 44% { transform:rotate(-25deg); } 49%,99% { transform:rotate(0); } 70% { transform:rotate(-65deg); } 78% { transform:rotate(-82deg); } 85% { transform:rotate(-72deg); } 94% { transform:rotate(-25deg); } }
@keyframes peto-cat-fore-left { 0%,10%,50%,60%,100% { transform:rotate(0); } 22% { transform:rotate(-55deg); } 30% { transform:rotate(-45deg); } 42%,92% { transform:rotate(6deg); } 48%,98% { transform:rotate(-5deg); } 72% { transform:rotate(-50deg); } 80% { transform:rotate(-40deg); } }
@keyframes peto-cat-fore-right { 0%,12%,50%,62%,100% { transform:rotate(0); } 25%,75% { transform:rotate(55deg); } 33%,83% { transform:rotate(45deg); } 44%,94% { transform:rotate(-6deg); } 49%,99% { transform:rotate(4deg); } }
@keyframes peto-cat-leg-left { 0%,50%,100% { transform:rotate(0) scale(1); } 12%,62% { transform:rotate(3deg) scaleY(1.02); } 27% { transform:rotate(12deg) scaleY(.86); } 39%,89% { transform:rotate(5deg) scaleY(.97); } 46%,96% { transform:rotate(-4deg) scale(1.08,.94); } 77% { transform:rotate(9deg) scaleY(.9); } }
@keyframes peto-cat-leg-right { 0%,50%,100% { transform:rotate(0) scale(1); } 14%,64% { transform:rotate(-3deg) scaleY(1.02); } 30% { transform:rotate(-9deg) scaleY(.9); } 41%,91% { transform:rotate(-5deg) scaleY(.97); } 48%,98% { transform:rotate(4deg) scale(1.08,.94); } 80% { transform:rotate(-14deg) scaleY(.86); } }
@keyframes peto-cat-head { 0%,50%,100% { transform:translateY(0) rotate(0); } 16%,66% { transform:translateY(.3px) rotate(0); } 28% { transform:translateY(-.4px) rotate(-1.5deg); } 43% { transform:translateY(.4px) rotate(-.5deg); } 78% { transform:translateY(-.4px) rotate(1.5deg); } 93% { transform:translateY(.4px) rotate(.5deg); } }
@keyframes peto-cat-tail { 0%,50%,100% { transform:rotate(0); } 19% { transform:rotate(-10deg); } 32% { transform:rotate(8deg); } 45% { transform:rotate(-4deg); } 69% { transform:rotate(12deg); } 82% { transform:rotate(-8deg); } 95% { transform:rotate(4deg); } }
@keyframes peto-cat-shadow { 0%,7%,46%,50%,57%,96%,100% { transform:translateX(-50%) scaleX(1); opacity:.8; } 25%,75% { transform:translateX(-50%) scaleX(.7); opacity:.35; } }
@keyframes peto-load-dots { 0% { width:0; } 75%,100% { width:3ch; } }
#peto-demo-note, #peto-demo-motion, #peto-demo-close { display:none; }
#peto-page-loader[data-peto-demo-active] #peto-demo-note { display:block; margin:0 0 18px; font:400 11px/1.5 system-ui,sans-serif; color:#806c5d; }
#peto-page-loader[data-peto-demo-active] #peto-demo-motion, #peto-page-loader[data-peto-demo-active] #peto-demo-close { display:block; min-height:44px; margin:10px auto 0; padding:8px 14px; border:1px solid #dfcfbf; border-radius:24px; background:transparent; color:#684932; font:400 12px/18px system-ui,sans-serif; cursor:pointer; touch-action:manipulation; }
#peto-page-loader[data-peto-demo-active] #peto-load-cancel { display:none!important; }
#peto-demo-replay { position:fixed; z-index:2147482998; bottom:calc(var(--peto-nav-space,80px) + env(safe-area-inset-bottom,0px) + 12px); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); min-height:44px; padding:10px 18px; border:1px solid #dfcfbf; border-radius:24px; background:#fffaf5; color:#684932; font:400 12px/18px system-ui,sans-serif; cursor:pointer; }
#peto-demo-replay[hidden] { display:none!important; }
#peto-demo-motion:focus-visible, #peto-demo-close:focus-visible, #peto-demo-replay:focus-visible { outline:2px solid #a84c08; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { #peto-page-loader .peto-cat-breath,#peto-page-loader .peto-cat-tail,#peto-page-loader .peto-cat-head,#peto-page-loader .peto-cat-arm-left,#peto-page-loader .peto-cat-arm-right,#peto-page-loader .peto-cat-fore-left,#peto-page-loader .peto-cat-fore-right,#peto-page-loader .peto-cat-leg-left,#peto-page-loader .peto-cat-leg-right,#peto-page-loader #peto-load-dots::after,#peto-page-loader .peto-load-art::after { animation:none; transform:none; clip-path:none; } }
/* Explicit preview controls do not change the visitor's device preferences. */
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-cat-breath { animation:peto-cat-happy-hop 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-cat-tail { animation:peto-cat-tail 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-cat-head { animation:peto-cat-head 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-cat-arm-left { animation:peto-cat-arm-left 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-cat-arm-right { animation:peto-cat-arm-right 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-cat-fore-left { animation:peto-cat-fore-left 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-cat-fore-right { animation:peto-cat-fore-right 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-cat-leg-left { animation:peto-cat-leg-left 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-cat-leg-right { animation:peto-cat-leg-right 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] .peto-load-art::after { animation:peto-cat-shadow 1.8s ease-in-out infinite; }
#peto-page-loader[data-peto-demo-active][data-peto-demo-motion="play"] #peto-load-dots::after { animation:peto-load-dots 1.6s steps(3,end) infinite; }
#peto-page-loader[data-peto-demo-motion="pause"] .peto-cat-breath,#peto-page-loader[data-peto-demo-motion="pause"] .peto-cat-tail,#peto-page-loader[data-peto-demo-motion="pause"] .peto-cat-head,#peto-page-loader[data-peto-demo-motion="pause"] .peto-cat-arm-left,#peto-page-loader[data-peto-demo-motion="pause"] .peto-cat-arm-right,#peto-page-loader[data-peto-demo-motion="pause"] .peto-cat-fore-left,#peto-page-loader[data-peto-demo-motion="pause"] .peto-cat-fore-right,#peto-page-loader[data-peto-demo-motion="pause"] .peto-cat-leg-left,#peto-page-loader[data-peto-demo-motion="pause"] .peto-cat-leg-right,#peto-page-loader[data-peto-demo-motion="pause"] #peto-load-dots::after,#peto-page-loader[data-peto-demo-motion="pause"] .peto-load-art::after { animation:none; transform:none; clip-path:none; }
#peto-page-loader[data-peto-demo-motion="pause"] .peto-load-art::after { transform:translateX(-50%); }
@media (prefers-reduced-motion:reduce) { #peto-page-loader .peto-load-art::after { transform:translateX(-50%); } }