/**
 * GARMIN マリン機器 - 商品ページ専用デザインシステム
 *
 * マリンラグジュアリー美学に基づいた洗練されたUIデザイン
 * トップページ（garmin-top-design.css）と統一したビジュアル言語
 *
 * 対象: 商品詳細ページ（single-product）
 * バージョン: 1.0.1
 * 最終更新: 2025-12-25
 *
 * 変更履歴:
 * - v1.0.1: 文字色を白→黒系に修正、商品コード装飾を削除、カテゴリ背景を要素分のみに
 * - v1.0.0: 初版リリース
 */

/* ========================================================================
   CSS変数システム（トップページデザインと統一）
   ======================================================================== */

:root {
  /* カラーパレット - マリンラグジュアリー */
  --garmin-navy-900: #0a1628;
  --garmin-navy-800: #0f1f35;
  --garmin-ocean-700: #1e3a5f;
  --garmin-ocean-600: #2a4a73;
  --garmin-cyan-400: #00d4ff;
  --garmin-cyan-500: #00b8e6;
  --garmin-copper-500: #d4a574;
  --garmin-white: #ffffff;
  --garmin-gray-100: #f5f7fa;
  --garmin-gray-300: #d1d9e6;
  --garmin-gray-700: #4a5568;

  /* スペーシング */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* タイポグラフィ */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* トランジション */
  --transition-fast: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-base: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* エフェクト */
  --shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.08);
  --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.12);
}

/* ========================================================================
   カテゴリーリンク - クリック可能を明示するデザイン
   ======================================================================== */

.single-product .product_meta .posted_in a,
.single-product .woocommerce-breadcrumb a {
  position: relative;
  display: inline-block;
  color: var(--garmin-ocean-600);
  font-family: var(--font-body);
  font-weight: 500;
  /* font-size: 0.9375rem; */
  text-decoration: none;
  padding-bottom: 2px;
  transition: color var(--transition-base);
  cursor: pointer;
}

/* クリック可能を示すアンダーライン */
.single-product .product_meta .posted_in a::after,
.single-product .woocommerce-breadcrumb a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--garmin-cyan-400), var(--garmin-cyan-500));
  transition: width var(--transition-base);
}

/* ホバー時のエフェクト */
.single-product .product_meta .posted_in a:hover,
.single-product .woocommerce-breadcrumb a:hover {
  color: var(--garmin-cyan-400);
}

.single-product .product_meta .posted_in a:hover::after,
.single-product .woocommerce-breadcrumb a:hover::after {
  width: 100%;
}

/* フォーカス状態（キーボードナビゲーション） */
.single-product .product_meta .posted_in a:focus,
.single-product .woocommerce-breadcrumb a:focus {
  outline: 2px solid var(--garmin-cyan-400);
  outline-offset: 4px;
  border-radius: 2px;
}

/* カテゴリーラベルのスタイリング */
.single-product .product_meta .posted_in {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #4a5568;
  margin-bottom: var(--space-md);
}

/* カテゴリーリンクを要素分だけ背景色表示 */
.single-product .product_meta .posted_in a {
  display: inline-block;
  background: transparent;
  padding: 0;
}

/* ========================================================================
   h3見出し - 軽めの装飾、文章量長めに対応
   ======================================================================== */

.single-product .woocommerce-Tabs-panel h3,
.single-product .product-description h3,
.single-product article h3 {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 600;
  color: #1a202c;
  line-height: 1.5;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
  padding-left: var(--space-lg);
}

/* 左側のアクセントライン */
.single-product .woocommerce-Tabs-panel h3::before,
.single-product .product-description h3::before,
.single-product article h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, var(--garmin-ocean-600), var(--garmin-ocean-600));
  border-radius: 2px;
}

/* 最初のh3のマージン調整 */
.single-product .woocommerce-Tabs-panel h3:first-child,
.single-product .product-description h3:first-child,
.single-product article h3:first-child {
  margin-top: 0;
}

/* ========================================================================
   ul li - 読みやすいリストスタイル
   ======================================================================== */

.single-product .woocommerce-Tabs-panel ul,
.single-product .product-description ul,
.single-product article ul {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: #333333;
  margin: var(--space-lg) 0;
  padding-left: var(--space-xl);
  list-style: none;
}

.single-product .woocommerce-Tabs-panel ul li,
.single-product .product-description ul li,
.single-product article ul li {
  position: relative;
  margin-bottom: var(--space-sm);
  padding-left: var(--space-md);
}

/* カスタムバレット（シアンの小ドット） */
.single-product .woocommerce-Tabs-panel ul li::before,
.single-product .product-description ul li::before,
.single-product article ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  background: var(--garmin-ocean-600);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

/* ネストされたリスト */
.single-product .woocommerce-Tabs-panel ul ul,
.single-product .product-description ul ul,
.single-product article ul ul {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding-left: var(--space-lg);
}

.single-product .woocommerce-Tabs-panel ul ul li::before,
.single-product .product-description ul ul li::before,
.single-product article ul ul li::before {
  background: var(--garmin-ocean-600);
  box-shadow: none;
}

/* ========================================================================
   段落テキスト - 読みやすさの向上
   ======================================================================== */

.single-product .woocommerce-Tabs-panel p,
.single-product .product-description p,
.single-product article p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: #333333;
  margin-bottom: var(--space-lg);
}

/* 強調テキスト */
.single-product .woocommerce-Tabs-panel strong,
.single-product .product-description strong,
.single-product article strong {
  font-weight: 600;
  color: #1e3a5f;
  font-size: 1rem;

}

/* ========================================================================
   商品メタ情報エリア - 装飾なしシンプルスタイル
   ======================================================================== */

.single-product .product_meta > span {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: #4a5568;
}

.single-product .product_meta > span:last-child {
  margin-bottom: 0;
}

/* ========================================================================
   タブナビゲーション - マリンラグジュアリー美学
   ======================================================================== */

.single-product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--garmin-gray-300);
  margin-bottom: var(--space-xl);
}

.single-product .woocommerce-tabs ul.tabs li {
  margin-bottom: -2px;
}

.single-product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--garmin-gray-700);
  padding: var(--space-md) var(--space-lg);
  transition: color var(--transition-base);
}

.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--garmin-cyan-400);
  border-bottom-color: var(--garmin-cyan-400);
}

/* ========================================================================
   レスポンシブデザイン
   ======================================================================== */

/* タブレット（768px以下） */
@media (max-width: 768px) {
  .single-product .woocommerce-Tabs-panel h3,
  .single-product .product-description h3,
  .single-product article h3 {
    font-size: 1.25rem;
    padding-left: var(--space-md);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
  }

  .single-product .product_meta {
    padding: var(--space-md);
  }

  .single-product .woocommerce-tabs ul.tabs li a {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9375rem;
  }
}

/* モバイル（480px以下） */
@media (max-width: 480px) {
  .single-product .woocommerce-Tabs-panel h3,
  .single-product .product-description h3,
  .single-product article h3 {
    font-size: 1.125rem;
    padding-left: var(--space-sm);
  }

  .single-product .woocommerce-Tabs-panel h3::before,
  .single-product .product-description h3::before,
  .single-product article h3::before {
    width: 3px;
  }

  .single-product .woocommerce-Tabs-panel ul,
  .single-product .product-description ul,
  .single-product article ul {
    padding-left: var(--space-lg);
  }
}

/* ========================================================================
   アクセシビリティ - アニメーション軽減モード対応
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .single-product .product_meta .posted_in a,
  .single-product .woocommerce-breadcrumb a,
  .single-product .woocommerce-tabs ul.tabs li a {
    transition: none;
  }

  .single-product .product_meta .posted_in a::after,
  .single-product .woocommerce-breadcrumb a::after {
    transition: none;
  }
}

/* ========================================================================
   ダークモード対応（将来の拡張用に保留）
   ======================================================================== */

/* ダークモード対応は現在無効化 */