/* Illustrated classroom storefront. */
.shop-head { display:grid; grid-template-columns:126px minmax(0,1fr) 370px; align-items:center; gap:25px; padding:28px 30px; border:1px solid #e1eaf5; border-radius:24px; background:#f0f5fc; margin-bottom:31px; }
.shop-head-art { width:126px; height:126px; object-fit:cover; border-radius:22px; }
.shop-head-copy { min-width:0; }
.shop-head .section-kicker { font-size:9px; font-weight:700; color:#7e91a9; letter-spacing:1.7px; }
.shop-head h1 { font-size:29px; font-weight:800; line-height:1.5; letter-spacing:-.6px; color:#35506f; margin:5px 0 9px; }
.shop-head p { font-size:12px; color:#71849d; line-height:1.8; }
.shop-head .shop-tip { margin-top:7px; font-size:11px; color:#7b8da4; }
.shop-redeem { min-width:0; padding:17px 18px; border:1px solid #e1e8f1; background:#ffffffed; border-radius:15px; }
.shop-redeem label { display:block; font-size:13px; font-weight:700; color:#536b89; margin-bottom:9px; }
.shop-redeem-row { display:flex; gap:8px; }
.shop-redeem .home-input { width:100%; min-width:0; height:41px; font-size:12px; background:#f9fbff; border-radius:9px; }
.shop-redeem .home-btn { flex-shrink:0; height:41px; padding:0 17px; font-size:12px; border-radius:9px; }
.shop-redeem>small { display:block; color:#8393a9; font-size:10px; line-height:1.6; margin-top:9px; }
.shop-group { margin-bottom:31px; }
.shop-group-head { display:flex; align-items:center; gap:12px; margin-bottom:17px; }
.shop-group-art { width:44px; height:44px; border-radius:12px; object-fit:cover; }
.shop-group-head h2 { font-size:21px; font-weight:750; color:#3b506c; }
.shop-group-head small { font-size:11px; color:#7f8ea3; }
.shop-group-head .home-btn { margin-left:auto; height:35px; font-size:11px; padding:0 14px; border-radius:9px; }
.shop-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.shop-group-tool .shop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.shop-item { min-width:0; border:1px solid #e4eaf3; border-radius:19px; background:#fff; overflow:hidden; transition:transform .2s,border-color .2s,box-shadow .2s; }
.shop-item:hover { transform:translateY(-3px); border-color:#c4d5ed; box-shadow:0 10px 24px #274d8a0c; }
.shop-item-picture { position:relative; width:100%; aspect-ratio:1; overflow:hidden; }
.shop-item-art { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.shop-item:hover .shop-item-art { transform:scale(1.025); }
.shop-item-kind { position:absolute; left:13px; top:13px; padding:4px 8px; border-radius:7px; color:#716d78; background:#fffffff0; font-size:9px; font-weight:650; }
.shop-item-body { padding:18px 19px 16px; }
.shop-item-body h3 { font-size:18px; font-weight:750; color:#3e4e67; line-height:1.5; }
.shop-group-tool .shop-item-body h3 { font-size:23px; }
.shop-item-body p { font-size:11px; color:#748298; line-height:1.8; margin-top:5px; min-height:20px; }
.shop-item-bottom { display:flex; justify-content:space-between; gap:8px; align-items:center; padding-top:14px; margin-top:19px; border-top:1px solid #edf0f6; }
.shop-item-bottom>span { color:#7b8a9e; font-size:10px; }
.shop-item-bottom>span i { margin-right:4px; }
.shop-item-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:32px; padding:0 11px; border-radius:8px; background:#edf3fd; color:#4974b6; font-size:11px; font-weight:650; }
.shop-item-btn:hover { color:#fff; background:#4974b6; }
.shop-item-btn:focus-visible { outline:3px solid #83a8e7; outline-offset:3px; }
.shop-coming { padding:13px 16px; font-size:11px; line-height:1.8; color:#8896aa; background:#f7f9fc; border-radius:12px; }
.shop-coming i { margin-right:5px; }
.shop-head~.home-empty h2 { font-size:24px; color:#526d8c; margin:15px 0 10px; }
.shop-head~.home-empty p { margin-bottom:20px; }
@media(max-width:1100px) {
  .shop-head { grid-template-columns:100px minmax(0,1fr); padding:24px; gap:20px; }
  .shop-head-art { width:100px; height:100px; border-radius:18px; }
  .shop-head h1 { font-size:29px; }
  .shop-redeem { grid-column:1/-1; }
  .shop-redeem-row .home-input { font-size:16px; }
  .shop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .shop-group-tool .shop-grid { gap:16px; }
  .shop-item-body { padding:16px; }
  .shop-group-tool .shop-item-body h3 { font-size:20px; }
  .shop-item-bottom>span { font-size:9px; }
}
@media(max-width:700px) {
  .shop-head { grid-template-columns:70px minmax(0,1fr); padding:20px; gap:15px; border-radius:20px; margin-bottom:24px; }
  .shop-head-art { width:70px; height:70px; border-radius:15px; }
  .shop-head h1 { font-size:23px; letter-spacing:-.4px; margin:4px 0 7px; }
  .shop-head .section-kicker { font-size:7px; letter-spacing:1px; }
  .shop-head p { font-size:11px; }
  .shop-head .shop-tip { font-size:10px; }
  .shop-redeem { padding:14px; }
  .shop-redeem label { font-size:12px; }
  .shop-redeem>small { font-size:9px; }
  .shop-group-head { gap:9px; flex-wrap:wrap; }
  .shop-group-head h2 { font-size:19px; }
  .shop-group-head small { font-size:10px; }
  .shop-group-head .home-btn { font-size:10px; padding:0 10px; height:31px; }
  .shop-group-art { width:35px; height:35px; border-radius:10px; }
  .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .shop-group-tool .shop-grid { grid-template-columns:1fr; gap:17px; }
  .shop-item-body { padding:13px; }
  .shop-item-body h3 { font-size:14px; }
  .shop-item-body p { font-size:10px; }
  .shop-group-tool .shop-item-body { padding:18px 20px; }
  .shop-group-tool .shop-item-body h3 { font-size:23px; }
  .shop-group-tool .shop-item-body p { font-size:12px; }
  .shop-item-bottom { flex-wrap:wrap; margin-top:15px; gap:9px; }
  .shop-item-bottom>span { font-size:10px; }
  .shop-item-btn { min-height:34px; font-size:11px; }
}