/* Store */
.st-wrap{width:min(960px,100% - 32px); margin-inline:auto; padding-bottom:24px;}
.st-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px;}
.st-head h1{font:800 clamp(26px,4.5vw,36px)/1.25 'Sora','Inter',sans-serif; letter-spacing:-.01em; color:var(--navy); margin:0;}
html[lang="ar"] .st-head h1,html[lang="ja"] .st-head h1{font-family:inherit; letter-spacing:0; line-height:1.45;}
.st-head p{margin:8px 0 0; color:var(--navy-soft); line-height:1.6;}
.st-bal{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:var(--white); border:1px solid var(--border-soft); color:var(--navy);}
.st-bal b{font:800 15px/1 'JetBrains Mono',ui-monospace,monospace;}
.st-bal span{font-size:12.5px; color:var(--navy-soft);}
.st-star{width:16px; height:16px; flex:none; display:inline-block; object-fit:contain;}

/* a collection */
.st-slot{margin:0 0 30px; padding:0;}
.st-sh{display:flex; align-items:center; gap:10px; margin-bottom:12px; min-width:0;}
.st-sh h2{margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 19px/1.3 'Sora','Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .st-sh h2,html[lang="ja"] .st-sh h2{font-family:inherit;}
.st-chip{flex:none; padding:4px 10px; border-radius:999px; font:700 11.5px/1 'Inter',sans-serif; background:var(--blue-tint); color:var(--blue-dark);}
html[lang="ar"] .st-chip,html[lang="ja"] .st-chip{font-family:inherit;}
.st-chip.is-offer{background:color-mix(in srgb,#e0a92c 18%,transparent); color:#b9811a;}
.st-chip.is-event{background:var(--mint-tint); color:var(--teal);}
.st-chip.is-tier{background:color-mix(in srgb,var(--navy) 8%,transparent); color:var(--navy-soft);}
.st-all{margin-inline-start:auto; display:inline-flex; align-items:center; gap:2px; color:var(--blue); text-decoration:none; font:600 13px/1 'Inter',sans-serif; white-space:nowrap;}
html[lang="ar"] .st-all{font-family:inherit;}
.st-all svg{width:16px; height:16px;}
html[dir="rtl"] .st-all svg{transform:scaleX(-1);}
.st-none{margin:0; padding:22px; text-align:center; border-radius:18px; border:1px dashed var(--border-soft); color:var(--navy-soft); font-size:14px;}

/* banner */
.st-ban{display:block; border-radius:20px; overflow:hidden; background:var(--blue-tint); border:1px solid var(--border-soft);}
.st-ban img{display:block; width:100%; height:auto; aspect-ratio:16/6; object-fit:cover;}

/* item card */
.st-it{position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 10px 12px; border-radius:18px; background:var(--white); border:1px solid var(--border-soft); color:var(--navy); text-decoration:none; text-align:center; min-width:0;}
a.st-it{transition:border-color .15s,transform .15s;}
a.st-it:hover{border-color:var(--blue); transform:translateY(-2px);}
a.st-it:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.st-pic{position:relative; display:grid; place-items:center; width:88px; height:88px; flex:none;}
.st-pic img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.st-it.k-flair .st-pic{width:100%; height:60px;}
.st-nm{display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 13.5px/1.3 'Inter',sans-serif;}
html[lang="ar"] .st-nm,html[lang="ja"] .st-nm{font-family:inherit;}

/* price */
.st-pr{display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:4px 5px; font:600 13px/1.2 'Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .st-pr,html[lang="ja"] .st-pr{font-family:inherit;}
.st-pr b{font:800 14px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:-.01em;}
.st-pr s{font-size:11.5px; color:var(--navy-soft); opacity:.75;}
.st-pr em{font:700 10.5px/1 'JetBrains Mono',monospace; font-style:normal; padding:3px 6px; border-radius:6px; background:var(--mint-tint); color:var(--teal);}
.st-pr.is-own{color:var(--teal);} .st-pr.is-own svg{width:15px; height:15px;}
.st-pr.is-free{color:var(--teal); font-weight:700;}
.st-pr.is-big b{font-size:18px;}
.st-pr.is-big .st-star{width:20px; height:20px;}

/* corner badge */
.st-bd{position:absolute; top:-6px; inset-inline-end:-6px; display:grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:999px; background:var(--navy); color:var(--white); font:700 10.5px/1 'JetBrains Mono',monospace; font-style:normal; box-shadow:0 0 0 3px var(--white);}
.st-bd svg{width:13px; height:13px;}
.st-bd.is-own{background:var(--teal); color:#fff;}
.st-bd.is-lock{background:var(--navy-soft);}
.st-bd.is-prem{background:#e0a92c; color:#1a1408;}
.st-bd.is-tier{background:var(--blue-dark); color:#fff;}
.st-it.is-owned{border-color:color-mix(in srgb,var(--teal) 40%,var(--border-soft));}

/* list: a rail you slide sideways */
.st-row{display:flex; gap:10px; overflow-x:auto; padding:8px 2px 12px; margin:-8px -2px -4px; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none;}
.st-row::-webkit-scrollbar{display:none; width:0; height:0;}
.st-row .st-it{flex:0 0 128px; scroll-snap-align:start;}
.st-row .st-it.k-flair{flex-basis:168px;}

/* carousel: bigger tinted cards, the name stays out of the way */
.st-row .st-it.is-car{flex:0 0 156px; padding:18px 10px 14px; border-color:transparent; --tone:var(--blue);}
.st-row .st-it.is-car{background:color-mix(in srgb,var(--tone) 12%,var(--white));}
.st-it.t0{--tone:var(--blue);} .st-it.t1{--tone:var(--teal);} .st-it.t2{--tone:#e0a92c;} .st-it.t3{--tone:#9a8fd0;}
.st-it.is-car .st-pic{width:104px; height:104px;}
.st-it.is-car.k-flair .st-pic{width:100%; height:70px;}
.st-it.is-car .st-nm{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* grid: one bordered box, cards inside */
.st-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; padding:12px; border-radius:22px; border:1px solid var(--border-soft); background:color-mix(in srgb,var(--blue-tint) 35%,transparent);}
.st-grid.is-page{padding:0; border:0; background:none;}

/* empty / closed */
.st-empty{display:grid; justify-items:center; gap:8px; padding:56px 20px; text-align:center; color:var(--navy-soft); border-radius:22px; border:1px dashed var(--border-soft);}
.st-empty svg{width:40px; height:40px; color:var(--blue);}
.st-empty b{font:700 18px/1.4 'Sora','Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .st-empty b,html[lang="ja"] .st-empty b{font-family:inherit;}

/* app hint */
.st-app{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:18px 20px; border-radius:20px; background:var(--blue-tint); color:var(--navy);}
.st-app p{margin:0; font-size:14px; line-height:1.5;}

@media (max-width:520px){
  .st-row .st-it{flex-basis:116px;}
  .st-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:8px;}
  .st-grid .st-pic{width:72px; height:72px;}
  .st-app{flex-direction:column; align-items:stretch; text-align:center;}
}
@media (prefers-reduced-motion:reduce){a.st-it{transition:none;} a.st-it:hover{transform:none;}}

/* ---- Phase 2: details, offer page, promo, pop-up ---- */
.st-head.is-slot{display:block;}
.st-head.is-slot h1{margin-top:10px;}
.st-back{display:inline-flex; align-items:center; gap:4px; margin-bottom:14px; color:var(--blue); text-decoration:none; font:600 13.5px/1 'Inter',sans-serif;}
html[lang="ar"] .st-back{font-family:inherit;}
.st-back svg{width:18px; height:18px;}
html[dir="rtl"] .st-back svg{transform:scaleX(-1);}
.st-head.is-slot .st-back{margin-bottom:0;}
.st-ban.is-static{margin-bottom:18px;}
.st-empty .btn{margin-top:8px;}

/* promo */
.st-promo{display:flex; align-items:center; gap:14px; margin-bottom:30px; padding:16px 18px; border-radius:20px; text-decoration:none; color:var(--navy); background:linear-gradient(120deg,color-mix(in srgb,var(--blue) 16%,var(--white)),color-mix(in srgb,var(--teal) 14%,var(--white))); border:1px solid color-mix(in srgb,var(--blue) 30%,var(--border-soft)); transition:transform .15s;}
.st-promo:hover{transform:translateY(-1px);}
.st-promo:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.st-promo-ic{display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:14px; background:var(--navy); color:var(--white);}
.st-promo-ic svg{width:22px; height:22px;}
.st-promo-tx{display:grid; gap:3px; min-width:0; flex:1;}
.st-promo-tx b{font:700 16px/1.3 'Sora','Inter',sans-serif;}
.st-promo-tx span{font-size:13px; color:var(--navy-soft); line-height:1.4;}
html[lang="ar"] .st-promo-tx b,html[lang="ja"] .st-promo-tx b{font-family:inherit;}
.st-promo-pr{display:inline-flex; align-items:center; gap:5px; flex:none; padding:8px 12px; border-radius:999px; background:var(--white);}
.st-promo-pr b{font:800 15px/1 'JetBrains Mono',monospace;}
.st-promo-pr i{font:600 12px/1 'Inter',sans-serif; font-style:normal; color:var(--navy-soft);}

/* offer summary */
.st-offer{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; padding:16px 18px; border-radius:20px; background:color-mix(in srgb,#e0a92c 12%,var(--white)); border:1px solid color-mix(in srgb,#e0a92c 35%,var(--border-soft));}
.st-offer>div{display:grid; gap:6px;}
.st-offer b{font:700 15px/1.4 'Inter',sans-serif;}
html[lang="ar"] .st-offer b{font-family:inherit;}
.st-sub{margin:8px 0 0; color:var(--navy-soft); line-height:1.6;}
.st-head.is-slot{margin-bottom:18px;}

/* the sheet's content (pop-up and page) */
.st-card-page{max-width:480px; margin-inline:auto; padding:26px 22px; border-radius:24px; background:var(--white); border:1px solid var(--border-soft);}
.st-sheet-in{display:grid; gap:12px; justify-items:center; text-align:center;}
.st-prev{display:grid; place-items:center; width:100%; height:180px; border-radius:20px; background:color-mix(in srgb,var(--blue-tint) 70%,transparent);}
.st-prev img{max-width:78%; max-height:86%; object-fit:contain;}
.st-prev.k-avatar_decoration img{width:150px; height:150px;}
.st-prev.is-pay{background:color-mix(in srgb,#e0a92c 14%,transparent);}
.st-prev.is-pay .st-star{width:72px; height:72px;}
.st-title{margin:0; font:800 22px/1.3 'Sora','Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .st-title,html[lang="ja"] .st-title{font-family:inherit;}
.st-tags{display:flex; gap:6px; flex-wrap:wrap; justify-content:center;}
.st-desc{margin:0; color:var(--navy-soft); line-height:1.65; font-size:14.5px;}
.st-facts{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin:4px 0 0;}
.st-facts>div{padding:12px 10px; border-radius:16px; background:color-mix(in srgb,var(--blue-tint) 45%,transparent); display:grid; gap:6px;}
.st-facts dt{font:600 11.5px/1 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--navy-soft);}
html[lang="ar"] .st-facts dt{font-family:inherit; letter-spacing:0; text-transform:none;}
.st-facts dd{margin:0; font:700 14px/1.3 'Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .st-facts dd{font-family:inherit;}
.st-warn{display:flex; align-items:center; gap:8px; width:100%; margin:0; padding:11px 14px; border-radius:14px; text-align:start; font-size:13.5px; line-height:1.4; background:color-mix(in srgb,#e0a92c 14%,transparent); color:var(--navy);}
.st-warn svg{width:18px; height:18px; flex:none; color:#b9811a;}
.st-cta{width:100%; justify-content:center; text-align:center; margin-top:4px;}
.st-note{margin:0; font-size:12px; color:var(--navy-soft); opacity:.85; line-height:1.5;}
.st-pay{display:flex; align-items:baseline; gap:8px; margin:0;}
.st-pay>span:last-child{color:var(--navy-soft); font-size:14px;}

/* pop-up: centred card on desktop, bottom sheet on phones */
.st-dlg{border:0; padding:0; width:min(460px,100% - 24px); max-height:min(88vh,760px); overflow:auto; border-radius:26px; background:var(--white); color:var(--navy); box-shadow:0 24px 70px rgba(0,0,0,.35);}
.st-dlg::backdrop{background:rgba(8,12,24,.6);}
.st-dlg-body{padding:30px 22px 24px;}
.st-x{position:absolute; top:12px; inset-inline-end:12px; z-index:2; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:color-mix(in srgb,var(--navy) 10%,transparent); color:var(--navy); cursor:pointer;}
.st-x:hover{background:color-mix(in srgb,var(--navy) 18%,transparent);}
.st-x:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.st-x svg{width:18px; height:18px;}
html.st-lock{overflow:hidden;}
@media (max-width:640px){
  .st-dlg{margin:auto 0 0; width:100%; max-width:none; max-height:90vh; border-radius:26px 26px 0 0;}
  .st-promo{flex-wrap:wrap;} .st-promo-pr{margin-inline-start:60px;}
}
@media (prefers-reduced-motion:no-preference){
  .st-dlg[open]{animation:st-in .2s ease-out;}
  @keyframes st-in{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:none;}}
}
.st-dlg{margin:auto; inset:0;}
.st-offer .st-pr{justify-content:flex-start;}
@media (max-width:640px){
  .st-dlg{margin:auto 0 0; inset:auto 0 0 0;}
  .st-promo{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px 14px;}
  .st-promo-pr{grid-column:1 / -1; margin:0; justify-content:center;}
}

/* buying */
.st-buybox{display:grid; gap:8px; width:100%; margin-top:4px;}
.st-buybox .st-cta{margin-top:0;}
.st-buybox.is-ask .st-buy{background:var(--teal); border-color:var(--teal); color:#07201c;}
.st-cancel{width:100%; justify-content:center; text-align:center;}
.st-cancel[hidden]{display:none;}
.st-msg{margin:0; min-height:0; font:600 13.5px/1.45 'Inter',sans-serif;}
html[lang="ar"] .st-msg{font-family:inherit;}
.st-msg:empty{display:none;}
.st-msg.is-ok{padding:12px 14px; border-radius:14px; background:var(--mint-tint); color:var(--teal);}
.st-msg.is-bad{padding:12px 14px; border-radius:14px; background:color-mix(in srgb,#ef6a6a 14%,transparent); color:#c24545;}
.st-alt{display:block; margin-top:2px; color:var(--blue); font:600 13.5px/1.4 'Inter',sans-serif; text-decoration:none;}
html[lang="ar"] .st-alt{font-family:inherit;}
.st-offer .st-buybox{min-width:200px;}