﻿/* Compact purchase detail; scoped away from shop cards and equipped showcase. */
#shopframe#shopframe .sf-dlg {padding:12px}
#shopframe#shopframe .sf-dlg-card {box-sizing:border-box;width:340px;max-width:100%;max-height:100%;padding:14px;gap:7px;border-radius:16px;overflow-y:auto;overscroll-behavior:contain}
#shopframe#shopframe .sf-dlg-card > * {flex-shrink:0}
#shopframe#shopframe .sf-dlg-card .sp-card--detail {width:100%;height:136px;margin:0}
#shopframe#shopframe .sf-d-art.sp-card-stage {height:136px;max-height:none;aspect-ratio:auto;--sk-a:2.28;--sk-tw:60%;--sk-th:88%;padding:3px 24px}
#shopframe#shopframe .sf-dlg-x {top:7px;right:7px;width:44px;height:44px;z-index:10}
#shopframe#shopframe .sf-d-name {font-size:18px;line-height:1.25;margin:0;padding:0;overflow-wrap:anywhere}
#shopframe#shopframe .sf-d-rar {font-size:11px;letter-spacing:.04em;line-height:1.4}
#shopframe#shopframe .sf-d-desc {font-size:12px;line-height:1.45;margin:0}
#shopframe#shopframe .sf-d-feat {font-size:12px;line-height:1.6;margin:0;padding-left:16px}
#shopframe#shopframe .sf-d-freetag {padding:5px 9px;font-size:11px}
#shopframe#shopframe .sf-dlg-card .sf-cta {min-height:44px;padding:10px 12px;font-size:12px;line-height:1.4;margin-top:3px;white-space:normal}
@media(max-width:480px){
 #shopframe#shopframe .sf-dlg-card {width:310px;padding:12px;gap:6px}
 #shopframe#shopframe .sf-dlg-card .sp-card--detail,#shopframe#shopframe .sf-d-art.sp-card-stage {height:112px}
 #shopframe#shopframe .sf-d-name {font-size:17px}
}
@media(max-height:500px) and (min-width:481px){
 #shopframe#shopframe .sf-dlg-card {width:460px;display:grid;grid-template-columns:136px minmax(0,1fr);column-gap:12px;padding:12px}
 #shopframe#shopframe .sf-dlg-card .sp-card--detail {grid-column:1;grid-row:1 / span 5;height:150px;align-self:center}
 #shopframe#shopframe .sf-d-art.sp-card-stage {height:150px;--sk-a:.9;--sk-tw:88%;padding:4px}
 #shopframe#shopframe .sf-dlg-card > :not(.sp-card--detail):not(.sf-dlg-x) {grid-column:2}
 #shopframe#shopframe .sf-d-name {padding-right:34px;font-size:16px}
 #shopframe#shopframe .sf-dlg-card .sf-cta {grid-column:1 / -1!important}
}

#shopframe#shopframe .sf-dlg-card {min-width:0;max-width:calc(100vw - 24px)}
