/* =========================================================
   デザイントークン
   ========================================================= */
:root {
    /* 基本カラー（デフォルトはダークテーマ） */
    --color-bg: #0f1115;
    --color-panel: #151821;
    --color-panel-soft: #191d28;
    --color-border: #242938;
    --color-border-soft: rgba(120, 160, 255, 0.18);

    --color-text: #E8EAF1;
    --color-muted: #A6AEC9;

    --color-accent: #3BD27F;
    --color-accent-ink: #0A1110;

    /* チップ選択時の共通グラデーション */
    --chip-active-bg: linear-gradient(135deg,
            #15e787 0%,
            #00ead7 100%);
    --mykw-active-bg: var(--chip-active-bg);


    /* 光沢（ハイライト）トークン */
    --chip-gloss-bg: linear-gradient(to bottom,
            rgba(230, 255, 189, 0.8),
            transparent 50%);

    /* チップアクティブ時の文字色（共通） */
    --chip-active-fg: #111322;
    --mykw-active-fg: var(--chip-active-fg);
    --mykw-active-shadow: var(--chip-active-shadow);



    /* マイキーワード用（初期は共通を参照） */
    --mykw-gloss-bg: var(--chip-gloss-bg);

    --color-warn: #EDB23A;
    --color-ok: #45C7A5;

    --color-tag-bg: rgba(120, 170, 255, 0.20);
    --color-tag-border: rgba(150, 190, 255, 0.40);

    /* チップ（カテゴリ／マイキーワード共通）のベース色 */
    --chip-bg: var(--color-tag-bg);
    --chip-border: var(--color-tag-border);
    --chip-fg: var(--color-text);

    --color-danger-bg: rgba(255, 110, 110, 0.20);
    --color-danger-border: rgba(255, 140, 140, 0.40);

    --shadow-elevated: 0 3px 8px rgba(0, 0, 0, 0.16);

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

    /* マイキーワード用（デフォルトはチップと同じ。将来ここだけ差し替え） */
    --mykw-bg: var(--color-panel-soft);
    --mykw-border: var(--color-border);
    --mykw-chip-bg: var(--chip-bg);
    --mykw-chip-border: var(--chip-border);
    --mykw-chip-fg: var(--chip-fg);
    --mykw-chip-delete-bg: rgba(170, 51, 51, 0.12);
    --mykw-chip-delete-border: #aa3333;

    /* タグ（カード内ラベルなど）の共通トーン */
    --tag-bg-neutral: rgba(255, 255, 255, 0.04);

    /* 影（共通シャドウ） */
    --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.16);

    /* 検索結果エリア用の背景（新規追加） */
    --color-results-bg: #161a1f;
    /* 少しだけ暗い専用トーン */

    /* ヒーロー上のテキスト色（ライト／ダーク共通） */
    --hero-text-color: #ffffff;

}





/* ライトテーマ用の上書き（body.theme-light を付けるだけで切り替え可能） */
body.theme-light {
    --color-bg: #f5f6fb;
    --color-panel: #ffffff;
    --color-panel-soft: #ffffff;
    --color-border: #d1d5e5;
    --color-border-soft: rgba(60, 80, 140, 0.16);

    --color-text: #111322;
    --color-muted: #7a8098;

    --color-tag-bg: rgba(0, 0, 0, 0.05);
    --color-tag-border: rgba(0, 0, 0, 0.12);

    /* ライトテーマ用のチップ共通色 */
    --chip-bg: var(--color-tag-bg);
    --chip-border: var(--color-tag-border);
    --chip-fg: var(--color-text);

    --color-tag-hover-bg: rgba(0, 0, 0, 0.08);
    --color-tag-hover-border: rgba(0, 0, 0, 0.18);

    /* マイキーワードチップもデフォルトはカテゴリと同じ */
    --mykw-bg: #f8f8ff;
    --mykw-border: #d1d5e5;
    --mykw-chip-bg: var(--chip-bg);
    --mykw-chip-border: var(--chip-border);
    --mykw-chip-fg: var(--chip-fg);

    /* 検索結果エリア用の背景（新規追加） */
    --color-results-bg: #fdfdfd;
    /* カードよりほんのり暗い */

}


/* =========================================================
   ベース
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;

    /* スマホでのダブルタップ拡大・余計なジェスチャーを抑制 */
    touch-action: manipulation;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font-family: inherit;
    font-size: 16px;
}

small,
.muted {
    color: var(--color-muted);
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.02em;
}

/* =========================================================
   ヘッダー
   ========================================================= */

/* ヘッダー右上のダーク／ライト切り替えボタン */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    border-radius: 6px;

    line-height: 1;
    /* 絵文字の縦余白カット */
    aspect-ratio: 1 / 1;
    /* 正方形を保証 */

    border: 1px solid var(--color-border);
    background: var(--color-panel-soft);
    color: var(--color-muted);

    font-size: 26px;
    cursor: pointer;
    padding: 0;
}

/* スマホでは少し小さめでもOK */
@media (max-width: 767px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }
}

/* ================================
   テーマ切り替えフェード（ゆっくり）
   ================================ */
html,
body,
header,
main,
section,
footer,
.card,
.badge,
.chip,
button,
input,
select {
    transition:
        background-color 0.7s cubic-bezier(.4, 0, .2, 1),
        color 0.7s cubic-bezier(.4, 0, .2, 1),
        border-color 0.7s cubic-bezier(.4, 0, .2, 1),
        box-shadow 0.7s cubic-bezier(.4, 0, .2, 1);
}




/* =========================================================
   レイアウト
   ========================================================= */

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

/* =========================================
   ヘッダー
   ========================================= */

header {
    padding-left: 0;
    padding-right: 0;
}

header .wrap.hdr {
    display: flex;
    align-items: center;
    /* 縦位置揃える */
    justify-content: space-between;
    /* 左右に振り分け */
    gap: 16px;
    padding: 6px 20px;
}

/* ここだけ置き換えでOK */
.brand {
    margin: 0 0 2px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* サブコピーとの距離も少しだけ詰める */
.brand-sub {
    margin: 2px 0 0;
    font-size: 13px;
}


/* 左側（ブランド）のブロックは右側に押されてもOKなように伸縮させる */
header .wrap.hdr>div:first-child {
    flex: 1 1 auto;
}

footer {
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border);
}

footer {
    border-top: 1px solid var(--color-border);
    border-bottom: none;
}

/* フッター注意書き用：フォントサイズ＋行間をまとめて管理 */
.footer-notes {
    font-size: 12px;
    line-height: 1.55;
}


/* Hero：背景は不要・単なるコンテナとして最小化 */
.hero {
    margin: 0 0 16px;
    border-bottom: none;
    box-shadow: none;
    background: none;
    /*  背景グラデ完全削除 */
}

/* 画像＋コピーの内側コンテナ */
.hero__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* ヒーロー画像：スマホ基準 20:6 */
.hero__img {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    height: auto;
    aspect-ratio: 20 / 6;
    object-fit: cover;
}

.hero__copy {
    position: absolute;
    inset: 0;
    /* 画像と同じ領域を完全に覆う */
    pointer-events: none;
    /* クリックは画像側へ通す */
}

/* ヒーロー画像の上下に半透明の黒帯を敷く（スマホ基準） */
.hero__copy::before {
    content: "";
    position: absolute;
    inset: 0;
    /* .hero__copy 全体（=ヒーロー画像の範囲）にフィット */
    pointer-events: none;

    /* 上端・下端だけを黒くするための 2 本帯グラデーション */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.55) 0%,
            /* 上帯スタート */
            rgba(0, 0, 0, 0.55) 15%,
            /* 上帯終わり */
            transparent 15%,
            transparent 85%,
            rgba(0, 0, 0, 0.55) 85%,
            /* 下帯スタート */
            rgba(0, 0, 0, 0.55) 100%
            /* 下帯終わり */
        );
}

/* ================================
   ヒーローテキスト（スマホ基準）
   ================================ */

/* メインコピー：上側の黒帯の「中央あたり」に載せる */
.hero__title {
    position: absolute;
    top: 2%;
    /* 上帯 0〜18% の中央 */
    left: 50%;
    transform: translate(-50%, -80%);
    width: 88%;
    text-align: center;

    font-size: 15px;
    line-height: 1.0;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--hero-text-color);
}

/* サブコピー：下側の黒帯の「中央あたり」に載せる */
.hero__subtitle {
    position: absolute;
    bottom: 2%;
    /* 下帯 82〜100% の中央 */
    left: 50%;
    transform: translate(-50%, 75%);
    width: 88%;
    text-align: center;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--hero-text-color);
}

/* フォント＋テキストシャドウ共通設定 */
.hero__title,
.hero__subtitle {
    font-family:
        "Hiragino Maru Gothic ProN",
        "Meiryo",
        "Yu Gothic UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    letter-spacing: 0.02em;
    color: var(--hero-text-color);

    /* 黒帯に負けないが、帯そのものを“濃く見せ過ぎない”程度の影 */
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.65),
        0 0 1px rgba(0, 0, 0, 0.40);
}

/* ================================
   PC 向け調整（768px 以上）
   ================================ */
@media (min-width: 768px) {

    .hero__title {
        font-size: 22px;
        /* お好みで 20〜24px 程度 */
        font-size: clamp(20px, 2.2vw, 26px);
    }

    .hero__subtitle {
        font-size: 12px;
        font-size: clamp(11px, 1.3vw, 14px);
    }
}


/* =========================================================
   ローディング
   ========================================================= */
/* ローディングスピナー */
.loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top: 3px solid var(--color-accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ラベルエリア中央寄せ */
.restock-loading {
    padding: 24px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* =========================================================
   在庫復活
   ========================================================= */

#restock {
    padding: 6px 14px 4px;
}

.restock-title {
    font-size: 16px;
    margin: 0 0 10px;
}

.restock-count {
    margin-left: 6px;
    font-size: 12px;
    color: var(--color-muted);
    font-weight: 400;
}


.restock-list {
    list-style: none;
    padding: 8px 12px;
    margin: 0;
    border-radius: var(--radius-md);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    max-height: 260px;
    overflow-y: auto;
    font-size: 13px;
    box-shadow: var(--shadow-soft);
}

@media (max-width: 767px) {
    .restock-list {
        max-height: 220px;
    }
}


.restock-list li+li {
    margin-top: 4px;
}

/* 在庫復活 行本体 */
.restock-list a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;

    line-height: 1.25;
    max-height: 2.5em;
    /* 2行まで */

    /* 行の色帯を左右いっぱいに広げる */
    margin: 0 -12px;
    /* 親の padding: 0 12px を打ち消す */
    padding: 0px 12px;
    /* テキストの左右余白はここで確保 */

    border-radius: 0;
}

/* 奇数行の背景色（ダークテーマ用・やや明るめ） */
.restock-list li:nth-child(odd) a {
    background: rgba(255, 255, 255, 0.05);
}

/* ライトテーマでは薄いグレーに切り替え */
.theme-light .restock-list li:nth-child(odd) a {
    background: rgba(11, 11, 66, 0.1);
}

/* 偶数行は背景なしでOK */
.restock-list li:nth-child(even) a {
    background: transparent;
}

/* 日付＋時刻 */
.restock-time {
    color: var(--color-accent);
    /* チップと同じ緑 */
    font-weight: 600;
    margin-right: 4px;
}

/* 商品名側はデフォルト色のまま */
.restock-name {
    margin-left: 4px;
}

/* =========================
   「商品を探す」ラベル
   ========================= */

.search-label-section {
    margin: 10px 0 4px;
    /* 上下の余白を少しコンパクトに */
    padding-left: 20px;
    /* サイト共通の左右余白 */
    padding-right: 20px;
}

.search-label-section .wrap {
    padding: 0;
    /* 内側の余白はほとんど無しでOK */
}

/* =========================
    ホットワード表示エリア
   ========================= */
/* HOTワードは共通セクション余白 */
.hotword-section {
    margin: 10px 0 6px;

    padding-inline: 26px;
}

.hotword-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* 旧 .chip と同じ内容をここに */
.hotword-chip {
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    background: var(--color-panel);
    color: var(--color-text);
}

.hotword-chip.active {
    background: var(--color-primary);
    color: #fff;
}

/* HOTワード全体をパネル風に囲む */
.hotword-section .wrap {
    /* wrap の共通パディングを上書きして少しだけ詰める */
    padding: 12px 12px;

    border-radius: var(--radius-md);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
}

/* 見出しまわりの余白を軽く整える */
.hotword-section .section-title {
    font-size: 14px;
    margin: 0 0 8px;
}

/* =========================================================
   検索バー
   ========================================================= */

.searchbar {
    padding: 4px 20px 4px;
}

.searchbar__row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.searchbar__category-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    /* 狭い画面では折り返して2段になっても崩れないように */
}


.searchbar__label {
    display: block;
    font-size: 160px;
    font-weight: 600;
    margin-bottom: 4px;
}

.searchbar__input::placeholder {
    font-size: 12px;
    color: var(--color-muted);
}


/* カテゴリ・キーワード用の小さめラベル */
.searchbar__label--small,
.searchbar__label--keyword {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
}

.searchbar__mykw {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

/* 「マイキーワードに追加」専用ボタン */
.searchbar__savekw {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 60px;
    width: 120px;
    padding: 0;

    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-panel);

    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);

    cursor: pointer;

    white-space: nowrap;
    /* 必要に応じて normal に変更 */

    transition: background 0.2s, color 0.2s;
}

.searchbar__savekw:disabled {
    opacity: .4;
    cursor: default;
}

.input,
.select {
    background: var(--color-panel);
    color: var(--color-text);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    outline: none;
    min-height: 36px;
}

/* ================================
   ソート非活性（在庫復活順固定時）
   ================================ */

.select.sort--disabled {
    color: var(--color-muted);
    opacity: 0.55;

    border-style: dashed;
    border-color: var(--color-border-soft);

    background: var(--color-panel-soft);

    cursor: not-allowed;
}

/* hoverしても変化させない（誤作動感防止） */
.select.sort--disabled:hover {
    background: var(--color-panel-soft);
}

/* テキストも少しぼかす */
.select.sort--disabled option {
    color: var(--color-muted);
}


.input {
    flex: 1;
}

.input::placeholder {
    color: var(--color-muted);
}

.select {
    min-width: 180px;
}

.toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.toggle input[type="checkbox"] {
    accent-color: var(--color-accent);
}

/* 共通ボタン・バッジ（丸みのあるチップ兼ボタン） */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    min-height: 26px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-panel);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* 検索欄のクリアボタン */
.searchbar__reset {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

/* ---------------------------------------------------------
   推しワード（横幅は wrap の 1200px で頭打ちにする）
   --------------------------------------------------------- */
.mykw-section {
    /* セクション外側の余白だけ担当 */
    margin: 6px 20px 8px;
    padding-inline: 20px;
    /* サイト共通の左右余白に合わせる */
}

/* パネル本体は wrap に持たせる → max-width:1200px が効く */
.mykw-section .wrap {
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background: var(--mykw-bg);
    border: 1px solid var(--mykw-border);
}




/* ---------------------------------------------------------
   推しワードセクション見出し + 折りたたみトグル
   --------------------------------------------------------- */
.mykw-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    /* 上、左右、下 */
    margin: 0 0 2px;

}

.mykw-section__title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    margin: 0;
}

/* 開閉用の小さな丸ボタン（＋／－） */
.mykw-section__toggle {
    display: inline;

    border: none;
    background: none;

    color: var(--color-muted);
    font-size: 36px;
    /* 見やすく調整 */
    font-weight: 700;
    line-height: 1;

    padding: 0;
    margin-left: 8px;
    /* ラベルとの間に少し空ける */

    cursor: pointer;
}


/* 折りたたみ時：箱（.mykw）ごと非表示にする */
.mykw-section--collapsed .mykw {
    display: none;
}

/* =========================================================
   推しワードエリア
   ========================================================= */

.mykw {
    margin-top: 0px;
    padding: 2% 0px;
    border-radius: var(--radius-sm);

    background: transparent;
    border: none;
}


.mykw__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.mykw__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.mykw__save {
    flex-shrink: 0;
}

/* ＋／－ アイコンボタン */
.mykw__ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;

    border: 1px solid var(--color-border);
    background: var(--color-panel);
    color: var(--color-muted);

    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.mykw__ctrl--add {
    /* 追加用：必要ならここで色を変える */
}

.mykw__ctrl--delete {
    /* 削除用：削除モード時は JS から色変更 */
}

.mykw__ctrl:disabled,
.mykw__ctrl.mykw__ctrl--disabled {
    opacity: 0.35;
    cursor: default;
}

.mykw__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

/* マイキーワードのチップコンテナ */
.mykw__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 10px;
    margin-top: 4px;
    min-height: 42px;
}

/* マイキーワードチップ内テキスト */
.mykw-chip__kw {
    display: inline-block;
    max-width: 12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 削除モード中の見た目 */
.mykw-chip--delete-mode {
    background: var(--mykw-chip-delete-bg);
    border-color: var(--mykw-chip-delete-border);
    color: var(--mykw-chip-delete-border);

    /* レイアウトは一切変えない */
    padding-left: 0;
}

/* 削除対象として選択された状態 */
.mykw-chip--delete-mode.mykw-chip--selected {
    background: rgba(170, 51, 51, 0.25);
}

/* チェックマークは表示しない */
.mykw-chip--delete-mode.mykw-chip--selected::before {
    content: none;
}

/* テキストの移動も無効化 */
.mykw-chip--delete-mode.mykw-chip--selected .mykw-chip__kw {
    transform: none;
}


.mykw__delete-confirm {
    background: var(--color-danger-bg);
    border-color: var(--mykw-chip-delete-border);
    color: var(--mykw-chip-delete-border);
    font-weight: 600;
}




/* =========================================================
   Filters (カテゴリチップ)
   ========================================================= */

/* カテゴリ見出し + リセットボタンの行 */
.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 0 6px;
}

/* 条件リセットボタン（カテゴリ横） */
.category-reset {
    font-size: 11px;
    padding: 4px 10px;
}

/* カテゴリ・マイキーワード共通のチップ置き場 */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 12px;
    margin: 8px 0;
    padding: 8px;
    background: var(--color-panel);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

/* =========================
   チップ共通（カテゴリ + マイキーワード）
   ========================= */
.chip,
.mykw-chip {
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    max-width: 100%;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* カテゴリ用（デフォルト） */
.chip {
    border: 1px solid var(--chip-border);
    background: var(--chip-bg);
    color: var(--chip-fg);
}

/* マイキーワード用（将来カラーカスタムするときはトークンを差し替え） */
.mykw-chip {
    border: 1px solid var(--mykw-chip-border);
    background: var(--mykw-chip-bg);
    color: var(--mykw-chip-fg);
}

/* 選択中のチップ共通（カテゴリ + マイキーワード） */
.chip.active,
.mykw-chip--active {
    position: relative;
    overflow: hidden;

    color: var(--chip-active-fg);
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}

/* カテゴリ：アクティブ時の背景 */
.chip.active {
    background: var(--chip-active-bg);
}

/* マイキーワード：アクティブ時の背景（デフォルトは同じ） */
.mykw-chip--active {
    background: var(--mykw-active-bg);
}

/* 光沢レイヤー（カテゴリ・マイキーワード共通で構造を揃える） */
.chip.active::before,
.mykw-chip--active::before {
    content: "";
    position: absolute;
    /* ★ 上側だけに細い帯を描く */
    left: 2px;
    /* 枠線から少し内側に寄せる */
    right: 2px;
    top: 1px;
    height: 45%;
    /* ここを 35〜50% くらいで微調整 */

    border-radius: 999px 999px 40% 40%;
    /* 上は丸く、下側は少し浅くして帯っぽく */

    pointer-events: none;
}

/* カテゴリの光沢 */
.chip.active::before {
    background: var(--chip-gloss-bg);
}

/* マイキーワードの光沢（トークン差し替えで個別調整可能） */
.mykw-chip--active::before {
    background: var(--mykw-gloss-bg);
}

/* 見出しラベル */
h3.muted {
    font-size: 13px;
    color: var(--color-muted);
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.h-main {
    font-weight: 600;
}

.h-sub {
    font-weight: 400;
    font-size: 12px;
}

/* --------------------------------------------------------- */
/*   パンくずリスト
/* --------------------------------------------------------- */

.breadcrumb-section {
    margin: 0;
}

/* 上下のセクションとバランスを取るための左右余白 */
.breadcrumb-section .wrap {
    padding: 4px 40px 2px;
}

.breadcrumbs {
    font-size: 13px;
    color: var(--color-muted);
    margin: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;

    /* 3行分の高さを常に確保してレイアウトを安定させる */
    min-height: calc(1.4em * 3);
}

.breadcrumbs .bc-left {
    flex: 1 1 auto;
    min-width: 0;
    /* 件数側に幅を譲れるようにする */
}

/* 1行分（HOT / カテゴリ / キーワード）の表示 */
.bc-line {
    display: block;
    line-height: 1.3;
    margin-bottom: 2px;

    white-space: nowrap;
    /* 行内改行させない */
    overflow: hidden;
    /* はみ出した分は非表示 */
    text-overflow: ellipsis;
    /* 末尾を … で省略表示 */
}

.bc-line:last-child {
    margin-bottom: 0;
}

/* ヒット件数（1行目右端固定） */
.bc-count {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ヒット件数の単位部分（"件ヒット"） */
.bc-count__unit {
    margin-left: 2px;
    /* 数字との間にごく自然なすき間 */
    font-size: 12px;
    /* 数字よりわずかに小さく */
    opacity: 0.7;
    /* 補助情報として少しトーンを落とす */
}




/* =========================================================
   ツールバー
   ========================================================= */

.toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 8px;
}


.tool-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

@media (min-width: 768px) {
    .toolbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .tool-row {
        flex: 1;
    }
}

/* =========================================
   検索結果エリア全体（タブ + 並び替え + カード + ページャ）
   を 1 つのパネルとして背景で分離する
   -----------------------------------------
   対象: <main id="main"> 直下の .wrap
   （＝セグメント／カード／ページャを囲む箱だけ）
   ========================================= */
#main>.wrap {
    margin: 12px auto 24px;
    padding: 16px 20px 20px;

    border-radius: var(--radius-lg);

    /* ▼ ここを新トークンに変更 */
    background: var(--color-results-bg);

    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);

}


/* =========================================================
   タブ（全商品｜在庫復活）
   ========================================================= */

/* タブ全体の箱をはっきりさせる（ライト／ダーク共通） */
.mode-tabs {
    display: flex;
    border-radius: var(--radius-pill);
    background: var(--color-panel-soft);
    /* ダークでも面が見える */
    border: 1px solid var(--color-border-soft);
    /* 枠線を少し明るめに */
    padding: 2px;
    margin-top: 0px;
    margin-bottom: 4px;
}

/* 個々のタブ（ボタン） */
.mode-tab {
    flex: 1;
    padding: 8px 0;
    /* 高さだけ確保（横幅はflex任せ） */
    font-size: 16px;
    /* ラベルを一段階大きく */
    font-weight: 600;
    /* ラベル感を強める */
    text-align: center;

    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    cursor: pointer;

    transition: background 0.2s, color 0.2s;
}

/* アクティブタブ */
.mode-tab.is-active {
    background: var(--chip-active-bg);
    color: var(--chip-active-fg);
}

/* =========================
   PC向け：セグメントタブを少し大きく
   （ツールバーが横並びになる 768px 以上で統一）
   ========================= */
@media (min-width: 768px) {
    .mode-tabs {
        min-width: 280px;
        /* PC幅では常にこのくらいを確保 */
        flex-shrink: 0;
        /* 横幅不足時に極端に潰れないようにする */
    }

    .mode-tab {
        padding: 10px 0;
        /* 高さアップ */
        font-size: 17px;
        /* ラベルを一段大きく */
    }
}


/* =========================================================
   商品カード
   ========================================================= */

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

/* スマホ：2列 */
@media (max-width: 820px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ラージデスクトップ：4列 */
@media (min-width: 1280px) {
    .cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* カード本体 */
.card--h {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-elevated);
}

/* ダークモード時だけ、カードの輪郭を少し強調 */
body:not(.theme-light) .card--h {
    box-shadow:
        /* よこたてぼかし広がり */
        0px 1px 2px 1px rgba(100, 180, 255, 0.12),
        var(--shadow-elevated);
}


/* 画像枠：カード幅いっぱい＋正方形固定 */
.card__img {
    position: relative;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}

.card__img::before {
    content: "";
    display: block;
    padding-top: 100%;
}

/* 中の画像：枠の中で縮小・中央寄せ（切り抜かない） */
.card__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

/* 情報ブロック */
.card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* カード内ブランド専用の調整 */
.card--h .brand {
    font-size: 10px;
    letter-spacing: 0;
    font-weight: 600;
    margin-top: 4px;
    display: block;
}

/* 価格行 */
.price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price {
    font-size: 16px;
    font-weight: 700;
}

.price.muted {
    color: var(--color-muted);
}

/* 価格横のバッジ置き場 */
.price-row .badges {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* 予約 / 在庫バッジ */
.badge-pre {
    background: var(--color-warn);
    color: #111;
    border: none;
    /* 共通 .badge の枠線を消す */
    box-shadow: none;
}

.badge-instock {
    background: var(--color-ok);
    color: #091212;
    border: none;
    /* 在庫バッジも枠線なしで揃える */
}

/* %OFF バッジ（形は予約バッジと同じ pill） */
.badge-deal {
    /* 形・サイズは .badge の設定をそのまま使用する */
    background: linear-gradient(120deg, #f43f5e, #e11d48);
    /* 赤系グラデーション */
    color: #fff;
    border: none;
    gap: 2px;
    /* 数字と「％OFF」の間隔だけ少し詰める */
}

/* 中の文字サイズ調整（必要なら） */
.badge-deal .deal-main {
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1;
}

.badge-deal .deal-sub {
    font-size: 0.8em;
    opacity: 0.9;
    margin-left: 1px;
}



/* タイトル */
.title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.title[data-truncated="1"] {
    cursor: help;
}

/* ブランド等のメタ情報 */
.meta {
    font-size: 12px;
    color: var(--color-muted);
}

/* カード内タグ */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0, 0, 0, .25);
    padding: 3px 8px;
    font-size: 11px;
    background: var(--tag-bg-neutral);
    cursor: pointer;
}

/* トーン付きタグ（カテゴリ用） */
.tag--tone {
    border: 1px solid transparent;
    background: hsl(var(--tag-h, 210), 72%, 18%);
    color: #f5f7ff;
}

/* 「Amazon在庫あり（他の出品者に表示）」用メッセージ行 */
.card__amz-other {
    padding: 6px 8px;
    margin-top: 6px;
    margin-bottom: 4px;

    border-left: 3px solid var(--color-warn);
    background: rgba(255, 200, 0, 0.04);

    font-size: 12px;
    color: var(--color-warn-alt);
}


/* =========================================================
   ページャ
   ========================================================= */

#pager {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 16px 0;
}

#pager .btn {
    min-width: 38px;
    padding: 8px 18px;
    border-radius: 8px;

    border: 1px solid var(--color-border);
    background: var(--color-panel);
    color: var(--color-text);

    cursor: pointer;
    font-size: 13px;
}


/* =========================================================
   Misc
   ========================================================= */

section.searchbar,
#restock {
    border-bottom: 1px solid rgba(255, 255, 255, 0);

}

/* カテゴリドロップダウンの行（カテゴリ + 予約除外 を横並び） */
.searchbar__category-row {
    display: flex;
    align-items: center;
    gap: clamp(8px, 3vw, 24px);
    margin-bottom: 6px;

    flex-wrap: nowrap;
    /* ← 折り返し禁止 */
    overflow-x: hidden;
    /* ← はみ出し隠す */
}

/* カテゴリドロップダウン専用の微調整 */
.searchbar__category-select {
    flex: 1;
    min-width: 0;
    /* これが重要：文字に引っ張られないようにする */
    max-width: none;
}


footer .wrap {
    padding-top: 10px;
    padding-bottom: 16px;
    font-size: 12px;
    color: var(--color-muted);
}

/* スクリーンリーダー専用 */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   共通：ボタン／チップの「押し込み」エフェクト
   ========================================================= */

/* 対象：クリック可能な要素（一部抜粋） */
.badge,
.chip,
.mykw-chip,
.mykw__ctrl,
.mykw-section__toggle,
.searchbar__savekw,
.sort-toggle__button,
.theme-toggle {
    /* 押した時にヌルっと動かすためのアニメーション */
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
    will-change: transform;
}

/* 押している間、小さくなる（PC・スマホ共通） */
.badge:active,
.chip:active,
.mykw-chip:active,
.mykw__ctrl:active,
.mykw-section__toggle:active,
.searchbar__savekw:active,
.sort-toggle__button:active,
.theme-toggle:active {
    transform: scale(0.94);
    /* 好みで 0.94〜0.98 くらいに調整 */
}

/* キーボード操作向けのフォーカス見た目 */
.badge:focus-visible,
.chip:focus-visible,
.mykw-chip:focus-visible,
.mykw__ctrl:focus-visible,
.mykw-section__toggle:focus-visible,
.searchbar__savekw:focus-visible,
.sort-toggle__button:focus-visible,
.theme-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}


/* =========================================================
   推しワードモーダル
   ========================================================= */

.mykw-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 25, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.mykw-modal.hidden {
    display: none;
}

.mykw-modal__content {
    width: min(92vw, 320px);
    padding: 20px 18px;
    background: var(--color-panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mykw-modal__title {
    font-size: 14px;
    margin: 0;
}

.mykw-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;

    width: 28px;
    height: 28px;

    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-panel-soft);
    color: var(--color-muted);

    cursor: pointer;
    font-size: 14px;
}


/* =========================================================
   テキスト選択ポリシー
   ---------------------------------------------------------
   - サイト全体：基本は選択不可
   - 例外：フォーム入力だけ選択可
   ========================================================= */

/* デフォルト：ほぼ全て選択不可＆長押しメニュー禁止 */
body,
body * {
    -webkit-user-select: none;
    /* iOS Safari */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    /* iOS 長押しメニュー（コピー等）禁止 */
}

/* 入力欄だけは選択できないと不便なので許可 */
input,
textarea,
select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;

    -webkit-touch-callout: default;
}


/* =========================
   検索結果が 0 件のとき
   ========================= */

#results {
    min-height: 200px;
    margin-top: 18px;
    /* 高さだけは常に確保する */
}

/* 空状態のときだけ中央寄せする */
#results .results-empty {
    width: 100%;
    min-height: 180px;
}

.empty-box {
    padding: 24px 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-panel);
    text-align: center;
    max-width: 320px;
}

.empty-icon {
    font-size: 22px;
    margin-bottom: 6px;
}

.empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.empty-hint {
    font-size: 12px;
    color: var(--color-muted);
}

/* =========================
   PC表示
   ========================= */

/* PC表示時：「商品を探す」ラベルと検索周りの横幅をそろえて中央寄せ */
@media (min-width: 900px) {

    /* 「商品を探す」見出しのコンテナだけ幅を制限 */
    .search-label-section {
        max-width: 900px;
        /* 下の .wrap と同じ数値 */
        margin: 10px auto 4px;
        /* 上下の余白は元の値を踏襲 */
        padding-left: 0;
        padding-right: 0;
    }

    /* HOTワード／検索バー／パンくず／推しワード本体の幅 */
    .searchbar .wrap,
    .hotword-section .wrap,
    .mykw-section .wrap,
    .breadcrumb-section .wrap {
        max-width: 900px;
        /* 調整してよければここだけ変えればOK */
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===============================
   並び替え中の軽いフェード演出
   =============================== */

/* 通常状態にもトランジションを仕込んでおく */
#results {
    transition: transform 0.2s ease-out;
}

/* 並び替え中（JSで付け外しされるクラス） */
#results.is-sorting {
    opacity: 1;
    /* ← 透明度変化をやめる */
    transform: scale(0.998);
    /* ごくわずかに縮めるだけ */
}

/* =========================================
   カード全体リンク化 (card-link)
   ========================================= */
.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* hover 時の浮き上がり（既存の .card--h の動きを自然に補完） */
.card-link:hover .card--h {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* =========================================
   ヘッダー：スマホ時の余白＆タップ領域調整
   ========================================= */
@media (max-width: 767px) {

    /* ヘッダー全体の上下パディングを少し増やす */
    header .wrap.hdr {
        padding: 10px 20px 8px;
        /* 上 10px / 下 8px にして少しゆとり */
    }

    /* 「ほびちょく！」ラベル（ページ更新リンク）のタップ領域を拡大 */
    .brand {
        display: inline-block;
        /* パディングを有効にする */
        padding: 4px 0;
        /* 上下に 4px の余白 → 指で押しやすくする */
        margin: 0 0 4px;
        /* サブとの間も少しだけ広げる */
        line-height: 1.2;
        /* テキストの上下が詰まりすぎないように */
    }

    /* サブコピーは少し小さめ＋読みやすい行間 */
    .brand-sub {
        font-size: 12px;
        line-height: 1.4;
    }
}