/* ============================================================
侧栏广告位 · 通用占位容器（所有页面共用，改这里即可全站生效）
接入方式：
1. 页面 引入本文件
2. 页面 内放两个 aside（见下方 HTML 片段）
3. 拿到联盟广告代码后，直接粘贴进 内，
无需改动任何布局代码；粘贴后占位提示文字会自动消失。
可调项：
--ad-w / --ad-h 广告位尺寸（默认 160×600 摩天大楼）
文件末尾媒体查询的 1280px 低于该宽度时侧栏自动隐藏，保护主内容不被挤压
注意：全屏 canvas 类页面（纸团投篮 / 水族馆 / 沙画 / 发泄墙）不要引侧栏，
会压住游戏画面；这类页面如需投放请改用底部横幅。
============================================================ */
:root{
--ad-w:160px; /* 广告位宽度：160 摩天大楼 / 120 窄栏 / 300 半页 */
--ad-h:600px; /* 广告位高度：600 竖幅 / 250 中矩形 */
}
.ad-rail{
display:none; /* 默认隐藏，由下方宽屏媒体查询打开 */
position:fixed;
top:50%;
transform:translateY(-50%); /* 垂直居中，不随页面滚动而遮挡内容 */
width:var(--ad-w);
z-index:5;
}
.ad-rail.left{left:max(16px,env(safe-area-inset-left))}
.ad-rail.right{right:max(16px,env(safe-area-inset-right))}
.ad-label{
display:block;
font-size:11px;
color:#6a7b8d;
text-align:center;
margin-bottom:6px;
letter-spacing:2px;
}
.ad-slot{
width:var(--ad-w);
height:auto; /* 有商品卡时高度自适应，不预留整块空高 */
max-height:calc(100vh - 96px);
background:rgba(255,255,255,.03);
border:1px dashed rgba(255,255,255,.14);
border-radius:10px;
overflow:auto;
scrollbar-width:none;
}
.ad-slot::-webkit-scrollbar{display:none}
/* 空容器：保留 160×600 摩天大楼尺寸，供直接粘贴联盟代码（粘贴后本规则失效） */
.ad-slot:empty{height:var(--ad-h)}
/* 已渲染商品卡：去掉占位虚框与底色，高度随卡片数量自适应 */
.ad-slot:not(:empty){
background:none;
border-color:transparent;
}
/* 未投放代码时显示占位提示；一旦填入联盟代码，:empty 失效、提示自动消失 */
.ad-slot:empty::after{
content:'广告位';
display:flex;
align-items:center;
justify-content:center;
height:100%;
font-size:12px;
color:#5a6a7a;
letter-spacing:1px;
}
/* ── 淘宝联盟商品卡（路径 B 自定义渲染）── */
/* 侧栏紧凑卡：左图右文。
商品图基本都是正方形白底图，若用 cover 硬压成横条会把商品主体裁掉，
所以改成固定 56×56 + contain，完整显示不变形。 */
.ad-slot{
padding:8px;
display:flex;
flex-direction:column;
gap:8px;
align-items:stretch;
}
.ad-card{
display:flex;
flex-direction:row;
gap:8px;
align-items:flex-start;
text-decoration:none;
color:#e8ecf4;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:10px;
padding:7px;
overflow:hidden;
transition:transform .2s,border-color .2s,background .2s;
}
.ad-card:hover{
transform:translateY(-2px);
border-color:rgba(255,154,158,.5);
background:rgba(255,255,255,.08);
}
.ad-img{
width:56px;
height:56px;
flex:0 0 56px;
object-fit:contain; /* 完整显示，不裁切 */
border-radius:6px;
background:#fff; /* 商品图多为白底，用白底更自然 */
display:block;
}
.ad-body{
flex:1;
min-width:0; /* 关键：允许文字区收缩，否则长标题会撑破卡片 */
display:flex;
flex-direction:column;
gap:2px;
}
.ad-title{
font-size:12px;
line-height:1.45;
color:#dde3ea;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.ad-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ad-price{
color:#ff6b6b; /* 红=价格（中式配色），与涨同色 */
font-weight:800;
font-size:15px;
font-family:system-ui,sans-serif;
}
.ad-price::before{content:"¥";font-size:11px;margin-right:1px}
.ad-coupon{
color:#ffd966;
font-size:10px;
border:1px solid rgba(255,217,102,.45);
border-radius:8px;
padding:1px 5px;
white-space:nowrap;
}
.ad-shop{
font-size:10px;
color:#8892a8;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ad-cta{font-size:11px;color:#5dade2;font-weight:600;margin-top:2px}
/* ── 好物推荐页：网格大卡（上图下文，2/3/4 列自适应）── */
.goods-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
@media (min-width:700px){ .goods-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .goods-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ad-card--grid{
flex-direction:column;
align-items:stretch;
padding:10px;
border-radius:14px;
background:rgba(255,255,255,.04);
}
.ad-card--grid .ad-img{
width:100%;
height:auto;
aspect-ratio:1/1; /* 正方形，完整显示商品图 */
flex:none;
margin-bottom:8px;
border-radius:10px;
padding:6px;
}
.ad-card--grid .ad-title{font-size:13px;line-height:1.5}
.ad-card--grid .ad-price{font-size:17px}
.ad-card--grid .ad-shop{font-size:11px;margin-top:2px}
.ad-card--grid .ad-cta{margin-top:6px}
/* ── 游戏页底部推广条：横向滑动，不挤占游戏区，可一键关闭 ── */
.ad-bar{
position:fixed;
left:0;right:0;bottom:0;
z-index:9999;
display:flex;
align-items:center;
gap:8px;
padding:6px 10px;
padding-bottom:calc(6px + env(safe-area-inset-bottom));
background:rgba(28,34,31,.94);
border-top:1px solid rgba(255,255,255,.12);
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.ad-bar::-webkit-scrollbar{display:none}
.ad-bar .ad-card{
flex:0 0 178px;
border-radius:8px;
padding:6px;
background:rgba(255,255,255,.06);
}
.ad-bar .ad-img{width:44px;height:44px;flex:0 0 44px;border-radius:5px}
.ad-bar .ad-title{font-size:11px;line-height:1.35}
.ad-bar .ad-price{font-size:13px}
.ad-bar .ad-shop,.ad-bar .ad-cta{display:none}
.ad-bar-close{
position:sticky;
left:0;
flex:0 0 auto;
width:22px;height:22px;
line-height:1;
border-radius:50%;
background:rgba(255,255,255,.16);
color:#dde3ea;
font-size:14px;
border:none;
cursor:pointer;
padding:0;
}
.ad-bar-close:hover{background:rgba(255,255,255,.28)}
/* 仅在宽屏显示侧栏；平板与手机自动隐藏，避免挤压主内容 */
@media (min-width:1280px){
.ad-rail{display:block}
/* 游戏页 PC 端改用两侧侧栏，不再用底部条（避免悬浮条压住游戏画面） */
.ad-bar{display:none}
}