/*
================================================

N A V（ヘッダーのメニューで開く引き出し）

#nav が画面全体を暗くする幕、nav が右から出てくる本体。
開け閉めは js.js が #nav に .open を付け外しする。
色・価格帯の箱は、js.js がデータを入れ終えると .ready が付いて出てくる

================================================
*/
#nav{
--nav-key: var(--ancolor-key-color, #7c6d5f);
--nav-line: #e7e2da;
--nav-soft: #f6f3ee;
--nav-text: #2b2620;

position: fixed;
inset: 0;
z-index: 11111;
background: rgba(30,24,18,.45);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}

#nav.open{
opacity: 1;
visibility: visible;
transition: opacity .25s ease;
}

/* 開いている間は、後ろのページをスクロールさせない */
html.navOpen,
html.navOpen body{
overflow: hidden;
}

#nav nav{
position: absolute;
top: 0;
right: 0;
width: min(86vw, 400px);
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
background: #fff;
color: var(--nav-text);
box-shadow: -8px 0 24px rgba(0,0,0,.12);
transform: translateX(100%);
transition: transform .3s ease;
}

#nav.open nav{
transform: none;
}

#nav ul{
list-style: none;
}

#nav a{
color: inherit;
}


/* ---- 見出し（MENU と ✕） ---- */
#nav .navHead{
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
padding: 0 8px 0 20px;
background: #fff;
border-bottom: 1px solid var(--nav-line);
}

#nav .navTtl .en{
font-family: "Cormorant Garamond", serif;
font-size: 1.3rem;
letter-spacing: .15em;
}

#nav .navTtl .jan{
display: none;
}

#nav .close{
width: 44px;
height: 44px;
border: 0;
background: none;
font-size: 1.1rem;
color: var(--nav-text);
cursor: pointer;
}


/* ---- 箱ごとの見出し ---- */
#nav .menu_box{
padding: 22px 20px 6px;
}

#nav .menu_box + .menu_box{
border-top: 8px solid var(--nav-soft);
}

/* データが入るまで（取れなかったとき）は箱ごと出さない */
#nav .menu_box:has([data-nav]):not(.ready){
display: none;
}

#nav .menu_box h2.ttl{
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 14px;
font-weight: normal;
}

#nav .menu_box h2.ttl .en{
font-family: "Cormorant Garamond", serif;
font-size: 1.15rem;
letter-spacing: .12em;
color: var(--nav-key);
}

#nav .menu_box h2.ttl .jan{
font-size: .75rem;
color: #8a8178;
}


/* ---- 色から探す：丸い色見本を5列に ---- */
#nav .menu_box .color{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px 6px;
padding-bottom: 14px;
}

#nav .menu_box .color li{
width: auto;
padding: 0;
}

#nav .menu_box .color a{
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-size: .65rem;
line-height: 1.3;
text-align: center;
}

#nav .menu_box .color em{
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
/* 光沢をのせて、金属色（ゴールド・シルバーなど）も平たく見えないようにする */
background-image: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.18) 100%);
/* 白銀・クリアのような淡い色も輪郭が見えるように */
box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
transition: transform .15s ease;
}

#nav .menu_box .color a:hover em,
#nav .menu_box .color a:focus-visible em{
transform: scale(1.08);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px #fff, 0 0 0 3px var(--nav-key);
}


/* ---- 価格帯から探す：2列のボタン ---- */
#nav .menu_box .price{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding-bottom: 14px;
}

#nav .menu_box .price a{
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 6px 8px;
border: 1px solid var(--nav-line);
border-radius: 6px;
background: var(--nav-soft);
font-size: .8rem;
text-align: center;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#nav .menu_box .price a:hover,
#nav .menu_box .price a:focus-visible{
border-color: var(--nav-key);
background: var(--nav-key);
color: #fff;
}


/* ---- カテゴリーから探す：下の階層は矢印で開く ---- */
#nav .group > ul{
margin: 0 -20px;
}

#nav .group li{
position: relative;
border-top: 1px solid var(--nav-line);
}

#nav .group > ul > li:last-child{
border-bottom: 1px solid var(--nav-line);
}

#nav .group li > a{
display: block;
padding: 13px 52px 13px 20px;
font-size: .85rem;
line-height: 1.5;
}

#nav .group li > a:hover{
background: var(--nav-soft);
}

/* 下の階層 */
#nav .group li ul{
display: none;
background: var(--nav-soft);
}

#nav .group li.expanded > ul{
display: block;
}

#nav .group li li{
border-top-color: #ece7df;
}

#nav .group li li > a{
padding-left: 34px;
font-size: .8rem;
color: #4a433b;
}

#nav .group li li li > a{
padding-left: 48px;
}

/* 開け閉めの矢印（グループ名の右端） */
#nav .groupToggle{
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 48px;
border: 0;
background: none;
cursor: pointer;
}

#nav .groupToggle::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -6px 0 0 -4px;
border-right: 1.5px solid #8a8178;
border-bottom: 1.5px solid #8a8178;
transform: rotate(45deg);
transition: transform .2s ease;
}

#nav li.expanded > .groupToggle::before{
margin-top: -2px;
transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce){
  #nav,
  #nav nav,
  #nav .groupToggle::before{
  transition: none;
  }
}


/*
================================================

お気に入りの一覧（ヘッダーのハートで開く引き出し #favPanel）
ヘッダーのハートと引き出しは js.js が作る。見出し（.navHead）は #nav と同じ形

================================================
*/
#h .header-utils .favorite{
position: relative;
}

#h .header-utils .favorite .count{
display: none;
position: absolute;
top: -4px;
right: -6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: #e0245e;
color: #fff;
font-size: 10px;
font-weight: bold;
line-height: 16px;
text-align: center;
pointer-events: none;
}

#h .header-utils .favorite .count.has{
display: block;
}

#favPanel{
position: fixed;
inset: 0;
z-index: 11111;
background: rgba(30,24,18,.45);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}

#favPanel.open{
opacity: 1;
visibility: visible;
transition: opacity .25s ease;
}

#favPanel .panel{
position: absolute;
top: 0;
right: 0;
width: min(86vw, 400px);
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
background: #fff;
color: #2b2620;
box-shadow: -8px 0 24px rgba(0,0,0,.12);
transform: translateX(100%);
transition: transform .3s ease;
}

#favPanel.open .panel{
transform: none;
}

#favPanel .navHead{
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
padding: 0 8px 0 20px;
background: #fff;
border-bottom: 1px solid #e7e2da;
}

#favPanel .navTtl{
display: flex;
align-items: baseline;
gap: 10px;
}

#favPanel .navTtl .en{
font-family: "Cormorant Garamond", serif;
font-size: 1.3rem;
letter-spacing: .15em;
}

#favPanel .navTtl .jan{
font-size: .75rem;
color: #8a8178;
}

#favPanel .close{
width: 44px;
height: 44px;
border: 0;
background: none;
font-size: 1.1rem;
color: inherit;
cursor: pointer;
}

#favPanel .favEmpty{
padding: 40px 20px;
font-size: .85rem;
line-height: 1.8;
color: #6b635a;
text-align: center;
}

#favPanel .favList{
list-style: none;
}

#favPanel .favList li{
display: flex;
align-items: center;
border-bottom: 1px solid #e7e2da;
}

#favPanel .favList li.out{
opacity: .6;
}

#favPanel .favList a{
flex: 1;
display: grid;
grid-template-columns: 64px 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 4px;
min-width: 0;
padding: 12px 0 12px 16px;
color: inherit;
}

#favPanel .favList img{
grid-row: 1 / 3;
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 4px;
}

#favPanel .favList .name{
font-size: .8rem;
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

#favPanel .favList .price{
font-size: .85rem;
font-weight: bold;
}

#favPanel .favList .fav{
flex: 0 0 48px;
height: 48px;
border: 0;
background: none;
color: #b5aca2;
cursor: pointer;
}

@media (prefers-reduced-motion: reduce){
  #favPanel,
  #favPanel .panel{
  transition: none;
  }
}