/* 愿临卫浴 · 浴室日用 —— yl- 皮肤
   骨架：双字竖排刊头（无搜索框）+ 编号五区横带 + 陈述式开场 + 五区拼贴 + 三张横卡 + 三列错落墙 + 左栏价签详情 */
:root{
  --yl-ink:#1d2b30;
  --yl-deep:#14232a;
  --yl-tide:#2c6e7a;
  --yl-clay:#b4734f;
  --yl-mist:#edf1f2;
  --yl-paper:#ffffff;
  --yl-line:#d9e2e4;
  --yl-soft:#f5f8f8;
  --yl-muted:#6d7f85;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{max-width:100%;overflow-x:hidden}
html{font-size:16px}
body.yl-body{margin:0;background:var(--yl-mist);color:var(--yl-ink);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  line-height:1.7;font-size:14px}
img{display:block;max-width:100%;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Songti SC","SimSun",Georgia,serif;font-weight:600}

/* 顶部信息条 */
.yl-note{background:var(--yl-deep);color:#dfeaec;font-size:11px;padding:6px 12px;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}

/* 刊头：双字竖排 + 右侧文字入口 */
.yl-mast{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--yl-paper);border-bottom:1px solid var(--yl-line);padding:10px 14px}
.yl-brand{display:flex;align-items:center;gap:3px}
.yl-brand .yl-z{display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:30px;border:1px solid var(--yl-tide);color:var(--yl-deep);
  font-family:"Songti SC","SimSun",serif;font-size:19px;line-height:1}
.yl-brand em{font-style:normal;font-size:10.5px;letter-spacing:.24em;color:var(--yl-muted);
  margin-left:8px;align-self:flex-end;padding-bottom:2px}
.yl-util{display:flex;gap:12px;font-size:11px;color:var(--yl-muted)}
.yl-util a{position:relative;padding-bottom:3px}
.yl-util a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--yl-line)}

/* 编号五区横带 */
.yl-zones{display:flex;gap:0;overflow-x:auto;background:var(--yl-paper);
  border-bottom:1px solid var(--yl-line);scrollbar-width:none}
.yl-zones::-webkit-scrollbar{display:none}
.yl-zone{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;padding:9px 13px 8px;
  border-right:1px solid var(--yl-soft);color:var(--yl-muted);font-size:12px}
.yl-zone i{font-style:normal;font-family:Georgia,serif;font-size:10px;color:var(--yl-clay)}
.yl-zone.on{color:var(--yl-deep);box-shadow:inset 0 -2px 0 var(--yl-tide);background:#fbfdfd}

.yl-main{padding:0 0 10px}

/* 陈述式开场（无大图） */
.yl-court{margin:14px 14px 0;padding:12px 0 10px;border-top:2px solid var(--yl-deep);
  border-bottom:1px solid var(--yl-line);max-height:152px;overflow:hidden}
.yl-court .yl-kicker{margin:0 0 6px;font-size:10px;letter-spacing:.3em;color:var(--yl-tide)}
.yl-court h1{margin:0;font-size:19px;line-height:1.36;color:var(--yl-deep);letter-spacing:.01em}
.yl-court h1 b{color:var(--yl-clay);font-weight:600}
.yl-court .yl-lede{margin:7px 0 0;font-size:12px;line-height:1.6;color:var(--yl-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yl-facts{display:flex;gap:16px;margin:8px 0 0;padding:0;list-style:none}
.yl-facts li{font-size:10.5px;color:var(--yl-muted)}
.yl-facts b{font-family:Georgia,serif;font-size:15px;color:var(--yl-deep);margin-right:2px}

/* 五区拼贴：手机单行横滑，桌面五列等宽 */
.yl-five{display:flex;gap:1px;background:var(--yl-line);margin:12px 14px 0;
  border:1px solid var(--yl-line);overflow-x:auto;scrollbar-width:none}
.yl-five::-webkit-scrollbar{display:none}
.yl-five a{flex:0 0 160px;background:var(--yl-paper);padding:10px 12px 11px;display:block;position:relative;min-height:84px}
.yl-five a:first-child{background:var(--yl-soft)}
.yl-five em{display:block;font-style:normal;font-size:10px;letter-spacing:.18em;color:var(--yl-tide);margin-bottom:3px}
.yl-five b{display:block;font-size:14px;color:var(--yl-deep);letter-spacing:.04em}
.yl-five span{display:block;font-size:10.5px;color:var(--yl-muted);margin-top:4px;line-height:1.65}
.yl-five i{position:absolute;right:10px;top:10px;font-style:normal;font-family:Georgia,serif;
  font-size:11px;color:var(--yl-clay)}

/* 三张横卡 */
.yl-trio{margin:14px 14px 0;display:flex;flex-direction:column;gap:1px;background:var(--yl-line);
  border:1px solid var(--yl-line)}
.yl-trio-card{display:flex;background:var(--yl-paper)}
.yl-trio-img{flex:0 0 120px;height:120px;overflow:hidden;background:var(--yl-soft)}
.yl-trio-img img{width:120px;height:120px;object-fit:cover}
.yl-trio-txt{flex:1;min-width:0;padding:11px 12px;display:flex;flex-direction:column;justify-content:space-between}
.yl-trio-txt h3{margin:0;font-size:12.5px;line-height:1.5;color:var(--yl-ink);font-weight:600}
.yl-trio-txt p{margin:4px 0 0;font-size:10.5px;color:var(--yl-muted)}
.yl-trio-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.yl-price{font-family:Georgia,serif;color:var(--yl-deep);font-size:16px}
.yl-price small{font-size:10px;margin-right:1px;color:var(--yl-tide)}
.yl-price-old{font-size:10px;color:#9fb0b4;text-decoration:line-through;margin-left:5px}
.yl-go{font-size:10.5px;color:var(--yl-tide);border-bottom:1px solid var(--yl-tide);padding-bottom:1px}

/* 三列错落商品墙（列表/首页通用） */
.yl-head{margin:12px 14px 0;display:flex;align-items:flex-end;justify-content:space-between;
  border-bottom:1px solid var(--yl-line);padding-bottom:6px}
.yl-head h1,.yl-head h2{margin:0;font-size:16px;letter-spacing:.1em;color:var(--yl-deep)}
.yl-head p,.yl-head em{margin:0;font-style:normal;font-size:10.5px;color:var(--yl-muted)}
.yl-wall{margin:8px 14px 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--yl-line);border:1px solid var(--yl-line)}
.yl-card{background:var(--yl-paper);display:block;position:relative}
.yl-card-img{width:100%;height:120px;overflow:hidden;background:var(--yl-soft)}
.yl-card-img img{width:100%;height:120px;object-fit:cover}
.yl-card-txt{padding:8px 9px 10px}
.yl-card-name{font-size:11.5px;line-height:1.5;color:var(--yl-ink);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.yl-card-sub{font-size:10px;color:var(--yl-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yl-card-tag{margin-top:6px;font-family:Georgia,serif;font-size:14px;color:var(--yl-deep);
  border-top:1px dotted var(--yl-line);padding-top:5px}
.yl-card-tag small{font-size:9.5px;color:var(--yl-tide)}

/* 长文 */
.yl-read{margin:18px 14px 0;padding:14px 15px;background:var(--yl-paper);
  border:1px solid var(--yl-line);border-top:3px solid var(--yl-clay)}
.yl-read h2{margin:0 0 7px;font-size:14px;letter-spacing:.06em;color:var(--yl-deep)}
.yl-read p{margin:0 0 8px;font-size:12px;line-height:1.95;color:#3f5257;text-align:justify}
.yl-read ul{margin:0;padding-left:16px;font-size:12px;color:#3f5257;line-height:1.95}

/* 四步说明 */
.yl-steps{margin:16px 14px 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--yl-line);border:1px solid var(--yl-line)}
.yl-steps div{background:var(--yl-paper);padding:10px 12px;font-size:11px;color:var(--yl-muted);line-height:1.7}
.yl-steps div b{display:block;color:var(--yl-deep);font-size:12px;margin-bottom:3px}

/* 详情页：左栏竖排价签 + 右侧大图 */
.yl-crumb{margin:12px 14px 0;font-size:10.5px;color:var(--yl-muted)}
.yl-crumb a{color:var(--yl-tide)}
.yl-pd{margin:8px 14px 0}
.yl-pd h1{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--yl-deep)}
.yl-pd-split{display:flex;flex-direction:column;gap:1px;background:var(--yl-line);border:1px solid var(--yl-line)}
.yl-pd-quote{background:var(--yl-deep);color:#eaf1f2;padding:14px 15px;order:-1}
.yl-pd-cur{font-family:Georgia,serif;font-size:11px;color:#9fc4c9}
.yl-pd-quote b{font-family:Georgia,serif;font-size:30px;line-height:1.1;color:#fff}
.yl-pd-old{margin:5px 0 0;font-size:10.5px;color:#9fb6ba}
.yl-pd-facts{list-style:none;margin:11px 0 0;padding:10px 0 0;border-top:1px solid rgba(234,241,242,.18);
  display:flex;flex-wrap:wrap;gap:6px 14px}
.yl-pd-facts li{font-size:10.5px;color:#c7d9dc}
.yl-pd-facts b{color:#fff;font-weight:600}
.yl-qty{display:flex;align-items:center;gap:9px;font-size:11px;color:#c7d9dc;margin-top:11px}
.yl-qty span{display:inline-flex;align-items:center;border:1px solid rgba(234,241,242,.35)}
.yl-qty span button{border:0;background:transparent;color:#fff;width:28px;height:26px;font-size:14px}
.yl-qty span b{display:inline-block;min-width:28px;text-align:center;font-size:12px;color:#fff;font-weight:500;font-family:Arial,sans-serif}
.yl-btns{display:flex;gap:8px;margin-top:11px}
.yl-btn{flex:1;border:1px solid #9fc4c9;background:transparent;color:#eaf1f2;padding:9px;font-size:12.5px}
.yl-btn2{flex:1;border:1px solid var(--yl-clay);background:var(--yl-clay);color:#fff;padding:9px;font-size:12.5px}
.yl-pd-gallery{background:var(--yl-paper)}
.yl-pd-img{background:var(--yl-soft)}
.yl-pd-img img{width:100%;height:auto;display:block}
.yl-pd-thumbs{display:flex;gap:6px;padding:8px;background:var(--yl-soft);overflow-x:auto}
.yl-pd-thumbs img{width:52px;height:52px;object-fit:cover;border:2px solid transparent;cursor:pointer;flex:0 0 52px}
.yl-pd-thumbs img.on{border-color:var(--yl-clay)}
.yl-spec-block{background:var(--yl-paper);border:1px solid var(--yl-line);border-top:0;padding:11px 14px 12px}
.yl-spec-block h4{margin:0 0 7px;font-size:11px;color:var(--yl-deep);letter-spacing:.06em}
.yl-tags{display:flex;flex-wrap:wrap;gap:6px}
.yl-tag{font-size:11px;padding:5px 10px;border:1px solid var(--yl-line);color:var(--yl-muted);background:#fff;cursor:pointer}
.yl-tag.on{border-color:var(--yl-clay);color:var(--yl-clay);background:#fdf7f4}
.yl-pd-body{background:var(--yl-paper);border:1px solid var(--yl-line);border-top:0;padding:13px 14px 16px}
.yl-pd-body h3{margin:12px 0 7px;font-size:12px;color:var(--yl-deep);letter-spacing:.06em}
.yl-pd-body h3:first-child{margin-top:0}
.yl-pd-body p{margin:0 0 9px;font-size:12px;line-height:1.95;color:#3f5257;text-align:justify}
.yl-pd-body img{width:100%;height:auto;margin:6px 0}
table.yl-spec{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:11px}
table.yl-spec th{width:34%;text-align:left;background:var(--yl-soft);color:#4b5f64;font-weight:500;
  padding:7px 9px;border:1px solid var(--yl-line)}
table.yl-spec td{padding:7px 9px;border:1px solid var(--yl-line);color:#3f5257}

/* 通用块 / 表单 / 单元格 */
.yl-list-head{margin:14px 14px 0;padding:0 0 8px;border-bottom:2px solid var(--yl-deep)}
.yl-list-head h1{margin:0;font-size:17px;letter-spacing:.06em;color:var(--yl-deep)}
.yl-list-head p{margin:3px 0 0;font-size:10.5px;color:var(--yl-muted)}
.yl-card-box{margin:12px 14px 0;background:var(--yl-paper);border:1px solid var(--yl-line);padding:13px 14px}
.yl-card-box h3{margin:0 0 8px;font-size:13px;letter-spacing:.06em;color:var(--yl-deep)}
.yl-box{margin:12px 14px;background:var(--yl-paper);border:1px solid var(--yl-line);padding:13px}
.yl-box h2,.yl-box h3{margin:0 0 9px;font-size:13px;letter-spacing:.06em;color:var(--yl-deep)}
.yl-box p{margin:0 0 8px;font-size:12px;color:#3f5257;line-height:1.9}
.yl-row{display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--yl-soft);font-size:12px}
.yl-row:last-child{border-bottom:0}
.yl-cell{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--yl-soft);font-size:12px}
.yl-cell:last-child{border-bottom:0}
.yl-cell img{width:52px;height:52px;object-fit:cover;background:var(--yl-soft)}
.yl-input{width:100%;border:1px solid var(--yl-line);background:#fff;padding:9px 11px;
  font-size:12.5px;color:var(--yl-ink);outline:0;margin-bottom:9px}
.yl-input:focus{border-color:var(--yl-tide)}
.yl-tip{font-size:11px;color:var(--yl-muted);line-height:1.8}
.yl-badge{display:inline-block;background:var(--yl-soft);color:var(--yl-tide);border:1px solid var(--yl-line);
  font-size:10.5px;padding:2px 7px;margin-right:6px}
.yl-empty{margin:40px 14px;text-align:center;color:var(--yl-muted);font-size:12px}

/* 内容页 */
.yl-art{margin:12px 14px;background:var(--yl-paper);border:1px solid var(--yl-line);padding:16px 15px}
.yl-art h1{margin:0 0 5px;font-size:19px;color:var(--yl-deep)}
.yl-art .yl-date{font-size:10.5px;color:#9fb0b4;letter-spacing:.06em;margin-bottom:11px}
.yl-art h2{margin:15px 0 7px;font-size:13px;color:var(--yl-deep);letter-spacing:.06em}
.yl-art p{margin:0 0 10px;font-size:12.5px;line-height:2;color:#3f5257;text-align:justify}
.yl-art ul{margin:0 0 10px;padding-left:17px;font-size:12.5px;line-height:2;color:#3f5257}
.yl-art table{width:100%;border-collapse:collapse;font-size:12px;margin:7px 0 12px}
.yl-art table th{width:32%;text-align:left;background:var(--yl-soft);font-weight:500;
  padding:8px 10px;border:1px solid var(--yl-line);color:#4b5f64}
.yl-art table td{padding:8px 10px;border:1px solid var(--yl-line);color:#3f5257}

/* 收银台 */
.yl-pay{margin:16px 14px 0}
.yl-pay-amount{font-family:Georgia,serif;font-size:32px;color:var(--yl-deep)}
.yl-pay-timer{font-size:10.5px;color:var(--yl-muted);margin-top:3px}
.yl-pay-box{margin:14px 0 0;background:var(--yl-paper);border:1px solid var(--yl-line);padding:13px 14px}
.yl-pay-box label{display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.yl-pay-tip{margin:11px 0 0;font-size:11px;color:var(--yl-muted);line-height:1.9}

/* 页脚（身份五件套） */
.yl-foot{margin-top:22px;background:var(--yl-deep);color:#cfdde0;padding:18px 14px 22px}
.yl-foot-links{display:flex;flex-wrap:wrap;gap:7px 13px;font-size:11px;color:#dfebed}
.yl-foot-links a{border-bottom:1px solid rgba(223,235,237,.25);padding-bottom:1px}
.yl-foot-note{margin-top:11px;font-size:10.5px;color:#96b3b8}
.yl-foot-id{margin-top:11px;border-top:1px solid rgba(223,235,237,.2);padding-top:11px;
  font-size:11px;line-height:1.95;color:#b9cdd1}
.yl-foot-id p{margin:0}
.yl-foot-id strong{color:#fff;letter-spacing:.04em;font-weight:600}
.yl-foot-id a{color:#eabf9d}

@media (min-width:760px){
  .yl-note,.yl-mast,.yl-zones,.yl-main,.yl-foot{max-width:1080px;margin-left:auto;margin-right:auto}
  .yl-court{margin:16px 20px 0}
  .yl-five{margin:14px 20px 0}
  .yl-five a{flex:1 1 0;min-height:86px}
  .yl-trio{flex-direction:row;flex-wrap:nowrap;margin:14px 20px 0}
  .yl-trio-card{flex:1 1 0;flex-direction:column}
  .yl-trio-img{flex:none;width:100%;height:120px}
  .yl-trio-img img{width:100%;height:120px}
  .yl-wall{grid-template-columns:repeat(3,1fr);margin:5px 20px 0}
  .yl-card:nth-child(3n+1) .yl-card-img,.yl-card:nth-child(3n+1) .yl-card-img img{height:120px}
  .yl-head,.yl-read,.yl-steps,.yl-box,.yl-art,.yl-pd,.yl-crumb,
  .yl-list-head,.yl-card-box{margin-left:20px;margin-right:20px}
  .yl-pd-split{flex-direction:row-reverse}
  .yl-pd-quote{flex:0 0 31%;order:-1;padding:16px 18px}
  .yl-pd-gallery{flex:1 1 auto}
  .yl-pd-split .yl-spec-block{border:0;border-top:1px solid var(--yl-line)}
  .yl-pd-thumbs img{width:58px;height:58px;flex:0 0 58px}
}
@media (max-width:560px){
  .yl-wall{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:480px){
  .yl-court{margin-top:10px}
  .yl-head{margin-top:12px}
}