@charset "utf-8";
/* CSS Document */

.wrapper { width: 1020px; margin: 0 auto; }
.title { text-align: center; margin-top:-100px; line-height:50px; font-size: 20px; }
.title_tex { line-height:30px; }
.clear { clear: both; }
.delhh { margin-top: 0px; }
.errorbox { height: 300px; background: #E1F7F2; line-height: 2em; }
.errorbox .wrapper { width: 1100px; margin: 0 auto; padding: 50px 0; background: url(../images/error.gif) no-repeat left center; padding-left: 70px; }
.successbox { height: 300px; background: #E1F7F2; line-height: 2em; }
.successbox .wrapper { width: 1100px; margin: 0 auto; padding: 50px 0; background: url(../images/right.gif) no-repeat left center; padding-left: 70px; }
.header { height: 90px; margin-top: 20px; }
/*.header .logo { width: 55px; height: 75px; display: block; background: url(../images/logo.png) no-repeat;}*/ 
/*.header .logo a { width: 55px; height: 75px; display: block; text-indent: -521px; }*/
/* Logo 样式 */

.logo { margin-right: 20px; /* 根据需要调整间距 */ float: left; }
.logo img {width:80px; /* 根据需要调整高度 */ vertical-align: middle;/* 使 logo 垂直居中 */ }
/* 导航栏样式 */

nav { float: left; float: left; margin: 30px 20px 0px; width: 880px; font-size: 16px; }
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; }
.nav-menu>li { position: relative; }
.nav-menu>li>a { display: block; color: #535353; text-align: center; /*padding: 14px 15px;*/ margin: 14px 16px; text-decoration: none; }
/* 下拉菜单样式 */

.dropdown-menu { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }
.dropdown-menu li { list-style: none; }
.dropdown-menu li a { color: #535353; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-menu li a:hover { background-color: #f1f1f1; }
/* 显示下拉菜单 */

.dropdown:hover .dropdown-menu { display: block; }
/* 用户操作链接样式 */

.user-actions { margin-left: auto; /* 将用户操作链接推到右侧 */ display: flex; align-items: center; }
.user-actions a { margin-left: 15px; /* 根据需要调整间距 */ color: white; /* 根据需要调整颜色 */ text-decoration: none; /* 去除下划线 */ display: flex; align-items: center; }
.user-actions a i { font-size: 16px;/* 图标大小 */ }
/* 广告轮播样式 */

.banner-container { position: relative; }
/* 增加过渡效果 */

.banner-slide { display: none; width: 100%; transition: opacity 1s ease-in-out; }
.banner-slide.active { display: block; opacity: 1; }
.banner-slide img { width: 100%; height: auto; }
/* 优化按钮样式 */

.prev, .next { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: auto; padding: 16px; color: white; font-weight: bold; font-size: 24px; /* 增加字体大小 */ transition: background-color 0.3s ease; border-radius: 40%; /* 圆形按钮 */ background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */ border: none; outline: none; }
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev { left: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }
.banner-indicators { text-align: center; position: absolute; bottom: 20px; width: 100%; }
.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.dot:hover { background-color: #717171; }
.dot.active { background-color: #717171; }
/*banner结束*/



.shop_search { padding-top: 75px; }
.shop_search form { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }
.shop_search input[type="search"] { padding: 12px; border: 1px solid #ccc; border-radius: 4px; width: 800px; margin-right: 10px; font-size: 16px; }
.shop_search button { padding: 10px 35px; background-color: #00716a; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 18px; }
.shop_search button:hover { background-color: #005a54; }
/* 店铺开始 */

.shop { width: auto; height: 346px; display: block; background: url(../images/search_bg.png) no-repeat center center; /* 背景图像居中 */ background-size: cover; /* 使背景图像覆盖整个元素 */ background-color: #d9ecdb; }
.shop1 { width: auto; height: 346px; display: block; background: url(../images/search_bg1.png) no-repeat center center; /* 背景图像居中 */ background-size: cover; /* 使背景图像覆盖整个元素 */ background-color: #d9ecdb; }
.shop_list { border-top: 2px solid #959695; /* 上边框，2像素宽，实线，灰色 */ margin-top: 20px; }
.shop_list ul { margin-top: 20px; list-style: none; /* 去掉默认的列表样式 */ padding: 0;/* 去掉默认的内边距 */ }
.shop_list ul li { float: left; width: 300px; height: 524px; margin: 17px; background-color: #f4f4f4; /* 设置背景颜色 */ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ border-radius: 3%;/* 将图片设置为圆形 */ }
.shop_list ul li a:hover { color: #00716a; }
.shop_list ul li dd { width: 285px; height: 285px; padding: 10px;/* 根据需要调整内边距 */ }
.shop_list ul li dd img { width: 90%; height:258px; /* 根据需要调整图片大小 */ padding: 13px; border-radius: 50%; /* 将图片设置为圆形 */ object-fit: cover; /* 确保图片比例正确，不被拉伸 */ transition: filter 2s ease; /* 添加过渡效果 */ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); }
.shop_list ul li dd img:hover { transform: scale(1.01);/* 鼠标经过时放大1.1倍 */ }
.shop_list ul li h2 { font-size: 18px; /* 设置标题字体大小 */ text-align: center; /* 设置标题的外边距 *//* line-height: 30px; */}
.shop_list ul li span { display: inline-block; margin: 15px 0px 0px; text-align: center; line-height: 25px; width: 289px; height: 25px; background: url(../images/shop_list_ul_li_span.jpg) no-repeat; color: #fff; }
.shop_list ul li p { font-size: 14px; /* 设置段落字体大小 */ line-height: 1.5; /* 设置行高 */ padding:0 20px 5px 20px;/* 设置外边距 */ overflow: hidden; /* 隐藏超出部分 */ display: -webkit-box; /* 使用 WebKit 的 box 模型 */ -webkit-line-clamp: 3; /* 限制显示的行数 */ -webkit-box-orient: vertical; /* 垂直排列内容 */ }
.shop_list ul li dl .cart-icon { width: 46px; height: 39px; cursor: pointer; float: right; margin-right: 20px; background: url(../images/guo.png) no-repeat; }
.cart-icon1 { position: relative; /* 相对定位 */ right: -60px; width: 46px; display: flex; justify-content: center; align-items: center; background: url(../images/guo.png) no-repeat; }
.more { width: 200px; height: 40px; line-height: 40px; margin-top: 20px; background-color: #007a37; /* 背景颜色 */ text-align: center; border-radius: 8px; border: 2px solid #007a37; }
.more span { font-size: 14px; color: white; /* 文字颜色 */ border: none;/* 去掉边框 */ }
 .more span:a {
 color: #fff;
}
.more span:hover { width: 200px; border-radius: 5%; background-color: #005a54; /* 悬停时的背景颜色 */ display: block; }
/* 关于君子兰开始 */

.about_bg { width: auto; height: 307px; display: block; background: url(../images/about_bg.jpg) no-repeat center center; /* 背景图像居中 */ background-size: cover; /* 使背景图像覆盖整个元素 */ background-color: #d9ecdb; }
.shop_about_bg { background-color: #d9ecdb; width: auto; /*height: 1200px;*/ padding: 35px; }
.huangxian { border: #959695 0.5px solid; margin: 20px; }
.more1 { width: 46px; height: 39px; line-height: 39px; float: right; text-align: center; margin-right: 10px; background: url(../images/more1.png) no-repeat center center; }
.more1 a { color: #fff; }
.footer_bg { width: auto; height: 168px; display: block; background: url(../images/footer_bg.png) no-repeat center center; /* 背景图像居中 */ background-size: cover; /* 使背景图像覆盖整个元素 */ background-color: #778186; }
.footer_bg1 { width: auto; height: 396px; display: block; background: url(../images/footer_bg1.png) no-repeat center center; background-size: cover; background-color: #778186; }
.footer_about_bg { background-color: #778186; width: auto; }
.footer { display: flex; justify-content: center; align-items: center; width: 1200px; padding: 30px 0; margin-top: 40px; background-color: #778186; color: white; border-top: 1px solid #616970;/* 上边框，2像素宽，实线，灰色 */ }
.footer span { width: 20px; height: 220px; border-right: 1px solid #fff; }
.footer .links { margin-left: 25px; display: flex; flex-direction: column; align-items: flex-start; font-size: 12px; }
.footer .links a { text-decoration: none; color: inherit; margin-bottom: 5px; }
.footer .links a:hover { text-decoration: underline; }
.search-form { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }
.footer_about_bg h2 { margin-bottom: 20px; text-align: center; color: #fff; font-size: 1.2rem; font-weight: inherit; }
.search-form form { display: flex; align-items: center; }
.search-form input[type="email"] { padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 300px; margin-right: 10px; }
.search-form button { padding: 10px 20px; background-color: #00716a; color: white; border: none; border-radius: 4px; cursor: pointer; }
.search-form button:hover { background-color: #005a54; }
/* 版权说明样式 */

.copyright { background-color: #222; color: white; text-align: center; padding: 10px; }
.copyright p { margin: 0; }
/*产品列表样式*/

.product-list { display: flex; flex-wrap: wrap; justify-content: space-around; margin-top: -100px; }
.product-item { width: calc(25% - 10px); /* 减少宽度以减小间距 */ margin: 5px; /* 减少外边距 */ text-align: center; position: relative; /* 添加相对定位 */ }
.product-item img { width: 100%; height: auto; border-radius: 50%; /*border: 2px solid white; *//* 内层白色边框 */ padding: 2px; /* 增加内层边框与图片之间的间距 *//* box-shadow: 0 0 0 2px #bbb;*/ /* 外层灰色边框 */ transition: transform 0.3s ease; /* 添加过渡效果 */ }
.product-item img:hover { transform: rotate(20deg); /* 鼠标经过时旋转10度 */ }
.product2-item { width: calc(12% - 10px); /* 减少宽度以减小间距 */ margin: 5px; /* 减少外边距 */ text-align: center; position: relative; /* 添加相对定位 */ }
.product2-item img { width: 100%; height: auto; border-radius: 50%; border: 2px solid white; /* 内层白色边框 */ padding: 2px; /* 增加内层边框与图片之间的间距 */ box-shadow: 0 0 0 2px #bbb; /* 外层灰色边框 */ transition: transform 0.3s ease; /* 添加过渡效果 */ }
.product2-item img:hover { transform: rotate(20deg); /* 鼠标经过时旋转10度 */ }
.product-info { padding: 10px; border-radius: 5px; margin-top: 10px; }
.product-info h3 { font-size: 1.3em; margin-bottom: 5px; }
.product-info p { font-size: 0.9em; color: #666; }
.badge { position: absolute; top: 190px; right: 15px; width: 45px; height: 45px; background-color: #d8e100; color: #3e3e3e; border-radius: 50%; font-size: 14px; font-weight: bold; padding: 6px; text-align: center; }
.product1-header { margin-top: 80px; text-align: center; height: 300px; width: 650px; }
.product1-header-text { font-size: 14px; font-weight: bold; margin-bottom: 20px; width: 230px; float: left; text-align: left; line-height: 28px; margin-left: 45px; }
.product1-header-text h1 { line-height: 30px; height: 40px; font-size: 22px; border-bottom: 1px solid #999; }
.header-img { float: left; width: 326px; height: auto; /*border-radius: 50%; box-shadow: 0 0 0 4px #6fbb6a;border: 2px solid white;*/padding: 2px;}
/**/


.product1-container { display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 200px; }
.product-card { width: 300px; margin: 20px; background-color: #f0fffb; border-radius: 10px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; margin-bottom: 200px;}
.product-card:hover { transform: translateY(-5px); }
.product2-card:hover { transform: translateY(-5px); }
.product2-container { margin-top: 200px; }
.product2-card { width: 295px; margin: 20px 20px 150px; background-color: #f0fffb; border-radius: 10px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; float: left; }
.product-image { position: relative; /* overflow: hidden; */ border-radius: 50%; }
.product-image img { width: 90%; height: 270px; border-radius: 50%; position: relative; top: -120px; box-shadow: 0 4px 8px #6fbb6a; }
.product-info1 { position: relative; margin-top: -100px; height: 250px; display: flex; flex-direction: column; align-items: center; }
.product-info1 h2 { border-bottom: 1px solid #999; padding: 10px; }
.product-info1 p { line-height: 30px; width: 230px; }
.price { background: #cff0de; display: flex; flex-direction: column; /* 垂直排列 */ justify-content: space-between; align-items: center; padding: 10px; width: 280px; margin-top: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.price span { font-size: 24px; font-weight: bold; }
.price p { font-size: 14px; color: #999; }
.buy-button { background-color: #e57373; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
.buy-button:hover { background-color: #c64a4a; }
/*购物车*/

.product3-card { display: flex; background-color: #e6f7e6; border-radius: 15px; margin: 20px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; width: auto; }
.product3-card:hover { transform: translateY(-5px); }
.product3-card img { width: 100px; height: 100px; object-fit: cover; border-radius: 10px; margin-right: 20px; }
.product3-info { width: 370px; }
.product3-info h3 { margin: 0; font-size: 1.5em; color: #333; }
.product3-info p { margin: 5px 0; font-size: 1.2em; color: #666; }
.product3-info input[type="number"] { width: 80px; margin-right: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.product3-info button { padding: 10px 40px; background-color: #008000; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }
.product3-info button:hover { background-color: #006400; }
/*文章相关*/

 .article-card { margin-bottom: 20px; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; }
.article-card:hover { transform: translateY(-5px); }
.article-card img { width: 100%; height: 200px; object-fit: cover; }
.article-card .card-body { padding: 20px; }
.article-card h5 { margin: 0; font-size: 1.5em; color: #333; }
.article-card p { margin: 10px 0; font-size: 1em; color: #666; }
.article-card .btn { background-color: #008000; color: white; border: none; border-radius: 5px; transition: background-color 0.3s ease; }
.article-card .btn:hover { background-color: #006400; }
.article-container { background-color: #f9f9f9; padding: 20px; margin: 20px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; }
.article-container:hover { transform: translateY(-5px); }
.article-container img { /*width: 100%; height: 400px;*/ object-fit: cover; border-radius: 10px; margin-bottom: 20px; }
.article-title { margin: 0; font-size: 2em; color: #333; font-weight: bold; }
.article-author { margin: 10px 0; font-size: 1em; color: #666; }
.article-content { font-size: 1em; color: #333; line-height: 1.6; }
.article-content p { margin-bottom: 15px; }
.article-content h2 { margin-top: 30px; font-size: 1.5em; color: #333; }
.article-content h3 { margin-top: 20px; font-size: 1.2em; color: #333; }
.article-content ul { margin-bottom: 15px; padding-left: 20px; }
.article-content li { margin-bottom: 5px; }
.article-content blockquote { margin: 20px 0; padding: 10px 20px; background-color: #e6f7e6; border-left: 5px solid #008000; }
.article-content blockquote p { margin: 0; font-style: italic; color: #666; }
.article-content pre { margin: 20px 0; padding: 10px; background-color: #f1f1f1; border-radius: 5px; overflow-x: auto; }
.article-content code { background-color: #f1f1f1; padding: 2px 4px; border-radius: 3px; }
.article-content a { color: #008000; text-decoration: none; }
.article-content a:hover { text-decoration: underline; }
.article-footer { margin-top: 30px; font-size: 1em; color: #666; }
.article-footer .btn { background-color: #008000; color: white; border: none; border-radius: 5px; transition: background-color 0.3s ease; padding: 10px 20px; }
.article-footer .btn:hover { background-color: #006400; }
/* 容器样式 */
.cart-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 15px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
/* 合计金额样式 */
.total-amount { flex: 1; text-align: right; font-size: 16px; }
.total-label { color: #666; margin-right: 8px; }
.total-number { color: #ff4444; font-weight: bold; font-size: 20px; }
/* 下单按钮样式 */
.checkout-btn { background: #07c160; color: white; border: none; border-radius: 25px; padding: 12px 35px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
.checkout-btn:hover { background: #06ad54; transform: scale(1.05); }
.checkout-btn:active { transform: scale(0.95); }

/* 响应式适配 */
@media (max-width: 480px) {
 .cart-footer {
 flex-direction: column;
 padding: 10px;
}
 .total-amount {
 text-align: center;
 width: 100%;
}
 .checkout-btn {
 width: 100%;
 padding: 15px;
}
}
.container { max-width: 1200px; margin: 0 auto; padding: 30px 20px; }
/* 商品主区域 */
.product-container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px; }
/* 商品相册 */
.product-gallery { position: relative; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.main-image { position: relative; width: 100%; height: 500px; cursor: crosshair; /*overflow: hidden;*/ border-radius: 8px; }
.magnifier { position: absolute; left:0; top:0; width: 150px; height: 150px; background: rgba(255, 255, 255, 0.3); border: 2px solid #fff; border-radius: 50%; pointer-events: none; display: none; }
.thumbnail-list { display: flex; gap: 15px; margin-top: 20px; }
.thumbnail { width: 70px; height: 70px; border-radius: 8px; cursor: pointer; transition: transform 0.3s ease; border: 2px solid transparent; }
.thumbnail.active { border-color: #007bff; transform: scale(1.1); }
/* 购买信息 */
.product-info3 { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.product-title { font-size: 2.2em; margin-bottom: 15px; color: #2c3e50; }
.price { font-size: 1.8em; color: #e74c3c; margin: 20px 0; }
.variant-select { width: 100%; padding: 12px; margin: 15px 0; border: 1px solid #ddd; border-radius: 6px; }
.quantity-control { display: flex; align-items: center; gap: 15px; margin: 20px 0; }
.quantity-btn { width: 40px; height: 40px; border: 1px solid #ddd; background: #f8f9fa; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; }
.quantity-btn:hover { background: #007bff; color: white; border-color: #007bff; }
.quantity-input { width: 60px; text-align: center; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
.cta-buttons { display: flex; gap: 15px; margin-top: 30px; }
.btn { flex: 1; padding: 16px 24px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; }
.btn-primary { background: #007bff; color: white; }
.btn-secondary { background: #2c3e50; color: white; }
/* 商品详情 */
.product-details { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); margin-bottom: 60px; }
.details-title { font-size: 1.8em; margin-bottom: 20px; color: #2c3e50; }
/* 推荐商品 */
.recommendations { padding: 30px 0; }
.recommendations-title { font-size: 1.5em; margin-bottom: 25px; color: #2c3e50; }
.recommendation-list { display: flex; gap: 25px; overflow-x: auto; padding-bottom: 20px; }
.recommendation-card { flex: 0 0 250px; background: #fff; border-radius: 12px; padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease; }
.recommendation-card:hover { transform: translateY(-5px); }
.recommendation-card a { color: #454545; text-decoration: none; }
.recommendation-image { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; }

/* 响应式设计 */
@media (max-width: 768px) {
 .product-container {
 grid-template-columns: 1fr;
}
 .main-image {
 height: 400px;
}
}
/* 新增放大区域样式 */
.zoom-container { position: absolute; left: calc(100% + 20px); top: 0; width: 500px; height: 500px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); overflow: hidden; display: none; z-index: 100; }
.zoom-image { position: absolute; width: 200%; height: 200%; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
/* 主容器 */
.order-container { margin-top:10px; display: grid; grid-template-columns: 1fr 350px; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 40px 0px 40px; }
/* 商品列表 */
 .product-section { background: var(--bg); padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow); }
.product-item4 { display: grid; grid-template-columns: 100px 1fr auto; gap: 20px; padding: 24px 0; border-bottom: 1px solid #eee; }
.product-thumbnail { width: 100px; height: 100px; border-radius: 8px; background: #e8f5e9; }
.product-thumbnail img { width: 100px; height: 100px; object-fit: cover; border-radius: 10px; margin-right: 20px; }
.product-info4 h3 { margin: 0 0 8px; color: var(--text); }
.product-price { font-weight: 600; color: var(--primary); font-size: 1.1em; }
/* 地址表单 */
.address-section { margin-top: 40px; background: var(--bg); padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
.input-field { margin-bottom: 16px; }
.input-field.full-width { grid-column: 1 / -1; }
input, select { width: 90%; padding: 12px; border: 2px solid #ddd; border-radius: var(--radius); transition: var(--transition); }
input:focus, select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1); }
/* 支付方式 */
 .payment-section { margin-top: 40px; background: var(--bg); padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow); }
.payment-methods { display: grid; gap: 16px; margin-top: 24px; }
.payment-card { display: flex; align-items: center; padding: 20px; border: 2px solid #eee; border-radius: var(--radius); cursor: pointer; transition: var(--transition); }
.payment-card.active { border-color: var(--primary); background: rgba(45, 106, 79, 0.05); }
.payment-card img { width: 50px; margin-right: 20px; }
/* 订单摘要 */
.order-summary { background: var(--bg); padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 100px; }
.summary-item { display: flex; justify-content: space-between; margin: 12px 0; }
.total { border-top: 2px solid var(--primary); padding-top: 16px; font-weight: 600; font-size: 1.2em; }
.confirm-btn { width: 100%; padding: 16px; background: var(--primary); color: white; border: none; border-radius: var(--radius); font-size: 16px; cursor: pointer; transition: var(--transition); margin-top: 24px; }
.confirm-btn:hover { opacity: 0.9; transform: translateY(-2px); }
 @media (max-width: 1024px) {
 .order-container {
 grid-template-columns: 1fr;
 padding: 0 20px;
}
 .order-summary {
 position: static;
 margin-top: 40px;
}
}
/*个人中心*/
    /* 主容器 */
    .member-container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
/* 用户信息头 */
    .profile-header { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 2rem; }
.avatar { width: 80px; height: 80px; border-radius: 50%; }
.user-info { flex: 1; }
.user-name { font-size: 1.5rem; margin-bottom: 0.5rem; }
.user-level { color: var(--accent); font-weight: 500; }
/* 数据概览 */
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.stat-card { background: white; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.stat-title { color: #64748b; margin-bottom: 0.5rem; }
.stat-value { font-size: 1.8rem; font-weight: 600; }
/* 功能导航 */
    .nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; }
.nav-card { background: white; padding: 1.5rem; border-radius: 1rem; transition: transform 0.2s; cursor: pointer; text-align: center; }
.nav-card:hover { transform: translateY(-3px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.nav-icon { font-size: 2rem; color: var(--primary); margin-bottom: 1rem; }
/* 订单列表 */
    .order-list { background: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.order-item { padding: 1.5rem; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 100px 2fr 1fr 1fr; align-items: center; gap: 1rem; }
.order-status { padding: 0.25rem 0.5rem; border-radius: 0.5rem; font-size: 0.9rem; text-align: center; }
.status-pending { background: #fff4e6; color: #d9480f; }
.status-shipped { background: #e3fafc; color: #0b7285; }
.status-completed { background: #d3f9d8; color: #2b8a3e; }
.nav-card h3 { font-size: 16px; }
/*收货地址*/
 /* 主容器 */
    .plant-container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
/* 生态化标题 */
    .plant-header { text-align: center; margin-bottom: 3rem; position: relative; }
.plant-header h1 { font-size: 2.5rem; color: var(--text); display: inline-block; padding: 0 2rem; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%232e7d32"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m4 16h-3v-6h3v6m-5-6H8v6h3v-6m-3-4h3V8H8v4m5 0h3V8h-3v4m-5 5H5v-1h5v1m9-5h-5v-1h5v1z"/></svg>') left/contain no-repeat; }
/* 植物卡片网格 */
    .plant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; padding: 1rem; }
/* 生态地址卡片 */
    .plant-card { background: white; border-radius: 16px; padding: 1.5rem; position: relative; box-shadow: 0 8px 16px rgba(46, 125, 50, 0.1); transition: transform 0.3s ease; }
.plant-card:hover { transform: translateY(-5px); }
/* 默认地址标识 */
    .leaf-default { position: absolute; top: -10px; right: -10px; width: 40px; height: 40px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
 .leaf-default::after {
 content: '🌿';
 font-size: 1.2rem;
}
/* 地址内容 */
    .plant-content { margin: 1rem 0; }
.plant-content div { margin: 0.5rem 0; display: flex; align-items: center; }
.plant-icon { width: 24px; margin-right: 1rem; filter: hue-rotate(15deg); }
/* 自然风格按钮组 */
    .plant-actions { display: flex; gap: 1rem; border-top: 2px dashed var(--border); padding-top: 1.5rem; }
.plant-btn { flex: 1; padding: 0.75rem; border: none; border-radius: 8px; background: var(--secondary); color: white; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.plant-btn:hover { background: var(--primary); box-shadow: 0 4px 8px rgba(46, 125, 50, 0.2); }
/* 添加地址卡片 */
    .add-card { background: linear-gradient(145deg, var(--bg) 0%, white 100%); border: 2px dashed var(--primary); display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; }
.add-card:hover { background: linear-gradient(145deg, white 0%, var(--bg) 100%); }
.plus-icon { font-size: 3rem; color: var(--primary); margin-bottom: 1rem; }

    /* 响应式适配 */
    @media (max-width: 768px) {
 .plant-grid {
 grid-template-columns: 1fr;
}
 .plant-btn {
 padding: 0.5rem;
 font-size: 0.9rem;
}
}
/* 新增弹窗样式 */
.plant-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(46, 125, 50, 0.5); display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); z-index: 1000; animation: soilFade 0.3s; }
.modal-root { background: var(--bg); border-radius: 20px; padding: 2rem; width: 90%; max-width: 500px; transform: scale(0.9); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 20px rgba(46, 125, 50, 0.2); }
.plant-modal.show .modal-root { transform: scale(1); opacity: 1; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; border-bottom: 2px dashed var(--border); padding-bottom: 1rem; }
.modal-header h2 { color: var(--text); font-size: 1.8rem; }
.modal-close { font-size: 2rem; cursor: pointer; transition: transform 0.3s; }
.modal-close:hover { transform: rotate(90deg); }
/* 表单元素 */
.leaf-label { display: flex; align-items: center; margin-bottom: 0.5rem; color: var(--text); }
.label-icon { width: 24px; margin-right: 8px; }
.vine-input, .vine-select, .vine-textarea { width: 100%; padding: 0.8rem; border: 2px solid var(--border); border-radius: 10px; background: white; transition: all 0.3s; }
.vine-input:focus, .vine-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1); }
.select-vines { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* 自定义复选框 */
.soil-checkbox { display: flex; align-items: center; cursor: pointer; }
.hidden-checkbox { position: absolute; opacity: 0; }
.checkmark { display: inline-block; width: 24px; height: 24px; margin-right: 8px; border: 2px solid var(--border); border-radius: 6px; text-align: center; transition: all 0.3s; }
.hidden-checkbox:checked + .checkmark { background: var(--secondary); border-color: var(--primary); }
/* 按钮样式 */
.modal-actions { display: flex; gap: 1rem; margin-top: 2rem; }
.moss-btn, .bloom-btn { flex: 1; padding: 1rem; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s; }
.moss-btn { background: var(--border); color: var(--text); }
.bloom-btn { background: var(--primary); color: white; box-shadow: 0 4px 6px rgba(46, 125, 50, 0.2); }
.bloom-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(46, 125, 50, 0.3); }
 @keyframes soilFade {  from {
background: rgba(46, 125, 50, 0);
}
to { background: rgba(46, 125, 50, 0.5); }
}


/* 商家信息 */
.store-profile{background:white;padding:2rem;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.05);margin-bottom:2rem}
.store-header{display:flex;align-items:center;gap:20px;margin-bottom:1.5rem}
.store-logo{width:300px;border-radius:50%;object-fit:cover}
.store-p{width:100%;height:240px;padding:30px;line-height:35px}


/*分页*/

.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:24px auto;max-width:100%}
.pagination{display:flex;gap:8px;margin:24px 0}
.page-item{border-radius:6px;transition:all 0.3s ease;border:1px solid #e4e7ed;background:white;min-width:36px;display:flex;align-items:center;justify-content:center}
.page-link{color:#606266;text-decoration:none;padding:8px 12px;font-size:14px;transition:all 0.2s}
.page-item.active{background:linear-gradient(135deg,#409eff,#8b5cf6);border-color:transparent}
.page-item.active .page-link{color:white}
.page-item:not(.active):hover{background:#f5f7fa;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.page-item.disabled{opacity:0.6;pointer-events:none;background:#f5f7fa}
@media (max-width:768px){.pagination{flex-wrap:wrap;justify-content:center}
.page-item.numbar{display:none}
.page-link{padding:6px 10px}
}.text-secondary{color:#909399 !important;font-size:14px;padding:32px;background:#f8f9fa;border-radius:8px}