/* ============================================================
   爆护堂 官网 · 全站共享样式
   色彩 / 字体变量集中在这里，改风格只需要改这一处
   ============================================================ */
:root{
  --ink-deep:      #0E2622;   /* 深水墨绿 */
  --ink-deeper:    #081A17;   /* 更深水底色 */
  --amber:         #C99A3B;   /* 琥珀金：诱鱼液的颜色 */
  --amber-light:   #E8C77A;   /* 浅金，高光/描边 */
  --paper:         #EEF0E4;   /* 宣纸底色 */
  --paper-dim:     #E2E5D6;
  --text-ink:      #17231F;
  --text-fade:     #4B5A53;
  --line:          rgba(23,35,31,0.12);
  --radius:        18px;
  --serif: "Songti SC","STSong","Noto Serif SC", serif;
  --sans:  "PingFang SC","Microsoft YaHei","Noto Sans SC", -apple-system, sans-serif;
  --maxw:  1080px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body{
  font-family: var(--sans);
  color: var(--text-ink);
  background: var(--paper);
  line-height: 1.65;
  overflow-x: hidden;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ---------------- 站点头部导航 ---------------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(14,38,34,0.96);
  backdrop-filter: blur(6px);
  color: var(--paper);
}
.site-header .inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand-lockup{
  display:flex; align-items:baseline; gap:8px;
  font-family: var(--serif);
  font-weight:700; font-size: 19px;
  letter-spacing: 0.08em;
}
.brand-lockup .sub{
  font-family: var(--sans);
  font-weight:400;
  font-size: 11px;
  color: var(--amber-light);
  letter-spacing: 0.15em;
}
.site-nav{ display:flex; gap: 26px; }
.site-nav a{
  font-size: 14px;
  color: rgba(238,240,228,0.82);
  letter-spacing: 0.03em;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a.active{
  color: var(--amber-light);
  border-bottom-color: var(--amber-light);
}
.nav-toggle{ display:none; }

@media (max-width: 720px){
  .site-nav{
    position: fixed; inset: 56px 0 auto 0;
    background: var(--ink-deep);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    border-bottom: 1px solid rgba(232,199,122,0.15);
  }
  .site-nav.open{ max-height: 320px; }
  .site-nav a{ padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    background:none; border:none;
    color: var(--paper);
    font-size: 20px;
    cursor:pointer;
  }
}

/* ---------------- 通用容器 ---------------- */
.container{ max-width: var(--maxw); margin:0 auto; padding: 0 20px; }

.section-head{
  text-align:center;
  margin-bottom: 34px;
}
.section-head .en{
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-fade);
}
.section-head h2{
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* ---------------- 首页 HERO ---------------- */
.hero{
  position: relative;
  background: radial-gradient(120% 140% at 50% -10%, var(--ink-deep) 0%, var(--ink-deeper) 75%);
  color: var(--paper);
  padding: 64px 20px 76px;
  text-align:center;
}
.hero .ripple-wrap{ width:200px; height:130px; margin:0 auto 14px; }
.hero .ripple-wrap svg{ width:100%; height:100%; overflow:visible; }
.drop{ transform-origin:110px 70px; animation: dropfall 2.8s cubic-bezier(.55,0,.4,1) infinite; }
@keyframes dropfall{
  0%{ transform:translateY(0); opacity:1; }
  55%{ transform:translateY(46px); opacity:1; }
  58%{ transform:translateY(46px); opacity:0; }
  100%{ transform:translateY(46px); opacity:0; }
}
.ring{ transform-box:fill-box; transform-origin:center; opacity:0; }
.ring1{ animation: ripple 2.8s ease-out infinite; animation-delay: 1.55s; }
.ring2{ animation: ripple 2.8s ease-out infinite; animation-delay: 1.85s; }
.ring3{ animation: ripple 2.8s ease-out infinite; animation-delay: 2.15s; }
@keyframes ripple{ 0%{opacity:.85; transform:scale(.2);} 100%{opacity:0; transform:scale(1.9);} }

.hero .brand-mark{
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--amber-light);
  margin-bottom: 4px;
}
.hero h1{
  font-family: var(--serif);
  font-size: 38px;
  font-weight:700;
  letter-spacing: 0.05em;
  line-height:1.35;
}
.hero h1 span{ color: var(--amber-light); }
.hero .sub{
  margin-top: 12px;
  font-size: 15px;
  color: rgba(238,240,228,0.75);
  max-width: 480px;
  margin-left:auto; margin-right:auto;
}
.hero .cta-row{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block;
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.btn-primary{ background: var(--amber); color: var(--ink-deeper); font-weight:700; }
.btn-ghost{ border:1px solid rgba(232,199,122,0.45); color: var(--amber-light); }

/* ---------------- 次级页面小标题条（产品列表 / 详情页顶部） ---------------- */
.page-banner{
  background: radial-gradient(120% 160% at 50% -20%, var(--ink-deep) 0%, var(--ink-deeper) 80%);
  color: var(--paper);
  padding: 38px 20px 44px;
  text-align:center;
}
.page-banner .en{ font-size:11px; letter-spacing:0.25em; color:var(--amber-light); text-transform:uppercase; }
.page-banner h1{ font-family: var(--serif); font-size:28px; margin-top:8px; letter-spacing:0.04em; }
.breadcrumb{ font-size:13px; color: rgba(238,240,228,0.6); margin-top:10px; }
.breadcrumb a{ color: var(--amber-light); }

/* ---------------- 产品网格 / 卡片 ---------------- */
.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  padding: 40px 0 60px;
}
.product-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14,38,34,0.12); }
.product-card .thumb{
  height: 140px;
  background: linear-gradient(160deg, var(--ink-deep), var(--ink-deeper));
  display:flex; align-items:center; justify-content:center;
  font-size: 40px;
}
.product-card .body{ padding: 16px 18px 20px; flex:1; display:flex; flex-direction:column; }
.product-card h3{ font-family: var(--serif); font-size:17px; margin-bottom:6px; }
.product-card p{ font-size:13px; color:var(--text-fade); flex:1; }
.product-card .tag{
  align-self:flex-start;
  font-size:11px;
  color: var(--amber);
  border:1px solid var(--amber);
  border-radius:999px;
  padding:2px 10px;
  margin-bottom:10px;
}
.product-card .more{
  margin-top:12px;
  font-size:13px;
  color: var(--ink-deep);
  font-weight:700;
}
.product-card.coming-soon{ opacity:0.55; }
.product-card.coming-soon .thumb{ background: var(--paper-dim); color: var(--text-fade); }
.product-card.coming-soon:hover{ transform:none; box-shadow:none; }

/* ---------------- 品牌故事 / 关于 ---------------- */
.story{ padding: 54px 0; }
.story .grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:center;
}
.story .mark{
  font-family: var(--serif);
  font-size: 64px;
  color: var(--paper-dim);
  line-height:1;
}
.story h2{ font-family: var(--serif); font-size:24px; margin-bottom:14px; }
.story p{ color: var(--text-fade); font-size:14.5px; margin-bottom:10px; }
@media (max-width:720px){ .story .grid{ grid-template-columns:1fr; } }

/* ---------------- 联系我们 ---------------- */
.contact{
  background: var(--paper-dim);
  padding: 50px 0 60px;
}
.contact-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 14px;
  max-width: 640px; margin: 0 auto;
}
.contact-row{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  text-align:center;
}
.contact-row .k{ font-size:11px; color:var(--text-fade); letter-spacing:0.1em; margin-bottom:6px; }
.contact-row .v{ font-size:14.5px; font-weight:700; }

/* ---------------- 页脚 ---------------- */
.site-footer{
  background: var(--ink-deeper);
  color: rgba(238,240,228,0.55);
  text-align:center;
  padding: 26px 20px;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.site-footer a{ color: var(--amber-light); }

/* ================================================================
   以下为「产品详情页」专用样式（原单品页设计，命名空间加 .pd- 前缀）
   ================================================================ */
.pd-main{ max-width: 640px; margin:0 auto; padding: 28px 20px 10px; }
.pd-quicknav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding: 22px 20px 0; max-width:640px; margin:0 auto; }
.pd-quicknav a{ font-size:12.5px; padding:7px 14px; border-radius:999px; background:var(--paper-dim); color:var(--text-fade); border:1px solid var(--line); white-space:nowrap; }

.pd-section{ scroll-margin-top:14px; padding:30px 0; border-bottom:1px solid var(--line); }
.pd-section:last-of-type{ border-bottom:none; }
.pd-sec-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.pd-sec-icon{ font-size:20px; line-height:1; }
.pd-sec-head h2{ font-family:var(--serif); font-size:21px; letter-spacing:0.04em; font-weight:700; }
.pd-sec-head .en{ font-size:11px; color:var(--text-fade); letter-spacing:0.12em; text-transform:uppercase; }

.pd-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; }

.pd-steps{ counter-reset:step; }
.pd-steps li{ counter-increment:step; display:flex; gap:14px; padding:12px 0; }
.pd-steps li:not(:last-child){ border-bottom:1px dashed var(--line); }
.pd-steps li::before{
  content: counter(step); flex:none; width:26px; height:26px; border-radius:50%;
  background: var(--ink-deep); color: var(--amber-light); font-family: var(--serif); font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.pd-steps b{ display:block; margin-bottom:2px; }
.pd-steps .muted{ color:var(--text-fade); font-size:14px; }

.pd-pairs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pd-pair{ background:var(--paper-dim); border-radius:14px; padding:14px; font-size:14px; }
.pd-pair .name{ font-weight:700; margin-bottom:4px; }
.pd-pair .desc{ color:var(--text-fade); font-size:12.5px; }

.pd-fish-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.pd-fish-tag{ background:var(--ink-deep); color:var(--amber-light); padding:8px 16px; border-radius:999px; font-size:14px; letter-spacing:0.05em; }

.pd-warn-list li{ display:flex; gap:10px; padding:9px 0; font-size:14.5px; }
.pd-warn-list li::before{ content:"▲"; color:var(--amber); font-size:11px; margin-top:4px; flex:none; }

.pd-placeholder-box{ text-align:center; padding:30px 18px; border:1.5px dashed var(--line); border-radius:var(--radius); color:var(--text-fade); }
.pd-placeholder-box .big{ font-family:var(--serif); font-size:15px; color:var(--text-ink); margin-bottom:6px; }

.pd-contact-grid{ display:flex; flex-direction:column; gap:10px; }
.pd-contact-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--paper-dim); border-radius:12px; font-size:14.5px; }
.pd-contact-row .k{ flex:none; width:64px; color:var(--text-fade); font-size:12.5px; letter-spacing:0.05em; }

/* ---------------- 产品图 主图+缩略图 ---------------- */
.pd-gallery-main{
  width:100%; aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--paper-dim);
  cursor: zoom-in;
}
.pd-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.pd-gallery-thumbs{
  display:flex; gap:10px; margin-top:10px;
  overflow-x:auto; padding-bottom:2px;
}
.pd-gallery-thumbs img{
  width:64px; height:64px; object-fit:cover;
  border-radius:10px; border:2px solid transparent;
  flex:none; cursor:pointer; opacity:0.75;
}
.pd-gallery-thumbs img.active{ border-color: var(--amber); opacity:1; }

/* ---------------- 实测图 / 钓获实拍 网格 ---------------- */
.pd-catch-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pd-catch-grid figure{
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  aspect-ratio: 4/3;
  cursor: zoom-in;
  border:1px solid var(--line);
}
.pd-catch-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-catch-grid figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 6px 10px;
  font-size:12px;
  color:#fff;
  background: linear-gradient(0deg, rgba(8,26,23,0.75), rgba(8,26,23,0));
}
@media (min-width:520px){
  .pd-catch-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- 灯箱 Lightbox ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background: rgba(8,26,23,0.92);
  display:none;
  align-items:center; justify-content:center;
  padding: 30px 16px;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width: 100%; max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-close{
  position:absolute; top:18px; right:20px;
  width:40px; height:40px;
  border-radius:50%;
  background: rgba(238,240,228,0.12);
  color:#fff; border:none;
  font-size:20px; cursor:pointer;
}

/* ---------------- 产品卡片缩略图（首页/列表页） ---------------- */
.product-card .thumb{ overflow:hidden; padding:0; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; }