/* ============================================================
   PokeNinja — content / policy pages stylesheet
   Shared by how-to-buy.html and shipping-refund-policy.html
   Uses the same design tokens as the homepage so the chrome
   (header, footer, buttons, palette) stays visually identical.
   ============================================================ */

:root{
  --sky:#AEE6FF; --lavender:#D6CCFF; --yellow:#FFF2B8; --mint:#B8FFD8; --pink:#FFDCF2;
  --sky-2:#7DD3FC; --lav-2:#B5A8FF; --pink-2:#FFB4E0; --mint-2:#86EFC4;
  --bg:#FFFBFE; --bg-soft:#FAF6FF;
  --ink:#1B1B36; --ink-2:#3D3A6B; --muted:#8784AD; --muted-2:#B5B3D0;
  --line:rgba(31,28,73,0.08); --line-2:rgba(31,28,73,0.05);
  --green:#2EB872; --green-soft:#D4F5E2;
  --r-lg:32px; --r-md:24px; --r-sm:16px; --r-pill:999px;
  --shadow-sm:0 2px 12px rgba(120,110,200,0.08);
  --shadow-md:0 12px 40px rgba(120,110,200,0.14);
  --header-h:72px;
}
[data-theme="dark"]{
  --bg:#0A0A1F; --bg-soft:#11112E;
  --ink:#F4F1FF; --ink-2:#C7C2EE; --muted:#8784AD; --muted-2:#5A5780;
  --line:rgba(181,168,255,0.10); --line-2:rgba(181,168,255,0.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans','Noto Sans JP','Noto Sans SC',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  padding-top:var(--header-h);
}
body[data-lang="zh"]{font-family:'Noto Sans SC','Plus Jakarta Sans',system-ui,sans-serif}
body[data-lang="ja"]{font-family:'Noto Sans JP','Plus Jakarta Sans',system-ui,sans-serif}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

body[data-lang="en"] [lang="zh"], body[data-lang="en"] [lang="ja"]{display:none}
body[data-lang="zh"] [lang="en"], body[data-lang="zh"] [lang="ja"]{display:none}
body[data-lang="ja"] [lang="en"], body[data-lang="ja"] [lang="zh"]{display:none}

.skip-link{
  position:absolute;left:-9999px;top:0;background:#fff;padding:10px 14px;border-radius:8px;
  font-weight:600;color:var(--ink);box-shadow:var(--shadow-md);
}
.skip-link:focus{left:14px;top:14px;z-index:120}

/* background */
.bg-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-stage::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1200px 800px at -10% -20%, rgba(174,230,255,0.55), transparent 60%),
    radial-gradient(900px 700px at 110% 0%, rgba(255,220,242,0.55), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(214,204,255,0.5), transparent 60%),
    linear-gradient(180deg, #FFFBFE 0%, #FAF6FF 100%);
}
[data-theme="dark"] .bg-stage::before{
  background:
    radial-gradient(1200px 800px at -10% -20%, rgba(125,211,252,0.18), transparent 60%),
    radial-gradient(900px 700px at 110% 0%, rgba(255,180,224,0.16), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(181,168,255,0.18), transparent 60%),
    linear-gradient(180deg, #0A0A1F 0%, #11112E 100%);
}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:0.55;mix-blend-mode:multiply;animation:pkfloat 22s ease-in-out infinite}
.orb.o1{width:480px;height:480px;background:#AEE6FF;top:-120px;left:-100px}
.orb.o2{width:420px;height:420px;background:#FFDCF2;top:18%;right:-120px;animation-delay:-9s}
.orb.o3{width:480px;height:480px;background:#D6CCFF;bottom:-160px;left:18%;animation-delay:-14s}
[data-theme="dark"] .orb{mix-blend-mode:screen;opacity:0.3}
@keyframes pkfloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(40px,-30px,0) scale(1.06)}
  66%{transform:translate3d(-30px,30px,0) scale(0.95)}
}

/* header */
header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap; gap:12px;
  padding:0 clamp(16px,3.5vw,40px);
  background:rgba(255,251,254,0.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
}
[data-theme="dark"] header{background:rgba(10,10,31,0.72);border-color:rgba(181,168,255,0.10)}
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:0.5px;
  flex-shrink:0; min-width:0; white-space:nowrap;
}
.logo-mark{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 30% 30%,#FFDCF2,#FFB4E0 50%,#D6CCFF 100%);
  position:relative;overflow:hidden;
  box-shadow:0 6px 18px rgba(255,180,224,0.6), inset 0 -3px 8px rgba(255,255,255,0.35);
}
.logo-mark::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(27,27,54,0.85)}
.logo-mark::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#fff;border:2.4px solid #1B1B36;transform:translate(-50%,-50%);z-index:1}
.logo span:last-child{background:linear-gradient(90deg,#7DD3FC,#B5A8FF 50%,#FFB4E0);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}

.nav{display:flex;align-items:center;gap:6px}
.nav a{
  padding:8px 14px;border-radius:var(--r-pill);font-size:0.875rem;font-weight:500;color:var(--ink-2);
  transition:background 0.25s, color 0.25s;
}
.nav a:hover{background:rgba(181,168,255,0.16);color:var(--ink)}
.nav a.active{background:linear-gradient(135deg, rgba(174,230,255,0.6), rgba(255,220,242,0.7));color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6)}

.head-right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;flex-shrink:0}
.theme-toggle{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);position:relative;
  transition:transform 0.25s, box-shadow 0.25s, color 0.25s;
}
.theme-toggle:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);color:var(--ink)}
.theme-toggle .ico-moon{display:none}
[data-theme="dark"] .theme-toggle{background:rgba(28,28,58,0.85);color:var(--ink-2)}
[data-theme="dark"] .theme-toggle .ico-sun{display:none}
[data-theme="dark"] .theme-toggle .ico-moon{display:grid}

.lang-toggle{
  display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px;position:relative;
  flex-shrink:0; flex-wrap:nowrap;
}
.lang-toggle button{
  position:relative;z-index:2;padding:6px 12px;border-radius:var(--r-pill);
  font-size:0.75rem;font-weight:600;color:var(--muted);transition:color 0.3s;white-space:nowrap;
}
.lang-toggle button.active{color:#fff}
.lang-pill{
  position:absolute;top:3px;left:3px;height:calc(100% - 6px);width:calc(33.333% - 2px);
  background:linear-gradient(135deg,#7DD3FC,#B5A8FF);border-radius:var(--r-pill);
  box-shadow:0 4px 14px rgba(125,211,252,0.45);
  transition:transform 0.4s cubic-bezier(0.6,-0.05,0.3,1.3);
}
body[data-lang="zh"] .lang-pill{transform:translateX(100%)}
body[data-lang="ja"] .lang-pill{transform:translateX(200%)}
[data-theme="dark"] .lang-toggle{background:rgba(28,28,58,0.85);border-color:rgba(181,168,255,0.16)}
[data-theme="dark"] .lang-toggle button{color:var(--muted)}
[data-theme="dark"] .lang-toggle button.active{color:#fff}

main{padding-bottom:80px}

/* page hero */
.page-hero{
  max-width:1100px;margin:0 auto;padding:48px clamp(20px,4vw,56px) 16px;
  position:relative;
}
.page-hero .section-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.7rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--lav-2);margin-bottom:16px;
}
.page-hero .section-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#7DD3FC,#FFB4E0)}
.page-hero h1{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-1.2px;color:var(--ink);
  margin-bottom:18px;
}
.page-hero h1 .grad{background:linear-gradient(90deg,#7DD3FC,#B5A8FF 50%,#FFB4E0);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-lang="ja"] .page-hero h1{font-family:'Noto Sans JP',sans-serif;font-weight:900;letter-spacing:-1px}
body[data-lang="zh"] .page-hero h1{font-family:'Noto Sans SC',sans-serif;font-weight:900;letter-spacing:-1px}
.page-hero .lead{color:var(--ink-2);font-size:clamp(0.95rem,1.5vw,1.05rem);line-height:1.65;max-width:680px}

/* mini trust pills (under hero) */
.mini-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mini-trust span{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.7);border:1px solid var(--line);
  font-size:0.78rem;font-weight:600;color:var(--ink-2);
}
.mini-trust span svg{color:var(--lav-2);flex-shrink:0}
[data-theme="dark"] .mini-trust span{background:rgba(28,28,58,0.65);border-color:rgba(181,168,255,0.16)}

/* section */
.section{max-width:1100px;margin:0 auto;padding:32px clamp(20px,4vw,56px)}
.section h2{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;letter-spacing:-0.6px;color:var(--ink);
  margin-bottom:18px;
}
body[data-lang="ja"] .section h2{font-family:'Noto Sans JP',sans-serif;font-weight:900}
body[data-lang="zh"] .section h2{font-family:'Noto Sans SC',sans-serif;font-weight:900}
.section h2 .em{background:linear-gradient(90deg,#7DD3FC,#B5A8FF 50%,#FFB4E0);-webkit-background-clip:text;background-clip:text;color:transparent}
.section .lead{color:var(--ink-2);font-size:1rem;line-height:1.65;max-width:760px;margin-bottom:24px}

/* step list */
.step-list{list-style:none;display:grid;grid-template-columns:1fr;gap:14px}
.step-card{
  background:rgba(255,255,255,0.7);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 24px;display:flex;gap:18px;align-items:flex-start;
  box-shadow:0 4px 18px rgba(120,110,200,0.06);
  transition:transform 0.3s, box-shadow 0.3s;
}
.step-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(120,110,200,0.12)}
.step-num{
  flex-shrink:0;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  font-family:'Plus Jakarta Sans';font-weight:800;font-size:1.2rem;color:#fff;
  background:linear-gradient(135deg,#7DD3FC,#B5A8FF 60%,#FFB4E0);
  box-shadow:0 8px 20px rgba(125,211,252,0.4), inset 0 0 0 1px rgba(255,255,255,0.5);
}
.step-body{flex:1;min-width:0}
.step-card h3{font-size:1.1rem;font-weight:800;color:var(--ink);letter-spacing:-0.2px;margin-bottom:6px}
.step-card p{color:var(--ink-2);font-size:0.95rem;line-height:1.55}
[data-theme="dark"] .step-card{background:rgba(28,28,58,0.65);border-color:rgba(181,168,255,0.16)}

/* policy block */
.policy-grid{display:grid;grid-template-columns:1fr;gap:18px}
.policy-card{
  background:rgba(255,255,255,0.7);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 28px;
  box-shadow:0 4px 18px rgba(120,110,200,0.06);
}
.policy-card h3{
  display:flex;align-items:center;gap:10px;
  font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:-0.2px;margin-bottom:14px;
}
.policy-card .icon-pill{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,rgba(174,230,255,0.55),rgba(214,204,255,0.55) 50%,rgba(255,220,242,0.55));
  color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.7), 0 4px 14px rgba(181,168,255,0.18);
}
.policy-card ul{list-style:none;padding:0;margin:0}
.policy-card li{
  position:relative;padding:10px 0 10px 24px;color:var(--ink-2);font-size:0.95rem;line-height:1.55;
  border-top:1px solid var(--line-2);
}
.policy-card li:first-child{border-top:0}
.policy-card li::before{
  content:"";position:absolute;left:4px;top:18px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#7DD3FC,#FFB4E0);box-shadow:0 2px 6px rgba(125,211,252,0.4);
}
.policy-card li:first-child::before{top:18px}
[data-theme="dark"] .policy-card{background:rgba(28,28,58,0.65);border-color:rgba(181,168,255,0.16)}

/* CTA block */
.cta-block{
  background:linear-gradient(135deg, rgba(174,230,255,0.4), rgba(255,220,242,0.45) 50%, rgba(214,204,255,0.4));
  border:1px solid rgba(255,255,255,0.7);border-radius:var(--r-lg);
  padding:36px clamp(20px,4vw,40px);text-align:center;
  box-shadow:var(--shadow-md);
}
[data-theme="dark"] .cta-block{background:linear-gradient(135deg, rgba(125,211,252,0.18), rgba(255,180,224,0.18) 50%, rgba(181,168,255,0.18));border-color:rgba(181,168,255,0.18)}
.cta-block h3{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:800;color:var(--ink);letter-spacing:-0.4px;margin-bottom:8px}
.cta-block p{color:var(--ink-2);max-width:560px;margin:0 auto 18px;line-height:1.55}
.cta-row{display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* buttons */
.btn-pri, .btn-sec{
  display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--r-pill);
  font-weight:700;font-size:0.92rem;letter-spacing:-0.2px;
  transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s;
}
.btn-pri{
  color:#fff;background:linear-gradient(135deg,#7DD3FC,#B5A8FF 60%,#FFB4E0);
  box-shadow:0 12px 28px rgba(125,211,252,0.45), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(125,211,252,0.55)}
.btn-sec{color:var(--ink);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-sec:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
[data-theme="dark"] .btn-sec{background:rgba(28,28,58,0.85);border-color:rgba(181,168,255,0.16);color:var(--ink)}

/* footer */
footer{
  margin-top:60px;padding:50px clamp(20px,4vw,56px) 30px;
  background:rgba(255,255,255,0.55);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--line-2);
}
.foot-grid{
  max-width:1480px;margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;
}
.foot-brand p{margin-top:12px;color:var(--ink-2);font-size:0.88rem;line-height:1.55;max-width:380px}
.foot-social{display:flex;gap:10px;margin-top:14px}
.foot-social a{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  transition:transform 0.25s, color 0.25s, box-shadow 0.25s;
}
.foot-social a:hover{transform:translateY(-2px);color:var(--ink);box-shadow:var(--shadow-sm)}
.foot-col h5{font-size:0.78rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col a{display:block;font-size:0.88rem;color:var(--ink-2);padding:5px 0;transition:color 0.25s, transform 0.25s}
.foot-col a:hover{color:var(--ink);transform:translateX(2px)}
.foot-bar{
  max-width:1480px;margin:30px auto 0;padding-top:22px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-size:0.76rem;color:var(--muted);flex-wrap:wrap;
}
[data-theme="dark"] footer{background:rgba(20,20,42,0.55);border-color:rgba(181,168,255,0.10)}
[data-theme="dark"] .foot-social a{background:rgba(28,28,58,0.85);border-color:rgba(181,168,255,0.16)}

/* floating WhatsApp pill */
.fab-wa{
  position:fixed;right:20px;bottom:20px;z-index:91;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px 12px 14px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,#86EFC4,#7DD3FC);
  color:#0E2A2F;font-weight:700;font-size:0.85rem;letter-spacing:-0.1px;
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 14px 32px rgba(53,196,144,0.35), inset 0 0 0 1px rgba(255,255,255,0.4);
  transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s;
}
.fab-wa:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(53,196,144,0.45)}
.fab-wa svg{flex-shrink:0;color:#0E2A2F}
[data-theme="dark"] .fab-wa{background:linear-gradient(135deg,#86EFC4,#B5A8FF);color:#0A0A1F}
[data-theme="dark"] .fab-wa svg{color:#0A0A1F}

/* responsive */
@media (max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:760px){
  .nav{display:none}
  .head-right .search-mini{display:none}
}
@media (max-width:560px){
  .head-right .lang-toggle button{padding:6px 9px;font-size:0.7rem}
  .head-right .theme-toggle{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px}
  .foot-bar{flex-direction:column;align-items:flex-start}
  .fab-wa{right:12px;bottom:16px;padding:10px 14px 10px 12px;font-size:0.78rem}
  .step-card{padding:18px 18px;gap:14px}
  .step-num{width:40px;height:40px;border-radius:12px;font-size:1rem}
  .policy-card{padding:20px 22px}
  .page-hero{padding:32px 20px 8px}
  .section{padding:24px 20px}
}

/* ===== product detail page ===== */
.breadcrumb{
  max-width:1180px;margin:0 auto;padding:24px clamp(20px,4vw,56px) 0;
  font-size:0.82rem;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.breadcrumb a{color:var(--ink-2);transition:color 0.2s}
.breadcrumb a:hover{color:var(--lav-2)}
.breadcrumb .sep{color:var(--muted-2)}
.breadcrumb .current{color:var(--ink);font-weight:600}

.product-detail{max-width:1180px;margin:0 auto;padding:16px clamp(20px,4vw,56px) 32px}

.product-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;
  align-items:start;
}
.product-media{position:relative}
.product-media-frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,#FFF7FB,#F0EBFF 60%,#E0F4FF);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 24px 60px rgba(120,110,200,0.18), inset 0 0 0 1px rgba(255,255,255,0.4);
  aspect-ratio:4/5;
}
.product-media-frame img{width:100%;height:100%;object-fit:contain;padding:8%;display:block}
.product-media-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,0.45) 45%,transparent 60%);
  mix-blend-mode:overlay;opacity:0.5;
}
[data-theme="dark"] .product-media-frame{background:linear-gradient(135deg,#1A1638,#15153A 60%,#0F1B33);border-color:rgba(181,168,255,0.18)}

.product-media .pm-trust{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;
}
.product-media .pm-trust span{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.7);border:1px solid var(--line);
  font-size:0.74rem;font-weight:600;color:var(--ink-2);
}
.product-media .pm-trust span svg{color:var(--lav-2);flex-shrink:0}
[data-theme="dark"] .product-media .pm-trust span{background:rgba(28,28,58,0.65);border-color:rgba(181,168,255,0.16)}

.product-info{display:flex;flex-direction:column;gap:18px;min-width:0}
.product-info .section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.7rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--lav-2);
}
.product-info .section-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#7DD3FC,#FFB4E0)}
.product-info .section-eyebrow .sep{color:var(--muted-2)}

.product-info h1{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1;letter-spacing:-1px;color:var(--ink);
  margin:0;
}
body[data-lang="ja"] .product-info h1{font-family:'Noto Sans JP',sans-serif;font-weight:900;letter-spacing:-1px}
body[data-lang="zh"] .product-info h1{font-family:'Noto Sans SC',sans-serif;font-weight:900;letter-spacing:-1px}

.japanese-name{
  font-size:0.95rem;color:var(--ink-2);font-weight:600;
  font-family:'Noto Sans JP',sans-serif;
}

.price-row{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:6px;padding:18px 22px;border-radius:var(--r-md);
  background:rgba(255,255,255,0.7);border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(120,110,200,0.06);
}
[data-theme="dark"] .price-row{background:rgba(28,28,58,0.65);border-color:rgba(181,168,255,0.16)}
.price-block{display:flex;flex-direction:column;gap:2px}
.price-label{font-size:0.7rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.price-value{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.7rem,4vw,2.4rem);
  letter-spacing:-1px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}
.price-value.ask{
  color:var(--lav-2);font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:0.5px;
}
.avail{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.85);border:1px solid var(--line);
  font-size:0.82rem;font-weight:700;color:var(--ink);
  margin-left:auto;
}
.avail .pip{width:9px;height:9px;border-radius:50%;background:#34D399}
.avail.in .pip{background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,0.18)}
.avail.in{color:#0F8B57}
.avail.out .pip{background:#E55A87;box-shadow:0 0 0 3px rgba(229,90,135,0.18)}
.avail.out{color:#B33B65}
.avail.ask .pip{background:#B5A8FF;box-shadow:0 0 0 3px rgba(181,168,255,0.18)}
.avail.ask{color:#5A4FCF}
[data-theme="dark"] .avail{background:rgba(28,28,58,0.85);border-color:rgba(181,168,255,0.16)}
[data-theme="dark"] .avail.in{color:#86EFC4}
[data-theme="dark"] .avail.out{color:#FFB4D0}
[data-theme="dark"] .avail.ask{color:#C7C2EE}

.meta-list{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;list-style:none}
.meta-list .meta-row{
  display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:start;
  padding:14px 0;border-top:1px solid var(--line-2);
}
.meta-list .meta-row:first-child{border-top:0}
.meta-list dt{
  font-size:0.74rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);
  padding-top:2px;
}
.meta-list dd{font-size:0.95rem;color:var(--ink);font-weight:500;line-height:1.5;margin:0}

.product-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn-back{
  display:inline-flex;align-items:center;gap:6px;
  padding:13px 18px;border-radius:var(--r-pill);font-weight:600;font-size:0.88rem;color:var(--ink-2);
  background:transparent;border:1px solid var(--line);
  transition:transform 0.25s, color 0.25s, background 0.25s;
}
.btn-back:hover{transform:translateX(-2px);color:var(--ink);background:rgba(181,168,255,0.08)}

/* extended sections */
.product-section{
  max-width:1180px;margin:0 auto;padding:32px clamp(20px,4vw,56px);
}
.product-section h2{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--ink);letter-spacing:-0.4px;margin-bottom:14px;
}
body[data-lang="ja"] .product-section h2{font-family:'Noto Sans JP',sans-serif;font-weight:900}
body[data-lang="zh"] .product-section h2{font-family:'Noto Sans SC',sans-serif;font-weight:900}
.product-section p{color:var(--ink-2);font-size:1rem;line-height:1.7;max-width:820px}
.product-section .pm-callout{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(174,230,255,0.32),rgba(255,220,242,0.32));
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:var(--shadow-sm);max-width:820px;
}
.product-section .pm-callout .icon-pill{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,#7DD3FC,#B5A8FF 60%,#FFB4E0);color:#fff;
  box-shadow:0 6px 16px rgba(125,211,252,0.4);
}
.product-section .pm-callout p{margin:0;color:var(--ink);font-size:0.95rem;line-height:1.55}
[data-theme="dark"] .product-section .pm-callout{background:linear-gradient(135deg,rgba(125,211,252,0.18),rgba(255,180,224,0.18));border-color:rgba(181,168,255,0.18)}

/* loading + not-found states */
.state-loading,.state-notfound{
  max-width:680px;margin:80px auto;padding:48px 32px;text-align:center;
}
.state-loading{color:var(--muted)}
.skeleton-img{
  width:200px;height:260px;margin:0 auto 24px;border-radius:var(--r-md);
  background:linear-gradient(120deg,#F0EBFF 30%,#FFF7FB 50%,#F0EBFF 70%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;
  border:1px solid var(--line);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.state-notfound h1{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink);letter-spacing:-0.6px;margin-bottom:10px;
}
.state-notfound p{color:var(--ink-2);font-size:1rem;line-height:1.6;margin-bottom:24px}

/* responsive */
@media (max-width:880px){
  .product-grid{grid-template-columns:1fr;gap:28px}
  .product-media-frame{aspect-ratio:1/1}
  .meta-list .meta-row{grid-template-columns:1fr;gap:2px}
  .meta-list dt{font-size:0.7rem}
}
@media (max-width:560px){
  .price-row{padding:14px 16px;gap:12px}
  .avail{margin-left:0}
  .product-cta .btn-pri,.product-cta .btn-sec,.product-cta .btn-back{padding:11px 16px;font-size:0.85rem}
  .product-section{padding:24px 20px}
}

/* ============================================================
   MOBILE OPTIMIZATION LAYER (policy + detail pages)
   - Price-row dominant on detail page
   - Full-width stacked CTAs
   - Generous touch targets (≥48px)
   - App-like vertical rhythm
   ============================================================ */

@media (max-width: 768px){
  /* Header — compact, breathable, no overlap on narrow phones */
  header{padding:0 12px;gap:8px}
  .logo{font-size:1.05rem;gap:7px}
  .logo-mark{width:30px;height:30px}
  .head-right{gap:6px}
  .theme-toggle{width:38px;height:38px}
  .lang-toggle{padding:2px}
  .lang-toggle button{padding:6px 9px;font-size:0.7rem}

  /* Page hero (how-to-buy / shipping pages) */
  .page-hero{padding:32px 18px 8px}
  .page-hero .section-eyebrow{font-size:0.66rem; letter-spacing:1.4px;margin-bottom:12px}
  .page-hero h1{font-size:clamp(1.7rem, 7vw, 2.2rem); line-height:1.08; letter-spacing:-0.6px;margin-bottom:14px}
  .page-hero .lead{font-size:0.95rem; line-height:1.6}

  .section{padding:28px 18px}
  .section h2{font-size:clamp(1.35rem, 6vw, 1.7rem);line-height:1.18}

  /* Step list (How to Buy) */
  .step-list{gap:12px}
  .step-card{padding:18px 16px; gap:12px; border-radius:20px}
  .step-num{width:42px; height:42px; border-radius:13px; font-size:1.05rem}
  .step-card h3{font-size:1rem;margin-bottom:5px}
  .step-card p{font-size:0.93rem; line-height:1.6}

  /* Policy cards (Shipping & Refund) */
  .policy-card{padding:18px 18px; border-radius:20px}
  .policy-card h3{font-size:1.05rem;gap:10px;margin-bottom:12px}
  .policy-card .icon-pill{width:32px;height:32px;border-radius:11px}
  .policy-card li{font-size:0.93rem; padding:10px 0 10px 22px; line-height:1.6}

  /* CTA block — full-width buttons stack */
  .cta-block{padding:30px 20px; border-radius:24px}
  .cta-block h3{font-size:1.25rem}
  .cta-block p{font-size:0.94rem;line-height:1.6}
  .cta-row{flex-direction:column; gap:10px; width:100%; display:flex}
  .cta-row .btn-pri,.cta-row .btn-sec{width:100%; justify-content:center; padding:14px 18px; min-height:50px;font-size:0.95rem}

  /* Mini trust pills (page hero) */
  .mini-trust{gap:6px;margin-top:18px}
  .mini-trust span{padding:7px 12px;font-size:0.74rem}

  /* === PRODUCT DETAIL PAGE === */
  .breadcrumb{padding:18px 18px 0; font-size:0.78rem;gap:6px}
  .product-detail{padding:8px 18px 24px}

  .product-grid{grid-template-columns:1fr;gap:18px}
  .product-media-frame{aspect-ratio:4/5; border-radius:24px;max-width:420px;margin:0 auto}

  .product-info{gap:14px;align-items:stretch}
  .product-info .section-eyebrow{font-size:0.66rem; letter-spacing:1.4px}
  .product-info h1{font-size:clamp(1.7rem, 7vw, 2.2rem); line-height:1.08;letter-spacing:-0.6px}
  .japanese-name{font-size:0.94rem}

  /* Price row — the most prominent element on the page */
  .price-row{
    padding:20px 22px; border-radius:22px;
    align-items:flex-start; gap:14px;
    box-shadow:0 10px 28px rgba(120,110,200,0.10);
  }
  .price-block{flex:1;min-width:0}
  .price-label{font-size:0.66rem;letter-spacing:1.3px}
  .price-value{
    font-size:clamp(2.2rem, 11vw, 3rem);
    letter-spacing:-1.4px; line-height:1; font-weight:800;
  }
  .price-value.ask{font-size:clamp(1.65rem, 7.5vw, 2.1rem); letter-spacing:0.5px}
  .avail{margin-left:auto; padding:9px 13px; font-size:0.78rem}

  .meta-list{margin-top:4px}
  .meta-list .meta-row{padding:13px 0; gap:4px;grid-template-columns:1fr}
  .meta-list dt{font-size:0.66rem; letter-spacing:1.2px}
  .meta-list dd{font-size:0.95rem;line-height:1.5}

  /* CTAs — full-width stack on phones */
  .product-cta{flex-direction:column; gap:10px;margin-top:8px}
  .product-cta .btn-pri,
  .product-cta .btn-sec,
  .product-cta .btn-back{
    width:100%; justify-content:center; padding:14px 18px; min-height:52px;font-size:0.95rem;
  }

  /* Long-form sections under the hero */
  .product-section{padding:24px 18px}
  .product-section h2{font-size:1.2rem; margin-bottom:12px;letter-spacing:-0.3px}
  .product-section p{font-size:0.95rem; line-height:1.7}
  .product-section .pm-callout{padding:16px 18px; border-radius:18px;gap:12px}
  .product-section .pm-callout .icon-pill{width:32px;height:32px;border-radius:11px}

  /* States */
  .state-loading,.state-notfound{margin:60px auto;padding:36px 22px}
  .skeleton-img{width:160px;height:200px}
  .state-notfound h1{font-size:clamp(1.4rem,6vw,1.8rem)}
  .state-notfound p{font-size:0.94rem;line-height:1.6}

  /* Footer */
  footer{padding:42px 18px 24px;margin-top:40px}
  .foot-grid{gap:24px;grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .foot-col h5{font-size:0.7rem;margin-bottom:10px}
  .foot-col a{font-size:0.88rem;padding:7px 0;min-height:34px;display:block}
  .foot-bar{font-size:0.72rem;gap:10px;padding-top:18px;flex-direction:column;align-items:flex-start}

  /* Floating WhatsApp */
  .fab-wa{padding:12px 16px 12px 14px;font-size:0.84rem;min-height:48px;right:14px;bottom:18px}

  /* Lighten background animation */
  .orb{filter:blur(40px);opacity:0.4}
}

@media (max-width: 480px){
  /* Tighter header to keep logo + theme + lang-toggle on a single line at 375px */
  header{padding:0 10px;gap:6px}
  .logo{font-size:1rem;gap:6px}
  .logo-mark{width:28px;height:28px}
  .head-right{gap:6px}
  .theme-toggle{width:36px;height:36px}
  .lang-toggle button{padding:5px 8px;font-size:0.66rem}

  .page-hero{padding:26px 16px 8px}
  .page-hero h1{font-size:clamp(1.6rem, 7.5vw, 1.95rem)}
  .product-info h1{font-size:clamp(1.55rem, 7.5vw, 1.95rem)}

  .price-row{padding:18px 18px;gap:12px}
  .price-value{font-size:clamp(2rem, 11.5vw, 2.6rem); letter-spacing:-1.2px}
  .price-value.ask{font-size:clamp(1.5rem, 7.5vw, 1.85rem)}
  .avail{padding:8px 12px;font-size:0.74rem}

  .product-section{padding:22px 16px}
  .product-section h2{font-size:1.12rem}

  .step-card{padding:16px 14px}
  .step-num{width:38px;height:38px;border-radius:12px;font-size:0.95rem}
  .step-card h3{font-size:0.96rem}

  .policy-card{padding:16px 16px}

  .breadcrumb{font-size:0.76rem;padding:16px 16px 0}
  .product-detail{padding:6px 16px 22px}

  .foot-grid{grid-template-columns:1fr;gap:18px}
  .foot-brand{grid-column:auto}

  .fab-wa{right:12px;bottom:14px;padding:11px 14px 11px 12px;font-size:0.78rem}
}

/* Very narrow phones (iPhone SE, 320–360px) — drop the logo wordmark to keep
   the header on one line. Logo-mark icon stays as the brand affordance. */
@media (max-width: 360px){
  header{padding:0 8px;gap:6px}
  .logo span:last-child{display:none}
  .lang-toggle button{padding:5px 7px;font-size:0.64rem}
  .theme-toggle{width:34px;height:34px}
}

@media print{
  .bg-stage,.fab-wa,.theme-toggle,.lang-toggle{display:none !important}
  body{background:#fff;color:#000}
}