/* JON KIDS v29 — premium playful motion layer */
:root{
  --jk-cream:#fffaf2;
  --jk-milk:#fffdf9;
  --jk-cocoa:#51443d;
  --jk-peach:#eaa98f;
  --jk-blush:#f6d4c5;
  --jk-sage:#789681;
  --jk-mint:#dcecdf;
  --jk-butter:#f5df99;
  --jk-sky:#b8dce3;
  --jk-shadow:0 18px 50px rgba(89,66,52,.12);
}

html{scroll-behavior:smooth}
body{position:relative;overflow-x:hidden;isolation:isolate}
body.jk-modal-open{overflow:hidden!important}
body>main,body>.catalogPage,body>.memberPage,body>.helpPage,body>.shell{position:relative;z-index:1}

.jk-magic-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.9}
.jk-float{position:absolute;will-change:transform;animation:jkFloat var(--time,9s) ease-in-out var(--delay,0s) infinite alternate}
.jk-float svg{width:100%;height:100%;filter:drop-shadow(0 10px 18px rgba(83,66,52,.08))}
.jk-cloud-a{width:112px;height:68px;top:15%;left:-30px;opacity:.34;--time:11s}
.jk-cloud-b{width:88px;height:54px;top:62%;right:-24px;opacity:.28;--time:13s;--delay:-3s}
.jk-star-a{width:30px;height:30px;top:28%;right:4%;opacity:.5;--time:7s}
.jk-star-b{width:22px;height:22px;bottom:13%;left:4%;opacity:.45;--time:8s;--delay:-2s}
.jk-dot-a{width:18px;height:18px;top:49%;left:2%;border:5px solid var(--jk-peach);border-radius:50%;opacity:.22;--time:6s}
.jk-dot-b{width:14px;height:14px;top:78%;right:5%;background:var(--jk-butter);border-radius:50%;opacity:.3;--time:8s;--delay:-4s}

.jk-scroll-progress{position:fixed;z-index:9999;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--jk-peach),var(--jk-butter),var(--jk-sage));box-shadow:0 1px 8px rgba(234,169,143,.45);transition:width .08s linear}
.jk-top-button{position:fixed;z-index:90;right:18px;bottom:18px;width:52px;height:52px;border:2px solid #fff;border-radius:50%;background:var(--jk-milk);color:var(--jk-cocoa);box-shadow:0 10px 30px rgba(75,59,49,.18);display:grid;place-items:center;font-size:18px;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:.25s ease}
.jk-top-button::before{content:"ʕ•ᴥ•ʔ";font-size:12px;position:absolute;top:5px}
.jk-top-button span{transform:translateY(6px)}
.jk-top-button.show{opacity:1;transform:none;pointer-events:auto}
.jk-top-button:hover{transform:translateY(-4px) rotate(-3deg);background:#fff4e7}

/* automatic announcement ribbon */
.notice.jk-marquee{padding:0!important;height:38px!important;overflow:hidden;display:flex!important;align-items:center!important;white-space:nowrap}
.jk-marquee-track{display:flex;align-items:center;width:max-content;min-width:max-content;animation:jkMarquee 15s linear infinite;will-change:transform}
.jk-marquee-track.jk-waapi{animation:none!important}
.jk-marquee-track span{padding:0 44px;font-size:12px;letter-spacing:.09em}
.jk-marquee-track span::before{content:"✦";margin-right:14px;color:#fff9}
.notice.jk-marquee:hover .jk-marquee-track{animation-play-state:paused}

/* premium soft surfaces */
header{border-radius:0 0 22px 22px!important}
header .actions a,header .actions button{border-radius:999px;transition:background .2s,transform .2s!important}
header .actions a:hover,header .actions button:hover{background:#f6e5d8!important;transform:translateY(-2px)}
nav a{position:relative}
nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:1px;height:2px;border-radius:99px;background:var(--jk-peach);transition:.25s}
nav a:hover::after{left:4px;right:4px}

.heroCopy,.catalogHero>*{position:relative;z-index:2}
.heroCopy h1,.catalogHero h1,.memberCard h1,.helpPage h1{filter:drop-shadow(0 3px 0 rgba(255,255,255,.65))}
.heroArt,.storyArt,.visual,.catalogImage,.memberCard,.helpList article,.searchTags a{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.heroArt:hover,.storyArt:hover{transform:translateY(-4px) rotate(.25deg);box-shadow:0 25px 65px rgba(91,68,53,.18)!important}
.product,.catalogCard{transform-origin:center bottom}
.product:hover,.catalogCard:hover{transform:translateY(-8px)!important}
.visual::after,.catalogImage::after{content:"";position:absolute;inset:-70% -90%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.4) 50%,transparent 58%);transform:translateX(-55%) rotate(5deg);transition:transform .8s ease;pointer-events:none}
.product:hover .visual::after,.catalogCard:hover .catalogImage::after{transform:translateX(55%) rotate(5deg)}
.catalogCard h2,.productInfo h3{transition:color .2s}
.catalogCard:hover h2,.product:hover .productInfo h3{color:#b5735a}

.primary,.detailAdd,.memberCard button[type="submit"],.checkout button[type="submit"]{position:relative;overflow:hidden;isolation:isolate}
.primary::after,.detailAdd::after,.memberCard button[type="submit"]::after{content:"";position:absolute;z-index:-1;inset:-2px;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.32) 45%,transparent 65%);transform:translateX(-120%);animation:jkButtonGlow 4.8s ease-in-out infinite}

.ageCards a::before{content:"";position:absolute;top:18px;right:22px;width:34px;height:34px;background:no-repeat center/contain var(--jk-icon);opacity:.7;animation:jkWiggle 4s ease-in-out infinite}
.ageCards a{position:relative;overflow:hidden}
.ageCards a:nth-child(1){--jk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23f1b89f' d='M13 24a9 9 0 1 1 13-12h8a9 9 0 1 1 13 12c3 4 5 9 5 15 0 11-10 18-22 18S8 50 8 39c0-6 2-11 5-15Z'/%3E%3Ccircle cx='23' cy='34' r='2' fill='%2351433d'/%3E%3Ccircle cx='37' cy='34' r='2' fill='%2351433d'/%3E%3Cpath d='M26 42q4 4 8 0' fill='none' stroke='%2351433d' stroke-width='2'/%3E%3C/svg%3E")}
.ageCards a:nth-child(2){--jk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23f5df99' d='m30 3 7 18 19 1-15 12 5 19-16-10-16 10 5-19L4 22l19-1Z'/%3E%3C/svg%3E")}
.ageCards a:nth-child(3){--jk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23b8dce3' d='M13 46h36c7 0 10-9 4-13-1-10-12-14-19-8-7-9-21-4-20 8-7 2-7 12-1 13Z'/%3E%3C/svg%3E")}

.jk-bear-sticker{position:absolute;z-index:5;left:22px;top:22px;width:72px;height:72px;border:4px solid #fff;border-radius:24px;background:#ffe4cf;display:grid;place-items:center;box-shadow:0 10px 28px rgba(74,55,43,.18);transform:rotate(-7deg);animation:jkSticker 5s ease-in-out infinite}
.jk-bear-sticker svg{width:58px;height:58px}
.jk-bear-sticker::after{content:"HI!";position:absolute;right:-20px;top:-12px;background:#fff;border-radius:999px;padding:5px 8px;color:#b27159;font-size:9px;font-weight:900;letter-spacing:.08em;box-shadow:0 4px 12px #72513d1f}

.catalogHero .jk-mini-friends{position:absolute!important;z-index:1;inset:0;pointer-events:none}
.jk-mini-friends i{position:absolute;font-style:normal;font-size:28px;animation:jkFloat 6s ease-in-out infinite alternate}
.jk-mini-friends i:nth-child(1){left:8%;top:22%;color:#dc9d83}
.jk-mini-friends i:nth-child(2){right:12%;bottom:18%;color:#73927d;animation-delay:-2s}
.jk-mini-friends i:nth-child(3){left:20%;bottom:13%;color:#d1aa45;animation-delay:-4s}

/* fuller editorial lookbook — real photos only */
.catalogPage .categoryLookbook{width:min(94vw,1460px)!important;max-width:none!important;margin:28px auto 18px!important;padding:26px!important;border:1px solid #f0dfd1!important;border-radius:32px!important;background:linear-gradient(135deg,#fffdf9 0%,#fff5e8 58%,#eef5ef 100%)!important;box-shadow:0 18px 50px rgba(91,68,53,.09)!important;display:block!important;position:relative!important;overflow:hidden!important}
.catalogPage .categoryLookbook::before{content:"";position:absolute;width:150px;height:150px;border:34px solid rgba(234,169,143,.13);border-radius:50%;left:-72px;top:-72px}
.catalogPage .categoryLookbook::after{content:"✦";position:absolute;right:24px;top:15px;color:#dfb657;font-size:30px;animation:jkSpin 9s linear infinite}
.jk-lookbook-head{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:4px 5px 22px}
.jk-lookbook-head p{margin:0;color:#a56e59;font-size:10px;font-weight:800;letter-spacing:.24em}
.jk-lookbook-head h2{margin:7px 0 0;color:#51443d;font:400 clamp(24px,2.4vw,36px)/1.25 Noto Serif TC,serif}
.jk-lookbook-head span{color:#7d746d;font-size:12px;line-height:1.7;text-align:right}
.catalogPage .categoryLookbook .lookbookCopy{display:none!important}
.catalogPage .categoryLookbook .lookbookPhotos{position:relative;z-index:1;display:grid!important;grid-template-columns:1.15fr .92fr .92fr 1.15fr!important;gap:12px!important;overflow:visible!important}
.jk-lookbook-tile{position:relative;height:285px;border:5px solid #fff;border-radius:24px;overflow:hidden;background:#eee6db;box-shadow:0 12px 28px rgba(80,60,48,.10);transform:translateZ(0);transition:transform .35s ease,box-shadow .35s ease}
.jk-lookbook-tile:nth-child(2),.jk-lookbook-tile:nth-child(3){height:255px;margin-top:30px}
.jk-lookbook-tile:hover{transform:translateY(-7px) rotate(-.3deg);box-shadow:0 20px 40px rgba(80,60,48,.16)}
.catalogPage .categoryLookbook .lookbookPhotos .jk-lookbook-tile img{display:block!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;border-radius:0!important;transition:transform .6s ease!important}
.jk-lookbook-tile:hover img{transform:scale(1.045)}
.jk-lookbook-tile::after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,rgba(45,34,27,.42));pointer-events:none}
.jk-lookbook-tag{position:absolute;z-index:2;left:15px;bottom:14px;color:#51443d;background:rgba(255,253,249,.92);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:8px 12px;font-size:9px;font-weight:800;letter-spacing:.12em;backdrop-filter:blur(8px)}

/* reveal motion applied only after JS is ready */
.jk-motion-ready .jk-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.jk-motion-ready .jk-reveal.jk-visible{opacity:1;transform:none}
.jk-motion-ready .jk-reveal:nth-child(2){transition-delay:.06s}
.jk-motion-ready .jk-reveal:nth-child(3){transition-delay:.12s}
.jk-motion-ready .jk-reveal:nth-child(4){transition-delay:.18s}

/* member/help/payment pages: lively but calm */
.memberPage,.helpPage,.jk-quiet-page{background-image:radial-gradient(circle at 8% 15%,rgba(246,212,197,.34) 0 7px,transparent 8px),radial-gradient(circle at 92% 42%,rgba(184,220,227,.32) 0 9px,transparent 10px),linear-gradient(135deg,#fffaf3,#fff3e5 55%,#e8f2ea)!important}
.memberCard,.helpList article,.jk-quiet-page .shell{box-shadow:var(--jk-shadow)}
.memberCard::before{content:"✦";position:absolute;color:#dda88f;font-size:28px;right:24px;top:20px;animation:jkSpin 8s linear infinite}
.memberCard{position:relative}
.memberCard input:focus,.memberCard textarea:focus,.memberCard select:focus{outline:3px solid rgba(234,169,143,.18);border-color:var(--jk-peach)}

body.jk-payment-page .jk-magic-bg,body.jk-admin-page .jk-magic-bg{opacity:.42}
body.jk-payment-page .jk-top-button,body.jk-admin-page .jk-top-button{display:none}
body.jk-payment-page .shell{border-radius:0 0 28px 28px;box-shadow:0 25px 70px rgba(63,77,66,.14)}
body.jk-payment-page .primary{box-shadow:0 9px 24px rgba(32,180,90,.22)}
body.jk-admin-page{background:#f6f1e9}
.jkRealModal{position:fixed!important;inset:0!important;z-index:99999!important;margin:0!important}
.jkCartOverlay{position:fixed!important;inset:0!important;z-index:100200!important;margin:0!important}
.productOverlay,.cartOverlay,.drawer,.modal{z-index:99999!important}

@keyframes jkFloat{0%{transform:translate3d(0,0,0) rotate(-3deg)}100%{transform:translate3d(10px,-18px,0) rotate(4deg)}}
@keyframes jkMarquee{to{transform:translateX(-50%)}}
@keyframes jkButtonGlow{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@keyframes jkWiggle{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}
@keyframes jkSticker{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-7px)}}
@keyframes jkSpin{to{transform:rotate(360deg)}}

@media(max-width:850px){
  .jk-cloud-a,.jk-cloud-b{opacity:.18}
  .jk-star-a{right:1%}
  .jk-bear-sticker{width:58px;height:58px;left:12px;top:12px;border-radius:18px}
  .jk-bear-sticker svg{width:46px;height:46px}
  .jk-bear-sticker::after{display:none}
  .jk-top-button{width:46px;height:46px;right:12px;bottom:12px}
  .notice.jk-marquee{height:34px!important}
  .jk-marquee-track span{padding:0 26px;font-size:11px}
  .catalogPage .categoryLookbook{width:calc(100% - 24px)!important;margin:16px 12px 10px!important;padding:18px 14px 16px!important;border-radius:24px!important}
  .jk-lookbook-head{align-items:flex-start;padding:1px 2px 15px}
  .jk-lookbook-head span{max-width:145px;font-size:10px}
  .catalogPage .categoryLookbook .lookbookPhotos{display:flex!important;gap:9px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;padding:0 2px 8px!important;scrollbar-width:none}
  .catalogPage .categoryLookbook .lookbookPhotos::-webkit-scrollbar{display:none}
  .jk-lookbook-tile,.jk-lookbook-tile:nth-child(2),.jk-lookbook-tile:nth-child(3){flex:0 0 72vw;height:230px;margin:0;scroll-snap-align:center;border-width:4px;border-radius:19px}
  .jk-lookbook-tag{left:11px;bottom:10px;padding:7px 10px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .jk-motion-ready .jk-reveal{opacity:1;transform:none}
}