@charset "utf-8";
/* CSS Document */

/* =========================================
   確認用カラーバリエーション切替
   ========================================= */

.color-checker{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;

  display:grid;
  gap:6px;

  width:150px;
  padding:12px;

  background:rgba(255,255,255,.96);
  border:1px solid #ddd;
  box-shadow:0 4px 18px rgba(0,0,0,.12);
}

.color-checker p{
  margin:0 0 2px;
  text-align:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  color:#777;
}

.color-checker button{
  appearance:none;
  display:flex;
  align-items:center;
  gap:8px;

  width:100%;
  padding:8px 9px;

  border:1px solid #ddd;
  background:#fff;
  color:#333;

  cursor:pointer;
  font-size:11px;
  text-align:left;

  transition:.2s ease;
}

.color-checker button:hover{
  opacity:.75;
}

.color-checker button.is-active{
  border-color:#333;
  font-weight:700;
}

.color-dot{
  flex:0 0 auto;
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
}

.color-dot-original{
  background:#5e342f;
}

.color-dot-wine{
  background:#7B2D3E;
}

.color-dot-terracotta{
  background:#B5705C;
}

.color-dot-chocolate{
  background:#6B4226;
}


/* SP */
@media(max-width:700px){
  .color-checker{
    right:8px;
    bottom:8px;
    width:132px;
    padding:8px;
  }

  .color-checker button{
    padding:6px 7px;
    font-size:10px;
  }
}

/* =========================================
   VD COLOR VARIATIONS
   原案は style.css の色をそのまま使用
   ========================================= */


/* ① ワインレッド */
html[data-vd-color="wine"]{
  --vd:#7B2D3E;
  --vd-soft:#F8F2F4;
  --vd-sub-color:#C9A227;
  --vd-page-bg:#F8F2F4;
  --vd-card-bg:#FFFFFF;
  --vd-text-color:#3B2A26;
}


/* ② ダスティテラコッタ */
html[data-vd-color="terracotta"]{
  --vd:#B5705C;
  --vd-soft:#F7EFE6;
  --vd-sub-color:#C9A6A0;
  --vd-page-bg:#F7EFE6;
  --vd-card-bg:#FFFFFF;
  --vd-text-color:#4A332C;
}


/* ③ ミルクチョコ */
html[data-vd-color="chocolate"]{
  --vd:#6B4226;
  --vd-soft:#F5EDE1;
  --vd-sub-color:#D4A857;
  --vd-page-bg:#F5EDE1;
  --vd-card-bg:#FFFFFF;
  --vd-text-color:#3A2317;
}


/* ---------- VDのみ追加で着色 ---------- */

/*
  カラバリ選択中は、背景まで同じトーンに変更。
  data-theme="vd" を条件にしているので、リサ側へ切り替えると元の白背景へ戻る。
*/
html[data-theme="vd"][data-vd-color] body,
html[data-theme="vd"][data-vd-color] .page,
html[data-theme="vd"][data-vd-color] #panel-vd,
html[data-theme="vd"][data-vd-color] .common-section{
  background:var(--vd-page-bg, #fff);
}

/* メインタブ～追従サブナビもページ背景と一体化 */
html[data-theme="vd"][data-vd-color] .tabs,
html[data-theme="vd"][data-vd-color] .tabs::before,
html[data-theme="vd"][data-vd-color] .tab,
html[data-theme="vd"][data-vd-color] .subnav,
html[data-theme="vd"][data-vd-color] .subnav::before{
  background:var(--vd-page-bg, #fff);
}

/* 本文カラー */
#panel-vd{
  color:var(--vd-text-color, var(--ink));
}

#panel-vd .section-label{
  color:var(--vd-sub-color, var(--vd));
}

#panel-vd .section-head h2,
#panel-vd .category-title h3{
  color:var(--vd-text-color, var(--ink));
}

#panel-vd .product-description,
#panel-vd .section-head p{
  color:var(--vd-text-color, var(--sub));
}

/* 商品カードは背景色から抜いて白に統一 */
html[data-theme="vd"][data-vd-color] #panel-vd .product-card,
html[data-theme="vd"][data-vd-color] #panel-vd .vd-card.is-large{
  background:var(--vd-card-bg, #fff);
}

/* 共通エリアのカードも白のままにして、背景との差を出す */
html[data-theme="vd"][data-vd-color] .rank-card,
html[data-theme="vd"][data-vd-color] .price-card,
html[data-theme="vd"][data-vd-color] .price-buttons button{
  background:#fff;
}

/* =========================================
   価格で選ぶ：VDカラーに統一
   通常＝白地＋ワイン / 選択・hover＝ワイン地＋白
   ========================================= */
html[data-theme="vd"] .price-buttons button{
  background:#fff;
  border-color:var(--vd);
  color:var(--vd);
}

html[data-theme="vd"] .price-buttons button:hover,
html[data-theme="vd"] .price-buttons button[aria-pressed="true"]{
  background:var(--vd);
  border-color:var(--vd);
  color:#fff;
}