/* ============================================================
   PRODUCT SUBPAGE (rods.html) — uses the tokens from css/style.css
   Layout: left column = rod styles, right = the selected style only
   Card:   full-width horizontal photo on top, spec table below
   ============================================================ */

.page-hero{padding:112px 0 30px;background:#000;border-bottom:1px solid rgba(255,255,255,.06)}
.breadcrumb{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-300);margin-bottom:14px}
.breadcrumb a{color:var(--gray-300);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--accent)}
.page-title{font-size:clamp(2.1rem,5vw,3.4rem);color:#fff;margin:0 0 8px}
.page-sub{color:var(--accent);font-size:.95rem;letter-spacing:.06em;margin:0;line-height:1.5}

.products{padding:44px 0 76px}

/* ---------- two column frame ---------- */
.rods-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start}
.rods-nav{position:sticky;top:84px;min-width:0}
.rods-nav-title{
  font-family:var(--font-head);font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;padding-left:14px}
.rods-nav-list{margin:0;padding:0;border-left:1px solid rgba(255,255,255,.09)}
.rods-nav-item{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;font-size:.88rem;letter-spacing:.04em;color:var(--gray-300);
  text-transform:uppercase;
  border-left:2px solid transparent;margin-left:-1px;transition:all .18s ease}
.rods-nav-item:hover{color:#fff;background:rgba(86,183,230,.07)}
.rods-nav-item.is-active{color:#fff;border-left-color:var(--accent);background:rgba(86,183,230,.12)}
.rods-nav-item em{font-style:normal;font-family:var(--font-head);font-size:.78rem;letter-spacing:.08em;color:var(--accent);opacity:.85}

/* 大类分组标题（2026-09-26：鱼线页两级分类 = 大类 + 子分类） */
.rods-nav-group{
  list-style:none;margin:16px 0 6px;padding:0 0 0 14px;
  font-family:var(--font-head);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray-400,rgba(255,255,255,.5));opacity:.9}
.rods-nav-list>li.rods-nav-group:first-child{margin-top:0}

/* two-level tree (2026-09-15): children sit under their parent, joined by a thin elbow */
.rods-nav-li.is-child .rods-nav-item{padding-left:32px;font-size:.8rem;letter-spacing:.06em}
.rods-nav-li.is-child .rods-nav-item::before{
  content:"";position:absolute;left:15px;top:50%;width:8px;height:1px;
  background:rgba(255,255,255,.26);transition:background .18s ease}
.rods-nav-li.is-child .rods-nav-item::after{
  content:"";position:absolute;left:15px;bottom:50%;width:1px;height:50%;
  background:rgba(255,255,255,.10)}
.rods-nav-li.is-child .rods-nav-item:hover::before,
.rods-nav-li.is-child .rods-nav-item.is-active::before{background:var(--accent)}

.rods-panels{min-width:0}
.rods-cards{min-width:0}
.rods-panel{min-width:0}
.rods-panel{display:none}
.rods-panel.is-active{display:block}
.rods-panel-title{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-size:1.85rem;color:#fff;margin:0 0 22px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.rods-panel-count{font-family:var(--font-body);font-style:normal;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
/* 2026-10-13：款式分组小标题（防水裤子页，卡片之间插一行组名） */
.rods-group-title{
  display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin:28px 0 14px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.rods-group-title:first-child{margin-top:0}
.rods-group-title::before{content:"";width:14px;height:2px;background:var(--accent);flex:none}

/* ---------- product card: photo on top, table below ---------- */
.p-card{
  min-width:0;
  background:linear-gradient(180deg,#0d1014,#10151b);
  border:1px solid rgba(255,255,255,.07);border-radius:6px;
  padding:22px;margin-bottom:30px}
.p-card:last-child{margin-bottom:0}

.p-media{
  width:100%;border-radius:4px;overflow:hidden;margin-bottom:20px;
  background:#0b0e12;
  background-image:radial-gradient(ellipse 70% 90% at 50% 50%,rgba(255,255,255,.14),rgba(255,255,255,.04) 55%,transparent 78%);
  display:flex;align-items:center;justify-content:center;padding:14px}
.p-media img{width:100%;height:auto;display:block;object-fit:contain;cursor:zoom-in;
  transition:transform .35s ease;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.p-media:hover img{transform:scale(1.08)}
.p-media-empty{min-height:150px;color:var(--gray-300);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}

/* 2026-10-13：服装子页卡片图缩小，一屏看全貌；看不清点开放大看 */
.pg-apparel .p-media{padding:10px}
.pg-apparel .p-media img{width:auto;max-width:100%;max-height:46vh}
@media(max-width:900px){.pg-apparel .p-media img{max-height:42vh}}
@media(max-width:560px){.pg-apparel .p-media img{max-height:38vh}}

/* 2026-10-14：鱼线轮子页卡片图缩小，一屏看全貌；看不清点开放大看 */
.pg-reels .p-media{padding:10px}
.pg-reels .p-media img{width:auto;max-width:100%;max-height:30vh}
@media(max-width:900px){.pg-reels .p-media img{max-height:27vh}}
@media(max-width:560px){.pg-reels .p-media img{max-height:25vh}}

/* 亮片：横图/竖图统一「长边」尺寸，避免横图撑满卡片、竖图被高度限制显得更小 */
.pg-spoons .p-media img{width:auto;max-width:min(100%,30vh);max-height:30vh}
@media(max-width:900px){.pg-spoons .p-media img{max-width:min(100%,27vh);max-height:27vh}}
@media(max-width:560px){.pg-spoons .p-media img{max-width:min(100%,25vh);max-height:25vh}}
.pg-kayak .p-media{padding:10px}
.pg-kayak .p-media img{width:auto;max-width:100%;max-height:46vh}
@media(max-width:900px){.pg-kayak .p-media img{max-height:42vh}}
@media(max-width:560px){.pg-kayak .p-media img{max-height:38vh}}

/* "Coming soon" placeholder for nav categories that carry no photos yet */
.rods-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  min-height:230px;padding:64px 24px;border:1px dashed rgba(255,255,255,.14);border-radius:6px;
  background:radial-gradient(ellipse 60% 90% at 50% 0%,rgba(86,183,230,.07),transparent 72%)}
.rods-empty-mark{display:block;width:44px;height:2px;background:var(--accent);opacity:.5}
.rods-empty-text{margin:0;font-family:var(--font-head);font-size:1rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gray-300)}

.p-body{min-width:0}
.p-kicker{font-family:var(--font-head);letter-spacing:.18em;color:var(--accent);font-size:.9rem;margin:0 0 4px}
.p-name{font-size:1.5rem;color:#fff;margin:0 0 12px;letter-spacing:.04em}
.p-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.p-tag{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#cfe6f5;
  border:1px solid rgba(86,183,230,.45);border-radius:999px;padding:4px 10px;background:var(--accent-soft)}
.p-tag-item{color:var(--gray-300);border-color:rgba(255,255,255,.18);background:transparent;text-transform:none;letter-spacing:.04em}

.p-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.p-table{width:100%;border-collapse:collapse;font-size:.85rem}
.p-table th,.p-table td{padding:9px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);white-space:nowrap}
.p-table thead th{font-family:var(--font-head);font-size:.88rem;letter-spacing:.1em;color:var(--accent);
  text-transform:uppercase;border-bottom:1px solid rgba(86,183,230,.5);background:rgba(86,183,230,.05)}
.p-table tbody tr:hover{background:rgba(86,183,230,.06)}
.p-table td.p-item{font-family:var(--font-head);letter-spacing:.08em;color:#fff;font-size:.95rem}
.p-table td.p-model{color:#fff;font-weight:500}
.p-empty{color:rgba(255,255,255,.22)}

.p-notes-wrap{margin-top:16px}
.p-notes-title{font-family:var(--font-head);letter-spacing:.16em;text-transform:uppercase;
  font-size:.85rem;color:var(--accent);margin:0 0 8px}
.p-notes{margin:0;padding:0;list-style:none;font-size:.84rem;color:var(--gray-300)}
.p-notes li{position:relative;padding-left:14px;margin-bottom:5px;line-height:1.5}
.p-notes li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--accent);border-radius:50%}

.p-meta{margin-top:16px;font-size:.8rem;color:var(--gray-300);display:flex;gap:18px;flex-wrap:wrap}
.p-meta b{color:#fff;font-weight:500}
.p-cta{margin-top:18px}
.p-cta .btn{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 20px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .rods-layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .rods-nav{position:static;top:auto}
  .rods-nav-title{padding-left:2px;margin-bottom:8px}
  .rods-nav-list{
    display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;
    border-left:0;border-bottom:1px solid rgba(255,255,255,.09);
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .rods-nav-list li{flex:0 0 auto}
  .rods-nav-item{
    border:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.14);
    border-radius:999px;padding:8px 13px;margin-left:0;white-space:nowrap;font-size:.82rem}
  .rods-nav-item.is-active{border-color:var(--accent);background:rgba(86,183,230,.16)}
  /* pills: the indentation elbow makes no sense in the horizontal strip */
  .rods-nav-li.is-child .rods-nav-item{padding-left:13px;font-size:.78rem}
  .rods-nav-li.is-child .rods-nav-item::before,
  .rods-nav-li.is-child .rods-nav-item::after{display:none}
  .rods-nav-list li.rods-nav-group{display:flex;align-items:center;margin:0;padding:0 4px;white-space:nowrap;opacity:.75}
  .p-card{padding:14px}
  .p-media{padding:8px;margin-bottom:14px}
  .p-table th,.p-table td{padding:8px 8px;font-size:.78rem}
}
@media(max-width:560px){
  .p-table th,.p-table td{padding:7px 6px;font-size:.74rem}
  .rods-panel-title{font-size:1.45rem}
  .rods-empty{min-height:180px;padding:48px 18px}
}

/* touch devices: no sticky hover zoom (a tap opens the lightbox instead) */
@media(hover:none){
  .p-media:hover img{transform:none}
}

/* ---------- lightbox (js/lightbox.js) ---------- */
html.lb-locked,html.lb-locked body{overflow:hidden;touch-action:none}
.lb-overlay{
  position:fixed;inset:0;z-index:9990;display:none;align-items:center;justify-content:center;
  background:rgba(3,5,7,.93);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lb-overlay.is-open{display:flex}
.lb-stage{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;cursor:zoom-in}
.lb-stage.is-zoomed{cursor:grab}
.lb-stage.is-panning{cursor:grabbing}
.lb-img{max-width:92vw;max-height:92vh;width:auto;height:auto;object-fit:contain;cursor:default;
  transform-origin:center center;will-change:transform;user-select:none;-webkit-user-select:none;
  -webkit-user-drag:none;filter:drop-shadow(0 18px 50px rgba(0,0,0,.65))}
.lb-close,.lb-prev,.lb-next{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);color:#fff;
  font-size:1.5rem;line-height:1;transition:all .18s ease}
.lb-close{top:18px;right:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--accent);border-color:var(--accent);color:#04121a}
.lb-single .lb-prev,.lb-single .lb-next{display:none}
@media(max-width:560px){
  .lb-img{max-width:94vw;max-height:84vh}
  .lb-close{top:10px;right:10px}
  .lb-prev{left:8px}.lb-next{right:8px}
}

/* ============================================================
   tools.html — 子分类卡片区
   修正（2026-09-24）：本页原来直接复用主页的 .categories 全宽 6 列网格
   （style.css: .categories .container{max-width:none;padding:0} + .category-grid{repeat(6,1fr)}），
   只有 1 张卡时会缩成 240px 贴在屏幕最左边 → 主人反馈「眼镜太靠左边跑到屏幕外」。
   这里用 .tools-cats 作用域覆盖：卡片等宽、自动换行、整排居中，带容器留白。
   ============================================================ */
.tools-cats .container{max-width:1180px;margin:0 auto;padding:0 24px}
.tools-cats .category-grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,240px));
  gap:28px;
  justify-content:center;
}
.tools-cats .category-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:linear-gradient(180deg,#0d1014,#10151b);
  padding-bottom:14px;
}
/* 修正（2026-09-26）：产品图是横构图（750x450 / 5:3），原来套 .category-img 的
   aspect-ratio:3/4 + object-fit:cover → 竖框只截到画面正中间一条，主人反馈
   「只显示了眼镜的一角」。这里改成图片自身比例 + contain，整副眼镜完整可见。 */
.tools-cats .category-img{
  aspect-ratio:5 / 3;
  object-fit:contain;
  background:#e8eae8;
  border-radius:10px 10px 0 0;
}
.tools-cats .category-name{
  margin:14px 12px 0;
  font-size:1rem;
}
@media (max-width:640px){
  .tools-cats .container{padding:0 20px}
  .tools-cats .category-grid{grid-template-columns:repeat(auto-fit,minmax(180px,240px));gap:20px}
}

/* ============================================================
   2026-09-27：apparel.html 顶部「服装子分类」卡片区（复用 .tools-cats 样式）
   + 尚无产品的子分类（防晒衣 / 防水裤）用「即将上新」占位卡
   + 空分类 panel 的提示文案 .rods-soon
   ============================================================ */
.tools-cats .category-card.is-soon{display:block}
.tools-cats .category-card.is-soon:hover{transform:none}
.tools-cats .category-card.is-soon .category-soon{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:5 / 3;border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,#121821,#0e131a);
  border-bottom:1px dashed rgba(255,255,255,.12);
  font-family:var(--font-head);font-size:.9rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7b8794;
}
.tools-cats .category-card.is-soon .category-name{color:#8f9aa6}
.tools-cats .category-card.is-soon:hover .category-name{color:#8f9aa6}
.rods-soon{
  margin:0;padding:26px 20px;border:1px dashed rgba(255,255,255,.16);
  border-radius:10px;background:rgba(255,255,255,.03);
  color:#95a1ad;font-size:.98rem;line-height:1.6;
}

/* ============================================================
   baits-collection.html —「综合 / Assorted Baits」子分类页
   目录页原图平铺：不裁切、不加参数，点图放大（js/lightbox.js）
   ============================================================ */
.hz-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.hz-gallery .p-media{margin-bottom:0;padding:10px;background:#eef1ef;background-image:none;border-radius:6px}
@media(max-width:780px){
  .hz-gallery{grid-template-columns:minmax(0,1fr);gap:16px}
}