/* =========================================================
 * Velvet Archive Design System
 * STEP10-E / Core 1.19.20
 *
 * 目的:
 * - 既存の商品DB機能・HTML構造を変更せず、共通の配色・文字・余白・
 *   ボタン・カード・バッジ・フォームを「べるべっとアーカイブ」の
 *   ブランド世界観へ統一する。
 * - トップページの大規模な構造変更は次工程で行う。
 *
 * 安全方針:
 * - .va-product-template-page 配下だけに適用する。
 * - Product / Offer / Source / Image、比較ロジック、REST APIには触れない。
 * - レイアウトの骨格は既存CSSを尊重し、主に見た目だけを上書きする。
 * ========================================================= */

/* =========================================================
 * 1. デザイントークン
 * ========================================================= */
body.va-product-template-page {
  --va-canvas: #fdf9f8;
  --va-surface: #ffffff;
  --va-surface-soft: #fbf7f5;
  --va-surface-rose: #f3eae8;
  --va-nav: #d2bebd;
  --va-text: #4c3835;
  --va-text-strong: #3f2e2b;
  --va-muted: #856c63;
  --va-muted-soft: #9c8881;
  --va-accent: #9b7b73;
  --va-accent-dark: #6e504b;
  --va-accent-deep: #5f423e;
  --va-accent-soft: #cebfbc;
  --va-line: #e4dbd7;
  --va-line-strong: #d8cbc6;
  --va-discontinued-bg: #eee1e1;
  --va-discontinued-text: #80575c;
  --va-discontinued-line: #cfb5b8;
  --va-max-bg: #e8efe9;
  --va-max-text: #4d6754;
  --va-min-bg: #f2e6e6;
  --va-min-text: #80575c;
  --va-focus: #8d6d65;
  --va-radius-sm: 4px;
  --va-radius: 6px;
  --va-radius-lg: 10px;
  --va-shadow-soft: 0 7px 22px rgba(76, 56, 53, 0.055);
  --va-serif: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --va-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  margin: 0;
  background: var(--va-canvas);
  color: var(--va-text);
  font-family: var(--va-sans);
  font-size: 16px;
  line-height: 1.75;
}

/* =========================================================
 * 2. 共通コンテナ・文字
 * ========================================================= */
.va-product-template-page .va-db-container {
  width: min(1280px, calc(100% - 64px));
}

.va-product-template-page h1,
.va-product-template-page h2,
.va-product-template-page h3,
.va-product-template-page .va-db-brand-name,
.va-product-template-page .va-product-card-title,
.va-product-template-page .va-compare-product-title {
  color: var(--va-text-strong);
}

.va-product-template-page .va-db-brand-name,
.va-product-template-page .va-product-page-header h1,
.va-product-template-page .va-archive-header h1,
.va-product-template-page .va-compare-header h1,
.va-product-template-page .va-home-hero h1,
.va-product-template-page .va-home-section-head h2,
.va-product-template-page .va-home-about h2,
.va-product-template-page .va-home-compare-cta h2,
.va-product-template-page .va-product-section > h2 {
  font-family: var(--va-serif);
  font-weight: 600;
  letter-spacing: 0.025em;
}

.va-product-template-page .va-home-kicker,
.va-product-template-page .va-home-section-kicker,
.va-product-template-page .va-archive-kicker,
.va-product-template-page .va-filter-kicker,
.va-product-template-page .va-compare-kicker {
  color: var(--va-accent);
  letter-spacing: 0.14em;
}

.va-product-template-page p,
.va-product-template-page .va-db-brand-sub,
.va-product-template-page .va-breadcrumb,
.va-product-template-page .va-product-meta-line,
.va-product-template-page .va-section-note,
.va-product-template-page .va-result-note {
  color: var(--va-muted);
}

/* =========================================================
 * 3. ヘッダー / ブランド / ナビゲーション
 * =========================================================
 * STEP10-D-2:
 * 参考デザインの「ロゴ + 和文ブランド名 + 英字名 + 二段ナビ」を
 * データベース画面へ落とし込む。画像ロゴに依存せず、VAモノグラムは
 * CSSだけで描画するため、追加画像がなくても崩れない。
 * ========================================================= */
.va-product-template-page .va-db-header {
  padding-top: 22px;
  background: var(--va-canvas);
}

.va-product-template-page .va-db-header-inner {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--va-line);
  border-radius: var(--va-radius-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--va-shadow-soft);
}

/* ---------------------------------------------------------
 * 3-1. ブランド上段
 * --------------------------------------------------------- */
.va-product-template-page .va-db-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 112px;
  padding: 20px 28px;
  background:
    radial-gradient(circle at 82% 25%, rgba(206, 191, 188, 0.18), transparent 30%),
    linear-gradient(90deg, #fff 0%, #fffaf8 100%);
}

.va-product-template-page .va-db-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  min-width: 0;
  color: var(--va-text-strong) !important;
  text-decoration: none !important;
}

.va-product-template-page .va-db-mark {
  position: relative;
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid #c8aaa2;
  border-radius: 50%;
  color: #8d695f;
  background: rgba(255, 253, 251, 0.86);
}

.va-product-template-page .va-db-mark::before,
.va-product-template-page .va-db-mark::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(184, 146, 134, 0.48);
  border-radius: 50%;
}

.va-product-template-page .va-db-mark::before {
  inset: 5px;
  transform: rotate(10deg);
}

.va-product-template-page .va-db-mark::after {
  inset: 10px 4px;
  transform: rotate(-13deg);
  opacity: 0.72;
}

.va-product-template-page .va-db-mark-letters {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", var(--va-serif);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.08em;
}

.va-product-template-page .va-db-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.va-product-template-page .va-db-brand-name {
  color: var(--va-text-strong);
  font-family: var(--va-serif);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.055em;
}

.va-product-template-page .va-db-brand-en {
  color: var(--va-accent-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.76rem;
  line-height: 1.35;
  letter-spacing: 0.28em;
}

.va-product-template-page .va-db-brand-sub {
  margin-top: 4px;
  color: var(--va-muted-soft);
  font-family: var(--va-sans);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

.va-product-template-page .va-db-brand-message {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 7px;
  min-width: 250px;
  padding-left: 28px;
  border-left: 1px solid var(--va-line);
  text-align: right;
}

.va-product-template-page .va-db-brand-message strong {
  color: var(--va-text);
  font-family: var(--va-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.va-product-template-page .va-db-brand-message span {
  color: var(--va-muted-soft);
  font-size: 0.72rem;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------
 * 3-2. 二段目ナビ
 * --------------------------------------------------------- */
.va-product-template-page .va-db-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--va-line);
  background: linear-gradient(180deg, #f2e8e6 0%, #eadedc 100%);
  font-size: 0.84rem;
  font-weight: 600;
}

.va-product-template-page .va-db-nav > a,
.va-product-template-page .va-db-nav > span {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.58);
  color: var(--va-text);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.va-product-template-page .va-db-nav > :last-child {
  border-right: 0;
}

.va-product-template-page .va-db-nav > a > span,
.va-product-template-page .va-db-nav > span > span {
  font-family: var(--va-serif);
  font-size: 0.9rem;
  line-height: 1.25;
  letter-spacing: 0.045em;
}

.va-product-template-page .va-db-nav small {
  color: var(--va-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.18em;
}

.va-product-template-page .va-db-nav > a::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 0;
  left: 18%;
  height: 2px;
  background: transparent;
}

.va-product-template-page .va-db-nav > a:hover,
.va-product-template-page .va-db-nav > a:focus-visible,
.va-product-template-page .va-db-nav > a.is-active {
  color: var(--va-accent-deep);
  background: rgba(255, 255, 255, 0.34);
  text-decoration: none;
}

.va-product-template-page .va-db-nav > a.is-active::after {
  background: var(--va-accent);
}

.va-product-template-page .va-db-nav .is-pending {
  color: var(--va-muted-soft);
  cursor: default;
  opacity: 0.62;
}

/* =========================================================
 * 4. 共通ボタン / リンクボタン
 * ========================================================= */
.va-product-template-page .va-home-primary,
.va-product-template-page .va-filter-submit,
.va-product-template-page .va-product-card-detail,
.va-product-template-page .va-product-btn-primary,
.va-product-template-page .va-compare-product-detail,
.va-product-template-page .va-compare-empty a,
.va-product-template-page .va-compare-change,
.va-product-template-page .va-home-compare-cta > a,
.va-product-template-page .va-compare-next.is-ready,
.va-lightbox .va-lightbox-cta-button,
.va-product-template-page .va-gallery-cta-button {
  border: 1px solid var(--va-accent-dark);
  border-radius: var(--va-radius);
  background: var(--va-accent-dark);
  color: #fff;
  box-shadow: none;
  font-family: var(--va-sans);
  font-weight: 700;
  letter-spacing: 0.015em;
}

.va-product-template-page .va-home-primary:hover,
.va-product-template-page .va-filter-submit:hover,
.va-product-template-page .va-filter-submit:focus-visible,
.va-product-template-page .va-product-card-detail:hover,
.va-product-template-page .va-product-btn-primary:hover,
.va-product-template-page .va-compare-product-detail:hover,
.va-product-template-page .va-compare-product-detail:focus-visible,
.va-product-template-page .va-compare-empty a:hover,
.va-product-template-page .va-compare-change:hover,
.va-product-template-page .va-home-compare-cta > a:hover,
.va-product-template-page .va-compare-next.is-ready:hover,
.va-product-template-page .va-compare-next.is-ready:focus-visible,
.va-lightbox .va-lightbox-cta-button:hover,
.va-product-template-page .va-gallery-cta-button:hover {
  border-color: var(--va-accent-deep);
  background: var(--va-accent-deep);
  color: #fff;
}

.va-product-template-page .va-home-secondary,
.va-product-template-page .va-product-card-compare,
.va-product-template-page .va-product-btn-secondary,
.va-product-template-page .va-filter-reset-top,
.va-product-template-page .va-filter-reset,
.va-product-template-page .va-filter-empty-reset,
.va-product-template-page .va-compare-product-remove,
.va-product-template-page .va-compare-clear,
.va-product-template-page .va-compare-toggle {
  border: 1px solid var(--va-line-strong);
  border-radius: var(--va-radius);
  background: var(--va-surface);
  color: var(--va-accent-dark);
  box-shadow: none;
}

.va-product-template-page .va-home-secondary:hover,
.va-product-template-page .va-product-card-compare:hover,
.va-product-template-page .va-filter-reset-top:hover,
.va-product-template-page .va-filter-reset:hover,
.va-product-template-page .va-filter-empty-reset:hover,
.va-product-template-page .va-compare-product-remove:hover,
.va-product-template-page .va-compare-product-remove:focus-visible,
.va-product-template-page .va-compare-clear:hover,
.va-product-template-page .va-compare-clear:focus-visible,
.va-product-template-page .va-compare-toggle:hover,
.va-product-template-page .va-compare-toggle:focus-visible {
  border-color: var(--va-accent-soft);
  background: var(--va-surface-rose);
  color: var(--va-accent-deep);
}

/* =========================================================
 * 5. カード / セクション
 * ========================================================= */
.va-product-template-page .va-product-card,
.va-product-template-page .va-product-section,
.va-product-template-page .va-filter-panel,
.va-product-template-page .va-compare-empty,
.va-product-template-page .va-compare-table-wrap,
.va-product-template-page .va-home-path-card,
.va-product-template-page .va-home-stat,
.va-product-template-page .va-home-stat-note,
.va-product-template-page .va-offer-card {
  border-color: var(--va-line);
  border-radius: var(--va-radius-lg);
  background: var(--va-surface);
  box-shadow: var(--va-shadow-soft);
}

.va-product-template-page .va-product-card-media,
.va-product-template-page .va-product-card-specs > div,
.va-product-template-page .va-spec-item,
.va-product-template-page .va-hero-spec,
.va-product-template-page .va-product-media-placeholder {
  background: var(--va-surface-soft);
}

.va-product-template-page .va-product-card-title,
.va-product-template-page .va-product-card-title a {
  color: var(--va-text-strong);
  font-family: var(--va-serif);
  font-weight: 600;
  letter-spacing: 0.015em;
}

.va-product-template-page .va-product-card-title a:hover {
  color: var(--va-accent-dark);
}

/* ---------------------------------------------------------
 * 5-1. 商品名の自然な折り返し
 * ---------------------------------------------------------
 * 日本語を文字単位で強制分割せず、空白・スラッシュ後など
 * 意味の区切りで改行する。product-display.php が / と ／ の
 * 直後へ <wbr> を追加するため、長いタイトルでもカード内に収める。
 */
.va-product-template-page .va-product-card-title,
.va-product-template-page .va-product-card-title a {
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.va-product-template-page .va-product-card-title {
  text-wrap: pretty;
}

.va-product-template-page .va-product-card-maker,
.va-product-template-page .va-product-card-specs span,
.va-product-template-page .va-spec-item span,
.va-product-template-page .va-hero-spec span,
.va-product-template-page .va-compare-product-maker {
  color: var(--va-muted-soft);
}

/* =========================================================
 * 6. 販売状態 / バッジ
 * ========================================================= */
.va-product-template-page .va-product-card-status-badge,
.va-product-template-page .va-product-status-badge,
.va-product-template-page .va-offer-status-badge {
  border: 1px solid var(--va-discontinued-line);
  border-radius: 999px;
  background: var(--va-discontinued-bg);
  color: var(--va-discontinued-text);
  box-shadow: none;
  font-weight: 700;
}

.va-product-template-page .va-product-status-notice,
.va-product-template-page .va-offer-card.is-discontinued,
.va-product-template-page .va-gallery-cta-card.is-discontinued,
.va-lightbox .va-lightbox-cta-card.is-discontinued {
  border-color: var(--va-discontinued-line);
  background: var(--va-discontinued-bg);
  color: var(--va-discontinued-text);
}

/* =========================================================
 * 7. フォーム / フィルター
 * ========================================================= */
.va-product-template-page .va-filter-field > label {
  color: var(--va-text);
  font-weight: 700;
}

.va-product-template-page .va-filter-field select,
.va-product-template-page .va-filter-field input {
  border: 1px solid var(--va-line-strong);
  border-radius: var(--va-radius);
  background: #fff;
  color: var(--va-text);
  font-family: var(--va-sans);
}

.va-product-template-page .va-filter-field select:focus,
.va-product-template-page .va-filter-field input:focus {
  border-color: var(--va-accent);
  outline: 3px solid rgba(155, 123, 115, 0.12);
}

.va-product-template-page .va-active-filter-chip {
  border-color: var(--va-line-strong);
  background: var(--va-surface-rose);
  color: var(--va-accent-deep);
}

/* =========================================================
 * 8. 商品詳細
 * ========================================================= */
.va-product-template-page .va-product-detail {
  --va-bg: var(--va-surface-soft);
  --va-card: var(--va-surface);
  --va-line: #e4dbd7;
  --va-text: #4c3835;
  --va-muted: #856c63;
  --va-accent: #9b7b73;
  --va-accent-dark: #6e504b;
}

.va-product-template-page .va-product-page-header h1 {
  font-size: clamp(1.9rem, 2.9vw, 2.7rem);
  line-height: 1.38;
}

.va-product-template-page .va-product-section {
  padding: 28px;
}

.va-product-template-page .va-product-section > h2 {
  border-bottom-color: var(--va-line);
  font-size: 1.4rem;
}

.va-product-template-page .va-spec-list,
.va-product-template-page .va-spec-list > div,
.va-product-template-page .va-product-card-bottom {
  border-color: var(--va-line);
}

.va-product-template-page .va-offer-card {
  box-shadow: none;
}

/* =========================================================
 * 9. 比較ページ
 * ========================================================= */
.va-product-template-page .va-compare-table th,
.va-product-template-page .va-compare-table td {
  border-color: var(--va-line);
}

.va-product-template-page .va-compare-table thead th,
.va-product-template-page .va-compare-table tbody th[scope="row"] {
  background: var(--va-surface-soft);
}

.va-product-template-page .va-compare-section-row th {
  background: var(--va-surface-rose);
  color: var(--va-text-strong);
}

.va-product-template-page .va-compare-number.is-max,
.va-product-template-page .va-compare-legend .is-max {
  background: var(--va-max-bg);
  color: var(--va-max-text);
}

.va-product-template-page .va-compare-number.is-min,
.va-product-template-page .va-compare-legend .is-min {
  background: var(--va-min-bg);
  color: var(--va-min-text);
}

.va-product-template-page .va-compare-diff-badge {
  border-color: var(--va-line-strong);
  background: var(--va-surface-soft);
  color: var(--va-muted);
}

/* =========================================================
 * 10. 比較トレイ
 * ========================================================= */
.va-product-template-page .va-compare-tray-inner {
  border-color: var(--va-line-strong);
  border-radius: var(--va-radius-lg);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 36px rgba(76, 56, 53, 0.12);
}

.va-product-template-page .va-compare-selected-number {
  background: var(--va-surface-rose);
  color: var(--va-accent-dark);
}

/* =========================================================
 * 11. トップページの共通トーン
 * ========================================================= */
.va-product-template-page .va-home-hero-wrap {
  border-color: var(--va-line);
  border-radius: var(--va-radius-lg);
  box-shadow: var(--va-shadow-soft);
}

.va-product-template-page .va-home-hero h1 {
  color: var(--va-text-strong);
  font-size: clamp(2.75rem, 5.2vw, 4.9rem);
  font-weight: 600;
  line-height: 1.18;
}

.va-product-template-page .va-home-path-card:hover {
  border-color: var(--va-accent-soft);
  background: #fffdfc;
}

.va-product-template-page .va-home-path-number,
.va-product-template-page .va-home-text-link,
.va-product-template-page .va-home-path-card b {
  color: var(--va-accent-dark);
}

.va-product-template-page .va-home-about,
.va-product-template-page .va-home-compare-cta {
  border-color: var(--va-line);
  background: var(--va-surface-rose);
}

/* =========================================================
 * 12. フッター
 * ========================================================= */
.va-product-template-page .va-db-footer {
  background: var(--va-canvas);
}

.va-product-template-page .va-db-footer-inner {
  border-top-color: var(--va-line);
}

.va-product-template-page .va-db-footer-nav a,
.va-product-template-page .va-db-copyright {
  color: var(--va-muted);
}

/* =========================================================
 * 13. キーボード操作時のフォーカス
 * ========================================================= */
.va-product-template-page a:focus-visible,
.va-product-template-page button:focus-visible,
.va-product-template-page select:focus-visible,
.va-product-template-page input:focus-visible,
.va-lightbox button:focus-visible,
.va-lightbox a:focus-visible {
  outline: 3px solid rgba(110, 80, 75, 0.22);
  outline-offset: 3px;
}

/* =========================================================
 * 14. レスポンシブ
 * ========================================================= */
@media (max-width: 834px) {
  .va-product-template-page .va-db-container {
    width: min(100% - 28px, 1280px);
  }

  .va-product-template-page .va-db-brand-row {
    gap: 18px;
    min-height: 96px;
    padding: 16px 18px;
  }

  .va-product-template-page .va-db-mark {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
  }

  .va-product-template-page .va-db-mark-letters {
    font-size: 1.65rem;
  }

  .va-product-template-page .va-db-brand-message {
    min-width: 190px;
    padding-left: 18px;
  }

  .va-product-template-page .va-db-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .va-product-template-page .va-db-nav > :nth-child(3n) {
    border-right: 0;
  }

  .va-product-template-page .va-db-nav > :nth-child(n+4) {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

  .va-product-template-page .va-product-section {
    padding: 22px;
  }
}

@media (max-width: 600px) {
  .va-product-template-page .va-db-brand-message {
    display: none;
  }

  .va-product-template-page .va-db-brand-row {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  body.va-product-template-page {
    font-size: 15px;
  }

  .va-product-template-page .va-db-container {
    width: min(100% - 32px, 1280px);
  }

  .va-product-template-page .va-db-header {
    padding-top: 12px;
  }

  .va-product-template-page .va-db-header-inner {
    border-radius: var(--va-radius-lg);
  }

  .va-product-template-page .va-db-brand-row {
    gap: 12px;
    min-height: 84px;
    padding: 14px;
  }

  .va-product-template-page .va-db-mark {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }

  .va-product-template-page .va-db-mark-letters {
    font-size: 1.42rem;
  }

  .va-product-template-page .va-db-brand-name {
    font-size: 1.26rem;
    letter-spacing: 0.035em;
  }

  .va-product-template-page .va-db-brand-en {
    font-size: 0.64rem;
    letter-spacing: 0.19em;
  }

  .va-product-template-page .va-db-brand-sub {
    display: none;
  }

  .va-product-template-page .va-db-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .va-product-template-page .va-db-nav > :nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.58);
  }

  .va-product-template-page .va-db-nav > :nth-child(even) {
    border-right: 0;
  }

  .va-product-template-page .va-db-nav > :nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

  .va-product-template-page .va-db-nav > a,
  .va-product-template-page .va-db-nav > span {
    min-height: 52px;
  }

  .va-product-template-page .va-product-page-header h1,
  .va-product-template-page .va-archive-header h1,
  .va-product-template-page .va-compare-header h1 {
    font-size: 1.75rem;
  }

  .va-product-template-page .va-product-section {
    padding: 18px;
  }
}


/* =========================================================
 * STEP10-UI-SINGLE-NAV: 商品一覧・商品詳細のスマホ用共通ヘッダー
 * =========================================================
 * トップ・比較ページは従来の6項目ナビを維持する。
 * フォーム/検索/比較機能は変更せず、視覚的な開閉のみCSSで実装。
 */

/* PCでは開閉トリガーを表示せず、従来のナビを常時表示。 */
body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-state,
body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-trigger {
  display: none;
}

@media (max-width: 620px) {
  /* 1. ブランドのロゴと名称を1行に圧縮。 */
  body:is(.va-product-archive-page, .single-va_product) .va-db-header {
    padding-top: 8px;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-brand-row {
    min-height: 64px;
    gap: 6px;
    padding: 8px 10px;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-brand {
    gap: 7px;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-mark {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-mark-letters {
    font-size: 1.08rem;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-brand-name {
    overflow: hidden;
    font-size: clamp(0.85rem, 3.8vw, 1.05rem);
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-brand-en {
    font-size: 0.56rem;
  }

  /* 2. ネイティブcheckbox + labelでスマホメニューを開閉。 */
  body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-state {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-trigger {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    margin-left: auto;
    padding: 6px 9px;
    border: 1px solid var(--va-line-strong);
    border-radius: 7px;
    background: var(--va-surface-soft);
    color: var(--va-text-strong);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-menu-chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-state:not(:checked) ~ .va-db-brand-row .va-db-menu-label-close,
  body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-state:checked ~ .va-db-brand-row .va-db-menu-label-open {
    display: none;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-state:checked ~ .va-db-brand-row .va-db-menu-chevron {
    transform: rotate(225deg);
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-state:focus-visible ~ .va-db-brand-row .va-db-menu-toggle-trigger {
    outline: 2px solid var(--va-focus);
    outline-offset: 2px;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-state:not(:checked) ~ .va-db-nav {
    display: none;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-menu-toggle-state:checked ~ .va-db-nav {
    display: grid;
  }

  body:is(.va-product-archive-page, .single-va_product) .va-db-nav > a,
  body:is(.va-product-archive-page, .single-va_product) .va-db-nav > span {
    min-height: 44px;
  }

  /* 3. 本文先頭の余白を減らす（商品一覧のみ）。 */
  body.va-product-archive-page .va-db-main {
    padding-top: 10px;
  }

  body.va-product-archive-page .va-breadcrumb {
    margin-bottom: 8px;
    font-size: 0.7rem;
  }
}

/* =========================================================
 * STEP10-UI-SINGLE-TITLE-1: 商品詳細のスマホ初期表示を省スペース化
 * =========================================================
 * - 商品詳細のみ。商品一覧/比較/トップ、PC表示は変更しない。
 * - パンくずではドール一覧より後ろの区切り/商品名だけ非表示。
 * - 商品名はH1に全文残し、既存の意味単位の折り返しは維持。
 * - Product/Offer/Source/Image、画像スライダーは変更しない。
 */
@media (max-width: 620px) {
  /* 1. メインコンテンツ開始位置の余白を小さくする。 */
  body.va-product-template-page.single-va_product .va-db-main {
    padding-top: 10px;
  }

  /* 2. 商品名の重複をなくし、パンくずを2階層に短縮する。 */
  body.va-product-template-page.single-va_product .va-breadcrumb {
    margin-bottom: 12px;
    font-size: 0.72rem;
    line-height: 1.5;
  }

  /* 既存HTML: ホーム > ドール一覧 > 商品名。
     最後のa（ドール一覧）以後のspanのみ隠す。H1は変更しない。 */
  body.va-product-template-page.single-va_product .va-breadcrumb > a:last-of-type ~ span {
    display: none;
  }

  /* 3. 長い商品名は省略せず、文字サイズ/行間/画像直前の余白だけ調整。 */
  body.va-product-template-page.single-va_product .va-product-page-header {
    margin-bottom: 12px;
  }

  body.va-product-template-page.single-va_product .va-product-page-header h1 {
    font-size: clamp(1.35rem, 6vw, 1.5rem);
    line-height: 1.4;
  }
}


/* =========================================================
 * STEP10-UI-SINGLE-TITLE-2: 商品詳細H1の語中改行を抑制（PREVIEW）
 * =========================================================
 * 1. スマホの商品詳細H1のみ。空白・スラッシュを優先して折り返す。
 * 2. 画面幅を超える長い語は例外的に折り返し、横はみ出しを防止。
 * 3. スラッシュで分割した既存のspanも、長い場合のみ内部改行を許可。
 * 4. 正式な商品名・HTML・PC・一覧・比較・画像処理は変更しない。
 */
@media (max-width: 620px) {
  body.va-product-template-page.single-va_product .va-product-page-header h1 {
    line-break: strict;
    word-break: keep-all;
    overflow-wrap: anywhere;
    hyphens: none;
  }

  body.va-product-template-page.single-va_product .va-product-page-header .va-product-title-chunk {
    max-width: 100%;
    white-space: normal;
  }
}

/* =========================================================
 * v1.19.61 PREVIEW: PC上部の余白を控えめに整理
 * - 横幅835px以上の共通ヘッダーだけ対象
 * - ロゴ、ブランド文、ナビ配列、スマホ専用ヘッダーは変更しない
 * ========================================================= */
@media (min-width: 835px) {
  body.va-product-template-page .va-db-header {
    padding-top: 16px;
  }

  body.va-product-template-page .va-db-brand-row {
    min-height: 100px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  body.va-product-template-page .va-db-nav > a,
  body.va-product-template-page .va-db-nav > span {
    min-height: 54px;
  }
}

/* =========================================================
 * v1.19.65: ナビ項目数クラス名をPHP出力と一致させる
 * ガイド公開時6項目：既存6項目グリッドを再利用。
 * ガイド未公開でFeedback公開時5項目：PCでは等幅5列。
 * ========================================================= */
@media (min-width: 835px) {
  .va-product-template-page .va-db-nav--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .va-product-template-page .va-db-nav--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 835px) and (max-width: 1100px) {
  /* 元のタブレット用3列スタイルを、4〜5項目時だけ1行に戻す。 */
  .va-product-template-page .va-db-nav--5 > *,
  .va-product-template-page .va-db-nav--4 > * {
    border-top: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.58);
  }
  .va-product-template-page .va-db-nav--5 > :last-child,
  .va-product-template-page .va-db-nav--4 > :last-child {
    border-right: 0;
  }
}
@media (min-width: 621px) and (max-width: 834px) {
  /* 5項目では最終行のFeedbackを広めに表示。 */
  .va-product-template-page .va-db-nav--5 > :nth-child(5) {
    grid-column: span 2;
    border-right: 0;
  }
  /* 4項目では2列2行にして孤立を避ける。 */
  .va-product-template-page .va-db-nav--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .va-product-template-page .va-db-nav--4 > :nth-child(2n) {
    border-right: 0;
  }
  .va-product-template-page .va-db-nav--4 > :nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, 0.58);
  }
  .va-product-template-page .va-db-nav--4 > :nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }
}
@media (max-width: 620px) {
  /* 5項目では最下段のFeedbackを全幅表示する。 */
  .va-product-template-page .va-db-nav--5 > :nth-child(5) {
    grid-column: 1 / -1;
    border-right: 0;
  }
}