/* ==========================================================================
   smartprix theme · pages.css
   规格 08（Deals / About 内容页 / Signup·Login / Contact / 404）+ 搜索结果页。
   来源：us.smartprix.com index.3b4ef80b.css、ContentPage.647e30b1.css、
         ContactUs.c6462b18.css、DealPages.59535b0a.css（硬编码色替换为 tokens）
   依赖 tokens.css + base.css + components.css
   ========================================================================== */

/* ==========================================================================
   1. Deals 列表 .pg-dlf（规格 08 §2）
   ========================================================================== */

/* DealPages.css：特异性 (0,1,1) 覆盖 base.css 里 <750 的 aside{display:none}。
   本主题移动端直接不输出侧栏，这条只为骨架一致性保留。 */
.pg-dlf aside{display:block}

/* 750–960：侧栏移到主列下方并双栏排列（规格 08 §2.1）。
   base.css 把原站的 `.aside-320.aside-small-below aside` 简写成了
   `.aside-small-below aside`（0,1,1），被同段的
   `.aside-320:not(.aside-imp) aside{display:none}`（0,2,1）压住，
   这里用足够特异的选择器补回来。 */
@media (min-width:750px) and (max-width:960px){
  .pg-dlf.aside-320.aside-small-below{grid-template-areas:"rest" "aside"}
  .pg-dlf.aside-320.aside-small-below>aside{display:block;columns:2;margin-top:12px;column-gap:10px}
  .pg-dlf.aside-320.aside-small-below>aside>*{break-inside:avoid}
}

/* 750–960 的 .aside-small-below 双栏侧栏已在 base.css 按原站特异性实现。 */

.sm-deals{display:flex;flex-direction:column}
.sm-deals.grid{--per-row:4;flex-direction:row;flex-flow:row wrap}
.sm-deals.grid>div{flex:0 0 50%}                        /* 移动：2 列 */
.sm-deals.grid.len-5{--per-row:5}
@media (max-width:750px){.sm-deals.grid.len-5>div:nth-child(n+5){display:none}}
@media (min-width:750px){.sm-deals.grid>div{flex:0 0 calc(100% / var(--per-row))}}

.sm-deal{
  position:relative;padding:12px;display:grid;align-items:center;grid-gap:2px 14px;
  grid-template:"img name name" auto "img price mrp" auto "img liner liner" auto / 90px auto 1fr;
  background:var(--bg-section);font-size:13px;border-top:1px solid var(--sp-load-more-border);
  cursor:pointer;contain:content;
}
.sm-deal:hover{box-shadow:var(--sp-shadow-deal-hover);z-index:2;border-radius:var(--sp-radius)}
.sm-deal:first-child{border:0}
.sm-deal>.sm-img-wrap{grid-area:img;height:auto;align-self:stretch}
.sm-deal>.sm-img-wrap img{border-radius:var(--sp-radius)}
.sm-deal>.name{grid-area:name;font-weight:700}
.sm-deal>.price{grid-area:price;color:var(--sp-deal-price);font-weight:700}
.sm-deal>.mrp{grid-area:mrp;text-decoration:line-through;color:var(--sp-deal-mrp);font-size:11px}
.sm-deal>.liner{grid-area:liner;font-size:12px;color:var(--sp-deal-liner);line-height:16px}
.sm-deal>.store{display:flex;align-items:center;gap:5px}
.sm-deal>.store>span{flex:1;font-weight:700;color:var(--color-text-steel-light);font-size:13px;line-height:1;overflow:hidden;text-overflow:ellipsis}
.sm-deal>.store>.sm-btn{height:28px}

/* grid 变体（/deals 列表） */
.grid .sm-deal{grid-template:"img img" 160px "name name" 4.5em "price mrp" auto "liner liner" auto "store store" auto / 1fr auto}
.grid .sm-deal>.price{margin-top:3px;font-size:16px}
.grid .sm-deal>.name{font-weight:400;filter:brightness(.7)}
.grid .sm-deal>.store{grid-area:store;margin-top:7px}

/* list 变体（详情页侧栏 Related Deals） */
.list .sm-deal>.store>span{position:absolute;bottom:4px;right:6px}
.list .sm-deal>.store>.sm-btn{display:none}

/* 优惠码按钮 */
.sm-deal-cpn-btn{
  display:block;flex:0 0 auto;
  background:var(--sp-coupon-btn);padding:0;width:122px;border-radius:var(--sp-radius);position:relative;
  border:1px solid #ccc;border-color:var(--sp-btn-white-grad-border);overflow:hidden;height:28px;
  color:var(--color-text);font-size:13px;
}
.sm-deal-cpn-btn>.btn{
  position:absolute;left:0;top:0;border-width:0 1px 0 0;padding-left:9px;padding-right:9px;height:28px;
  box-shadow:3px 0 7px #00000080!important;
}
.sm-deal-cpn-btn>.cpn{display:block;text-align:right;line-height:28px;padding-right:5px;font-weight:700}
.sm-deal-cpn-btn:hover{box-shadow:0 1px 2px #0003}
@media (max-width:450px){.sm-deal-cpn-btn{width:110px}}

/* 网格内通栏广告位（第 12 / 20 张之后） */
.sm-deals.grid>sm-dap{width:100%;flex:0 0 100%;margin-top:10px}

/* 侧栏 Top Stores（美国站为空，保留组件） */
.sm-top-stores{display:flex;padding:0 4px 2px}
.sm-top-stores:not(.scroll){flex-wrap:wrap}
.sm-top-stores:not(.scroll)>a{flex:0 0 calc(33% - 6px);margin:3px;box-sizing:border-box}
.sm-box>.sm-top-stores{padding-bottom:10px}
.sm-top-stores>a{
  flex:0 0 100px;box-sizing:content-box;display:block;padding:6px 5px;
  border:1px solid var(--sp-block-link-border);border-radius:var(--sp-radius-sm);
  box-shadow:1px 1px 2px #0000001a;margin:0 4px;background:var(--bg-section);
}
.sm-top-stores>a:hover{box-shadow:2px 2px 3px #0003;border-color:var(--color-link)}
.sm-top-stores>a>div{height:0;padding-bottom:33%;position:relative}
.sm-top-stores>a>div>img{position:absolute;top:0;left:0}

/* ==========================================================================
   2. Discuss 盒（规格 04 §2.7 / 08 §2.6）
   ========================================================================== */
/* .sm-discuss / .sm-discuss-head / .sm-discuss-empty-text / textarea 在 components.css §15 */
.sm-discuss-list{padding:0 var(--phh) 10px}
.sm-discuss-item{border-top:1px solid var(--color-border);padding:10px 0;font-size:14px}
.sm-discuss-item>.meta{color:var(--color-text-light);font-size:12px;margin-bottom:2px}

/* ==========================================================================
   3. 内容页 .pg-cnt（规格 08 §3，ContentPage.css 全文）
   ========================================================================== */
#pg-cnt-before-content{margin-bottom:var(--mv)}
#pg-cnt-before-content sm-dap{margin:0}
#pg-cnt-main-box{margin:0}
#pg-cnt-main-content{max-width:728px;margin:0 auto}
#pg-cnt-main-content h1{margin-top:.5714rem}
h1+#pg-cnt-content{margin-top:12px}
#pg-cnt-after-content{margin-top:var(--mv)}
@media (max-width:750px){#pg-cnt-before-content{margin-top:var(--mv)}}

/* 白盒本身在 <750 通栏、≥750 有圆角，规则来自 components.css；
   .size-l 仅作为原站类名保留，无额外样式。 */
.pg-cnt>div{width:100%}

/* ==========================================================================
   4. Signup / Login / Forgot Password .pg-uln（规格 08 §4）
   ========================================================================== */
.pg-mob,.pg-mobw{max-width:600px}
.pg-uln{background:var(--sp-drawer-content-bg)}
.pg-uln>div>.drawer-heading{display:none}
.pg-uln>h1{padding:12px 12px 6px;font-size:16px;font-weight:700}
@media (min-width:750px){
  .pg-uln{background:transparent}
  .pg-uln>h1{font-size:24px}
}
.sm-drawer .pg-uln>div>.drawer-heading{display:block}

.sm-social-login{padding:.8572rem}
.sm-social-login>button,
.sm-social-login>div{
  display:flex;align-items:center;justify-content:center;height:3.1431rem;
  border-radius:0 3px 3px 0;color:#fff;font-size:16px;font-weight:700;position:relative;
  margin-left:3.4289rem;margin-bottom:.7143rem;cursor:pointer;width:calc(100% - 3.4289rem);
}
.sm-social-login>button:before,
.sm-social-login>div:before{
  content:"";display:block;box-sizing:border-box;position:absolute;top:0;left:-3.4289rem;
  height:3.1431rem;width:3.4289rem;border-radius:3px 0 0 3px;background:center / 50% no-repeat #fff;
}
.sm-social-login>*:last-child{margin-bottom:0}
.sm-social-login>button:hover,
.sm-social-login>div:hover{box-shadow:1px 1px 5px -1px #777}
.sm-social-login>.google{background:#4285f4}
.sm-social-login>.google:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 533.5 544.3'%3E%3Cpath d='M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z' fill='%234285f4'/%3E%3Cpath d='M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z' fill='%2334a853'/%3E%3Cpath d='M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z' fill='%23fbbc04'/%3E%3Cpath d='M272.1 107.7c38.8-.6 76.3 14 104.4 40.8h0l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z' fill='%23ea4335'/%3E%3C/svg%3E");
  background-size:28px;background-color:#fff;border:1px solid #4285f4;
}
.sm-social-login>.apple{background:#000}
.sm-social-login>.apple:before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z'/%3E%3C/svg%3E");
  background-size:36px;background-color:#fff;border:1px solid #000;
}

.sm-form{position:relative}
.sm-form>.error{margin-bottom:12px;border-radius:var(--sp-radius)}
.sm-form.padded{padding:0 var(--ph)}
.sm-form.submitting:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(255,255,255,.4)}
.sm-box.padded>.sm-form>.error,
.sm-form.padded>.error{margin:0 -12px 12px;width:calc(100% + 24px);border-radius:0}
/* components.css 已把 input.sm-btn 排除在文本框样式之外，这里只补 hover/focus。 */
/* `.sm-input input` (components.css) would otherwise paint the submit button as
   a text field — restore the button look for the one inside `.submit-wrap`. */
.sm-input>.submit-wrap{display:inline-block}
.sm-input>.submit-wrap>input.sm-btn{
  width:auto;color:#fff;border:0;padding:0 16px;height:2.5717rem;
  font-size:1.0358rem;line-height:1.4;box-shadow:none;background:var(--btn-color);
}
.sm-input>.submit-wrap>input.sm-btn:hover{filter:brightness(115%);box-shadow:var(--sp-shadow-btn)}
.sm-input>.submit-wrap>input.sm-btn:focus{background:var(--btn-color);border:0;box-shadow:var(--sp-shadow-btn)}
.sm-input input.sm-btn{font-size:1.0358rem}
.sm-input input.sm-btn:hover{filter:brightness(115%);box-shadow:var(--sp-shadow-btn)}
.sm-input input.sm-btn:focus{background:var(--btn-color);border:0;box-shadow:var(--sp-shadow-btn)}
.size-sm .sm-box-header h2{font-size:1.1429rem}
.sm-box-item>a:only-child{display:block;margin:-.8572rem calc(-1 * var(--ph));padding:.8572rem var(--ph)}

/* ==========================================================================
   5. Contact .pg-cus（规格 08 §3.5，ContactUs.css 全文）
   ========================================================================== */
.pg-cus form{background:var(--sp-load-more-bg);padding:12px}
.pg-cus .emails{padding:0 12px 12px;line-height:1.8}
.pg-cus p{line-height:1.6}

/* ==========================================================================
   6. 404 / 错误页 .pg-err（规格 08 §6）
   ========================================================================== */
.pg-err-status{font-size:48px;font-weight:700;color:var(--color-danger);line-height:1.25}
@media (min-width:750px){
  .pg-err{font-size:16px}
  .pg-err h1{font-size:40px}
  .pg-err-status{font-size:120px}
}

/* ==========================================================================
   7. 搜索结果页 .pg-src（规格 08 §5：与 finder 同视觉，分组渲染）
   ========================================================================== */
.pg-src-head>h1>small{display:block;margin:2px 0 0;font-size:13px;color:var(--color-text-light);top:0}
.sm-box.notice.sm-box.notice.pg-src-empty{padding:18px 12px;font-size:1.1rem}
.pg-src-empty>strong{font-size:1.13em}
.pg-src-pages{padding:0 0 6px}
.pg-src-page-item{border-top:1px solid var(--color-border);padding:10px var(--phh)}
.pg-src-page-item:first-child{border-top:0}
.pg-src-page-item>a{font-size:1.0715rem;font-weight:500}
.pg-src-page-item>p{margin-top:2px;font-size:13px;color:var(--color-text-light)}
.pg-src-lists{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:750px){.pg-src-lists{grid-template-columns:1fr 1fr}}
.pg-src-list-item{
  display:flex;align-items:center;gap:8px;padding:10px var(--phh);
  border-top:1px solid var(--color-border);font-size:14px;
}
.pg-src-list-item>span{margin-left:auto;flex:0 0 auto;font-size:12px;color:var(--color-text-light)}
@media (min-width:750px){
  .pg-src-lists>.pg-src-list-item:nth-child(2n){border-left:1px solid var(--color-border)}
}
.pg-src-brands{display:flex;flex-wrap:wrap;gap:8px;padding:10px var(--phh) 14px}
.pg-src-brands>a{
  display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-section);
  border:1px solid var(--sp-block-link-border);border-radius:var(--sp-radius-sm);
  box-shadow:1px 1px 2px #0000001a;font-size:14px;color:var(--color-text);
}
.pg-src-brands>a:hover{border-color:var(--color-link);box-shadow:2px 2px 3px #0003}
.pg-src-brands img{max-height:22px;width:auto}

/* ==========================================================================
   8. 搜索建议行的机型扩展（图 + 名 + 价，规格 10 §2.1）
   ========================================================================== */
.sm-search-suggestions>li.has-img{grid-template:"img text price" auto "img cat price" auto / 40px 1fr auto;column-gap:10px}
.sm-search-suggestions>li>img{grid-area:img;width:40px;height:40px;object-fit:contain;margin:0}
.sm-search-suggestions>li>.sp-sg-price{grid-area:price;align-self:center;font-size:13px;font-weight:700;color:var(--color-price);white-space:nowrap;padding-left:8px}
.sm-search-suggestions>li>.sp-sg-price:empty{display:none}
.sm-search-suggestions>li.is-empty{cursor:default;color:var(--color-text-light);background:transparent}
.sm-search-suggestions>li.is-empty:hover{background:transparent}

/* ==========================================================================
   9. 移动端断点收尾
   ========================================================================== */
@media (max-width:750px){
  .pg-cnt #pg-cnt-main-box{border-radius:0}
  .pg-src-lists{grid-template-columns:1fr}
}