/*
 * サロンゆう Webショップ カスタムCSS
 * Welcart Mode Child Theme (mode_child) 用
 *
 * 使い方:
 * 1. WordPress管理画面 → 外観 → テーマエディター → style.css の末尾にこの内容を追加
 * 2. または wp-content/themes/mode_child/ にこのファイルをアップロードし、
 *    functions.php に wp_enqueue_style で読み込み追加
 *
 * 注意: 既存のWelcart機能（カート・決済・会員・ポイント）には影響しません
 */

/* ===== Google Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500;600&display=swap');

/* ===== CSS Variables ===== */
:root {
  --sy-gold: #9C7A3C;
  --sy-gold-light: #B8956A;
  --sy-gold-dark: #7A5F2E;
  --sy-charcoal: #2C2C2C;
  --sy-text: #3a3a3a;
  --sy-text-light: #555;
  --sy-text-muted: #888;
  --sy-ivory: #F5F1EA;
  --sy-cream: #FAF7F2;
  --sy-white: #FDFBF7;
  --sy-line-green: #4A8B6E;
  --sy-border: #E5DFD4;
  --sy-brown-light: #C4A882;
}

/* ===== BASE ===== */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
  color: var(--sy-text) !important;
  line-height: 2.0 !important;
  background: var(--sy-white) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4c5a9' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  -webkit-font-smoothing: antialiased;
  font-size: 15px !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: var(--sy-charcoal) !important;
}

a {
  color: var(--sy-gold) !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
}
a:hover {
  color: var(--sy-gold-dark) !important;
}

/* ===== HEADER ===== */
#header,
.header,
header {
  background: var(--sy-white) !important;
  border-bottom: 1px solid var(--sy-border) !important;
  box-shadow: none !important;
}

/* ロゴ */
.header-logo a,
#header .logo a,
.site-title a {
  font-family: "Noto Serif JP", serif !important;
  font-size: 20px !important;
  color: var(--sy-gold) !important;
  letter-spacing: 0.08em !important;
}

/* ナビゲーション */
#header nav a,
.header-nav a,
.global-nav a,
#gnavi a {
  color: var(--sy-text-light) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  transition: color 0.3s !important;
}
#header nav a:hover,
.header-nav a:hover,
.global-nav a:hover,
#gnavi a:hover {
  color: var(--sy-gold) !important;
}

/* ===== BUTTONS - ピル型統一 ===== */
input[type="submit"],
button[type="submit"],
.btn,
.usces_btn,
.to_cart,
.cart_button,
.send,
a.to_cart {
  background: var(--sy-gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 28px !important;
  padding: 12px 32px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: "Noto Sans JP", sans-serif !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  text-decoration: none !important;
  display: inline-block !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn:hover,
.usces_btn:hover,
.to_cart:hover,
.cart_button:hover,
a.to_cart:hover {
  background: var(--sy-gold-dark) !important;
}

/* カートに入れるボタン */
.incart_btn input[type="submit"],
.to_cart_btn,
#cart-btn {
  background: var(--sy-gold) !important;
  border-radius: 28px !important;
}

/* 続けて買い物ボタン */
.continue_btn a,
.back_btn a {
  background: transparent !important;
  color: var(--sy-gold) !important;
  border: 1.5px solid var(--sy-gold) !important;
  border-radius: 28px !important;
  padding: 12px 32px !important;
}
.continue_btn a:hover,
.back_btn a:hover {
  background: var(--sy-gold) !important;
  color: #fff !important;
}

/* ===== 商品カード ===== */
.item_list .item,
.list_area .list,
.itemlist li,
.post_list .post_item {
  background: var(--sy-white) !important;
  border: 1px solid var(--sy-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
  box-shadow: none !important;
}
.item_list .item:hover,
.list_area .list:hover,
.itemlist li:hover,
.post_list .post_item:hover {
  box-shadow: 0 6px 24px rgba(156,122,60,0.1) !important;
  transform: translateY(-3px) !important;
  border-color: var(--sy-gold-light) !important;
}

/* 商品画像 */
.item_list .item img,
.itemlist li img,
.post_list .post_item img {
  border-radius: 0 !important;
}

/* 商品名 */
.item_list .item .itemname,
.itemlist li .itemname,
.item_name,
h3.item_name {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 14px !important;
  color: var(--sy-charcoal) !important;
  font-weight: 500 !important;
}

/* 価格 */
.item_list .item .price,
.itemlist li .price,
.sell_price,
.item_price,
.price {
  color: var(--sy-gold) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* ===== 商品詳細ページ ===== */
.item_single,
.item-detail,
#item-detail {
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.item_single h1,
.item-detail h1,
#item-detail h1 {
  font-size: 24px !important;
  line-height: 1.8 !important;
}

/* ===== カテゴリーナビ ===== */
.cat_nav a,
.item_cat a,
.widget_categories a {
  padding: 8px 20px !important;
  border-radius: 24px !important;
  background: var(--sy-white) !important;
  border: 1px solid var(--sy-border) !important;
  font-size: 13px !important;
  color: var(--sy-text) !important;
  display: inline-block !important;
  margin: 3px !important;
  transition: all 0.3s !important;
}
.cat_nav a:hover,
.item_cat a:hover,
.widget_categories a:hover {
  border-color: var(--sy-gold) !important;
  color: var(--sy-gold) !important;
}

/* ===== サイドバー ===== */
#side,
.sidebar,
aside {
  font-size: 13px !important;
}
#side .widget_title,
.sidebar h2,
aside h2 {
  font-family: "Noto Serif JP", serif !important;
  font-size: 15px !important;
  color: var(--sy-charcoal) !important;
  border-bottom: 1px solid var(--sy-border) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

/* ===== カート ===== */
.cart_table,
#cart-table {
  border-collapse: collapse !important;
}
.cart_table th,
#cart-table th {
  background: var(--sy-ivory) !important;
  color: var(--sy-charcoal) !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--sy-border) !important;
}
.cart_table td,
#cart-table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--sy-border) !important;
  font-size: 13px !important;
}

/* 合計金額 */
.total_price,
.grand_total {
  font-size: 20px !important;
  color: var(--sy-gold) !important;
  font-weight: 600 !important;
}

/* ===== FOOTER ===== */
#footer,
.footer,
footer {
  background: var(--sy-charcoal) !important;
  color: #ccc !important;
  padding: 48px 40px 32px !important;
  text-align: center !important;
  font-size: 12px !important;
}
#footer a,
.footer a,
footer a {
  color: #aaa !important;
}
#footer a:hover,
.footer a:hover,
footer a:hover {
  color: var(--sy-brown-light) !important;
}

/* ===== フォーム要素 ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  border: 1px solid var(--sy-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 14px !important;
  transition: border-color 0.3s !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--sy-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(156,122,60,0.1) !important;
}

/* ===== 共通セクション ===== */
.section-title-custom {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  color: var(--sy-charcoal);
  margin-bottom: 12px;
}
.section-title-custom::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--sy-gold-light);
  margin: 16px auto 0;
}

/* ===== ページネーション ===== */
.pagination a,
.page-numbers {
  border-radius: 20px !important;
  padding: 6px 14px !important;
  border: 1px solid var(--sy-border) !important;
  color: var(--sy-text) !important;
  font-size: 13px !important;
}
.pagination .current,
.page-numbers.current {
  background: var(--sy-gold) !important;
  color: #fff !important;
  border-color: var(--sy-gold) !important;
}

/* ===== パンくずリスト ===== */
.breadcrumb,
#breadcrumb {
  font-size: 12px !important;
  color: var(--sy-text-muted) !important;
  padding: 12px 0 !important;
}
.breadcrumb a,
#breadcrumb a {
  color: var(--sy-text-muted) !important;
}
.breadcrumb a:hover,
#breadcrumb a:hover {
  color: var(--sy-gold) !important;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  body { font-size: 14px !important; }
  .item_list .item { border-radius: 10px !important; }
  input[type="submit"],
  button[type="submit"],
  .btn,
  .usces_btn { padding: 10px 24px !important; font-size: 13px !important; }
}