/* ============================================================
   能勢べ〜びーる / BASE ショップのスタイル
   LP（nose-bebe）から色・書体・余白を移したもの

   置き方: BASE のテーマエディタ →「ファイルアップローダー」から
   このファイルを上げ、発行されたURLを theme.html の <link> に貼る。
   ⚠️ 上げ直すとURLが変わることがあるので、差し替えたら <link> も確認すること。

   ⚠️ LP 側（app/globals.css）と値がずれたら、こちらも直すこと。
   2つのサイトで深緑が微妙に違うと、行き来したときに一番気づかれる。
   ============================================================ */

/* ------------------------------------------------------------
   1. トークン。LP の app/globals.css からそのまま移した値
   ------------------------------------------------------------ */
:root {
  --satoyama: #16302a;      /* 里山の深緑（地の色） */
  --satoyama-deep: #0f231e; /* さらに深い陰 */
  --card: #1c3a33;
  --rice: #f0ebdc;          /* 米の白（文字） */
  --muted: #b9c3ba;         /* 弱い文字 */
  --ho: #c68f2c;            /* 稲穂（アクセント・ボタン） */
  --line: rgba(240, 235, 220, 0.14);

  --radius: 0.5rem;
  --ease: cubic-bezier(0.4, 0.4, 0, 1);

  /* LP と同じ2書体。明朝は見出しとロゴだけに使う。
     ⚠️ Shippori Mincho B1 は 800 だけ読んでいるので、
     当てるときは font-weight: 800 を必ず添えること */
  --font-sans: 'Zen Kaku Gothic Antique', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Shippori Mincho B1', var(--font-sans);
}

/* ------------------------------------------------------------
   2. 土台
   ------------------------------------------------------------ */
body {
  margin: 0;
  background: var(--satoyama);
  color: var(--rice);
  font-family: var(--font-sans);
  line-height: 1.9;
  /* LP と同じ日本語の折り方。語の途中で割れるのを防ぐ */
  line-break: strict;
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .wrap { padding: 0 32px; }
}

/* ------------------------------------------------------------
   3. ヘッダー / フッター
   ------------------------------------------------------------ */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 48, 42, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.siteHeader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}

/* ロゴは LogoTag が画像かテキストかで出し分かる。
   ⚠️ 管理画面でロゴ画像を設定していないと、img の alt だけが出る。
      そのとき明朝の極太で英字が出てしまうので、文字で出たときの見た目も整える */
.siteHeader__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.02em;
}

.siteHeader__logo img {
  max-height: 32px;
  width: auto;
}

/* 🚨 !important はここだけ。
   BASE はロゴのテキストに <span class="logoText" style="color:#FFFFFF"> と
   **インラインで色を書いてくる**ので、通常のCSSでは勝てない。
   LP の文字色（米の白）に揃えるための1行。
   ⚠️ 管理画面のデザイン設定でロゴの色を変えても、ここが勝つので効かなくなる。
      管理画面側で色を決めたくなったら、この行を消すこと */
.siteHeader__logo .logoText {
  color: var(--rice) !important;
}

.siteHeader__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.875rem;
  color: var(--muted);
}

.siteHeader__nav a {
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.siteHeader__nav a:hover { color: var(--rice); }

/* ------------------------------------------------------------
   BASEMenuTag（カートと BASE へのリンク）

   🚨 詳細度で勝たないと効かない。
   BASE 側のCSS（BASEshop-*.css）は、このファイルより **後** に読み込まれる。
   しかも中で #baseMenu を使っているので、
     こちら .siteHeader__nav ul   = (0,1,1)
     向こう #baseMenu ul          = (1,0,1)   ← 勝つ
   となって当たらない。同点でも後勝ちで向こうが取る。
   なので **.siteHeader__nav #baseMenu ...** と重ねて (1,1,1) 以上にしてある。
   ⚠️ セレクタから .siteHeader__nav や #baseMenu を外さないこと。外すと戻る。

   素のままだと、リストの黒点が出て、アイコンが height="30" の原寸で並ぶ
   ------------------------------------------------------------ */
.siteHeader__nav #baseMenu {
  display: flex;
  align-items: center;
}

.siteHeader__nav #baseMenu ul {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.siteHeader__nav #baseMenu li {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  float: none;
}

.siteHeader__nav #baseMenu li::marker,
.siteHeader__nav #baseMenu li::before {
  content: '';
  display: none;
}

.siteHeader__nav #baseMenu a {
  display: inline-flex;
  align-items: center;
}

/* img には height="30" が属性で入っている。CSS のほうが強いので上書きできる */
.siteHeader__nav #baseMenu img {
  width: auto;
  height: 22px;
  max-height: 22px;
  object-fit: contain;
}

/* BASE の宣伝リンク（「ネットショップを開設するならBASE」）は必須タグの一部なので
   消さない。ただし主役ではないので、少し引いた見え方にする */
.siteHeader__nav #baseMenu li.base img {
  height: 18px;
  max-height: 18px;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
}

.siteHeader__nav #baseMenu li.base a:hover img { opacity: 1; }

.siteFooter {
  margin-top: 80px;
  border-top: 1px solid var(--line);
  background: var(--satoyama);
}

.siteFooter__inner { padding: 56px 0 40px; }

.siteFooter__lead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0 0 8px;
}

.siteFooter__place {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--ho);
  margin: 0 0 40px;
}

.siteFooter__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  padding: 0;
  list-style: none;
}

.siteFooter__links a { text-decoration: none; }
.siteFooter__links a:hover { color: var(--rice); }

/* 酒類なので必ず出す。LP のフッターと同じ扱い */
.siteFooter__age {
  margin-top: 32px;
  border: 1px solid rgba(198, 143, 44, 0.4);
  border-radius: 2px;
  padding: 12px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.siteFooter__copy {
  margin-top: 24px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ------------------------------------------------------------
   4. 見出し
   ------------------------------------------------------------ */
.eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--ho);
  margin: 0 0 12px;
}

.heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .heading { font-size: 2.5rem; }
}

.section { padding: 64px 0; }

@media (min-width: 768px) {
  .section { padding: 88px 0; }
}

/* ------------------------------------------------------------
   5. 商品一覧
   ------------------------------------------------------------ */
.items {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

@media (min-width: 640px) {
  .items { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

.item a {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}

.item a:hover { border-color: rgba(198, 143, 44, 0.6); }

.item__thumb {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

.item__body { padding: 20px 22px 24px; }

/* ⚠️ 画像が無い商品でもカードが潰れないよう、本文側に最低限の高さを持たせる。
   商品未登録のプレビューで、枠だけが並んで見えるのを防ぐ */
.item__body { min-height: 96px; }

.item__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
}

.item__price {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.item__soldout {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ho);
}

.items__empty {
  margin: 40px 0 0;
  color: var(--muted);
}

/* ------------------------------------------------------------
   6. 商品詳細
   ------------------------------------------------------------ */
.detail {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  padding: 48px 0 0;
}

@media (min-width: 900px) {
  .detail {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    padding: 72px 0 0;
  }
}

.detail__gallery { display: grid; gap: 12px; }

.detail__main {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.detail__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.detail__thumbs img { border-radius: 2px; aspect-ratio: 1 / 1; object-fit: cover; }

.detail__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.4;
  margin: 0;
}

@media (min-width: 768px) {
  .detail__title { font-size: 2.25rem; }
}

.detail__price {
  margin: 16px 0 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ho);
}

.detail__proper {
  margin-left: 10px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
}

.detail__body {
  margin: 28px 0 0;
  color: var(--muted);
  line-height: 2;
}

/* ------------------------------------------------------------
   7. 購入ボタン
   ⚠️ 中身は {PurchaseButton} が吐くので、こちらは器だけを整える。
      ボタンの文字（SOLD OUT / 再入荷通知 等）は BASE 側で自動で変わる
   ------------------------------------------------------------ */
.purchase { margin-top: 32px; }

.purchase select,
.purchase input[type='text'] {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--satoyama-deep);
  color: var(--rice);
  font-family: inherit;
  font-size: 1rem;
}

.purchase button,
.purchase input[type='submit'] {
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 2px;
  background: var(--ho);
  color: var(--satoyama);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

.purchase button:hover:not(:disabled),
.purchase input[type='submit']:hover:not(:disabled) {
  background: rgba(198, 143, 44, 0.85);
}

.purchase button:disabled,
.purchase input[type='submit']:disabled {
  background: var(--card);
  color: var(--muted);
  cursor: not-allowed;
}

/* 注意書き（{ItemAttentionTag}）と通報リンク（{IllegalReportTag}） */
.detail__attention,
.detail__report {
  margin-top: 20px;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ------------------------------------------------------------
   8. 固定ページ（お問い合わせ / プライバシー / 特商法）
   {PageContents} が中身を吐くので、そこだけ読めるように整える
   ------------------------------------------------------------ */
.page { padding: 56px 0 0; }

.page__contents {
  margin-top: 32px;
  color: var(--muted);
  line-height: 2;
}

.page__contents a { color: var(--rice); }

.page__contents table {
  width: 100%;
  border-collapse: collapse;
}

.page__contents th,
.page__contents td {
  border-bottom: 1px solid var(--line);
  padding: 14px 8px;
  text-align: left;
  vertical-align: top;
}

.page__contents th {
  width: 34%;
  color: var(--rice);
  font-weight: 700;
  white-space: nowrap;
}

.page__contents input,
.page__contents textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--satoyama-deep);
  color: var(--rice);
  font-family: inherit;
}

/* ------------------------------------------------------------
   9. 購入モーダル
   ⚠️ 再入荷通知・年齢確認・販売予告のモーダルは BASE 側が出す。
      親要素に「App名 + Modal」の id が付くので、必要なら個別に足す。
      ここでは共通の見た目だけ、地の色に合わせておく
   ------------------------------------------------------------ */
.purchaseButtonModal__wrapper {
  color: var(--satoyama);
}