/* =====================================================================
   Shop chrome — 公開ストア共通のヘッダー / フッター / 基本ボタン
   ストアフロント全ページで共有する外枠スタイル。
   ページ固有の上乗せ（検索欄・ナビ下線など）は各ページ CSS 側で追加します。
   ===================================================================== */

/* ============ HEADER ============ */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--ivory); border-bottom: 1px solid var(--line); transition: box-shadow .4s; }
header.scrolled { box-shadow: 0 1px 24px rgba(43, 39, 35, 0.06); background: rgba(247, 243, 236, 0.94); backdrop-filter: blur(14px); }
.top-bar { display: flex; align-items: center; justify-content: flex-end; gap: 22px; padding: 8px 40px; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.top-bar .ship-note { margin-right: auto; letter-spacing: .2em; color: var(--gold); }
.lang-switch { display: flex; gap: 10px; align-items: center; }
.lang-switch button { background: none; border: none; font-family: var(--sans); font-size: 10px; letter-spacing: .18em; color: var(--ink-soft); cursor: pointer; padding: 0; text-transform: uppercase; }
.lang-switch button.active { color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.lang-switch .divider { width: 1px; height: 11px; background: var(--line); }
.main-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 40px; gap: 20px; transition: padding .4s; }
header.scrolled .main-bar { padding: 13px 40px; }
.logo { font-family: var(--serif); font-size: 27px; letter-spacing: .4em; font-weight: 400; padding-left: .4em; text-align: center; grid-column: 2; line-height: 1; }
.logo small { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .6em; color: var(--gold); margin-top: 5px; padding-left: .6em; }
.nav-left { display: flex; gap: 26px; align-items: center; grid-column: 1; justify-self: start; }
.nav-left a { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); transition: color .3s; }
.nav-left a:hover { color: var(--ink); }
.nav-right { display: flex; gap: 20px; align-items: center; grid-column: 3; justify-self: end; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 18px; position: relative; transition: color .3s; }
.icon-btn:hover { color: var(--gold); }
.cart-count { position: absolute; top: -8px; right: -10px; background: var(--gold); color: var(--ivory); font-family: var(--sans); font-size: 9px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.burger span { width: 24px; height: 1.5px; background: var(--ink); }

/* ============ FOOTER ============ */
footer { background: var(--ivory); padding: 70px 40px 40px; border-top: 1px solid var(--line); margin-top: 40px; }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; max-width: 1280px; margin: 0 auto 50px; }
.foot-logo { font-family: var(--serif); font-size: 24px; letter-spacing: .3em; }
.foot-logo p { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); letter-spacing: .1em; margin-top: 18px; line-height: 1.9; }
.foot-col h4 { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.foot-col a { display: block; color: var(--ink-soft); font-size: 13px; margin-bottom: 12px; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { max-width: 1280px; margin: 0 auto; padding-top: 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); }

/* ============ BUTTONS ============ */
.btn-primary { background: var(--ink); color: var(--ivory); padding: 17px 40px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; transition: background .4s; }
.btn-primary:hover { background: var(--gold); }
.btn-ghost { border: 1px solid var(--ink); color: var(--ink); padding: 17px 40px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; transition: .3s; }
.btn-ghost:hover { background: var(--ink); color: var(--ivory); }

/*
  ヘッダー/フッターのレスポンシブ折りたたみは、ページごとに崩す幅
  (820/880/900/1100px 等) が異なるため、各ページ CSS 側に置いています。
*/