* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
}
:root {
    --primary-blue: #2b83b9;
    --primary-green: #32b88e;
    --text-white: #ffffff;
}
@font-face {
    font-family: 'Montserrat';
    font-weight: normal;
	font-style: normal;
    src: url('../fonts/Montserrat.otf') format('woff2');
}

/* 头部导航容器 */

a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
input{-webkit-appearance:none;border-radius: 0; border: 0; outline: none;width: 100%;}
textarea{-webkit-appearance:none;border-radius: 0;}

/* ===== Header ===== */
.site-header{
  background:linear-gradient(180deg,#1d8fc7 0%,#1985b8 100%);
  position:relative;z-index:100;
}
.header-inner{
  max-width:1280px;margin:0 auto;padding:0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.logo{
    font-family: 'Montserrat', sans-serif;
  font-size:28px; color:#1b4436;
  letter-spacing:0;line-height:1;flex-shrink:0; text-transform:none ;
}
.logo img{width: 100px; display: inline-block; vertical-align: middle; padding-right: 5px;}
.hamburger{
  display:none;background:transparent;border:none;color:#fff;
  font-size:26px;cursor:pointer;padding:6px 10px;line-height:1;
}

/* ===== Navigation ===== */
.main-nav{display:flex;align-items:center;gap:36px}
.nav-item{position:relative}
.nav-link{
  color:#fff;font-size:13px;letter-spacing:1.5px;
  padding:45px 0;display:inline-flex;align-items:center;gap:12px;
  cursor:pointer;transition:opacity .2s;
  background:none;border:none;font-family:inherit;
}
.nav-link:hover{opacity:.85}
.nav-link .arrow{font-size:11px;transition:transform .3s}
.nav-item.open>.nav-link{opacity:1}
.nav-item.open>.nav-link .arrow{transform:rotate(180deg)}
.nav-item::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px}

.request-btn{
  background:transparent;border:1.5px solid #25bea1;border-radius:30px;
  padding:10px 32px;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:1.5px;
  transition:background .25s;font-family:inherit;
}
.request-btn:hover{background:#25bea1}
.request-btn .bell{font-size:16px}

/* ===== Search trigger ===== */
.search-toggle{
  background:#fff;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;
  width:38px;height:38px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:#000;cursor:pointer;transition:background .25s,transform .2s;
}
.search-toggle:hover{background:rgba(255,255,255,68);transform:scale(1.04)}

/* ===== Search overlay ===== */
.search-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.8);
  display:none;align-items:flex-start;justify-content:center;
  padding:14vh 20px 40px;
}
.search-overlay.open{display:flex}
.search-modal{width:100%;max-width:720px;position:relative}
.search-close{
  position:absolute;top:-48px;right:0;
  background:transparent;border:none;color:#fff;font-size:32px;line-height:1;
  cursor:pointer;opacity:.85;padding:4px 6px;font-family:inherit;
}
.search-close:hover{opacity:1}
.search-field{
  display:flex;align-items:center;gap:14px;margin:0;
  background:#fff;border-radius:8px;padding:14px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.search-field .ico{
  color:#1d8fc7;flex-shrink:0;display:flex;
  background:transparent;border:none;padding:0;cursor:pointer;
  transition:color .2s,transform .2s;font-family:inherit;
}
.search-field .ico:hover{color:#26c281;transform:scale(1.12)}
.search-field .ico:active{transform:scale(.96)}
.search-hint{
  margin:12px 4px 0;color:rgba(255,255,255,.85);font-size:13px;
  min-height:18px;opacity:0;transition:opacity .25s;
}
.search-hint.show{opacity:1}
@keyframes fieldShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}
  75%{transform:translateX(7px)}
}
.search-field.shake{animation:fieldShake .34s ease}

/* Flash target item */
.mega-cat a,.sub-panel li a,.dropdown li a{transition:background .25s,box-shadow .25s,padding .2s}
.mega-cat a.is-target,.sub-panel li a.is-target,.dropdown li a.is-target{
  background:#26c281;color:#fff;
  box-shadow:0 0 0 3px rgba(38,194,129,.35);
  border-radius:4px;outline:none;
}

/* ===== Dropdown single column ===== */
.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#1d8fc7;min-width:240px;display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:6px;
}
.nav-item.open>.dropdown{display:block}
.dropdown li a{
  display:block;padding:11px 24px;color:#fff;font-size:12px;
  transition:background .2s,padding .2s;
}
.dropdown li a:hover{background:rgba(255,255,255,.12);padding-left:30px}

/* ===== PRODUCTS mega flyout menu ===== */
.mega-menu{
  position:absolute;top:100%;left:-24px;transform:none;
  width:250px;
  background:#1d8fc7;display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:6px;
}
.nav-item.open>.mega-menu{display:block}
.mega-cats{width:250px}
.mega-cat>a{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;color:#fff;font-size:12px;
  cursor:pointer;transition:background .2s,padding .2s;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mega-cat:last-of-type>a{border-bottom:none}
.mega-cat>a:hover{background:rgba(255,255,255,.1)}
.mega-cat .chev{font-size:14px;opacity:.9;transition:transform .25s}
.mega-cat.active{background:#26c281}
.mega-cat.active .chev{transform:translateX(4px)}

.mega-subs{
  display:none;
  position:absolute;left:100%;top:0;
  width:320px;
  background:#1a82b6;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:top .16s ease;
}
.mega-menu.has-panel .mega-subs{display:block}
.sub-panel{display:none}
.sub-panel.active{display:block;animation:slideIn .18s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.sub-panel .panel-title{
  color:#fff;padding:16px 24px;font-size:13.5px;font-weight:600;
  background:rgba(0,0,0,.14);letter-spacing:.4px;
}
.sub-panel li a{
  display:block;padding:16px 20px;color:#fff;font-size:12px;
  transition:background .2s,padding .2s;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sub-panel li:last-child a{border-bottom:none}
.sub-panel li a:hover{background:#26c281;padding-left:22px}
@media (max-width:1100px){
  .mega-subs{width:270px}
}

/* ===== Breadcrumb ===== */
.bread_bar{font-size: 14px;background-color: #ffffff; padding: 0; box-shadow: 0em 0.15em 2em rgba(0,0,0,0.15);}
.breadcrumb{
  max-width:1280px;margin:0 auto;padding:15px 22px;
  color:#444;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.breadcrumb a{transition:color .2s}
.breadcrumb a:hover{color:#1d8fc7}
.breadcrumb .sep{color:#bbb}

/* ===== Main Content ===== */
.content{
  max-width:1280px;margin:0 auto;padding:45px 32px 60px;
}
.bottles-card{
  background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);min-height:460px;
  display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(135deg,#fff 0%,#f0f4f8 100%);
}
/* ===== 首页产品图 ===== */
.card-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:52px;
    max-width:100%;
    margin:0 auto;
  }
  .item-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:4px;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    cursor:pointer;
    transition: all 0.25s ease;
  }
  .item-card:hover{
    box-shadow:0 6px 22px rgba(0,0,0,0.16);
  }
  .img-box{
    width:100%;
    overflow:hidden;
    background:#fff;
  }
  .img-box img{
    width:100%;
    display:block;
    transition:transform 0.3s ease;
  }
  .item-card:hover .img-box img{
    transform:scale(1.05);
  }
  .text-block{
    background:#ffcc00;
    padding: 20px;
    transition:background 0.25s ease;
  }
  .item-card:hover .text-block{
    background:#ffb300;
  }
  .text-block p{
    font-size:18px;
    line-height:1.2;
    color:#000000;
    font-weight:400;
    text-align: center;
  }

  /* 内容页代码 */
.entry-featured {
    border-bottom: 1px solid #ddd;
    box-shadow: 4px 2px 4px -4px #0002, -4px 2px 4px -4px #0002;
}
.entry-thumb {
    display: block;
    position: relative;
    background-color: #000;
}
.entry-thumb img{
    max-width: 100%;
    width: 100%;
    transition: opacity .75s ease;
}
.entry-wrap {
    display: block;
    padding: 42px 50px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 .15em .35em #0002;
}
.entry-title {
    margin: 0;
    font-size: 165%;
    line-height: 1.05;
}
.entry-about{
    font-size: 13px;  
     line-height: 26px; 
    padding-top: 18px; font-weight: 200; color: #444; overflow: hidden;
}
.entry-about strong{font-size: 16px; padding: 15px 0; color: #000; display: block;}
.entry-about p{padding: 6px 0;}
.entry-contact{
    font-size: 16px;  
     line-height: 42px; 
    padding:38px 0 60px; font-weight: 200; color: #444; overflow: hidden;
}
.entry-contact h3{font-size: 20px; font-weight: bold;}

.entry-product{
    font-size: 14px;  
     line-height: 30px; 
    padding 0; font-weight: 200; color: #444; overflow: hidden;
}
.product {width: 100%; padding-top: 20px; overflow: hidden;}
.product ul{display: flex;align-items: center;flex-wrap: wrap;margin-bottom: -2%;margin-left: -2%;margin-top: .2rem;}
.product li{width: 31.333%;position: relative;transition: all .4s;margin-bottom: 2%;margin-left: 2%;background: #ffcc00;text-align: center;
    transition: all .3s;border-radius: 4px;overflow: hidden;}
.product li:hover{transform: translateY(-.05rem);box-shadow: 0 0 .1rem rgba(0, 0, 0, .1);}
.product li figure{padding-bottom: 85%;}
.product li p{padding:15px 0; font-size: 14px;}
.product li a:hover{text-decoration: none;}

.figure{display: block;height: 0;overflow: hidden;position: relative;}
.figure img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;transition: all .5s;}

.fenye{margin-top: 30px; overflow: hidden;}
.fenye ul{font-size: 0px;text-align: center;}
.fenye li{display: inline-block;font-size: 16px;text-align: center;margin:0 6px;background: #777; overflow: hidden;}
.fenye li a{display: flex;width: 32px;height: 32px;align-items: center;justify-content: center;color: #fff;}
.fenye li a:hover{text-decoration: none;background: #1b4436;color: #FFF;}
.fenye li.current a{background: #ffcc00;color: #FFF;}
.fenye li:first-child a:hover{background: #1b4436;color: #fff;}
.fenye li:last-child a:hover{background: #1b4436;color: #fff;}
.fenye li i{font-size:13px;}

.entry-product h3{font-size: 22px; font-weight: bold; padding-bottom: 22px; display: block;}

/* Request */
.form-wrap {
    max-width: 88%;
}
.form-wrap h3 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 32px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-full {
    grid-column: 1 / -1;
}
label {
    font-size: 14px;
    margin-bottom: 8px;
}
label span {
    color: #000;
}
.form-wrap input[type="text"],
.form-wrap input[type="email"],
.form-wrap textarea {
    border: 1px solid #d8dde6;
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    background: #f5f5f8;
}
.form-wrap input:focus,
.form-wrap textarea:focus {
    border-color: #6699cc;
}
.form-wrap textarea {
    min-height: 86px;
    resize: vertical;
}
.hint-text {
    font-size: 14px;
    color: #777;
    margin-bottom: 6px;
}
.privacy-text {
    margin: 24px 0 32px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}
.privacy-text a {
    color: #0066cc;
    text-decoration: none;
}
.submit-btn {
    background-color: #ff7043;
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.submit-btn:hover {
    background-color: #f4511e;
}

/* 手机适配 */
@media (max-width:900px) {
    .form-wrap {
        max-width: 100%;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .form-wrap h3 {
        font-size: 30px;
    }
   
}

/* footer */
  footer{
    background-color: #95a0a6; 
    padding: 32px 0 18px;
    box-shadow: 0em -0.35em 2em 0px rgba(0, 0, 0, 0.15);
}
  .container{
    max-width:1280px;
    margin:0 auto;
}
  .card-row{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:24px;
    margin-bottom:18px;
}
.info-card{
    background:#34404e;
    border-radius:6px;
    padding:26px 36px;
    color:#fff;
    position:relative;
    overflow:hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor:pointer;
}


.info-card::before{
    content:"01";
    position:absolute;
    top:0;
    left:30px;
    font-size:88px;
    font-weight:bold;
    color:rgba(255,255,255,0.07);
    z-index:1;
    transition:color 0.3s;
}
.info-card:nth-child(2)::before{content:"02";}
.info-card:nth-child(3)::before{content:"03";}

.info-card:hover{
    transform: translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
}
.info-card:hover::before{
    color:rgba(255,255,255,0.12);
}

.card-content{
    position:relative;
    z-index:2;
}
.card-title{
    font-size:30px;
    font-weight:bold;
    margin-bottom:14px;
    padding-bottom:10px;
    display:inline-block;
    font-family: 'Montserrat', sans-serif;
}
/* 三个卡片不同颜色下划线 */
.card-1 .card-title{border-bottom:4px solid #34b0e8;}
.card-2 .card-title{border-bottom:4px solid #52d272;}
.card-3 .card-title{border-bottom:4px solid #f25892;}

.card-desc{
    padding-top: 15px;
    font-size:15px;
    color:#97a3ad;
    line-height:1.6;
}
.card-link{
    color:#ffffff;
    text-decoration:underline;
}
.card-link:hover{
    color:#cccccc;
}

/* 社交图标 */
.social-wrap{
    display:flex;
    justify-content:center;
    gap:24px;
    margin-bottom:20px;
}
.social-botn{padding: 16px 0;}
.social-botn ul{display: flex;margin-top:0;}
.social-botn ul li{margin-right: 12px;}
.social-botn li i{font-size: 22px;}
.social-botn li a{width:40px;height:40px;display: flex;align-items: center;justify-content: center;background: #fff;
   color: #000; border-radius:50%; box-shadow: 0em 0.15em 0.65em 0em rgba(0, 0, 0, 0.25);}
.social-botn li a:hover{text-decoration: none; color: #006ba1;}

/* 版权 */
.copyright{
    text-align:center;
    color:#e4e8eb;
    font-size:13px;
    line-height: 22px;
    font-weight: lighter;
}

/* ===== Responsive ===== */
@media (max-width:1200px){
.header-inner{max-width: 98%; gap: 14px;}
.logo img{width:75px;}
.main-nav{gap: 22px;}
  .content{grid-template-columns:1fr;max-width: 98%;}
  .bottles-card{min-height:280px}
  footer{padding:28px 10px 18px ;}
  .card-title {font-size: 25px;}
}
@media (max-width:900px){
  .header-inner{padding: 8px;flex-wrap:wrap}
  .logo{font-size:24px;letter-spacing:0;order:1}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;order:3}
  .search-toggle{order:2;width:34px;height:34px;margin-left:auto}
  .main-nav{order:4}
  .main-nav{
    display:none;flex-direction:column;align-items:stretch;
    width:100%;gap:0;background:#167ab0;margin-top:12px;
    border-radius:4px;overflow:hidden;
  }
  .main-nav.open{display:flex}
  .nav-item{width:100%;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-item:last-child{border-bottom:none}
  .nav-link{width:100%;padding:14px 20px;justify-content:space-between}
  .request-btn{margin:12px 20px;width:calc(100% - 40px);justify-content:center}

  .dropdown,.mega-menu{
    position:static;transform:none;width:100%;min-width:0;max-width:100%;
    display:none;box-shadow:none;border-top:none;padding-top:0;min-height:0;
    background:rgba(0,0,0,.12);transition:none;
  }
  .nav-item.open>.dropdown,
  .nav-item.open>.mega-menu{display:block}
  .mega-menu.has-panel{width:100%}
  .dropdown li a{padding:10px 20px;font-size:13px}

  .mega-cats,
  .mega-menu.has-panel .mega-cats{width:100%;border-right:none}
  .mega-subs,
  .mega-menu.has-panel .mega-subs{
    display:none;position:static;left:auto;top:auto;
    width:100%;min-height:0;background:transparent;box-shadow:none;transition:none;
  }
  .mega-cat>a{padding:12px 20px}
  .sub-panel{display:none;background:rgba(0,0,0,.18);border-left:3px solid #26c281}
  .sub-panel.active{display:block;animation:none}
  .sub-panel .panel-title{padding:10px 20px;font-size:13px;background:rgba(0,0,0,.14)}
  .sub-panel li a{padding:10px 20px 10px 30px;font-size:13px}
  .sub-panel li a:hover{padding-left:30px}

  .breadcrumb{padding:14px 18px;font-size:12px}
  .content{padding:18px 18px 40px;gap:20px}
  .entry-wrap {
    padding: 30px;
}

}

@media (max-width:900px){
    .card-wrap{
      grid-template-columns:1fr;
    }
    .card-row{
        grid-template-columns:1fr;
    }
}
@media (max-width:720px){ 
  .logo{font-size:20px;letter-spacing:0;order:1}
  .logo img{width:55px;}
}
/* =========手机端菜单重写【修复版】========= */
@media (max-width:900px) {   /* 与汉堡按钮的900px断点对齐 */
    /* 一级下拉容器改为流式布局，取消绝对定位 */
    .main-nav .mega-menu {
      position: static !important;
      width: 100% !important;
      transform: none !important;
      box-shadow: none !important;
    }
    .mega-cats {
      width: 100% !important;
    }
    .mega-cats > ul {
      width:100%;
    }
    .mega-cat {
      width:100%;
    }
    .mega-cat > a {
      width:100%;
      display:flex !important;
    }
  
    /* 重点：当父nav-item为open，#megaSubs必须可见，否则子面板永远看不见 */
    .nav-item.open .mega-subs {
      position: static !important;
      left: auto !important;
      top: auto !important;
      width: 100% !important;
      transform: none !important;
      box-shadow: none !important;
      background:rgba(0,0,0,0.15);
      display:block !important;
    }
  
    /* 三级子面板，默认隐藏；active才显示 */
    .sub-panel {
      width:100%;
      display:none;
      background:rgba(0,0,0,0.18);
    }
    .sub-panel.active {
      display:block !important;
    }
    .sub-panel li a{
      padding-left:36px !important;
    }
  }

/* ===== 手机端菜单细节优化（仅 ≤900px 生效，PC端零影响） ===== */
@media (max-width:900px){
  /* 去掉PC端为hover准备的14px透明热区，它在手机端会挡住相邻菜单项的点击 */
  .nav-item::after{display:none}

  /* 展开动效 */
  @keyframes mIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .main-nav.open{animation:mIn .26s ease}
  .nav-item.open>.mega-menu{animation:mIn .26s ease}
  .sub-panel.active{animation:mIn .28s ease}

  /* 二级分类激活态：箭头转成向下，明确“已展开” */
  .mega-cat.active .chev{transform:rotate(90deg)}

  /* 触摸体验：去灰块、放大点击区 */
  .mega-cat>a,.sub-panel li a{-webkit-tap-highlight-color:transparent}
  .mega-cat>a{min-height:46px}
  .sub-panel li a{min-height:44px;display:flex;align-items:center}

  /* 三级面板缩进更明显，读起来像二级的下级 */
  .mega-subs{background:rgba(0,0,0,.15)}
  .sub-panel{border-left:3px solid #26c281}

  .entry-product h3{font-size:18px; padding-bottom: 12px;}
  .product li{width: 48%;}
  .product li p{font-size: 13px; padding: 12px 0;}
}