/* =========================================
   サイト全体カラー設定 (Global Color Settings)
   ========================================= */

/* 1. 全体の背景色（クリーム色）と文字色 */
body, 
.ec-layoutRole, 
.ec-layoutRole__main,
.ec-layoutRole__contents,
.ec-layoutRole__footer {
    background-color: #FFF6E8 !important;
    color: #4C4C4C !important;
}

/* 2. ヘッダー（メニュー部分）をブラウンに */
.ec-headerRole {
    background-color: #59473F !important;
    border-bottom: 1px solid #3e312c;
}
/* ヘッダー内の文字・アイコンを白に */
.ec-headerRole .ec-headerRole__nav a,
.ec-headerRole .ec-headerRole__nav span,
.ec-headerRole .ec-headerRole__icon {
    color: #ffffff !important;
}

/* 3. フッター（最下部）をブラウンに */
.ec-footerRole {
    background-color: #59473F !important;
    color: #ffffff !important;
    border-top: 5px solid #3e312c;
}
.ec-footerRole a {
    color: #FFF6E8 !important; /* 薄いクリーム色 */
}

/* 4. ボタン全般（ブラウン） */
.btn-primary, 
.ec-blockBtn--action, 
button[type="submit"] {
    background-color: #59473F !important;
    border-color: #59473F !important;
    color: #ffffff !important;
    background-image: none !important;
}
/* ホバー時の色 */
.btn-primary:hover, 
.ec-blockBtn--action:hover, 
button[type="submit"]:hover {
    background-color: #3e312c !important;
    border-color: #3e312c !important;
}

/* 5. リンク文字色 */
a {
    color: #59473F;
    text-decoration: none;
}
a:hover {
    color: #3e312c;
}

/* 6. 商品詳細などのコンテンツエリア（白背景で浮き上がらせる） */
.ec-shelfRole, 
.ec-orderRole,
.ec-cartRole,
.ec-layoutRole__mainWithColumn .ec-layoutRole__main {
    background-color: #ffffff !important;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(89, 71, 63, 0.1);
}

/* 7. フォーム入力欄の背景（馴染ませる） */
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="number"], 
input[type="tel"], 
textarea, 
select {
    background-color: #FFFBF5 !important;
    border: 1px solid #D9Cfc0 !important;
    color: #4C4C4C !important;
}