/* =====================================================
   此花堂 — pages.css（下層ページ専用）
   style.cssの500行規約を守るため、下層専用スタイルを分離。
   トップは読み込まない（パフォーマンス上の分離も兼ねる）
   ===================================================== */
@layer sections {

  .page-main { padding-top: clamp(5.2rem, 12vh, 7rem); }
  .page-head { padding: var(--space-md) var(--side-pad) 0; max-width: 72rem; margin-inline: auto; }
  .page-head .statement { margin-bottom: .6em; }

  /* -- パンくず -- */
  .breadcrumb {
    max-width: 72rem; margin-inline: auto;
    padding: 0 var(--side-pad) var(--space-sm);
    font-size: var(--font-size-sm); letter-spacing: .1em; color: var(--color-ink-soft);
  }
  .breadcrumb__link {
    display: inline-flex; align-items: center; min-height: 44px;
    border-bottom: 1px solid var(--color-line); transition: border-color .3s var(--ease);
  }
  .breadcrumb__link:hover { border-bottom-color: var(--color-ink); }

  /* -- 商品詳細ヘッダー -- */
  .pd {
    max-width: 72rem; margin-inline: auto;
    padding: 0 var(--side-pad) var(--space-lg);
    display: grid; gap: var(--space-md);
  }
  .media-slot--tall { aspect-ratio: 4 / 3; }
  .pd__kana { font-size: .78rem; letter-spacing: .3em; color: var(--color-ink-soft); margin-bottom: .6em; }
  .pd__name { font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-xl); letter-spacing: .08em; margin-bottom: .35em; }
  .pd__price { font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; margin-bottom: 1.1em; }
  .pd__lead { max-width: 34em; margin-bottom: 1.6em; }
  .pd__demo-note { margin-top: 1em; font-size: .74rem; letter-spacing: .12em; color: var(--color-ink-soft); }
  @media (min-width: 768px) {
    .pd { grid-template-columns: 3fr 2fr; align-items: start; gap: var(--space-lg); }
  }

  /* -- 購入モック -- */
  .buy { display: grid; gap: .9em; border: 1px solid var(--color-line); padding: var(--space-sm); background: var(--color-paper); }
  .buy__row { display: flex; align-items: center; gap: 1em; }
  .buy__label { font-size: .78rem; letter-spacing: .24em; color: var(--color-ink-soft); min-width: 3.5em; }
  .buy__select {
    flex: 1; min-height: 48px; padding: 0 .8em;
    font: inherit; letter-spacing: .06em; color: var(--color-ink);
    background: var(--color-paper); border: 1px solid var(--color-ink);
  }
  .buy__select--qty { flex: 0 0 6em; }
  .buy__btn { width: 100%; }
  .buy--inline { border: none; padding: 0; margin-top: 1.2em; grid-template-columns: auto 6em; align-items: center; }
  .buy--inline .buy__btn { grid-column: 1 / -1; }
  .rank--buy { margin-top: 0; }

  /* -- お定め書き -- */
  .spec { display: grid; gap: 0; border-top: 1px solid var(--color-line); }
  .spec__row { display: grid; gap: .3em; padding: 1.1em 0; border-bottom: 1px solid var(--color-line); }
  .spec__dt { font-size: .76rem; letter-spacing: .26em; color: var(--color-ink-soft); }
  .spec__dd { line-height: 1.85; }
  @media (min-width: 640px) {
    .spec__row { grid-template-columns: 9em 1fr; align-items: baseline; }
  }

  /* -- あわせて（関連） -- */
  .related { display: grid; gap: 1em; }
  .related__link {
    display: flex; flex-wrap: wrap; gap: .4em 1.4em; align-items: baseline;
    min-height: 48px; padding: .9em 0; border-bottom: 1px solid var(--color-line);
    transition: border-color .3s var(--ease);
  }
  .related__link:hover { border-bottom-color: var(--color-ink); }
  .related__name { font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; }
  .related__price { font-size: var(--font-size-sm); color: var(--color-ink-soft); letter-spacing: .06em; }
  @media (min-width: 768px) { .related { grid-template-columns: repeat(3, 1fr); } .related__link { flex-direction: column; align-items: flex-start; gap: .3em; } .related--column { grid-template-columns: 1fr; } }

  /* -- 一覧（カタログ） -- */
  .goods--catalog { row-gap: var(--space-lg); }
  .goods--catalog .goods__item--lead { align-items: end; }

  /* -- 店舗: 創作イラストマップ -- */
  .shop-map { width: 100%; height: auto; border: 1px solid var(--color-line); }
  .shop-map-note { margin-top: 1.4em; }

  /* -- 船場だより -- */
  .column-date { display: block; font-size: .74rem; letter-spacing: .22em; color: var(--color-ink-soft); }
  .related--column .related__link { flex-direction: column; align-items: flex-start; gap: .4em; }
  .article .statement { margin-bottom: 1.2em; }
  .article__p + .article__p { margin-top: 1.5em; }
  .article__by { margin-top: 2.4em; font-size: var(--font-size-sm); letter-spacing: .12em; color: var(--color-ink-soft); }

  /* -- 法定ページ -- */
  .legal__h { margin-top: var(--space-md); }

  /* -- トースト（かごモックの応答） -- */
  .toast {
    position: fixed; left: 50%; bottom: 5.5rem; z-index: 9998;
    transform: translate(-50%, 140%);
    background: var(--color-ink); color: var(--color-paper-on-ink);
    font-size: .84rem; letter-spacing: .08em; line-height: 1.6;
    padding: .9em 1.4em; max-width: min(92vw, 34em);
    box-shadow: 0 6px 24px rgba(33, 30, 25, .18);
    transition: transform .4s var(--ease);
  }
  .toast.is-visible { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none !important; }
}
@media (prefers-contrast: more) {
  .buy, .buy__select, .spec__row { border-color: var(--color-ink); }
}