/* --------------- 黔茶壹佰 Footer 深度优化专属样式 --------------- */
/* 1. 底部整体容器样式（强化主题氛围） */
#footer {
    background-color: #f8f5f0; /* 浅茶色系背景，贴合茶叶商城调性 */
    color: #333;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    border-top: 4px solid #8a6d3b; /* 加粗顶部茶棕色线条，提升辨识度 */
    position: relative;
    overflow: hidden;
}
    /* 新增：整体背景轻微纹理，增加质感（非图片，无加载压力） */
    #footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238a6d3b' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
        z-index: 0;
    }

/* 2. 顶部广告图容器样式（优化展示效果） */
#ads_16 {
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* 隐藏图片溢出部分 */
    position: relative;
    z-index: 1;
}

    #ads_16 div {
        padding: 15px 0; /* 增加上下内边距，更宽松美观 */
        background-size: cover !important; /* 背景图全屏覆盖 */
        background-position: center center !important; /* 背景图居中 */
        background-repeat: no-repeat !important;
    }

    #ads_16 img {
        max-width: 90%; /* 图片宽度自适应，留边更精致 */
        height: auto; /* 保持图片宽高比 */
        transition: all 0.5s ease; /* 图片hover渐变效果 */
    }

        #ads_16 img:hover {
            transform: scale(1.02); /* 轻微放大，增加交互感 */
            opacity: 0.95;
        }

/* 3. 中间服务广告图样式（强化立体感） */
.w1200 {
    margin: 0 auto; /* 保持容器居中 */
    position: relative;
}

#ads_17 {
    display: block;
    text-align: center; /* 广告图居中 */
    margin: 0 auto;
}

    #ads_17 img {
        max-width: 100%; /* 图片自适应1200容器 */
        height: auto;
        border-radius: 8px; /* 增大圆角，更柔和 */
        box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* 加深阴影，提升立体感 */
        transition: all 0.5s ease; /* 过渡动画 */
    }

        #ads_17 img:hover {
            box-shadow: 0 6px 18px rgba(138, 109, 59, 0.2); /* hover加深阴影，突出展示 */
            transform: translateY(-10px); /* 轻微上浮 */
        }

/* 4. 帮助导航列表核心美化（深度优化，重点升级） */
.footer-help {
    margin: 0 auto;
    padding: 25px 0; /* 增加上下内边距，优化排版 */
    position: relative;
    z-index: 1;
}

    .footer-help ul {
        display: flex;
        flex-wrap: wrap; /* 自动换行，适配小屏幕 */
        justify-content: space-between; /* 列表项均匀分布 */
        padding: 0;
    }

        .footer-help ul li {
            flex: 0 0 calc(16% - 10px); /* 6列布局，均匀分配宽度 */
            margin: 0 5px 25px; /* 优化左右间距，增加底部间距 */
            padding: 20px 0; /* 增加内边距，更饱满 */
            text-align: center; /* 内容居中 */
            background-color: #fff; /* 白色背景卡片 */
            border-radius: 12px; /* 增大圆角，更精致 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.06); /* 优化阴影参数，更自然 */
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); /* 更顺滑的过渡曲线 */
            border: 1px solid transparent; /* 透明边框，避免hover位移 */
        }
            /* 列表项hover效果（强化交互，更酷炫） */
            .footer-help ul li:hover {
                transform: translateY(-5px); /* 增大上浮距离，更明显 */
                box-shadow: 0 8px 20px rgba(138, 109, 59, 0.2); /* 加深阴影，增强层次感 */
                border-color: #e9e3d8; /* 增加边框，提升精致度 */
                background-color: #faf8f4; /* 轻微变色，区分选中状态 */
            }
    /* 图标容器美化（升级样式，可自定义） */
    .footer-help li .icon {
        width: 48px; /* 增大图标容器 */
        height: 48px;
        margin: 0 auto 12px; /* 居中并优化间距 */
        background-color: #e9e3d8; /* 浅茶褐背景 */
        border-radius: 50%; /* 圆形图标容器 */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a6d3b'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E"); /* 更换更贴合商城的图标 */
        background-size: 24px; /* 优化图标大小 */
        background-repeat: no-repeat;
        background-position: center;
        transition: all 0.3s ease; /* 图标过渡动画 */
    }
    /* 列表项hover时图标同步变化 */
    .footer-help ul li:hover .icon {
        background-color: #8a6d3b; /* 背景变色 */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E"); /* 图标变色 */
        transform: scale(1.1); /* 图标轻微放大 */
    }
    /* 标题样式（优化字体和间距） */
    .footer-help li h2.font16 {
        font-size: 17px; /* 增大标题字体 */
        color: #8a6d3b; /* 茶棕色标题，贴合主题 */
        margin: 0 0 18px 0; /* 优化底部间距 */
        font-weight: 600;
        letter-spacing: 0.5px; /* 增加字间距，更美观 */
    }
    /* 链接样式（优化排版和交互） */
    .footer-help li p {
        margin: 10px 0; /* 增加链接上下间距 */
    }

    .footer-help li a {
        color: #666; /* 默认文字颜色 */
        text-decoration: none; /* 去除下划线 */
        font-size: 14px;
        transition: all 0.3s ease; /* 多属性过渡 */
        position: relative; /* 为伪元素做准备 */
    }
        /* 新增：链接底部渐变下划线（hover时展开，更酷炫） */
        .footer-help li a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, #8a6d3b, #a67c52); /* 渐变下划线 */
            transition: width 0.3s ease; /* 宽度过渡动画 */
        }
        /* 链接hover效果（升级样式） */
        .footer-help li a:hover {
            color: #a67c52; /* 深茶色高亮 */
        }

            .footer-help li a:hover::after {
                width: 100%; /* 下划线展开 */
            }

/* 5. 底部版权信息样式（深度优化可读性） */
.footer-custom {
    text-align: center; /* 版权信息居中 */
    padding: 20px 0; /* 增加上下内边距 */
    border-top: 1px solid #e9e3d8; /* 顶部分隔线 */
    margin-top: 15px;
    position: relative;
    z-index: 1;
}

    .footer-custom p {
        margin: 10px 0; /* 增加段落间距 */
        font-size: 13px;
        color: #666;
        line-height: 1.8; /* 增大行高，提升阅读体验 */
        letter-spacing: 0.3px; /* 增加字间距 */
    }

    .footer-custom a {
        color: #8a6d3b; /* 链接使用茶棕色 */
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .footer-custom a:hover {
            color: #a67c52;
            text-decoration: none; /* 取消默认下划线，与导航链接样式统一 */
        }
        /* 新增：版权链接hover渐变效果 */
        .footer-custom a:hover {
            background: linear-gradient(90deg, #8a6d3b, #a67c52);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent; /* 文字渐变高亮 */
        }
/* 经营证照链接样式（优化间距和交互） */
#footer > p:last-child {
    padding: 15px 0 25px; /* 增加上下内边距，更宽松 */
    font-size: 13px;
    position: relative;
    z-index: 1;
}

    #footer > p:last-child a {
        color: #666;
        text-decoration: none;
        padding: 4px 8px; /* 增加点击区域 */
        border-radius: 4px; /* 圆角点击区域 */
        transition: all 0.3s ease;
    }

        #footer > p:last-child a:hover {
            color: #8a6d3b;
            background-color: #e9e3d8; /* 增加背景色，更醒目 */
            text-decoration: none;
        }

/* 全局CSS变量：统一管理高级视觉样式，便于风格调整 */
:root {
    /* 基础样式变量（优化高级感） */
    --img-base-shadow: 0 3px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); /* 双层阴影，更细腻 */
    --img-base-radius: 8px; /* 更大圆角，更显柔和高级 */
    --img-lunbo-radius: 16px; /* 轮播图超大圆角，视觉更舒展 */
    --img-transition-time: 0.5s; /* 更长过渡，动画更丝滑 */
    --img-transition-timing: cubic-bezier(0.2, 0.8, 0.2, 1); /* 苹果风非线性过渡，更灵动 */
    /* 悬浮特效变量（增强立体感） */
    --img-hover-shadow: 0 12px 24px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.12); /* 双层强阴影，景深拉满 */
    --img-logo-hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    --img-footer-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    --img-pic-hover-shadow: 0 10px 22px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);
    --img-brand-hover-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.14);
    --img-lunbo-hover-shadow: 0 16px 32px rgba(0, 0, 0, 0.22), 0 10px 20px rgba(0, 0, 0, 0.18); /* 超强阴影，突出核心 */
    /* 缩放与位移（更细腻的微动效） */
    --img-base-scale: 1.04;
    --img-pic-scale: 1.07;
    --img-brand-scale: 1.09;
    --img-base-y: -3px; /* 基础上移距离 */
    --img-lunbo-y: -4px; /* 轮播图更大上移 */
    --img-pic-y: -5px; /* 商品图最大上移，更突出 */
    /* 高级视觉变量（光影+色彩） */
    --img-hover-opacity: 0.99; /* 几乎不透明，更显细腻 */
    --img-brightness-base: 1;
    --img-brightness-hover: 1.03; /* 轻微提亮，不刺眼 */
    --img-saturate-hover: 1.05; /* 悬浮轻微提高饱和度，色彩更鲜艳 */
    --img-overlay-gradient: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 100%); /* 渐变叠加层，替代纯色 */
    --img-glow-color: rgba(255, 255, 255, 0.6); /* 高光颜色 */
    --img-loading-gradient: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 50%, #f8f8f8 100%); /* 加载失败渐变，更高级 */
}

/* ==============================================
   1. 基础图片样式：全局生效，高级视觉打底
   ============================================== */
img {
    /* 基础布局：稳定不溢出 */
    max-width: 100%;
    height: auto;
    display: inline-block;
    position: relative;
    overflow: hidden;
    /* 核心视觉：双层阴影+大圆角，高级感拉满 */
    box-shadow: var(--img-base-shadow);
    border-radius: var(--img-base-radius);
    /* 滤镜基础：为悬浮特效铺垫 */
    filter: brightness(var(--img-brightness-base)) saturate(1) contrast(1);
    -webkit-filter: brightness(var(--img-brightness-base)) saturate(1) contrast(1);
    /* 动画优化：硬件加速+精准过渡，丝滑无卡顿 */
    will-change: transform, box-shadow, filter, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transition: box-shadow var(--img-transition-time) var(--img-transition-timing), transform var(--img-transition-time) var(--img-transition-timing), opacity var(--img-transition-time) var(--img-transition-timing), filter var(--img-transition-time) var(--img-transition-timing);
    transition: box-shadow var(--img-transition-time) var(--img-transition-timing), transform var(--img-transition-time) var(--img-transition-timing), opacity var(--img-transition-time) var(--img-transition-timing), filter var(--img-transition-time) var(--img-transition-timing);
}

    /* ==============================================
   2. 高级特效1：渐变柔光叠加层（比纯色更有质感）
   ============================================== */
    img::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--img-overlay-gradient); /* 渐变替代纯色，光影更丰富 */
        opacity: 0;
        z-index: 1;
        pointer-events: none;
        -webkit-transition: opacity var(--img-transition-time) var(--img-transition-timing);
        transition: opacity var(--img-transition-time) var(--img-transition-timing);
    }

    /* ==============================================
   3. 高级特效2：高光扫过动效（悬浮时出现，超酷！）
   ============================================== */
    img::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient( to right, transparent 0%, var(--img-glow-color) 50%, transparent 100% );
        transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        opacity: 0;
        z-index: 2;
        pointer-events: none;
        -webkit-transition: opacity var(--img-transition-time) var(--img-transition-timing);
        transition: opacity var(--img-transition-time) var(--img-transition-timing);
    }

    /* 悬浮时显示渐变层+高光层，双重质感 */
    img:hover::after {
        opacity: 1;
    }

    img:hover::before {
        opacity: 0.3; /* 高光半透明，更显高级不刺眼 */
    }

/* ==============================================
   4. 特殊容器样式：沿用原有选择器，无需修改HTML
   ============================================== */
a img, .pic img, .logo img, .adv_image img, .brand img {
    border: none;
    vertical-align: middle;
}

/* ==============================================
   5. 核心交互：悬浮“抬起+提亮+饱和”特效（超立体）
   ============================================== */
img:hover {
    /* 立体效果：双层阴影+缩放+上移，模拟“抬起” */
    box-shadow: var(--img-hover-shadow);
    -webkit-transform: scale(var(--img-base-scale)) translateY(var(--img-base-y));
    transform: scale(var(--img-base-scale)) translateY(var(--img-base-y));
    opacity: var(--img-hover-opacity);
    /* 色彩优化：提亮+提高饱和度，视觉更鲜艳通透 */
    filter: brightness(var(--img-brightness-hover)) saturate(var(--img-saturate-hover)) contrast(1.02);
    -webkit-filter: brightness(var(--img-brightness-hover)) saturate(var(--img-saturate-hover)) contrast(1.02);
    /* 光标提示：手型光标，明确交互 */
    cursor: pointer;
}

/* ==============================================
   6. 特殊图片样式：专属特效，更具针对性
   ============================================== */
/* 轮播图：超强阴影+仅上移，突出核心视觉 */
.mainlunbo img, #pic div img, .lunhuan_content img {
    -webkit-transform: none;
    transform: none;
    border-radius: var(--img-lunbo-radius);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

    .mainlunbo img:hover, #pic div img:hover {
        box-shadow: var(--img-lunbo-hover-shadow);
        -webkit-transform: translateY(var(--img-lunbo-y));
        transform: translateY(var(--img-lunbo-y));
        filter: brightness(1.04) saturate(1.06) contrast(1.03);
        -webkit-filter: brightness(1.04) saturate(1.06) contrast(1.03);
    }

/* LOGO：drop-shadow+高饱和，品牌更醒目 */
.logo img {
    box-shadow: none;
    -webkit-filter: drop-shadow(var(--img-base-shadow)) brightness(1) saturate(1);
    filter: drop-shadow(var(--img-base-shadow)) brightness(1) saturate(1);
}

    .logo img:hover {
        -webkit-transform: none;
        transform: none;
        -webkit-filter: drop-shadow(var(--img-logo-hover-shadow)) brightness(1.06) saturate(1.08);
        filter: drop-shadow(var(--img-logo-hover-shadow)) brightness(1.06) saturate(1.08);
        box-shadow: none;
    }

/* 页脚图片：柔和阴影，不抢焦点 */
.footer img:hover {
    -webkit-transform: none;
    transform: none;
    box-shadow: var(--img-footer-hover-shadow);
    filter: brightness(1.02) saturate(1.03) contrast(1.01);
    -webkit-filter: brightness(1.02) saturate(1.03) contrast(1.01);
}

/* 商品图片：最大上移+强阴影，突出交互 */
.pic img, .sale_top60 img {
    box-shadow: var(--img-base-shadow);
    position: relative;
    z-index: 1;
}

    .pic img:hover, .sale_top60 img:hover {
        box-shadow: var(--img-pic-hover-shadow);
        -webkit-transform: scale(var(--img-pic-scale)) translateY(var(--img-pic-y));
        transform: scale(var(--img-pic-scale)) translateY(var(--img-pic-y));
        z-index: 10;
        filter: brightness(1.05) saturate(1.07) contrast(1.03);
        -webkit-filter: brightness(1.05) saturate(1.07) contrast(1.03);
    }

/* 品牌图片：大缩放+强阴影，提升品牌质感 */
.brand img:hover {
    box-shadow: var(--img-brand-hover-shadow);
    -webkit-transform: scale(var(--img-brand-scale)) translateY(var(--img-lunbo-y));
    transform: scale(var(--img-brand-scale)) translateY(var(--img-lunbo-y));
    filter: brightness(1.05) saturate(1.07) contrast(1.03);
    -webkit-filter: brightness(1.05) saturate(1.07) contrast(1.03);
}

/* ==============================================
   7. 兜底样式：渐变+微动效，加载失败也高级
   ============================================== */
img:invalid {
    content: "";
    display: block;
    background: var(--img-loading-gradient);
    background-size: 200% 200%; /* 为动画做准备 */
    border: 1px dashed #e0e0e0;
    text-align: center;
    line-height: 220px;
    color: #777;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--img-base-radius);
    box-shadow: var(--img-base-shadow);
    -webkit-animation: gradientMove 3s ease infinite; /* 渐变滚动动画，超酷 */
    animation: gradientMove 3s ease infinite;
}

    img:invalid::before {
        content: "图片加载失败 😢";
        display: inline-block;
        transform: scale(1);
        -webkit-transform: scale(1);
        transition: transform 0.4s ease;
        -webkit-transition: transform 0.4s ease;
    }

    img:invalid:hover::before {
        transform: scale(1.08); /* 悬浮放大，更有交互感 */
        -webkit-transform: scale(1.08);
    }

/* 渐变滚动动画：加载失败图动态效果，不呆板 */
@-webkit-keyframes gradientMove {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}