/* --- 横排四图容器 --- */
.ecms-gallery-row {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* 图片间距 */
    margin: 20px 0;
}
.rounded-img {
  /* 设置圆角半径，数值越大角越圆 */
  border-radius: 12px; 
}

/* --- 单个图片项 --- */
.ecms-gallery-item {
    flex: 1; /* 均分宽度 */
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    background-color: #f0f0f0; /* 加载占位色 */
    aspect-ratio: 4 / 3; /* 强制统一宽高比，防止变形 */
}

/* --- 图片本身 --- */
.ecms-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例填充，裁剪多余部分 */
    transition: transform 0.5s ease;
    display: block;
}

/* --- 悬停特效 --- */
.ecms-gallery-item:hover {
    box-shadow: 0 8px 20px rgba(217, 48, 37, 0.2); /* 红色阴影 */
    transform: translateY(-3px);
}

.ecms-gallery-item:hover .ecms-gallery-img {
    transform: scale(1.1); /* 图片轻微放大 */
}
/* 详情与地图 */
        .ecms-store-content, .ecms-map-box, .ecms-nav-box { background: #fff; padding: 20px 0px 15px;; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 20px; }
        .ecms-article-body { line-height: 1.8; color: #444; }
        .ecms-map-container { width: 100%; height: 350px; background: #f0f0f0; border-radius: 4px; }
        
 /* 1. 父容器：必须设置为 relative，作为子元素定位的参考系 */
        .image-container {
            position: relative;
            display: inline-block; /* 让容器宽度自适应图片大小 */
            max-width: 100%;       /* 确保响应式布局下不溢出 */
        }

        /* 2. 原图片：设置为块级元素，消除底部间隙 */
        .original-img {
            display: block;
            width: 100%;           /* 或者固定宽度，如 500px */
            height: auto;
        }

        /* 3. 水印图片：绝对定位到右下角 */
        .watermark-img {
            position: absolute;
            bottom: 10px;          /* 距离底部 10px */
            right: 10px;           /* 距离右侧 10px */
            width: 100px;          /* 设置水印大小，根据实际需求调整 */
            height: auto;
            opacity: 0.6;          /* 设置透明度，避免完全遮挡原图 */
            z-index: 10;           /* 确保水印在原图之上 */
            pointer-events: none;  /* 关键：让鼠标事件穿透水印，不影响原图点击 */
        }

/* --- 响应式适配 --- */
@media (max-width: 900px) {
    .ecms-gallery-row {
        flex-wrap: wrap; /* 允许换行 */
    }
    .ecms-gallery-item {
        flex: 0 0 calc(50% - 8px); /* 平板/小屏显示两列 */
    }
}

@media (max-width: 480px) {
    .ecms-gallery-item {
        flex: 0 0 100%; /* 手机端显示单列 */
        aspect-ratio: 16 / 9; /* 手机端改为宽屏比例 */
    }
}