/* ================================================================
 * DS 智能推荐 v4.0 样式
 * - 猜你喜欢(grid + card)
 * - 看了又看 / 买了又买(list)
 * ================================================================ */

.ds-guess-like { margin: 32px 0; padding: 24px; background: var(--ds-color-white, #fff); border: 1px solid var(--ds-color-border, #ebeef5); border-radius: var(--ds-radius-md, 8px); }
.ds-guess-like-title { font-size: var(--ds-fs-md, 18px); font-weight: 700; margin: 0 0 16px; color: var(--ds-color-text-1, #222); display: flex; align-items: baseline; gap: 8px; }
.ds-guess-like-icon { font-size: 22px; }
.ds-guess-like-sub { font-size: 12px; font-weight: 400; color: var(--ds-color-text-3, #909399); }

.ds-guess-like-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ds-guess-like-card { display: block; border: 1px solid var(--ds-color-border, #ebeef5); border-radius: var(--ds-radius-sm, 6px); overflow: hidden; transition: all 0.25s; text-decoration: none; color: inherit; background: var(--ds-color-bg, #fafafa); }
.ds-guess-like-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.08); border-color: var(--ds-color-primary, #FF7D00); }
.ds-guess-like-thumb { aspect-ratio: 4/3; overflow: hidden; position: relative; background: #f0f0f0; display: flex; align-items: center; justify-content: center; }
.ds-guess-like-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.ds-guess-like-card:hover .ds-guess-like-thumb img { transform: scale(1.05); }
.ds-guess-like-empty { font-size: 40px; opacity: 0.5; }
.ds-guess-like-access { position: absolute; top: 6px; left: 6px; padding: 2px 6px; font-size: 11px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; }
.ds-guess-like-body { padding: 10px; }
.ds-guess-like-card-title { font-size: 13px; line-height: 1.4; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; color: var(--ds-color-text-1, #222); }
.ds-guess-like-card-meta { font-size: 11px; color: var(--ds-color-text-3, #909399); }

/* 看了又看 / 买了又买(列表) */
.ds-also-viewed, .ds-also-bought { margin: 24px 0; padding: 18px 20px; background: var(--ds-color-white, #fff); border: 1px solid var(--ds-color-border, #ebeef5); border-radius: var(--ds-radius-md, 8px); }
.ds-also-viewed-title, .ds-also-bought-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--ds-color-text-1, #222); display: flex; align-items: baseline; gap: 8px; }
.ds-also-viewed-title small, .ds-also-bought-title small { font-size: 12px; font-weight: 400; color: var(--ds-color-text-3, #909399); }

.ds-also-viewed-list, .ds-also-bought-list { list-style: none; padding: 0; margin: 0; }
.ds-also-viewed-list li, .ds-also-bought-list li { padding: 8px 0; border-bottom: 1px dashed var(--ds-color-border, #ebeef5); }
.ds-also-viewed-list li:last-child, .ds-also-bought-list li:last-child { border-bottom: 0; }
.ds-also-viewed-list a, .ds-also-bought-list a { color: var(--ds-color-text-1, #222); text-decoration: none; font-size: 14px; display: flex; align-items: center; gap: 6px; transition: color 0.2s; }
.ds-also-viewed-list a:hover, .ds-also-bought-list a:hover { color: var(--ds-color-primary, #FF7D00); }
.ds-also-viewed-list a::before, .ds-also-bought-list a::before { content: '›'; color: var(--ds-color-text-3, #909399); font-weight: 700; }

/* 暗黑模式适配 */
[data-ds-theme="dark"] .ds-guess-like, [data-ds-theme="dark"] .ds-also-viewed, [data-ds-theme="dark"] .ds-also-bought { background: #1e1e1e; border-color: #333; }
[data-ds-theme="dark"] .ds-guess-like-card { background: #2a2a2a; border-color: #333; }
[data-ds-theme="dark"] .ds-guess-like-card-title, [data-ds-theme="dark"] .ds-also-viewed-list a, [data-ds-theme="dark"] .ds-also-bought-list a { color: #e0e0e0; }
[data-ds-theme="dark"] .ds-also-viewed-list li, [data-ds-theme="dark"] .ds-also-bought-list li { border-color: #333; }

/* 移动端 */
@media (max-width: 768px) {
    .ds-guess-like { padding: 16px; }
    .ds-guess-like-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ds-guess-like-card-title { font-size: 12px; min-height: 32px; }
    .ds-also-viewed, .ds-also-bought { padding: 14px; }
}