/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/* 「店铺街 共 x 家店」和搜索框并排一行：标题在左、搜索框顶到右边。
   原来是上下两行，这里用 flex 拉平，并且两个都 nowrap，窄屏也不许换行，挤就挤一点 */
.sl-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;}
.sl-head .page-title{margin-bottom:14px;flex:0 0 auto;min-width:0;}
.sl-head .page-title h1,.sl-head .page-title .cnt{white-space:nowrap;}
/* 搜索框吃掉标题以外的全部宽度，直接铺到右边（style.css 里那条 420px 上限要顶掉） */
.sl-head .search-big{margin-bottom:14px;flex:1 1 auto;min-width:0;width:100%;max-width:none;}
.sl-head .search-big input{width:100%;}
/*
 * 搜索框：这一页就一行标题加几张卡片，通用那套 .search-big 的 46px 太空了，
 * 压到 38px；按钮跟着缩成 30px（top/right 还是 4px，正好还居中在框里）。
 * 只改这一页——.search-big 是公共类，别的页面还在用原尺寸。
 */
.sl-head .search-big input{height:38px;font-size:14px;padding-right:46px;}
.sl-head .search-big button{width:30px;height:30px;top:4px;right:4px;}
/* 放大镜：SVG 图标默认是 1em（跟着按钮字号 14px 走），放到 18px，
   30px 的按钮里还留 6px 边，看着比原来那个 ⌕ 字符清楚多了 */
.sl-head .search-big button .ico-svg{width:18px;height:18px;display:block;}
@media (max-width:600px){
  .sl-head{gap:10px;}
  .sl-head .page-title h1{font-size:18px;}
  .sl-head .page-title .cnt{font-size:12.5px;}
  .sl-head .search-big{max-width:none;}
  .sl-head .search-big input{height:38px;font-size:14px;padding-right:46px;}
  .sl-head .search-big button{width:30px;height:30px;top:4px;right:4px;}
}
.store-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
/* min-width:0 是给 grid 用的：.sc-desc 整句 nowrap，不放开最小宽度的话，
   窄屏下 grid 的 1fr 轨道会被这句话撑到六七百像素，整张卡片（带进店/收藏）
   一起顶出屏幕外 —— 手机上看着就是「全部错位」。 */
.store-card{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;background:#fff;
            border:1px solid var(--line,#E7ECF0);border-radius:12px;text-decoration:none;
            transition:box-shadow .18s,transform .18s;}
.store-card:hover{box-shadow:0 6px 18px rgba(30,111,140,.10);transform:translateY(-2px);}
/* 店铺 logo 的底色：白底 + 一圈浅边框，logo 本身有透明边也不会糊在一起 */
.store-card .sc-face{width:52px;height:52px;flex:0 0 52px;border-radius:10px;overflow:hidden;
                     background:#fff;border:1px solid var(--line,#E7ECF0);}
.store-card .sc-face img{width:100%;height:100%;object-fit:cover;}
/* 没上传 logo 时用店名首字占位：底变白了，字就得换成主色，不然白底白字看不见 */
.store-card .sc-txt{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
                    color:var(--c1,#1E6F8C);font-size:22px;font-weight:600;}
.store-card .sc-bd{flex:1;min-width:0;}
.store-card .sc-nm{font-size:15px;font-weight:600;color:#22292F;overflow:hidden;
                   text-overflow:ellipsis;white-space:nowrap;}
.store-card .sc-desc{margin-top:3px;font-size:12.5px;color:var(--muted,#8A97A3);height:18px;
                     overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.store-card .sc-meta{margin-top:5px;font-size:12px;color:var(--muted,#8A97A3);}
.store-card .sc-meta span{margin-right:10px;}
/*
 * 卡片右侧「进店 / 收藏」竖着排：进店在上、收藏在下，两行右对齐。
 * 两个都做成带边框的小按钮，看着才像可以按的东西。
 */
.store-card .sc-act{flex-shrink:0;display:flex;flex-direction:column;
                    align-items:stretch;gap:6px;}
.store-card .sc-go,
.store-card .sc-fav{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font-size:13px;line-height:1;padding:6px 10px;border-radius:6px;
  border:1px solid var(--line,#E7ECF0);background:#fff;
  transition:color .16s,border-color .16s,background .16s;
}
.store-card .sc-go .ico-svg,
.store-card .sc-fav .ico-svg{width:14px;height:14px;display:block;flex-shrink:0;}

/* 进店：默认跟「收藏」同一个灰色，鼠标放到按钮上才变主色。
   注意是 .sc-go:hover（按钮自己）而不是 .store-card:hover .sc-go（整张卡片）——
   后者是鼠标只要划过卡片、还没碰到进店它就变色了，看着很突然。 */
.store-card .sc-go{color:var(--muted,#8A97A3);}
.store-card .sc-go:hover{color:var(--c1,#1E6F8C);border-color:var(--c1,#1E6F8C);}

/*
 * 收藏：默认灰的空心心形，鼠标放上去变主色，
 * 收藏过就整颗变红并换成实心（跟商品卡右上角那颗心一个路子）。
 */
.store-card .sc-fav{color:var(--muted,#8A97A3);cursor:pointer;user-select:none;}
.store-card .sc-fav .ico-on{display:none;}
.store-card .sc-fav:hover{color:var(--c1,#1E6F8C);border-color:var(--c1,#1E6F8C);}
.store-card .sc-fav.on{color:#E23A3A;border-color:#F0C4C0;background:#FFF7F6;}
.store-card .sc-fav.on .ico-off{display:none;}
.store-card .sc-fav.on .ico-on{display:inline-flex;}
@media (max-width:1023px){ .store-list{grid-template-columns:repeat(2,1fr);} }
@media (max-width:767px){
  .store-list{grid-template-columns:1fr;gap:10px;}
  .store-card{padding:12px;}
  .store-card .sc-face{width:46px;height:46px;flex:0 0 46px;}
}