:root {
  /* 欧文フォント（Source Code Pro / Roboto / Assistant）はどれも日本語のグリフを
   * 持たない。そのため和文の受け皿として、どのスタックにも 'Noto Sans JP' を挟む。
   * 挟まないと日本語だけが OS 標準のフォントで描かれ（Mac ならヒラギノ、
   * Windows なら游ゴシック等）、閲覧環境によって字面が変わる。
   * 欧文は先頭のフォントがそのまま使われるので、見た目は変わらない。
   * Noto Sans JP は inc/enqueue.php で Google Fonts から読み込んでいる。 */
  --astra-source-code-pro: 'Source Code Pro', 'Noto Sans JP', monospace;
  --astra-roboto: 'Roboto', 'Noto Sans JP', sans-serif;

  /* 以前は '"Noto Sans JP"' と引用符が二重になっていた。引用符の記号ごと
   * フォント名と見なされるため一度もマッチせず、この変数を使った箇所の和文は
   * 常に OS 標準のフォントで描かれていた（移行初回から入っていた不具合）。 */
  --astra-notosansjp: 'Noto Sans JP', sans-serif;

  --font-heading-family: var(--astra-source-code-pro);

  /* 本文も同じ理由で和文の受け皿を足す。canon（astra-tokens.css）では
   * `Assistant, sans-serif` で、Assistant は欧文しか持たない。
   * 欧文は Assistant のまま変えず、和文だけ Noto Sans JP に受け止めさせる。 */
  --font-body-family: Assistant, 'Noto Sans JP', sans-serif;
  --font-heading-weight: var(--astra-font-weight-regular);

  --astra-font-weight-thin: 100;
  --astra-font-weight-extralight: 200;
  --astra-font-weight-light: 300;
  --astra-font-weight-regular: 400;
  --astra-font-weight-medium: 500;
  --astra-font-weight-semibold: 600;
  --astra-font-weight-bold: 700;
  --astra-font-weight-extrabold: 800;
  --astra-font-weight-black: 900;

  --astra-gray: #CBCBCB;
}

body {
  margin-top: 160px;
  background-color: #000000 !important;

  @media screen and (max-width: 768px) {
    margin-top: 80px;
  }
}

.section-container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 12px;

  @media screen and (max-width: 768px) {
    padding-inline: 18px;
  }
}

.astra-section-title {
  .astra-section-title__box {
    width: 32px;
    height: 8px;
    background: #4E4545 0 0 no-repeat padding-box;
    content: "";
    margin-bottom: 14px;
    display: block;

    @media screen and (max-width: 768px) {
      width: 22px;
      height: 5px;
      margin-bottom: 4px;
    }
  }

  .astra-section-title__title {
    color: #CBCBCB;
    font-family: var(--astra-source-code-pro), monospace;
    font-size: 28px;

    @media screen and (max-width: 768px) {
      font-size: 18px;
      font-weight: var(--astra-font-weight-light);
    }
  }
}

.astra-star-divider {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  .svg-wrapper {
    width: 45px;
    height: 38px;

    svg {
      display: block;
    }
  }

  .astra-star-divider-separator {
    height: 1px;
    background: #989898;
    flex: 1;
    margin: 0;
  }
}

.shopify-policy__title {
  h1 {
    color: #CBCBCB;
  }
}

.shopify-policy__body {
  color: #CBCBCB;

  h1,h2,h3,h4,h5,h6 {
    color: #CBCBCB;
  }
}
/* 固定ページの標準余白（page.php のインライン style から移動）。 */
.astra-page {
  padding-block: 4rem;
}

/* --- 配色トークンの整合 ---------------------------------------------------
 * astra-tokens.css はライブ本番の <head> から取得した Dawn の算出値で、
 * body に付く color-scheme-1 は明色（背景 白 / 文字 #121212）のままになっている。
 * 一方このファイルは body の背景を黒で塗るため、トークンを参照している箇所
 * ——商品詳細・WooCommerce の出力・記事カード・404・検索結果——が
 * 黒地に黒で描画され、ほぼ判読できない状態だった。
 *
 * トップページは各セクションの CSS が色を直に指定しているため無事だったが、
 * トークンに乗っている画面はすべて影響を受けていた。
 *
 * astra-tokens.css は「本番から取得した値」をそのまま残したいので触らず、
 * 背景を黒にしているのと同じこの場所で暗色テーマへ揃える。
 *
 * 背景トークンも変更する。当初は「各セクションの CSS が上書きしているから
 * 不要」と判断したが、Dawn は擬似要素でも背景を塗っており
 * （例: .quantity::before が --color-background で 140x54 を白く塗りつぶし、
 *   商品詳細の数量入力が真っ白な塊に見えていた）、要素の背景だけを見た
 * 調査では取りこぼしていた。 */
body,
.color-scheme-1 {
  --color-foreground: 255, 255, 255;
  --color-background: 0, 0, 0;
  --gradient-background: #000000;
  --color-background-contrast: 60, 60, 60;
  --color-link: 255, 255, 255;
  --color-secondary-button-text: 255, 255, 255;
}

/* 検索の入力欄。Dawn の .field__input は背景に --color-background（＝白）を
 * 使うため、前景を白に揃えた結果ヘッダーのオーバーレイでも検索結果ページでも
 * 白地に白文字になっていた。暗色の入力欄へ揃える。 */
.search__input,
.search__input.field__input {
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.search__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* 記事カードの重複表示。Shopify の article-card.liquid は card__content を
 * 内側（card__inner の中）と外側の2箇所に出力し、blog_card_style の設定に
 * 応じて Dawn の CSS がどちらかを隠す。当テーマはその設定を持たないため、
 * テンプレート側で card--card に固定してある。
 *
 * card--card を選んだのは実測の結果。画像なしのカードでは Dawn が
 * 「.card--card.card--text .card__inner { display: none }」で内側ごと隠すため
 * 重複が自動的に解消する。card--standard だとどちらも隠れないうえ、
 * 自前で内側を隠すとカードの高さが 0 に潰れて何も見えなくなる
 * （.card__content の grid-template-rows が minmax(0,1fr) を含み、
 *   カードの高さを .card__inner から得ているため）。
 *
 * 画像ありのカードは内側が画像で高さを持つので、内側の本文だけを隠せばよい。 */
.article-card.card--card.card--media > .card__inner > .card__content {
  display: none;
}

/* --- 重なり順 -------------------------------------------------------------
 * ヘッダーは position: fixed だが z-index を持っておらず、後から来る
 * トップページのヒーロー（.hero-image-wrapper）が全面を覆っていた。
 * その結果ヘッダーのリンクもアイコンも一切クリックできなかった。
 * 既存の値（背景動画 -1 / ドロワー 9）と衝突しない範囲で層を明示する。 */
.custom-header {
  z-index: 5;
}

.astra-announcement {
  z-index: 4;
}

/* --- ボタンの外周リング ---------------------------------------------------
 * Dawn の .button::after は --buttons-border-width の幅で
 * rgba(var(--color-button)) のリングを描く。--color-button は明色スキームの
 * 18,18,18 のままなので、黒い枠がボタンの外側に浮いて見えていた
 * （カートに追加・Return to shop・ドロワーの入力欄など全体）。
 * リングを 0 幅にして消し、ボタン自体は暗色テーマに合わせて白抜きにする。
 * 主要 CTA はシアン塗り（astra-woo.css）なので、白抜きは副次ボタン用。 */
:root {
  --buttons-border-width: 0px;
}

body,
.color-scheme-1 {
  --color-button: 255, 255, 255;
  --color-button-text: 18, 18, 18;
}