/* ==========================================
   パンくずリスト（ブログ・商品共通コンポーネント）
========================================== */
.breadcrumb {
    max-width: 700px;
    margin: 0 auto 1.5em;
    padding: 0 20px;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    /* .page-title / .page-header .lead と同じく、背景画像の上でも読めるように白文字+シャドウにする */
    color: var(--color-page-title);
    text-shadow: 0 1px 8px var(--color-shadow-strong);
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.breadcrumb li:not(:first-child)::before {
    content: '›';
    opacity: 0.7;
}

.breadcrumb a {
    color: inherit;
    text-decoration: underline;
    opacity: 0.9;
}

.breadcrumb a:hover {
    opacity: 1;
}

.breadcrumb span[aria-current="page"] {
    opacity: 0.8;
}

/* ==========================================
   商品カード一覧 (central_products_grid.php)
   マークアップは既存の .slide-gallery 系をそのまま再利用するため、
   ここでは <a> タグ化した .slide-gallery__item のリンクリセットのみ追加する
========================================== */
a.slide-gallery__item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.slide-gallery__more {
    margin-top: 4px;
    font-size: 0.85em;
    text-decoration: underline;
    text-align: right;
    opacity: 0.85;
}

/* 品名と価格が同じ行に収まりきらない場合、価格を下段に折り返す */
.slide-gallery__item-name {
    flex-wrap: wrap;
}

/* ==========================================
   商品詳細のタイトル・価格（content-body内にネストされる場合）
   .page-title / .page-header .lead は、背景画像に直接乗る通常のページ見出し
   用に白文字+シャドウで作られているが、content-bodyのカード背景の上に
   乗る場合は、他の本文と同じ文字色にしないとライトモードで読みにくい
========================================== */
.content-body .page-header .page-title,
.content-body .page-header .lead {
    color: var(--color-text);
    text-shadow: none;
}