/* ============================================================
   netshop プリセット レイアウト
   ------------------------------------------------------------
   モックアップ: work/mockup/netshop/
   単店舗のオンラインショップ。ヘッダーは検索とカートが主役。

   色・余白は static/css/cms_tokens.css の --qc-* のみを参照する。
   着手前はレイアウト内のインライン <style> に #78350f / #1f2937 などを
   直書きしていて、テーマを切り替えても配色が変わらなかった（QS-46）。
   ============================================================ */

.wrapper.netshop {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ------------------------------------------------------------
   ヘッダー
   スクロールしても検索とカートに手が届くよう sticky にする。
   ------------------------------------------------------------ */
.ns-header {
  background: var(--qc-bg);
  border-bottom: 1px solid var(--qc-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px var(--qc-shadow-color);
}
.ns-header-top {
  display: flex;
  align-items: center;
  gap: var(--qc-space-4);
  padding-block: var(--qc-space-3);
  flex-wrap: wrap;
}
.ns-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--qc-primary);
  font-family: var(--qc-font-head);
  font-weight: 700;
  font-size: var(--qc-text-lg);
}
.ns-logo:hover { color: var(--qc-primary-hover); text-decoration: none; }
.ns-logo-tagline {
  color: var(--qc-fg-muted);
  font-size: var(--qc-text-xs);
  font-weight: 400;
}
.ns-header-search {
  flex: 1;
  min-width: 200px;
  max-width: 500px;
  display: flex;
  gap: var(--qc-space-1);
}
.ns-header-search .btn {
  background: var(--qc-primary);
  color: var(--qc-primary-on);
  border: none;
  padding-inline: var(--qc-space-4);
}
.ns-header-search .btn:hover { background: var(--qc-primary-hover); color: var(--qc-primary-on); }
.ns-header-icons {
  display: flex;
  gap: var(--qc-space-4);
  align-items: center;
}
/* min-height はタップ領域 24px の確保（WCAG 2.2 §2.5.8） */
.ns-header-icons a {
  color: var(--qc-fg);
  font-size: var(--qc-text-lg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* アイコン1文字だと横幅が 18px しかない。高さだけでなく幅も 24px 要る
     （WCAG 2.2 §2.5.8 は 24x24。QS-46 の QA で 66 件出た） */
  min-height: 24px;
  min-width: 24px;
}
.ns-header-icons a:hover { color: var(--qc-primary); text-decoration: none; }

/* ------------------------------------------------------------
   カテゴリバー
   横に溢れる分はスクロールさせる。スクロールバーは隠す。
   ------------------------------------------------------------ */
.ns-category-bar { background: var(--qc-primary); }
.ns-category-bar > div {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.ns-category-bar > div::-webkit-scrollbar { display: none; }
.ns-category-bar a {
  color: var(--qc-primary-on);
  padding: var(--qc-space-2) var(--qc-space-4);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--qc-text-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.ns-category-bar a:hover {
  background: color-mix(in srgb, var(--qc-primary-on) 14%, transparent);
  color: var(--qc-primary-on);
  text-decoration: none;
}

/* ------------------------------------------------------------
   本文
   <main> は全幅。横幅の制御は各パネルの .qc-container が持つ。
   cms_store のパネル（商品一覧・カート等）は自前のコンテナを持たないので、
   プリセットのページ本文側で render_section_start に包んでいる。
   ------------------------------------------------------------ */
.ns-main { flex: 1; }

/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */
.ns-footer {
  background: var(--qc-surface-invert);
  color: var(--qc-fg-on-invert);
  padding-block: var(--qc-space-7) var(--qc-space-4);
  margin-top: var(--qc-space-8);
  font-size: var(--qc-text-sm);
}
.ns-footer .qc-footer-heading {
  color: var(--qc-fg-on-invert);
  font-size: var(--qc-text-base);
  font-weight: 700;
  margin-bottom: var(--qc-space-3);
}
.ns-footer ul { list-style: none; padding: 0; margin: 0; }
.ns-footer ul li { padding-block: 3px; }
.ns-footer a {
  color: var(--qc-fg-on-invert);
  opacity: 0.85;
  text-decoration: none;
  transition: opacity var(--qc-transition);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.ns-footer a:hover { opacity: 1; text-decoration: underline; }
.ns-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--qc-space-5);
  margin-bottom: var(--qc-space-5);
}
@media (max-width: 767.98px) {
  .ns-footer-grid { grid-template-columns: 1fr 1fr; }
  .ns-footer-col--brand { grid-column: 1 / -1; }
}
.ns-footer-col--brand p { opacity: 0.85; margin: 0; }
.ns-footer-copyright {
  border-top: 1px solid color-mix(in srgb, var(--qc-fg-on-invert) 18%, transparent);
  margin-top: var(--qc-space-4);
  padding-top: var(--qc-space-4);
  opacity: 0.75;
  font-size: var(--qc-text-xs);
  text-align: center;
}

/* ロゴのテキスト部分とフッター列。HTML にはあるが未定義だったので補う。 */
.ns-logo-name { display: inline-flex; align-items: center; gap: var(--qc-space-2); }
.ns-footer-col p { margin: 0; }