/* =============================
   METALINA Customize Base
   （クリーン初期化版）
   ============================= */

/* --- 画面背景（今後自由に変えられる） --- */
html, body {
    background: #ffffff;
}

/* --- 左サイドカラムを削除（Amazon型レイアウト） --- */
.ec-layoutRole__left {
    display: none !important;
}

/* --- ヘッダー黒（333） + 文字白 --- */
.ec-headerNaviRole,
.ec-headerRole,
.ec-header {
    background: #333333 !important;
    color: #ffffff !important;
}

.ec-headerNaviRole a,
.ec-headerNaviRole i,
.ec-headerNaviRole svg,
.ec-headerNaviRole span {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* --- カートの正式デザイン --- */
.ec-headerRole__cart a {
    background: transparent !important;
    border: none !important;
    padding: 0 8px !important;
}

.ec-headerRole__cart .ec-cartNaviBadge {
    background: #ffffff !important;
    color: #A10F2B !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-weight: bold !important;
}

.ec-headerRole__cart svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* --- 今後デバッグ用の目印（必要なければ消してOK） --- */
body::before {
    content: 'METALINA v1.0';
    position: fixed;
    top: 5px;
    left: 5px;
    padding: 2px 6px;
    background: #A10F2B;
    color: #fff;
    font-size: 10px;
    z-index: 9999;
}

/* ===========================
   フル幅ヘッダー（横いっぱい）
   =========================== */

/* 最上位のラッパーをぶっ壊してフル幅化 */
.ec-layoutRole,
.ec-header,
.ec-headerRole,
.ec-headerNaviRole {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ヘッダー内部の中央寄せコンテナを解除 */
.ec-header__inner,
.ec-headerNaviRole__inner,
.ec-headerRole__inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ===========================
   カート修正（白背景を消して黒に馴染ませる）
   =========================== */

/* --- カート本体の背景を完全に透明に戻す --- */
.ec-headerRole__cart a {
    background-color: transparent !important;
    background: transparent !important;
}

/* --- カートの外枠影響を消す（テーマがbox-shadow入れてる） --- */
.ec-headerRole__cart a {
    box-shadow: none !important;
}

/* --- カート内の個数バッジだけ白背景＋赤文字のまま --- */
.ec-cartNaviBadge {
    background: #ffffff !important;
    color: #A10F2B !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
}

/* ===========================
   カートエリア 背景総クリア
   =========================== */

/* カート周りの背景・枠・影を全部透明にする */
.ec-headerRole__cart,
.ec-headerRole__cart * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 個数バッジだけ白背景＋カルティエ赤 */
.ec-headerRole__cart .ec-cartNaviBadge {
    background-color: #ffffff !important;
    color: #A10F2B !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-weight: bold !important;
}

/* アイコンは白のまま */
.ec-headerRole__cart svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* カートの「合計」「金額」を白にする */
.ec-cartNavi__label,
.ec-cartNavi__price {
    color: #ffffff !important;
}

/* ===============================
   METALINA カテゴリ → グローバルメニュー化
   ec-itemNav / ec-itemNav__nav 直接指定版
   =============================== */

/* カテゴリブロック全体を横幅いっぱいの帯にする */
.ec-itemNav {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #333333;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

/* 親カテゴリの UL を横並びにする */
.ec-itemNav__nav {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;                 /* 親カテゴリ同士の間隔 */
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 24px !important;
}

/* ネストされた UL（子カテゴリ）の点も消す */
.ec-itemNav__nav ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* 親カテゴリリンクの見た目 */
.ec-itemNav__nav > li > a {
    display: block;
    padding: 6px 8px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

/* 親カテゴリホバー時の下線＋カルティエ赤 */
.ec-itemNav__nav > li > a:hover {
    border-bottom: 2px solid #A10F2B;
}

/* 親 li はドロップダウンのベース */
.ec-itemNav__nav > li {
    position: relative;
}

/* 子カテゴリメニュー（最初は非表示） */
.ec-itemNav__nav > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #222222;
    padding: 8px 0;
    min-width: 200px;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* 親にホバーしたら子を表示 */
.ec-itemNav__nav > li:hover > ul {
    display: block;
}

/* 子カテゴリリンク */
.ec-itemNav__nav > li > ul li a {
    display: block;
    padding: 6px 12px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 400;
    white-space: nowrap;
}

/* 子カテゴリホバー */
.ec-itemNav__nav > li > ul li a:hover {
    background-color: #A10F2B;
}