/* 礼物推荐卡片(.pd-*)与广告卡片(.ads-*)样式:原先分别内联在 face / match / chat 各页,
   现抽为多页共用文件,改一处即全站生效。#sample 的移动端内边距特例随 .pd-* 一起保留(各页都有 #sample 区)。 */
.pd-recommend { background: transparent; padding: 0; margin: 48px 0; }
.pd-inner { border: 1px solid #f6dde5; border-radius: 18px; background: #fdf3f6; padding: 32px; }
.pd-title { font-size: 24px; color: #8a1c42; text-align: center; margin: 0 0 24px; font-weight: 700; }
.pd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }
.pd-card { background: #fbe6ec; border: 1px solid #f0c8d5; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 14px rgba(138, 28, 66, .1); transition: box-shadow .3s ease; text-decoration: none; color: inherit; display: flex; height: 160px; position: relative; }
.pd-card:hover { box-shadow: 0 8px 24px rgba(138, 28, 66, .12); }
.pd-img-wrap { width: auto; height: 100%; overflow: hidden; position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-start; padding: 12px; aspect-ratio: 1/1; }
.pd-img-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.pd-body { flex: 1; padding: 20px 20px 20px 24px; display: flex; flex-direction: column; justify-content: center; text-align: center; background: transparent; }
.pd-name { font-size: 20px; font-weight: 700; color: #8a1c42; margin: 0 0 10px; line-height: 1.3; }
.pd-desc { font-size: 14px; color: #8c7d83; line-height: 1.7; margin: 0 0 14px; }
.pd-btn { display: inline-block; align-self: flex-end; margin-top: auto; padding: 5px 18px; font-size: 13px; font-weight: 600; color: #fff; background: #8a1c42; border-radius: 20px; transition: background .3s ease; }
.pd-btn-arrow { display: inline-block; transition: transform .3s ease; }
.pd-card:hover .pd-btn { background: #a82552; }
.pd-card:hover .pd-btn-arrow { transform: translateX(4px); }
@media(max-width: 900px) { .pd-grid { grid-template-columns: 1fr; } }
@media(max-width: 600px) {
  .pd-inner { padding: 8px; }
  .pd-card { height: 120px; }
  .pd-img-wrap { padding: 4px; }
  .pd-body { min-width: 0; padding: 6px 8px 6px 12px; justify-content: flex-start; }
  .pd-name { flex: none; margin-bottom: 3px; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
  .pd-desc { display: -webkit-box; margin-bottom: 3px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 11.5px; line-height: 1.35; }
  .pd-btn { flex: none; margin-top: auto; padding: 2px 10px; font-size: 11px; border-radius: 12px; }
}
@media(max-width: 640px) { #sample { padding-left: 13px !important; padding-right: 13px !important; } }

/* 广告卡片 */
.ads-section { margin: 60px auto 40px; max-width: 1200px; }
.ads-title { font-size: 22px; color: #8a1c42; text-align: center; margin: 0 0 28px; font-weight: 700; }
.ads-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ads-card { display: flex; align-items: center; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 2px 12px rgba(138, 28, 66, .08); text-decoration: none; color: inherit; transition: all .3s; border: 1px solid #f0e2e8; }
.ads-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(138, 28, 66, .15); border-color: #eec1d1; }
.ads-img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg, #fff3f7, #ffe6ef); }
.ads-info { flex: 1; margin-left: 14px; min-width: 0; }
.ads-name { font-size: 16px; font-weight: 700; color: #33262c; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-desc { font-size: 13px; color: #8c7d83; line-height: 1.5; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-overflow-scrolling: touch; overflow: hidden; text-overflow: ellipsis; }
.ads-action { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ads-arrow { width: 36px; height: 36px; border-radius: 50%; background: #b21e50; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all .3s; }
.ads-card:hover .ads-arrow { background: #8a1c42; transform: rotate(45deg); }
@media(max-width: 1000px) { .ads-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 768px) { .ads-grid { grid-template-columns: repeat(2, 1fr); } .ads-card { padding: 12px; } .ads-img { width: 60px; height: 60px; } .ads-name { font-size: 15px; } .ads-desc { font-size: 12.5px; } }
@media(max-width: 480px) { .ads-grid { grid-template-columns: 1fr; } .ads-card { flex-direction: row; } }