/**
 * 道可道 - 商城首页样式
 * 基于5、商城首页_副本.html
 */

/* ========== 页面横幅 ========== */
.dkd-shop-banner {
    padding: 60px 0 50px;
    background: linear-gradient(135deg, #F2EEE2 0%, #FEFCF5 100%);
    position: relative; overflow: hidden;
}
.dkd-shop-banner::before {
    content: "\1F3EE"; font-size: 280px; opacity: 0.04; position: absolute;
    right: -20px; bottom: -60px; font-family: serif; pointer-events: none;
}
.dkd-shop-banner::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" opacity="0.05"><path fill="none" stroke="%23C6A43F" stroke-width="1.2" d="M150 150 L650 150 M150 250 L650 250 M150 350 L650 350 M150 450 L650 450 M250 80 L250 520 M400 80 L400 520 M550 80 L550 520"/><circle cx="400" cy="300" r="120" stroke="%23C6A43F" fill="none" stroke-width="1.5"/></svg>') repeat;
    pointer-events: none;
}
.dkd-shop-banner .dkd-bg-mountain {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" opacity="0.06"><path fill="none" stroke="%23333" stroke-width="1.5" d="M0 250 L100 180 L200 220 L300 140 L400 190 L500 120 L600 170 L700 100 L800 150 L900 90 L1000 130 L1100 80 L1200 120 L1200 300 L0 300 Z"/></svg>');
    background-repeat: repeat-x; background-position: bottom; background-size: 800px auto;
    pointer-events: none;
}
.dkd-shop-banner-content {
    position: relative; z-index: 2; text-align: center;
}
.dkd-shop-banner-content h1 {
    font-size: 3rem; font-weight: 700; color: var(--dkd-primary-dark);
    line-height: 1.2; margin-bottom: 18px; font-family: 'Noto Serif SC', serif;
}
.dkd-shop-banner-content p {
    font-size: 1.1rem; color: var(--dkd-gray-soft); max-width: 560px; margin: 0 auto 24px auto;
}
.dkd-shop-badges {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 16px;
}
.dkd-shop-badge-item {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,245,0.7); backdrop-filter: blur(4px);
    padding: 8px 24px; border-radius: 60px; border: 1px solid rgba(198,164,63,0.3);
    font-size: 0.9rem; font-weight: 500; color: var(--dkd-primary-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02); transition: transform 0.2s;
}
.dkd-shop-badge-item i { font-size: 1.1rem; color: var(--dkd-primary-gold); }
.dkd-shop-badge-item:hover {
    transform: translateY(-2px); background: rgba(198,164,63,0.1);
    border-color: var(--dkd-primary-gold);
}

/* ========== 固定导航栏 ========== */
.dkd-shop-sticky-nav {
    position: sticky; top: 70px; z-index: 99; background: white;
    border-bottom: 1px solid #EFE8DA; box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.dkd-shop-primary-nav {
    background: white; padding: 12px 0 8px;
}
.dkd-shop-primary-list {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.dkd-shop-primary-btn {
    background: transparent; border: none; padding: 8px 26px; border-radius: 40px;
    font-size: 1rem; font-weight: 500; color: var(--dkd-gray-deep); cursor: pointer;
    transition: var(--dkd-transition); font-family: 'Noto Serif SC', serif;
    display: inline-flex; align-items: center; gap: 8px;
}
.dkd-shop-primary-btn .nav-icon { font-size: 1.2rem; }
.dkd-shop-primary-btn:hover, .dkd-shop-primary-btn.active {
    background: rgba(198,164,63,0.12); color: #1E3A2F;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.dkd-shop-filter-nav {
    background: #FEFCF5; padding: 8px 0 12px; border-top: 1px solid #F0EAD8;
}
.dkd-shop-filter-list {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.dkd-shop-filter-btn {
    background: transparent; border: none; padding: 4px 18px; border-radius: 30px;
    font-size: 0.85rem; font-weight: 500; color: var(--dkd-gray-soft); cursor: pointer;
    transition: var(--dkd-transition); display: inline-flex; align-items: center; gap: 6px;
}
.dkd-shop-filter-btn i { font-size: 0.8rem; }
.dkd-shop-filter-btn:hover, .dkd-shop-filter-btn.active {
    background: rgba(198,164,63,0.1); color: var(--dkd-primary-dark); font-weight: 600;
}
.dkd-shop-filter-btn.active {
    color: var(--dkd-primary-gold); border-bottom: 2px solid var(--dkd-primary-gold);
    border-radius: 0; background: transparent;
}

/* ========== 商品主区域 ========== */
.dkd-shop-products-main {
    padding: 50px 0 70px; background: #FEFCF5;
}
.dkd-shop-product-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px;
}
.dkd-shop-product-card {
    background: white; border-radius: 24px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05); transition: var(--dkd-transition); cursor: pointer;
}
.dkd-shop-product-card:hover {
    transform: translateY(-6px); box-shadow: var(--dkd-card-shadow);
}
.dkd-shop-product-img {
    background: linear-gradient(135deg, #E9E2CF, #DDD2B8); height: 220px;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.dkd-shop-product-img i { font-size: 4rem; color: var(--dkd-primary-gold); }
.dkd-shop-product-info { padding: 20px; }
.dkd-shop-product-info h3 {
    font-size: 1.2rem; margin-bottom: 8px; font-weight: 600;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
}
.dkd-shop-product-category {
    color: var(--dkd-primary-gold); font-size: 0.7rem;
    background: rgba(198,164,63,0.1); padding: 2px 10px; border-radius: 30px;
    display: inline-block; margin-bottom: 8px;
}
.dkd-shop-product-desc {
    color: var(--dkd-gray-soft); font-size: 0.85rem; margin-bottom: 16px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dkd-shop-product-meta {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid #F0EAD8; padding-top: 12px;
}
.dkd-shop-product-price {
    color: var(--dkd-primary-gold); font-weight: 700; font-size: 1rem;
}
.dkd-shop-btn-buy {
    background: transparent; border: 1px solid var(--dkd-primary-gold);
    padding: 5px 16px; border-radius: 30px; font-size: 0.75rem; cursor: pointer;
    transition: var(--dkd-transition);
}
.dkd-shop-btn-buy:hover { background: rgba(198,164,63,0.1); }
.dkd-shop-load-more {
    background: var(--dkd-primary-gold); color: #1E3A2F; border: none;
    padding: 12px 32px; border-radius: 44px; font-weight: 700; cursor: pointer;
    transition: var(--dkd-transition);
}
.dkd-shop-load-more:hover { transform: translateY(-2px); }

/* ========== 返回顶部 ========== */
.dkd-shop-go-top {
    position: fixed; bottom: 25px; right: 20px; background: var(--dkd-primary-dark);
    color: var(--dkd-primary-gold); width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    opacity: 0; visibility: hidden; transition: 0.2s; z-index: 99; border: none;
}
.dkd-shop-go-top.show { opacity: 1; visibility: visible; }

/* ========== 响应式 ========== */
@media (max-width: 880px) {
    .dkd-shop-banner-content h1 { font-size: 2.2rem; }
    .dkd-shop-sticky-nav { top: 60px; }
    .dkd-shop-primary-btn { padding: 6px 18px; font-size: 0.9rem; }
    .dkd-shop-badges { gap: 16px; }
    .dkd-shop-badge-item { padding: 6px 18px; font-size: 0.8rem; }
}
@media (max-width: 550px) {
    .dkd-shop-badges { flex-direction: column; align-items: center; gap: 12px; }
}