/* グッズ（SUZURI）の案内。中身は scripts/goods.py が作る */

.goods-section a,.goods-note a,.footer-goods a{text-decoration:none}

/* ヘビ一覧ページのバナー（一覧の後ろ） */
section.goods-section{max-width:1200px;margin:auto;padding:0 28px 100px;background:var(--night)}
.goods-banner{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;padding:26px;border:1px solid rgba(232,163,61,.25);border-radius:4px;background:linear-gradient(135deg,#16302A,#0A1613)}
.goods-banner.no-image{grid-template-columns:1fr}
.goods-image{aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:var(--canopy)}
.goods-image img{display:block;width:100%;height:100%;object-fit:cover}
.goods-label{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--amber);margin-bottom:8px}
.goods-title{font-family:"Shippori Mincho",serif;font-size:24px;font-weight:600;line-height:1.5;margin-bottom:8px}
.goods-lead{font-size:13px;color:var(--soft)}
.goods-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px}
.goods-chips a{font-size:12px;line-height:1.7;padding:3px 10px;border:1px solid rgba(234,242,233,.25);border-radius:2px;color:rgba(234,242,233,.85)}
.goods-chips a:hover{border-color:var(--amber);color:var(--amber)}
.goods-button{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.6rem;background:var(--amber);color:var(--bark);font-weight:700;border-radius:2px;font-size:.82rem;transition:background .2s ease}
.goods-button:hover{background:#f4b95a}
.goods-notice{margin-top:12px;font-size:11.5px;line-height:1.7;color:rgba(234,242,233,.6)}

/* 個別ページの小さな案内（関連する生き物の後ろ） */
.goods-note{display:flex;gap:14px;align-items:center;max-width:620px;margin:2.5rem 6vw 0;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:rgba(10,22,19,.35)}
.goods-note-image{flex:0 0 56px;width:56px;height:56px;overflow:hidden;border-radius:2px}
.goods-note-image img{display:block;width:100%;height:100%;object-fit:cover}
.goods-note-text{flex:1;font-size:13px;line-height:1.6}
.goods-note-text strong{display:block;font-weight:500}
.goods-note-text span{display:block;color:var(--soft);font-size:11.5px}
.goods-note .goods-notice{margin-top:4px;font-size:11px}
.goods-note-link{font-size:12px;color:var(--amber);white-space:nowrap}

/* フッターのリンク */
.footer-goods{margin-bottom:10px}
.footer-goods a{font-family:"Zen Kaku Gothic New",sans-serif;font-size:12px;color:rgba(234,242,233,.6);border-bottom:1px solid rgba(234,242,233,.2)}
.footer-goods a:hover{color:var(--amber)}

@media(max-width:760px){
  section.goods-section{padding:0 20px 75px}
  .goods-banner{grid-template-columns:1fr;gap:16px;padding:20px}
  .goods-image{aspect-ratio:4/3}
  .goods-title{font-size:20px}
  .goods-button{width:100%;justify-content:center}
  .goods-note{flex-wrap:wrap;margin:2rem 5vw 0}
  .goods-note-text{flex:1 1 calc(100% - 70px)}
  .goods-note-image ~ .goods-note-link{margin-left:70px}
}

/* 図鑑ページのフッター（左寄せ） */
.footer-inner .footer-goods{margin:10px 0 0}

/* ===== グッズページ（goods.html）とトップのおすすめ欄。中身は scripts/generate_goods_page.py が作る =====
   並べ方: スマホは種類ごとに横にずらす1列（右端に次の商品が半分ほど見える）、PCは5列の格子 */
.goods-page{max-width:1200px;margin:auto}
.goods-label{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--amber)}
.goods-hero{padding:70px 28px 30px}
.goods-hero h1{font-family:"Shippori Mincho",serif;font-size:clamp(34px,6vw,60px);line-height:1.3;font-weight:600;margin:10px 0 16px}
.goods-lead{max-width:640px;font-size:14px;line-height:1.9;color:var(--soft,rgba(234,242,233,.75))}
.goods-logo-wrap{margin-top:26px;max-width:480px}
.goods-jump{display:flex;flex-wrap:wrap;gap:8px;padding:12px 28px;background:rgba(10,22,19,.96);border-block:1px solid var(--line,rgba(234,242,233,.12))}
.goods-jump a{font-size:12px;line-height:1.7;padding:4px 12px;border:1px solid rgba(234,242,233,.25);border-radius:2px;white-space:nowrap}
.goods-jump a:hover,.goods-jump a:focus-visible{border-color:var(--amber);color:var(--amber)}
.goods-jump small{margin-left:5px;font-family:"Space Mono",monospace;color:var(--soft,rgba(234,242,233,.75))}
.goods-group{padding:44px 28px 10px;scroll-margin-top:120px}
.goods-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:16px}
.goods-group-head h2{font-family:"Shippori Mincho",serif;font-size:24px;font-weight:600}
.goods-count{font-family:"Space Mono",monospace;font-size:11px;color:var(--soft,rgba(234,242,233,.75))}
.goods-zukan{margin-left:auto;font-size:12px;color:var(--amber)}
.goods-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 18px}
.goods-card{display:grid;align-content:start;gap:4px;min-width:0;color:inherit;scroll-margin-top:120px;border-radius:4px;outline-offset:4px}
.goods-card:target{outline:2px solid var(--amber)}
.goods-card:focus-visible{outline:2px solid var(--amber)}
.goods-photo{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:var(--canopy);margin-bottom:6px}
.goods-photo img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
.goods-card:hover .goods-photo img{transform:scale(1.04)}
.goods-name{font-size:14px;font-weight:700;line-height:1.5}
.goods-card:hover .goods-name{color:var(--amber)}
.goods-badge{display:inline-block;margin-left:6px;padding:0 6px;font-size:10px;font-weight:500;line-height:1.7;vertical-align:2px;border:1px solid var(--amber);border-radius:2px;color:var(--amber)}
.goods-meta{font-size:11.5px;color:var(--soft,rgba(234,242,233,.75));font-variant-numeric:tabular-nums}
.goods-go{font-size:11px;color:var(--amber)}
.goods-logo{grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;padding:12px;border:1px solid rgba(232,163,61,.3)}
.goods-logo .goods-photo{grid-row:1/4;margin:0}
.goods-tour{padding:90px 28px;text-align:center}
.goods-tour h2{font-family:"Shippori Mincho",serif;font-size:clamp(24px,4vw,36px);line-height:1.5;margin:10px 0 26px}
.goods-button{display:inline-flex;align-items:center;min-height:48px;padding:.8rem 1.6rem;background:var(--amber);color:var(--bark);font-weight:700;border-radius:2px;font-size:.85rem;text-decoration:none;transition:background .2s ease}
.goods-button:hover{background:#f4b95a}

/* トップページのおすすめ欄 */
.goods-top{background:var(--night);padding:5rem max(6vw,16px)}
.goods-top-inner{max-width:1100px;margin:0 auto}
.goods-top h2{font-family:"Shippori Mincho",serif;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.5;margin:.6rem 0 .8rem}
.goods-top-lead{max-width:60ch;color:rgba(234,242,233,.8);line-height:1.9;margin-bottom:2rem}
.goods-top a{text-decoration:none;color:inherit}
.goods-top .goods-button{color:var(--bark);margin-top:2rem}

@media (max-width:760px){
  .goods-hero{padding:46px 20px 22px}
  .goods-jump{flex-wrap:nowrap;overflow-x:auto;padding:10px 20px;scrollbar-width:none}
  .goods-jump::-webkit-scrollbar{display:none}
  .goods-group{padding:34px 0 6px}
  .goods-group-head{padding:0 20px}
  /* 横にずらす1列。カードの幅を画面の4割弱にして、右端に次の商品が半分ほど見えるようにする */
  .goods-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 12px;scroll-padding-inline:20px;scrollbar-width:thin}
  .goods-row > .goods-card{flex:0 0 38%;scroll-snap-align:start}
  .goods-logo{grid-template-columns:96px minmax(0,1fr)}
  .goods-logo-wrap{max-width:none}
  .goods-top{padding:4rem 0}
  .goods-top-inner > :not(.goods-row){margin-inline:20px}
  /* ヘビのバナー用の width:100% がかかるので、左右の余白のぶんを引く */
  .goods-top .goods-button{margin-inline:20px;width:calc(100% - 40px)}
  .goods-tour{padding:70px 20px}
  /* スマホはヘッダーが高いので、飛んだ先がヘッダーに隠れないよう余白を広げる */
  .goods-group,.goods-card{scroll-margin-top:200px}
}
@media (prefers-reduced-motion:reduce){.goods-photo img{transition:none}.goods-card:hover .goods-photo img{transform:none}}