/* CSS Document */
/* common */
*{padding:0;margin:0;list-style:none;border:none;outline:none; text-decoration:none; font-family:'MicroSoft YaHei'; }
body{ background:#f6f6f6; color:#333; }
h1,h2,h3{ overflow:hidden; text-overflow:ellipsis;white-space:nowrap; }
a{ color:#333}
a:hover{ text-decoration:underline; }
/* layout */
.header{ background:#ffb3ba; padding:10px 0; overflow:hidden}
header {color: #FFF;position: fixed;top: 0;z-index: 100;}
.pics a img:hover {transition: all 1s;transform: scale(1.2)}
.captcha{margin-bottom: 20px;}
/* 导航栏样式 */
.mobile-nav { width:5%; height: 50px; float:left; align-items: center; padding:0 0px 0px 5px;}
/* 汉堡按钮 */
.nav-trigger { width: 40px; height: 40px; background: none; border: none; position: relative; cursor: pointer; }
.nav-trigger span { display: block; width: 24px; height: 2px; background: #fff; position: absolute; transition: all 0.3s ease; }
.nav-trigger span:nth-child(1) { top: 13px; }
.nav-trigger span:nth-child(2) { top: 20px; }
.nav-trigger span:nth-child(3) { top: 27px; }
.nav-trigger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-trigger.active span:nth-child(2) { opacity: 0; }
.nav-trigger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* 导航标题 */
.nav-title { flex: 1; font-size: 18px; color: #333; text-align: center; font-weight: 500; }
/* 导航菜单 */
.nav-menu { position: fixed; top: 0; left: -100%; width: 85%; max-width: 320px; height: 100%; background: #fff; z-index: 102; overflow-y: auto; transition: left 0.3s ease; }
.nav-menu.active { left: 0; }
/* 菜单头部 */
.nav-header { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #eee; }
.nav-header h2 { font-size: 18px; color: #333; font-weight: 500; }
.nav-close { background: none; border: none; font-size: 24px; color: #666; cursor: pointer; }
/* 菜单列表 */
.nav-list { padding: 10px 0; }
.nav-group-title, .nav-single { display: block; padding: 14px 15px; color: #333; font-size: 16px; position: relative; }
.nav-group-title::after { content: '>'; position: absolute; right: 15px; transform: rotate(90deg); transition: transform 0.3s ease; }
.nav-group.active .nav-group-title::after { transform: rotate(-90deg); }
.nav-children { background: #f9f9f9; display: none; }
.nav-group.active .nav-children { display: block; }
.nav-children li a { display: block; padding: 12px 15px 12px 30px; color: #666; font-size: 15px; border-bottom: 1px solid #eee; }
.nav-children li:last-child a { border-bottom: none; }
.nav-single { border-bottom: 1px solid #eee; }
.nav-list li:last-child .nav-single { border-bottom: none; }
/* 遮罩层 */
.nav-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 101; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.nav-mask.active { opacity: 1; pointer-events: auto; }

.wrap{ width:100%; overflow:hidden}
.box{ width:100vw; margin-top:10px; position:relative}
.logo{ width:17%; text-align:right; margin-top:8px; float:left}
.logo img{ width:90%; }
.search{ width:65%; background:#ffb3ba; border-radius:10px; padding:5px;margin:18px 10px 0px 0px;float:right;border: 1px solid #fff;}
.s_txt{ width:60%; height:35px; background:url(/m/adshop/images/icon_search.png) left no-repeat #fff; border-radius:3px; padding-left:50px; }
.s_btn{ background:none; font:normal 15px/35px ''; color:#fff; cursor:pointer}
.list_nav{ width:80px; height:100%; overflow-y:auto; z-index:50; background:#f6f6f6; float:left}
.list_nav li{ font:normal 14px/40px ''; border-left:3px solid #f6f6f6; text-align:center;}
.list_nav li.on{ background:#fff; border-left:3px solid #ffb3ba;}
.list_con{ background:#FFF; box-sizing:border-box; padding:0 10px; overflow:auto;}
.list_con dt{ font:bold 15px/40px ''; color:#ffb3ba; text-align:center;}
.list_con dd{ font:normal 14px/28px ''; padding-bottom:10px; overflow:hidden}
.list_con a{ width:33.33%; height:28px; text-align:center; float:left; text-overflow:ellipsis; overflow:hidden; color:#666;}

.rank_top{ background:#ffb3ba; color:#fff;}
.rank_top h1{height:auto;font:bold 18px/24px '';white-space:normal;padding: 10px 0px 10px 0px;text-align: center;}
.rank_top p{ height:80px; font:normal 14px/20px ''; margin:0 10px 10px 10px; overflow:hidden;line-height:30px;}
.rank_tit{ background:url(../images/bg_rank.png) bottom no-repeat; background-size:contain; position:relative; overflow:hidden;}
.rank{ width:33%; text-align:center; float:left;}
.rank img{ width:80%; border-radius:5px;}
.rank p{ height:20px; padding:0; margin:32px 0 8px 0; overflow:hidden}
.top_1 img{ margin-top:14px;}
.top_2 img{ margin-top:30px;}
.top_3 img{ margin-top:34px;}
.top_1_app img{ margin-top:14px; width:60%}
.top_2_app img{ margin-top:30px; width:60%}
.top_3_app img{ margin-top:34px; width:60%}

.itemrank{ background:#fff; overflow:hidden}
.itemrank li{ border-bottom:1px solid #eee; padding:15px 10px; overflow:hidden}
.list_num{ width:8%; text-align:center; float:left}
.list_num em{ width:100%; height:26px; font:normal 14px/26px ''; background:#ffe6e6; color:#d32f2f; border-radius:26px; display:inline-block}
.list_pic{ width:32%; text-align:center; float:left}
.list_pic img{ width:80%; border:1px solid #ddd; border-radius:3px;}
.list_info{ width:60%; float:left}
.list_info h3{ font:bold 16px/20px '';line-height:25px;display:inline-block;margin-left:5px;}
.list_info p{ font:normal 12px/30px ''; color:#999;margin: 0px 0px 0px 5px;}
.list_tips{margin: 5px 0px 5px 40px;font:normal 12px/18px '';}
.list_tips a{margin: 6px 0px 6px 10px;display:inline-block;}
.list_tips b{ width:18px; height:18px; background:#ffb3ba; color:#fff; border-radius:18px; text-align:center; margin-right:3px; display:inline-block}
.list_tips b.b_jd{ background:#ffb3ba;}
.list_tips b.b_tb{ background:#ffd1dc;}

.co_tips{ background:#fff; border-top:1px solid #ddd; padding:10px 0 20px 0;}
.co_tips a{ width:44%; height:35px; font:normal 14px/35px 'MicroSoft YaHei'; border:1px solid #ffb3ba; border-radius:3px; text-align:center; margin:10px 0 0 3.5%; display:inline-block; overflow:hidden}

.menu{ background:#ffb3ba; border-top:1px solid #ffd1dc; font:normal 15px/40px '';}
.menu a{ width:33.33%; color:#fff; text-align:center; display:inline-block}
.menu a.on{ background:#fff; color:#ffb3ba; font-weight:bold;}

.co_intro{ background:#fff; font:normal 15px/26px 'MicroSoft YaHei'; padding:20px 12px;}
.intro_img{width:99%;margin:5px 0px 5px 3px;text-align:center;}
.intro_img img{width:100%}
.co_intro p{ /*! margin:10px 0; */line-height: 30px;}

.btn_unfold{ text-align:center; font-weight:normal; padding:0 10px 10px 10px; display:block}

.pos{ background: linear-gradient(135deg, #ffb3ba 0%, #ff8a95 100%); border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 12px 15px; font-size: 14px; box-shadow: 0 2px 8px rgba(255, 179, 186, 0.3); position: relative; overflow: hidden;}
.pos::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.6s ease;}
.pos:hover::before { left: 100%;}
.pos a{ color: #fff; text-decoration: none; font-weight: 500; transition: all 0.3s ease; position: relative; z-index: 2;}
.pos a:hover { color: #ffe6e6; text-shadow: 0 1px 3px rgba(0,0,0,0.2);}
.pos span { margin: 0 8px; opacity: 0.8; font-weight: bold;}

.toplist_nav{ background:#fff; padding:5px; border-bottom:1px solid #f4f4f4;}
.toplist_nav ul{ width:100%; height:40px; overflow-x:scroll; overflow-y:hidden}
.toplist_nav li{ font:normal 15px/40px ''; display:table-cell}
.toplist_nav li a{ white-space:nowrap; text-align:center; margin:0 8px; display:block}
.toplist_nav li.on a{ font-weight:bold; color:#ffb3ba;}
.footer{ background:#ffb3ba; font:normal 12px/24px 'MicroSoft YaHei'; color:#fff; text-align:center; padding:20px;}
.footer a{ color:#fff; display:block}

.goods-item{padding: 10px 0;margin-top:10px;/*overflow: hidden;*/border-top: 1px solid #eee;display: inline-block;height: 70px;width: 97%;}
.goods-item img {border-radius:15px;width: 65px;height: 65px;float: left;padding:0px 10px 0px 10px;}
.goods-item .top_con p{line-height:21px;}
.goods-item span{display:inline-block;margin-top:5px;font:normal 15px/40px '';}
.goods-item .go {float: right;width: 60px;height: 24px;margin-top: 5px;border-radius: 3px;background: #ffb3ba;color: #fff;text-align: center;font-size: 12px;line-height: 23px;}

/* 好物推荐页面样式 */
.container { max-width: 414px; margin: 0 auto; background-color: #fff; min-height: 100vh; }
.top_intro { background: linear-gradient(135deg, #ffb3ba 0%, #ffd1dc 100%); color: white; padding: 20px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.top_intro h1 { font-size: 24px; font-weight: 600; margin-bottom: 5px; }
.top_intro p { font-size: 14px; opacity: 0.9; }
.content { padding: 20px; }
.brand-item { background: white; border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1px solid #f0f0f0; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.brand-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.brand-title { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 8px; display: flex; align-items: center; }
.brand-icon { width: 24px; height: 24px; margin-right: 10px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: white; }
.brand-description { font-size: 14px; color: #666; margin-bottom: 15px; line-height: 1.5; }
.detail-btn { background: linear-gradient(135deg, #ffb3ba 0%, #ffd1dc 100%); color: white; border: none; padding: 10px 20px; border-radius: 20px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; width: 100%; display:block; text-align:center; text-decoration:none; box-sizing:border-box; }
.detail-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 179, 186, 0.4); text-decoration:none; }
.detail-btn:active { transform: translateY(0); }
.detail-btn:focus-visible { outline: 2px solid #ff8a95; outline-offset: 2px; }
.category-tag { display: inline-block; background: #ffe6e6; color: #d32f2f; padding: 4px 8px; border-radius: 12px; font-size: 12px; margin-bottom: 10px; }
@media (max-width: 480px) { .container { max-width: 100%; } .content { padding: 15px; } .brand-item { padding: 16px; } }

/* 内联样式合并 */
.logo img { width: 60px; height: 60px; }
.brand-icon.apple { background: #ff6b6b; }
.brand-icon.chanel { background: #4ecdc4; }
.brand-icon.nike { background: #45b7d1; }
.brand-icon.ikea { background: #96ceb4; }
.brand-icon.starbucks { background: #feca57; }
.brand-icon.tesla { background: #ff9ff3; }
.brand-icon.louis-vuitton { background: #54a0ff; }
.brand-icon.gnc { background: #5f27cd; }
.brand-icon.netflix { background: #00d2d3; }
.brand-icon.patagonia { background: #ff6348; }

/* 下拉加载样式 */
.loading{ text-align:center; color:#999; font:normal 13px/40px 'MicroSoft YaHei'; padding:8px 0; }
#infinite-loading{ color:#ff8a95; position:relative; }
#infinite-loading::before{
    content:''; display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px;
    border-radius:50%; border:2px solid rgba(255,138,149,0.35); border-top-color:#ff8a95;
    animation:hw-spin .8s linear infinite;
}
#infinite-no-more{ color:#b3b3b3; }
@keyframes hw-spin{ to{ transform:rotate(360deg); } }