/* === 移动端全局重置 === */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {

    width: 100%;

    min-height: 100vh;

    background: #f5f5f5;

    font-family: "Microsoft YaHei";

}



.shop_detail{

    background-color: #e3fdff;

    width: 100%;

    height: auto;

}

.main1{

    width: 100%;

    height: auto;

    background-color: #e3fdff;

}

.main1_banner {

    position: relative;

    width: 100%;

    overflow: hidden;

}



/* ========== 轮播内容区域 ========== */

.main1_banner .bd {

    width: 100%;

    overflow: hidden;           /* 配合slide插件的leftLoop效果 */

}



.main1_banner_ul {

    display: flex;              /* slide插件会自动计算宽度，flex作为基础布局兜底 */

}



.main1_banner_li {

    height: 66.33vw;

    flex-shrink: 0;             /* 防止轮播项被压缩 */

    width: 100%;                /* 单张占满容器宽度，vis:1时生效 */

}



.main1_banner_li a {

    display: block;

    width: 100%;

    height: 66.33vw;

}



.main1_banner_li img {

    width: 100%;

    height: 100%;               /* 高度自适应，保持图片原始比例 */

    display: block;             /* 消除img底部默认间隙 */

    object-fit: cover;

    object-position: bottom;

}



/* ========== 控制栏（按钮+指示点） ========== */

.main1_banner .hd {

    position: absolute;

    bottom: 12px;

    left: 0;

    right: 0;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;                  /* 按钮与指示点之间的间距 */

    pointer-events: none;       /* 让控制栏不遮挡图片点击 */

}



/* 恢复按钮和指示点的点击事件 */

.main1_banner .hd a,

.main1_banner .hd ul {

    pointer-events: auto;

}



/* ========== 左右切换按钮 ========== */

.main1_banner .hd .prev,

.main1_banner .hd .next {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.7);

    backdrop-filter: blur(4px);

    text-decoration: none;

    transition: all 0.2s ease;

    cursor: pointer;

    display: none;

}

.main1_banner .hd .prev{

    position: absolute;

    left: 0;

    bottom: 50px;

}

.main1_banner .hd .next{

    position: absolute;

    right: 0;

    bottom: 50px;

}

.main1_banner .hd .prev:hover,

.main1_banner .hd .next:hover {

    background: rgba(255, 255, 255, 0.95);

}



/* 用CSS绘制箭头图标，无需额外引入字体或图片 */

.main1_banner .hd .prev::before,

.main1_banner .hd .next::before {

    content: '';

    display: block;

    width: 8px;

    height: 8px;

    border-top: 2px solid #999;

    border-right: 2px solid #999;

}



.main1_banner .hd .prev::before {

    transform: rotate(-135deg);

    margin-left: 2px;           /* 视觉居中修正 */

}



.main1_banner .hd .next::before {

    transform: rotate(45deg);

    margin-right: 2px;          /* 视觉居中修正 */

}



/* ========== 指示点列表 ========== */

.main1_banner .hd .hd-list {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;

    font-size: 0;

}



/* slide插件自动生成的li指示点 */

.main1_banner .hd .hd-list li {

    width: 12px;

    height: 8px;

    background: rgba(255, 255, 255, 0.8);

    cursor: pointer;

    transition: all 0.3s ease;

}



/* 当前激活的指示点（slide插件会自动添加on类名） */

.main1_banner .hd .hd-list li.on {

    width: 20px;

    background: #7bd5b7;

}

.main1_tel{

    position: absolute;

    border-radius: 10px;

    padding: 10px 10px;

    background-color: #47c8c6;

    right: 10px;

    top: 215px;

}

.main1_tel a{

    color: #fff;

    padding: 10px 10px;

    font-size: 16px;

}

.main1_tel i{

    color: #fff;

    padding-right: 5px;

}



/* 主体卡片容器 */

.main2 {

    padding: 25px 10px 20px 10px;

    box-sizing: border-box;

    width: 100%;

    max-width: 700px;

}



.main2_info{

    width: 100% ;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 轻微阴影增加层次感 */

    background: linear-gradient(to right, #fff, #e3fdff);

    border: 2px solid #fff;

    border-radius: 12px;

    padding: 10px 10px;

}

.main21 {



    display: flex;

    flex-direction: row; /* 图片一列，其余一列 */

    align-items: flex-start;

    gap: 12px; /* 两列之间的水平间距 */

    position: relative;



}



/* === 第一列：图片 === */

.main21_img {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 65px; /* 图片列固定宽度 */

    flex-shrink: 0;

}



.main21_img img {

    width: 50px;

    height: 50px;

    border-radius: 8px;

    object-fit: cover;

    flex-shrink: 0;

}



.main21_des {

    flex: 1; /* 占剩余一列 */

    min-width: 0;

}



.main21_des h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 76px);
}



/* === 第二行：地址和距离 === */

.main21_des1{

    width: 100%;

    height: auto;

}

.main21_des_address {

    margin: 0;

    font-size: 12px;

    color: #666;

    display: flex;

    align-items: center;

    gap: 4px;

    line-height: 2;

}



.main21_des_address .iconfont {

    font-size: 14px;

    color: #94d1d0;

}



.main21_des_address span {

    margin-left: auto; /* 将距离推到最右侧 */

    color: #666666;

    white-space: nowrap;

}



/* === 第三行：评分 === */

.shop_rate {

    display: flex;

    align-items: center;

    gap: 6px;

}



.rate-box {

    display: inline-flex;

    align-items: center;

    line-height: 1;

}



.shop_rate .layui-rate {

    padding: 0;

    font-size: 0;

    display: inline-flex;

    align-items: center;

    line-height: 1;

}



.shop_rate .layui-rate li {

    display: inline-flex;

    align-items: center;

    line-height: 2;

}



.shop_rate .layui-rate li i.layui-icon {

    font-size: 14px;

    line-height: 2;

}



.rate_num {

    font-size: 16px;

    font-weight: 700;

    color: #ff9800;

}



/* === 第四行：商户标签 === */

.main21_tag {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 10px 0;

}



.main21_tag p {

    margin: 0;

    padding: 3px 10px;

    font-size: 12px;

    border-radius: 4px;

    white-space: nowrap;

    line-height: 2;

    background-color: rgba(0, 168, 198, 0.1);

    color: #00a8c6;

    width: calc((100% - 24px) / 4);

    text-align: center;

}

.main21_daohang{

    position: absolute;

    top: 0;

    right: 0;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    gap: 16px;

}

/* === 操作按钮区：靠右显示，两个按钮一行，图标在上文字在下 === */

.main23 {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 20px;

    margin-top: 12px;

}



.main21_daohang a {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: #47c8c6;

}



.main21_daohang a i {

    font-size: 14px;

    line-height: 25px;

    color: #000000;

    width: 25px;

    height: 25px;

    border-radius: 50%;

    background-color: #e0e5e5;

    text-align: center;

}



.main21_daohang a p {

    margin: 10px 0 0;

    font-size: 10px;

    color: #666;

    line-height: 1;

}









.main3{

    width: 100%;

    padding: 10px 10px;

    height: auto;

    background-color: #e3fdff;

}

.main3_shop_des{
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
    line-height: 30px;
    text-indent: 2em;
}

.main3_shop_des p{

    font-size: 16px;

    line-height: 2;

    text-indent: 2em;

}



.main4{

    width: 100%;

    padding: 20px 10px 100px 10px;

    height: auto;

    background-color: #e3fdff;

}

.main4_list {

    width: 100%;

    box-sizing: border-box;

    margin-top: 20px;

}



/* ========== 网格布局（一行两列） ========== */

.main4_ul {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    list-style: none;

    margin: 0;

    padding: 0;

}



/* ========== 单个卡片 ========== */

.main4_li {

    height: 130px;

    position: relative;

    overflow: hidden;

    border-radius: 5px;

}



.main4_li a {

    height: 130px;

    display: block;

    text-decoration: none;

}



/* ========== 图片样式 ========== */

.main4_li img {

    width: 100%;

    height: 100%;               /* 高度自适应，保持原始比例 */

    display: block;             /* 消除img底部默认间隙 */

    object-fit: cover;          /* 若需固定高度可改为cover裁剪 */

}



/* ========== 悬浮文字（左下角） ========== */

.main4_li h3 {

    position: absolute;

    left: 10px;

    bottom: 10px;

    margin: 0;                  /* 清除h3默认外边距，确保定位精准 */

    font-size: 14px;

    font-weight: 600;

    color: #ffffff;

    line-height: 1.3;

    max-width: calc(100% - 20px); /* 防止文字过长溢出右侧 */

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); /* 深色阴影增强可读性 */

    pointer-events: none;       /* 避免文字遮挡a标签的点击区域 */

}



/*底部操作栏*/

.gd-footer {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    background: #fff;

    border-top: 1px solid #e5e5e5;

    height: 52px;

}



.gd-footer .gd-f-item {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    color: #666;

    text-decoration: none;

}



.gd-footer .gd-f-item i {

    font-size: 20px;

    color: #333;

}



.gd-footer .gd-buy {

    flex: 1.5;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #47c8c6;

    color: #fff;

    font-size: 15px;

    text-decoration: none;

}