/* 商店頁樣品（周邊頁 goods-v3、貼紙頁 stickers?orig=1）共用的外觀，照ちいかわマーケット的做法：
   門楣頁首、兩側角色、每區一條滿版帶子（花紋只用四種）、白色內框、名稱黑粗價格黑細、門楣花紋頁尾。
   要在 shared.css 之後載入。 */

.site-head .logo.new, .head-contact { display:none; }
.back { top:12px; bottom:auto; }

/* 頁首（電腦）：照原本的排法——最上面一條淡紅白直條門楣，Logo 壓在門楣上，下面一排選單。
   門楣下緣一排圓角鋸齒，往下蓋住選單那排的底一點點（他畫的藍線）；選單那排原本白色，改成淡米色。
   鋸齒用 radial-gradient 畫（紅、白各一層），不用 mask——Safari 上 mask 的位置算式不支援，半圓會整排不見 */
.site-head { position:relative; padding-top:0; background:#fbf5ec; }
.site-head::before { content:""; display:block; height:88px;   /* 鋸齒尖端到 Logo 下緣（他畫的線，2026-10-03） */
  background:radial-gradient(circle at 17px 0, #f8cfcb 16.4px, transparent 17px) 0 71px / 68px 17px repeat-x,
             radial-gradient(circle at 17px 0, #fffaf9 16.4px, transparent 17px) 34px 71px / 68px 17px repeat-x,
             repeating-linear-gradient(90deg, #f8cfcb 0 34px, #fffaf9 34px 68px) 0 0 / 100% 71px no-repeat;
  filter:drop-shadow(0 2px 2px rgba(150,40,30,.14)); }
.site-head .logo { position:relative; margin-top:-72px;
  filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 2px 4px rgba(0,0,0,.08)); }

/* 周邊頁頂端的四個賣場入口：四段不同花色的短紙膠帶，各自歪一點，兩端撕開的鋸齒邊，裡面黑字（他選的 2B）。
   影子放在外層 span：clip-path 會把同一層的 filter 影子一起裁掉 */
.shoprow.tapes { display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:12px; margin:22px auto 10px; }
.shoprow.tapes .t { display:inline-block; filter:drop-shadow(0 2px 2px rgba(150,60,50,.16));
  transition:translate .22s cubic-bezier(.3,1.6,.5,1), scale .22s cubic-bezier(.3,1.6,.5,1), rotate .22s ease, filter .22s ease; }
.shoprow.tapes a { display:block; padding:10px 22px; font-size:15px; font-weight:800; color:#2a2a2a; text-decoration:none; white-space:nowrap;
  clip-path:polygon(0px 0.0%, 6px 14.3%, 0px 28.6%, 6px 42.9%, 0px 57.1%, 6px 71.4%, 0px 85.7%, 6px 100.0%, calc(100% - 6px) 100.0%, calc(100% - 0px) 85.7%, calc(100% - 6px) 71.4%, calc(100% - 0px) 57.1%, calc(100% - 6px) 42.9%, calc(100% - 0px) 28.6%, calc(100% - 6px) 14.3%, calc(100% - 0px) 0.0%); }
.shoprow.tapes a:hover { color:var(--red2); }
.shoprow.tapes .t:nth-child(1) { rotate:-3deg; }   .shoprow.tapes .t:nth-child(1) a { background:repeating-linear-gradient(90deg, #c9def4 0 9px, #f3f8fe 9px 18px); }   /* 天藍條紋（原本粉紅，貼在粉紅底上會糊掉，他要換） */
.shoprow.tapes .t:nth-child(2) { rotate:2deg; }    .shoprow.tapes .t:nth-child(2) a { background:#fde7a6; }
.shoprow.tapes .t:nth-child(3) { rotate:-1.5deg; } .shoprow.tapes .t:nth-child(3) a { background:#cfe8dc radial-gradient(rgba(255,255,255,.7) 2px, transparent 2.6px) 0 0 / 10px 10px; }
.shoprow.tapes .t:nth-child(4) { rotate:3deg; }    .shoprow.tapes .t:nth-child(4) a { background:repeating-linear-gradient(45deg, #ddd0f1 0 6px, #f6f1fd 6px 12px); }   /* 淡紫斜紋 */
/* 滑鼠移上去：膠帶被拿起來——往上浮、放大一點、轉正，影子變大變遠；放開帶一點回彈（他要的）。要寫在上面各段的角度之後才蓋得過 */
.shoprow.tapes .t:hover, .shoprow.tapes .t:focus-within { translate:0 -7px; scale:1.07; rotate:0deg; z-index:1;
  filter:drop-shadow(0 10px 9px rgba(150,60,50,.24)); }
.shoprow.tapes .t:active { translate:0 -3px; scale:1.02; }
/* 手機：四段紙膠帶撐開到比輪播卡片再寬一點（他畫的藍線），整排左右各內縮約 28px、四段平均分（周邊、畫冊共用） */
@media (max-width:760px) {
  .shoprow.tapes { width:calc(100% - 32px); max-width:360px; gap:8px; }
  .shoprow.tapes .t { flex:1 1 0; min-width:0; }
  .shoprow.tapes a { padding:9px 2px; font-size:13px; text-align:center; }
}

/* 選單左右兩端外側的兩隻（附屬看板的購物空罐妹妹、購物罐罐）；shop-v3.js 會放進頁首 */
.hd-ch { position:absolute; z-index:3; top:36px; height:132px; width:auto; pointer-events:none; }
.hd-ch.l { right:calc(50% + 425px); } .hd-ch.r { left:calc(50% + 425px); }
@media (max-width:1180px) { .hd-ch { top:8px; height:96px; } .hd-ch.l { right:calc(50% + 120px); } .hd-ch.r { left:calc(50% + 120px); } }
@media (max-width:760px) { .hd-ch { height:58px; top:14px; } .hd-ch.l { right:calc(50% + 86px); } .hd-ch.r { left:calc(50% + 86px); } }

/* ---- 手機頁首（照ちいかわマーケット）：一條 72px「≡＋Logo＋插畫」，往下捲也固定在最上面；選單收進左邊滑出的抽屜 ---- */
@media (max-width:760px) {
  /* 門楣（紅白直條）鋪滿整個頁首、蓋掉原本的白底；下緣一排半圓垂到下一段的底紋上（他畫的藍線） */
  /* flow-root：Logo 的上邊距不要穿出頁首（原本整條被往下推 5px，最上面露出一條白線） */
  .site-head { position:sticky; top:0; z-index:60; height:80px; padding:0; display:flow-root; background:repeating-linear-gradient(90deg, #f8cfcb 0 28px, #fffaf9 28px 56px); }
  .site-head::before { content:none; }
  /* 下緣的圓形鋸齒：每條直條底下垂一個同色的半圓。用兩層 radial-gradient 畫（紅、白各一層），
     不用 mask——iPhone Safari 上 mask 的位置算式不支援，半圓整排不見（他手機上看是一條直線） */
  .site-head::after { content:""; position:absolute; left:0; right:0; top:100%; height:14px; pointer-events:none;
    background:radial-gradient(circle at 14px 0, #f8cfcb 13.4px, transparent 14px) 0 0 / 56px 14px repeat-x,
               radial-gradient(circle at 14px 0, #fffaf9 13.4px, transparent 14px) 28px 0 / 56px 14px repeat-x;
    filter:drop-shadow(0 2px 2px rgba(150,40,30,.2)); }
  /* 左 ≡、中 Logo（放大）、右一張小插畫（購物罐罐）；左邊那隻是電腦版橫向排才放 */
  .site-head .logo { height:74px; margin:3px auto 0; }   /* 再放大 20%（他要的） */
  .hd-ch.l { display:none; }
  .hd-ch.r { left:auto; right:2px; top:-4px; height:117px; }   /* 60 → 90 → 117px（他要的，再大 30%），下半身垂出頁首沒關係 */
  /* 頁首正下方一律留一條淺色圓點底，讓門楣的圓角鋸齒蓋在點點上（他要的）。
     高 33px、花紋往下錯開 11px：接到下面的點點帶子時花紋剛好連起來，不會有接縫 */
  /* 手機的點點底：偏一點點黃、點點放大 3 倍（他要的，只限手機；電腦版維持原本的小點） */
  .band.b-dots { background:#fff8e6 radial-gradient(rgba(255,45,45,.10) 4.2px, transparent 5px) 0 0 / 22px 22px; }
  main.page.bands { padding-top:33px; background:#fff8e6 radial-gradient(rgba(255,45,45,.10) 4.2px, transparent 5px) 0 11px / 22px 22px; }
  .band.b-hero { padding-top:4px; }
  .nav-btn { display:block; position:absolute; left:6px; top:18px; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:0; }
  /* ≡ 放大 20%（他要的）：線長 22→26、粗 2.5→3、間距 7→8.5 */
  .nav-btn i, .nav-btn i::before, .nav-btn i::after { position:absolute; left:9px; width:26px; height:3px; border-radius:2px; background:var(--ink); content:""; }
  .nav-btn i { top:20.5px; } .nav-btn i::before { left:0; top:-8.5px; } .nav-btn i::after { left:0; top:8.5px; }
  /* 抽屜 */
  .nav { position:fixed; z-index:81; left:0; top:0; bottom:0; width:min(300px, 82vw); display:block; overflow-y:auto; background:#fffaf9;
    transform:translateX(-102%); transition:transform .28s cubic-bezier(.2,.8,.2,1); box-shadow:4px 0 20px rgba(0,0,0,.15); text-align:left; }
  .nav-top { display:flex; justify-content:center; align-items:flex-end; gap:4px; position:relative; padding:26px 0 14px;
    background:repeating-linear-gradient(90deg, #f6cdc7 0 18px, #fbe0dc 18px 36px); }
  .nav-top img { height:84px; width:auto; }
  .nav-x { position:absolute; right:8px; top:8px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.85); font-size:16px; cursor:pointer; }
  .nav ul { display:block; padding:0; }
  .nav li { border-bottom:1px solid #f1dcd8; }
  .nav a { display:flex; justify-content:space-between; align-items:center; padding:16px 22px; font-size:15px; letter-spacing:.06em; color:var(--ink); }
  .nav a::after { content:"›"; color:#c9a9a4; font-size:20px; line-height:1; }
  .nav a.on { background:#fff1ee; color:var(--red2); font-weight:800; }
  .nav-mask { display:block; position:fixed; z-index:80; inset:0; background:rgba(40,20,20,.38); opacity:0; pointer-events:none; transition:opacity .28s; }
  html.nav-open .nav { transform:none; }
  html.nav-open .nav-mask { opacity:1; pointer-events:auto; }
  html.nav-open, html.nav-open body { overflow:hidden; }
}

/* 每一區一條滿版的帶子。花紋只用四種（他定的）：
   1 門楣紅白條＋半圓（頁首、頁尾）、2 素白（選單那排）、
   3 淡粉底紅點點（.b-dots）、4 偏紅兩色粉紅直條（.b-stripe，襯托白色內框） */
.page.bands { padding:0; background:#fff; }
.band { padding:26px 16px 42px; }
.band .sect-title { margin-top:6px; }
.b-dots { background:#fff7f5 radial-gradient(rgba(255,45,45,.09) 1.4px, transparent 1.8px) 0 0 / 22px 22px; }
.b-stripe { background:repeating-linear-gradient(90deg, #f6cdc7 0 26px, #fbe0dc 26px 52px); }
.b-stripe .white-box { border-color:#fff; box-shadow:0 2px 10px rgba(190,60,50,.10); }
/* 點點底很淡，白框放在上面邊界不明顯 → 細粉紅框線＋淡紅影子 */
.b-dots .white-box { border:1.5px solid #f1cfca; box-shadow:0 3px 12px rgba(190,60,50,.12); }
@media (max-width:760px) { .band { padding:20px 12px 34px; } }

/* 白色內框（貼紙牆、明信片列、貼紙頁的單張區…） */
.white-box { background:#fff; border:2px solid #fff; border-radius:20px; }

/* 商品名稱黑色粗體、價格黑色細字（不要搶眼） */
.page .tile .nm, .page .gcard b, .page .tee b { color:var(--ink); font-weight:800; }
.page .tile .pr, .page .gcard .pr, .page .tee .pr { color:var(--ink); font-weight:400; font-size:14px; margin-top:6px; line-height:1.3; }   /* 名稱和價格之間空開一點 */
/* 名稱比價格大 3 級（17 vs 14），兩行一眼分得出主次（他要的） */
.page .tile .nm, .page .gcard b, .page .tee b { line-height:1.35; font-size:17px; }

/* 頁尾：花紋 1（淡紅白條紋），上緣一排朝上的半圓。--cap＝上一區的底色（半圓是用它蓋出來的） */
.site-foot { position:relative; display:block; background:repeating-linear-gradient(90deg, #f8cfcb 0 34px, #fffaf9 34px 68px); color:var(--ink);
  text-align:center; padding:44px 16px 30px; margin-top:0; --cap:#fff7f5; }
.site-foot::before { content:""; position:absolute; left:0; right:0; top:0; height:12px;
  background:radial-gradient(circle 17px at 17px 12px, transparent 96%, var(--cap) 100%) 0 0 / 34px 12px repeat-x; }
/* 上一區是直條紋（花紋 4）時：半圓改用同樣的直條紋蓋（條紋都從畫面左緣起算，所以對得齊） */
.site-foot.cap-stripe::before { background:repeating-linear-gradient(90deg, #f6cdc7 0 26px, #fbe0dc 26px 52px);
  -webkit-mask:radial-gradient(circle 17px at 17px 12px, transparent 96%, #000 100%) 0 0 / 34px 12px repeat-x;
          mask:radial-gradient(circle 17px at 17px 12px, transparent 96%, #000 100%) 0 0 / 34px 12px repeat-x; }
.site-foot .sns { display:flex; justify-content:center; gap:18px; }
.site-foot .sns a { width:44px; height:44px; border-radius:50%; background:#fff; color:var(--red2); display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.site-foot .sns svg { width:22px; height:22px; }
.site-foot small { display:block; margin-top:16px; font-size:13px; }

/* ---- 輪播（CK_SHOP.carousel）：只有圖、沒有字，一次看到 3 張（照ちいかわ），兩側小半透明箭頭 ---- */
.mq-wrap { position:relative; width:min(1100px, 100%); margin:22px auto 4px; }
.mq { --w:min(1040px, 100vw - 64px); --n:3; --g:20px; width:var(--w); margin:0 auto;
  overflow:hidden; padding:6px 0; cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
@media (orientation:portrait) { .mq { --w:calc(100vw - 24px); --n:3; --g:10px; } }
.mq-track { will-change:transform; }
/* 兩側小小的半透明箭頭：告訴大家可以滑，不搶畫面（手機也顯示） */
.mq-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:32px; height:32px; border-radius:50%; border:0;
  background:rgba(255,255,255,.55); box-shadow:0 1px 4px rgba(0,0,0,.12); font-size:19px; line-height:1; color:rgba(0,0,0,.55);
  cursor:pointer; backdrop-filter:blur(2px); transition:background .15s, color .15s; }
.mq-arrow:hover { background:rgba(255,255,255,.9); color:#333; }
.mq-arrow.prev { left:4px; } .mq-arrow.next { right:4px; }
@media (orientation:portrait) { .mq-arrow { width:26px; height:26px; font-size:15px; } .mq-arrow.prev { left:2px; } .mq-arrow.next { right:2px; } }

.mq::-webkit-scrollbar { display:none; }
.mq-track { display:flex; width:max-content; }
/* 卡片正方形（首頁的輪播；他說 4:5 反而把首頁的圖裁掉，2026-10-03 改回）。周邊頁頂端用 .mq.fit：寬度跟著圖 */
.mq-card { flex:0 0 auto; display:block; width:calc((var(--w) - (var(--n) - 1) * var(--g)) / var(--n)); aspect-ratio:1 / 1; margin-right:var(--g);
  border-radius:16px; overflow:hidden; background:#fff;
  border:3px solid #fff; box-shadow:0 2px 12px rgba(0,0,0,.09); cursor:pointer; }
.mq-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.mq-card:hover img { transform:scale(1.04); }
.mq.dragging { cursor:grabbing; }
.mq.dragging .mq-card { pointer-events:none; }

@media (orientation:portrait) { .mq-card { border-radius:10px; border-width:2px; } }
/* .mq.fit（周邊頁頂端的熱銷）：卡片高度統一、寬度跟著圖自己的比例，整張圖不裁（他要的）。
   直式的洗沐包窄一點、正方形的寬一點 */
.mq.fit .mq-card { width:auto; min-width:60px; height:var(--fh, 320px); aspect-ratio:auto; }
.mq.fit .mq-card img { width:auto; height:100%; object-fit:contain; }
@media (max-width:760px) { .mq.fit { --fh:300px; } }
/* 輪播的圓點：手機才顯示 */
.mq-dots { display:none; }
/* 手機（照ちいかわ的橫幅）：一次一張大的置中，左右露一點點上一張／下一張；不要箭頭，改用圓點 */
@media (max-width:760px) {
  .mq { --w:100vw; --n:1.3; --g:10px; margin-left:calc(50% - 50vw); }
  /* 滿版輪播用 100vw：有實體捲軸的瀏覽器會多出捲軸寬度 → 裁掉，不要整頁可以左右捲（clip 不影響頁首固定） */
  main.page.bands { overflow-x:clip; }
  .mq-card { border-radius:14px; }
  .mq-arrow { display:none; }
  .mq-dots { display:flex; justify-content:center; gap:7px; margin-top:10px; }
  .mq-dots i { width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,.18); transition:background .2s, transform .2s; }
  .mq-dots i.on { background:var(--red2); transform:scale(1.25); }
  .mq-dots.many { display:none; }
}

/* ---- 其他頁共用的零件（課程以外的 v3 樣品頁：畫冊、手機殼、數位賣場、客製化、寄售、活動） ---- */
/* 區塊標題：粗體中文＋小英文（跟貼紙頁、課程頁一樣） */
.v3-head { position:relative; text-align:center; margin:4px 0 22px; }
.v3-head h2 { font-size:30px; margin:0; font-weight:900; letter-spacing:.06em; color:var(--ink); }
.v3-head .en { margin:4px 0 0; color:var(--mute); font-size:12px; font-weight:700; letter-spacing:.18em; }
.v3-wrap { max-width:1000px; margin:0 auto; }
.band.v3 { padding:50px 16px 60px; }
/* 白卡格子：卡片只放圖＋名稱（＋一行灰色小字） */
.v3-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px; }
.v3-card { display:flex; flex-direction:column; background:#fff; border-radius:20px; padding:12px 12px 16px; text-align:center;
  text-decoration:none; color:inherit; cursor:pointer; transition:transform .15s; }
.v3-card:hover { transform:translateY(-3px); }
.b-dots .v3-card { border:1.5px solid #f1cfca; box-shadow:0 3px 12px rgba(190,60,50,.12); }
.b-stripe .v3-card { border:2px solid #fff; box-shadow:0 2px 10px rgba(190,60,50,.10); }
.v3-card .pic { display:block; width:100%; aspect-ratio:1 / 1; object-fit:contain; border-radius:12px; background:#fff; }
.v3-card .pic.cover { object-fit:cover; }
.v3-card .nm { margin:12px 0 0; font-size:17px; font-weight:800; line-height:1.35; color:var(--ink); }
.v3-card .sub { margin:6px 0 0; font-size:14px; font-weight:400; line-height:1.4; color:var(--ink); }
.v3-card .sub.mute { color:var(--mute); font-size:13px; }
/* 按鈕：紅底白字主鈕＋白底紅字副鈕 */
.v3-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.v3-btn { display:inline-block; min-width:110px; padding:10px 20px; border-radius:999px; font-size:15px; font-weight:800; text-align:center;
  text-decoration:none; box-sizing:border-box; cursor:pointer; color:#fff; background:var(--red2); border:1.5px solid var(--red2);
  transition:transform .15s, box-shadow .15s; }
.v3-btn.sub { color:var(--red2); background:#fff; border-color:#f1cfca; }
.v3-btn:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(255,45,45,.2); }
/* 年份之類的切換籤 */
.v3-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 22px; }
.v3-chips button { font:inherit; font-size:14px; font-weight:700; color:var(--ink); background:#fff; border:1.5px solid #f1cfca; border-radius:999px;
  padding:6px 16px; cursor:pointer; }
.v3-chips button.on { color:#fff; background:var(--red2); border-color:var(--red2); }
/* 放大看圖（CK_SHOP.lightbox）：大圖＋左右切換＋下面一排按鈕 */
/* z-index 要高過手機的固定頁首（60），不然畫冊、客製的大圖上半和 ✕ 被頁首蓋住（他反映的）；跟商品燈箱 .lb 一樣用 100 */
.v3-lb { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(40,20,18,.62); padding:16px; }
.v3-lb .box { position:relative; width:min(860px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:#fff; border-radius:24px; padding:20px 20px 22px;
  box-sizing:border-box; text-align:center; }
.v3-lb .big { display:block; width:100%; max-height:62vh; object-fit:contain; border-radius:12px; }
.v3-lb .nm { margin:14px 0 0; font-size:20px; font-weight:900; color:var(--ink); }
.v3-lb .sub { margin:4px 0 0; font-size:14px; color:var(--mute); }
.v3-lb .thumbs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px; }
.v3-lb .thumbs img { width:64px; height:64px; object-fit:contain; background:#f6f1f0; border-radius:8px; border:2px solid transparent; cursor:pointer; opacity:.7; }
.v3-lb .thumbs img.on { border-color:var(--red2); opacity:1; }
.v3-lb .v3-btns { margin-top:16px; }
@media (max-width:760px) {
  .v3-lb .box { max-height:calc(100svh - 32px); }
  .v3-lb .big { max-height:52svh; }
  .v3-lb .x { position:fixed !important; top:calc(14px + env(safe-area-inset-top)) !important; right:14px !important; z-index:5; box-shadow:0 2px 10px rgba(0,0,0,.18); }
}
.v3-lb .x { position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:#fff4f2; color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer; }
@media (max-width:760px) {
  .v3-head h2 { font-size:25px; }
  .band.v3 { padding:36px 12px 44px; }
  .v3-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .v3-card { padding:8px 8px 12px; border-radius:16px; }
  .v3-card .nm { font-size:15px; }
}

/* ---- 螢幕寵物（CK_SHOP.pet）：畫面最下緣跳來跳去的吉祥物 ---- */
/* 沿著頁尾裡、社群圖示上方那條線跳（他畫的位置：腳踩在頁尾上緣往下約 40px）；擋到東西也沒關係 */
.shop-pet { position:absolute; left:0; top:calc(40px - 120px); z-index:5; width:93px; height:120px; pointer-events:none; will-change:transform; }
.shop-pet .sp { display:block; width:100%; height:100%; background:url(img/shop-pet3.webp) 0 0 / 600% 100% no-repeat; pointer-events:auto; cursor:pointer;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.15)); }
/* 手機點牠時 iPhone 會畫一個深色的點擊框（他反映的）。框是畫在「掛著 click 的那層」＝外層 .shop-pet，
   第一次只加在裡面的 .sp 沒用；外層也關掉（這個設定會往下繼承） */
.shop-pet, .shop-pet .sp { -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; outline:none; }
.shop-pet.jump .sp { animation:sp-jump .55s cubic-bezier(.3,.7,.4,1); }
@keyframes sp-jump { 0% { translate:0 0; } 40% { translate:0 -50px; } 100% { translate:0 0; } }
.shop-pet .sp-heart { position:absolute; left:50%; top:-6px; translate:-50% 0; color:var(--red2); font-size:28px; pointer-events:none; animation:sp-heart .9s ease-out forwards; }
@keyframes sp-heart { from { opacity:1; transform:translateY(0) scale(.6); } to { opacity:0; transform:translateY(-40px) scale(1.2); } }
@media (max-width:760px) { .shop-pet { width:70px; height:90px; top:calc(40px - 90px); } }   /* 放大 1.5 倍（他要的） */