/**
 * Fresh Labo カスタム CSS
 *
 * Tailwind CSS CDN では表現できないスタイルのみここに書く。
 * Tailwind のユーティリティクラスで代替できるものはここに書かない（DRY 原則）。
 *
 * 全 HTML ファイルに重複定義されていた共通スタイルをここに一本化する。
 */

/* ========================================================
   グローバル基本設定
   body のフォント・行間・色は全ページ共通。
   header や nav に影響させたくない部分は main に限定する。
   ======================================================== */
:root {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  line-height: 1.9;
  background-color: #FFFFFF;
  color: #333333;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  font-weight: 700;
}

/* ========================================================
   スクロールバー非表示
   全 HTML で同一定義が重複していたため、ここに統一。
   ======================================================== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ========================================================
   カスタムスクロールバー（商品一覧の横スクロール等）
   01_トップにのみあったが、他ページでも使える想定でここに集約。
   ======================================================== */
.custom-scrollbar::-webkit-scrollbar {
  height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #F8F5EF;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8B6B4A;
  border-radius: 999px;
}

/* ========================================================
   フェードイン アニメーション
   01 は fade-in クラス・02〜07 は animate-fade-in クラスを使用していた。
   keyframes は同内容のため統一し、両クラスに同じアニメーションを適用する。
   ======================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in,
.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* ========================================================
   ホバー拡大（商品カード等）
   全ファイルで scale(1.02) で統一されていることを確認済み。
   ======================================================== */
.hover-scale:hover {
  transform: scale(1.02);
  transition: transform 300ms ease;
}

/* ========================================================
   フォームバリデーション エラー状態
   PHP バリデーション後にサーバー側でクラスを付与する想定。
   ======================================================== */
.input-error {
  border-color: #B94A48 !important;
}

.error-message {
  color: #B94A48;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* ========================================================
   お気に入りハート ON/OFF
   aria-pressed で制御（JS が更新。svg クラスに依存しない）
   Tailwind CDN / ブラウザキャッシュ競合を !important で回避
   ======================================================== */
.fav-heart path {
  transition: fill 0.2s ease, stroke 0.2s ease;
}

/* ON: ボタン自体も変化（ハート以外の手がかり） */
.fav-heart-btn[aria-pressed="true"] {
  background-color: rgba(185, 74, 72, 0.12);
  box-shadow: 0 0 0 2px rgba(185, 74, 72, 0.35);
}

.fav-heart-btn[aria-pressed="true"] .fav-heart path {
  fill: #B94A48 !important;
  stroke: #B94A48 !important;
}

.fav-heart-btn[aria-pressed="false"] .fav-heart path {
  fill: none !important;
  stroke: #9ca3af !important;
}

.fav-heart-btn[aria-pressed="false"]:hover .fav-heart path {
  stroke: #6F9B58 !important;
}

/* svg クラス（初期 HTML 用フォールバック） */
.fav-heart--on path {
  fill: #B94A48 !important;
  stroke: #B94A48 !important;
}

.fav-heart--off path {
  fill: none !important;
  stroke: #9ca3af !important;
}

.fav-heart-btn:hover .fav-heart--off path {
  stroke: #6F9B58 !important;
}

.fav-heart-btn--loading {
  opacity: 0.5;
  pointer-events: none;
}

@keyframes favHeartPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.fav-heart-btn--pulse {
  animation: favHeartPulse 0.25s ease-out;
}

@keyframes favHeartShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

.fav-heart-btn--error {
  animation: favHeartShake 0.3s ease-out;
}

/* ========================================================
   チェックアウト：支払い方法パネル（クレジットカード入力）
   grid-template-rows で高さアニメーション
   ======================================================== */
.pay-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: scaleY(0.96);
  transform-origin: top center;
  transition:
    grid-template-rows 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.pay-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: scaleY(1);
}

.pay-panel__inner {
  overflow: hidden;
}