/* ============================================================
Vexolite 1.4.7 — ヘッダー常時 2 段（全幅統一）/ フッター内ナビ / 信頼栏中央寄せ
親テーマ(Storefront)のcompiled CSSより後に読ませるため別ファイル化。
============================================================ */
:root {
/* コンテン幅: 1140px 固定はワイド画面で「細い帯が浮いている」ように見える
（2026-10-02 運営指摘「左右空白太多」）。1400px 上限＋ビューポート連動にする。 */
--vx-wrap: min(1400px, calc(100% - 2.5rem));
--vx-pad: clamp(1rem, 3vw, 2.25rem);
/* 2 段分の高さ（上段 約2.6rem + 下段ナビ 約2.1rem + 余白） */
--vx-header-h: 6.6rem;
--vx-header-h-sm: 4.9rem;
}
/* 幅の統一: 親テーマの .col-full / .wrapper を 1 値に揃える */
#masthead .col-full,
#content > .col-full,
#colophon .col-full,
.site-footer .col-full,
.col-full,
.wrapper {
max-width: var(--vx-wrap) !important;
padding-left: var(--vx-pad) !important;
padding-right: var(--vx-pad) !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* -------------------------------------------------- ホームはセクションを全幅へ */
/* .col-full(.1140〜1400) の内側で sections を枠っていたため、配色バンドが
画面端まで伸びず「両側の余白が大きく版式が変」に見えた（2026-10-02 運営指摘）。
ホーム（front-page.php の main.vx-home）だけ外側の限制を外し、
中央寄せと余白は section 内の .wrapper に一手間任せにする。
→ バンドは viewport 幅、本文は --vx-wrap 幅でヘッダー／フッターと揃う。 */
body.home #content > .col-full {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* .site-main 以外（WooCommerce のお知らせ箱など）が画面端に張り付かない保険 */
body.home #content > .col-full > :not(.vx-home) { padding-inline: var(--vx-pad); }
/* -------------------------------------------------- sticky header */
/* スクロールしても常に最上部に残す（デスクトップ/モバイル共通）。
注意: Storefront が body{overflow-x:hidden} を出す（fixed ヘッダー用）。
hidden はベンダによって sticky を止めることがあるので、
横スクロール抑制を html の clip（スクロールコンテナを作らない）へ移し替え、
body は visible に戻して sticky を確実に通す。 */
html { overflow-x: clip; }
body { overflow-x: visible; }
/* sticky は「最近のスクロール子孫」が親にあると効かなくなる。祖先に
overflow/contain を入れない（プラグインが足してもここで戻す）。 */
#page,
.site,
.site-content,
.site-main { overflow: visible !important; contain: none !important; }
#masthead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
/* ドロップダウン（サブメニュー／ミニカゴ）をヘッダー直下に置くための基準値。
.is-stuck（詰め状態）では header 高さも縮むので跟随させる。 */
--vx-panel-top: var(--vx-header-h);
background: rgba(250, 246, 240, .93);
-webkit-backdrop-filter: saturate(1.1) blur(8px);
backdrop-filter: saturate(1.1) blur(8px);
border-bottom: 1px solid rgba(227, 214, 196, .7);
transition: box-shadow .2s ease, border-color .2s ease;
}
/* 管理バー分だけ下げる（storefront_header_styles の inline style は空なので効かない）。 */
body.admin-bar #masthead { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar #masthead { top: 46px; }
}
/* JS がスクロール量に応じて .is-stuck を付ける（header.js）。 */
#masthead.is-stuck {
box-shadow: 0 .3rem 1.1rem rgba(59, 47, 36, .10);
border-bottom-color: #e3d6c4;
/* ヘッダーが縮んだ分、パネルの起点も縮める（固定値だと中身に隙間が浮く）。
≤768px 段では #masthead 側で var を再定義するので、こちらも自動的に追随する。 */
--vx-panel-top: var(--vx-header-h-sm);
}
#masthead.is-stuck .vx-header { min-height: var(--vx-header-h-sm); }
#masthead.is-stuck .vx-slogan { opacity: 0; visibility: hidden; height: 0; margin: 0; }
#masthead.is-stuck .site-title { font-size: 1.32rem !important; }
#masthead.is-stuck .custom-logo { max-height: 34px; }
/* 追従時はナビも詰める（高さを減らすだけ。横並びは崩さない） */
#masthead.is-stuck .main-navigation ul.primary-navigation > li > a {
padding: .34rem .78rem !important;
font-size: .88rem;
}
#masthead.is-stuck .vx-util { height: 2.1rem; }
/* 追従ナビにアンカー見出しが隠れないようにする（#vx-about 等のジャンプ）。 */
html { scroll-padding-top: calc(var(--vx-header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
.vx-header,
.vx-slogan,
.site-title,
.custom-logo { transition: min-height .18s ease, opacity .18s ease, font-size .18s ease, max-height .18s ease, margin .18s ease; }
}
/* -------------------------------------------------- header: 常時 2 段（デスクトップ＝モバイル同一形） */
/* 2026-10-02 運営確定形:
上段 = 左にブランド＋スローガン / 右に 検索・お気に入り・アカウント・カゴ
下段 = ホームページ｜カテゴリー▾｜Vexolite について を横 1 行
1.4.6 まで 1161px 以上だけ「ブランド／ナビ／ユーティリティ」の 1 段組みで、
狭い幅のみ 2 段だったため、画面ごとに形が変わって見えた（運営「web と mobile
端の協調統一」）。下段を専有行に固定すればナビは折り返しの必要がなく、
ハンバーガーも不要になる（ボタンを残すと「押すと導線が消える」＝指示と逆）。
中央列を minmax(0,1fr) にすると ナビ（nowrap）が列幅を超えて UTILS と
重なるため、ナビは行を占有させ、左列だけ伸縮（min-width:0）にする。 */
.vx-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"brand utils"
"nav nav";
align-items: center;
column-gap: 1rem;
row-gap: .2rem;
min-height: var(--vx-header-h);
padding-block: .45rem;
}
.site-branding {
grid-area: brand;
margin: 0 !important;
float: none !important;
min-width: 0;
/* P0（2026-10-29 実測）: 親 Storefront は ≤768px で
`.site-branding { width: calc(100% - 120px) }`（フロート時代の
「右に 120px 空ける」計算）を当てる。うちは 2 段 grid の brand 列なので
その幅だと 390px 端末で 39.6px・360px で 9.6px まで潰れ、ロゴが 1 文字ずつ
縦積みになってヘッダーが 207px / 363px に伸びていた。
→ 列幅は grid（minmax(0,1fr)）に決めさせる。!important は、後読みの
プラグイン CSS が同じ形の width を再注入しても崩れないための保険。 */
width: auto !important;
position: relative; /* ← .vx-brand-search をこのセルに重ねるための基準 */
}
.vx-utils { grid-area: utils; }
#masthead #site-navigation { grid-area: nav; }
.site-title { margin: 0 !important; font-size: 1.55rem !important; line-height: 1.15 !important; }
.vx-slogan {
margin: .1rem 0 0 !important;
font-size: .74rem !important;
letter-spacing: .09em;
line-height: 1.4;
}
.custom-logo { max-height: 46px; width: auto; }
.vx-menu-toggle {
display: none;
margin-left: auto;
background: transparent;
border: 1px solid #e3d6c4;
border-radius: 999px;
color: var(--vx-ink);
font-family: var(--vx-font-display);
font-weight: 700;
font-size: .82rem;
padding: .42rem 1rem;
cursor: pointer;
}
.vx-menu-toggle:hover { border-color: var(--vx-primary); color: var(--vx-primary); }
/* -------------------------------------------------- main nav + dropdown */
#masthead #site-navigation {
flex: 1 1 auto;
display: block !important;
width: auto !important;
float: none !important;
}
.main-navigation ul.primary-navigation {
display: flex;
/* 折り返し禁止: ここで折れると「ホームページ／カテゴリー／Vexolite について」が
縦積みに見え、運営指摘（横排展示）そのままの原因になる。狭い幅は
ラベルを畳んで吸収する（下の 769〜1024px 段）。 */
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: .15rem;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation ul.primary-navigation > li { position: relative; flex: 0 0 auto; }
.main-navigation ul.primary-navigation > li > a {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .55rem .95rem !important;
border-radius: 999px;
font-family: var(--vx-font-display);
font-size: .93rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--vx-ink);
line-height: 1.35;
white-space: nowrap;
transition: background .15s ease, color .15s ease, padding .15s ease, font-size .15s ease;
}
.main-navigation ul.primary-navigation > li > a::after { content: none; }
.main-navigation ul.primary-navigation > li > a:hover,
.main-navigation ul.primary-navigation > li > a:focus-visible {
background: rgba(192, 91, 33, .09);
color: var(--vx-primary-deep);
}
.main-navigation ul.primary-navigation > li.current-menu-item > a,
.main-navigation ul.primary-navigation > li.current-menu-ancestor > a {
background: var(--vx-mint-pale);
color: var(--vx-primary-deep);
}
/* P0（2026-10-29 実測）: 矢印 ▾ の居場所を空ける padding-right は、下の
`.main-navigation ul.primary-navigation > li > a`（padding 一括指定, (0,2,3)）と
詳細度が同じ「以下」だと負けて効かない。実測では 390px で 6.4px、1440px で
15.2px しか空かず、グリフが文字に 7.5px / 3.5px 重なっていた。
`ul.primary-navigation` を挟んで (0,3,3) に上げ、各幅の padding 上書きに勝たせる。
追従時は #masthead.is-stuck 側の padding が (1,2,3) なので、同詳細度の
追従用ルールも別に用意する（各ブレークポイントの値で上書き）。 */
.main-navigation ul.primary-navigation > li.menu-item-has-children > a { padding-right: 1.7rem !important; }
#masthead.is-stuck .main-navigation ul.primary-navigation > li.menu-item-has-children > a { padding-right: 1.7rem !important; }
.vx-sub-toggle {
position: absolute;
right: .2rem;
top: 50%;
transform: translateY(-50%);
/* 2026-10-29 実測: 旧 padding .35rem では 21.1×22.4px で WCAG 2.2 AA の
ターゲットサイズ 24×24 を割っていた。絶対配置なので 24px に広げても
ナビの行高・折り返しは変わらない（右端は据え置き、グリフは中央寄せ）。 */
width: 24px;
height: 24px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--vx-ink-soft);
font-size: .7rem;
line-height: 1;
cursor: pointer;
}
.main-navigation .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 15.5rem;
margin: 0;
padding: .45rem 0;
list-style: none;
background: var(--vx-card);
border: 1px solid #efe2d0;
border-radius: 0 0 var(--vx-radius-sm) var(--vx-radius-sm);
box-shadow: var(--vx-shadow-hover);
opacity: 0;
visibility: hidden;
/* ミニカゴと同じ罠: visibility:hidden でも箱は残るので、閉じている状態で
ヘッダー直下の内容のクリックを奪う。開いたときだけ受けさせる。 */
pointer-events: none;
transform: translateY(.35rem);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu,
.main-navigation li.vx-sub-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.main-navigation .sub-menu a {
display: block;
padding: .6rem 1.1rem !important;
font-size: .88rem;
color: var(--vx-ink);
border-left: 3px solid transparent;
}
.main-navigation .sub-menu a:hover {
background: var(--vx-accent);
border-left-color: var(--vx-primary);
color: var(--vx-primary-deep);
}
/* -------------------------------------------------- utility icons */
/* 検索・お気に入り・アカウント・カゴを同一形状のピル（アイコン+横書きラベル）に統一する。 */
.vx-utils { display: flex; align-items: center; gap: .1rem; flex: 0 0 auto; }
.vx-util,
#masthead .vx-cart > li > a.cart-contents {
position: relative;
display: inline-flex;
flex-direction: row;
align-items: center;
gap: .35rem;
height: 2.35rem;
padding: 0 .8rem !important;
border-radius: 999px;
color: var(--vx-ink) !important;
font-family: var(--vx-font-display);
font-size: .76rem !important;
font-weight: 700;
letter-spacing: .03em;
line-height: 1 !important;
white-space: nowrap;
text-decoration: none !important;
background: transparent !important;
border: 1px solid transparent !important;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease, height .18s ease;
}
#masthead.is-stuck .vx-util,
#masthead.is-stuck .vx-cart > li > a.cart-contents { height: 2.1rem; }
.vx-util:hover,
.vx-util:focus-visible,
#masthead .vx-cart > li > a.cart-contents:hover,
#masthead .vx-cart > li > a.cart-contents:focus-visible {
color: var(--vx-primary) !important;
background: var(--vx-accent) !important;
border-color: #efdfc9 !important;
}
.vx-util .vx-ico,
#masthead .vx-cart .vx-ico { display: block; width: 19px; height: 19px; flex: 0 0 auto; }
.vx-util-count {
position: absolute;
top: -.25rem;
right: -.1rem;
min-width: 1.15rem;
height: 1.15rem;
padding: 0 .25rem;
border-radius: 999px;
background: var(--vx-primary);
color: #fff;
font-size: .64rem;
font-weight: 700;
line-height: 1.15rem;
text-align: center;
box-sizing: border-box;
}
/* P1-1（2026-10-29 実測）: カートが空のとき PHP は is-zero の空バッジを出す。
ここを `.vx-util-count.is-zero { display:none }`（(0,2,0)）で隠していたが、
WooCommerce の `.site-header-cart .cart-contents span { display:inline }`
（`@media (min-width:768px)` 内, (0,2,1)）に負け、デスクトップだけ
18×18 のオレンジ点が残っていた。#site-header-cart を足して (1,2,0) に上げる。 */
#site-header-cart .vx-util-count.is-zero { display: none; }
.cart-contents .woocommerce-Price-amount { display: none; }
/* カート: ul/li 構造を flex 行に揃える。2 つ目の li（ミニカゴ）はレイアウトに
参加させず、絶対配置のドロップダウン置き場としてだけ使う（以前は block の
li が縦に積もってアイコン列の高さがずれていた）。 */
#site-header-cart {
display: flex;
align-items: center;
float: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none;
position: relative;
background: transparent !important;
}
#site-header-cart > li { display: flex !important; align-items: center; float: none !important; margin: 0 !important; padding: 0 !important; }
#site-header-cart > li:nth-child(2) {
position: absolute;
right: 0;
top: calc(100% + .45rem);
width: 21rem;
max-width: min(21rem, calc(100vw - 1.75rem));
z-index: 1001;
display: block !important;
/* visibility:hidden でもレイアウトは残るので、この li が画面中央の
見えない板になって下の内容のタップを奪う。li 自体は常に素通しにし、
カードが開いたときだけ pointer-events を戻す。 */
pointer-events: none;
}
/* カゴのアイコンを 1 本に揃える。
2026-10-02 運営「购物车（カゴ）に logo が 2 つ出る」の実原因（推測ではなく CSS 実測）:
Storefront が `.site-header-cart .cart-contents::after` に Font Awesome の
カート（content:"\f07a"; font-family:"Font Awesome 5 Free"; float:right）を
描画していた。こちらは ::before だけ消していて ::after が残っていたため、
左に自前 SVG・右に FA カート、という二重表示になっていた。
親より指定が強い（ID 込み）ので !important 付きで両方止める。 */
#site-header-cart a.cart-contents::before,
#site-header-cart a.cart-contents::after,
#site-header-cart .vx-util-count::before,
#site-header-cart .vx-util-count::after {
content: none !important;
display: none !important;
}
#site-header-cart a.cart-contents .count { display: none !important; }
/* -------------------------------------------------- ミニカゴのパネル */
/* 2026-10-02 運営「お買い物カゴを表示 した後の表示効果と美観。浮動？下段中央？」」。
採用: カゴピルの真下に“浮く”カード（広幅は右端揃え＝ピルに沿う、狭幅は行の下に全幅中央）。
理由: ヘッダー右端が起点なので、広幅で中央寄せすると画面外にはみ出す。
10 点入っても破綻しないよう max-height + 内側スクロール、
閉じたらフォーカス順から外れるよう visibility:hidden（display:none は不可視だが
transition が効かない）。タッチ端末は header.js が .vx-cart-open を付ける。 */
#site-header-cart .widget_shopping_cart {
width: 100%;
margin: 0;
padding: 1rem 1.05rem 1.15rem;
background: #fff;
border: 1px solid #ead9c4;
border-radius: var(--vx-radius);
box-shadow: 0 .9rem 2.2rem rgba(59, 47, 36, .18);
box-sizing: border-box;
max-height: min(64vh, 30rem);
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0;
visibility: hidden;
transform: translateY(.35rem);
pointer-events: none;
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
#site-header-cart:hover .widget_shopping_cart,
#site-header-cart:focus-within .widget_shopping_cart,
#masthead.vx-cart-open #site-header-cart .widget_shopping_cart {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* 見出し（プラグインの title= は空なので出ないが、出た場合に備えて整える） */
#site-header-cart .widget_shopping_cart > .widgettitle,
#site-header-cart .widget_shopping_cart > h2,
#site-header-cart .widget_shopping_cart > h3 {
margin: 0 0 .6rem;
font-family: var(--vx-font-display);
font-size: .86rem;
letter-spacing: .06em;
color: var(--vx-primary-deep);
}
#site-header-cart .product_list_widget {
list-style: none;
margin: 0;
padding: 0;
}
/* 実 markup（fragments 側で確認）: li の子は
・（サムネ＋商品名）・
＝画像と商品名が 1 つの に入っている。だから 2 列 grid にすると
「1 列目＝削除×、2 列目＝画像+名前」にずれる（1.4.7 で修正）。
WooCommerce 本体と同じ「画像 float + 本文まわり込み」に戻し、× だけ絶対配置で右上に置く。 */
#site-header-cart .product_list_widget li {
position: relative;
padding: .65rem 1.6rem .65rem 0;
border-bottom: 1px solid #f3e9dc;
font-size: .82rem;
line-height: 1.5;
}
#site-header-cart .product_list_widget li::after { content: ""; display: table; clear: both; }
#site-header-cart .product_list_widget li img {
float: left;
width: 2.6rem;
height: 2.6rem;
object-fit: cover;
border-radius: .5rem;
margin: 0 .7rem 0 0;
background: var(--vx-cream);
}
#site-header-cart .product_list_widget li a { color: var(--vx-ink); text-decoration: none; }
#site-header-cart .product_list_widget li a:hover { color: var(--vx-primary); }
#site-header-cart .product_list_widget .quantity {
display: block;
overflow: hidden; /* float の右側に積まれる（画像の下に潜り込まない） */
color: var(--vx-ink-soft);
font-size: .76rem;
margin-top: .35rem;
}
#site-header-cart .product_list_widget li a.remove,
#site-header-cart .product_list_widget li .remove_item {
position: absolute;
top: .45rem;
right: .05rem;
float: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
box-shadow: none;
color: var(--vx-ink-soft) !important;
font-size: 1rem;
line-height: 1;
text-decoration: none;
}
#site-header-cart .product_list_widget li a.remove:hover,
#site-header-cart .product_list_widget li .remove_item:hover { color: var(--vx-primary-deep) !important; background: var(--vx-mint-pale); }
#site-header-cart .woocommerce-mini-cart__total {
margin: .75rem 0 0;
padding: .6rem 0 0;
border-top: 1px solid #ead9c4;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .6rem;
font-size: .86rem;
font-weight: 700;
color: var(--vx-ink);
}
#site-header-cart .woocommerce-mini-cart__total .woocommerce-Price-amount { font-size: 1.02rem; color: var(--vx-primary-deep); }
#site-header-cart .woocommerce-mini-cart__empty-message {
margin: .1rem 0 .2rem;
font-size: .84rem;
color: var(--vx-ink-soft);
line-height: 1.7;
}
/* 送料無料ラインまでの案内（inc/shipping.php の
vexolite_mini_cart_shipping_note() が hooks の
woocommerce_widget_shopping_cart_before_buttons から出す。数字は送料計算と同一の option） */
#site-header-cart .vx-mini-cart-note {
margin: .7rem 0 0;
padding: .5rem .65rem;
background: var(--vx-cream);
border: 1px dashed #e0cbb0;
border-radius: var(--vx-radius-sm);
font-size: .78rem;
line-height: 1.6;
font-weight: 600;
color: var(--vx-primary-deep);
}
/* 2 ボタン（カゴを見る／ご購入手続きへ）を同列で揃える */
#site-header-cart .widget_shopping_cart .buttons {
display: flex;
gap: .5rem;
margin: .85rem 0 0;
}
#site-header-cart .widget_shopping_cart .buttons a {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: .55rem .6rem !important;
font-size: .8rem !important;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.35;
text-align: center;
text-decoration: none !important;
margin: 0 !important;
}
#site-header-cart .widget_shopping_cart .buttons a.button { background: var(--vx-mint-pale) !important; color: var(--vx-primary-deep) !important; border: 1px solid var(--vx-mint) !important; }
#site-header-cart .widget_shopping_cart .buttons a.checkout { background: var(--vx-primary) !important; color: #fff !important; border: 1px solid var(--vx-primary) !important; }
#site-header-cart .widget_shopping_cart .buttons a.button:hover { background: #d7e6de !important; }
#site-header-cart .widget_shopping_cart .buttons a.checkout:hover { background: var(--vx-primary-deep) !important; }
/* Woo は markup 上「ご購入手続きへ」を先に出す。 reads 順番（中を見る→進む）に揃える */
#site-header-cart .widget_shopping_cart .buttons a.checkout { order: 2; }
#site-header-cart .widget_shopping_cart .buttons a.wc-forward:not(.checkout) { order: 1; }
/* 追加直後のバッジをひと呼吸だけ目立たせる（何が起きたか分かるフィードバック） */
@keyframes vx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
#masthead .vx-util-count.vx-pop { animation: vx-pop .42s ease; }
/* -------------------------------------------------- search: ブランド欄がそのまま入力欄になる */
/* 2026-10-02 運営「検索を押したら logo 部分を拓宽して入力口にしたい。下にもう
一行の出力口は要らない。モバイルも協調させる」。
=> 以前の下段パネル（.vx-search-panel）は廃止。同じグリッドセル
（.site-branding = brand 列）に absolute で重ねるので、
開いてもヘッダーの高さは 1 ピクセルも動かない（行が伸びると
下段ナビが跳ねて「2 段固定」の指示が崩れる）。
幅は brand 列 いっぱい＝ロゴ欄のそのままの広がりになる。 */
.vx-brand-search {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
/* 閉じる × は ≤600px でだけ出す（それ以上は右端の検索トグルがそのまま閉じる）。
display:flex は × を入力欄の横に並べるため。 */
display: flex;
align-items: center;
gap: .35rem;
}
.vx-brand-search[hidden] { display: none; }
.vx-branding-face { transition: opacity .16s ease; }
#masthead.vx-search-open .vx-branding-face { opacity: 0; pointer-events: none; visibility: hidden; }
.vx-brand-search form.woocommerce-product-search {
display: flex;
align-items: center;
gap: .4rem;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
.vx-brand-search .vx-search-ico {
display: flex;
flex: 0 0 auto;
align-items: center;
margin-left: .7rem;
color: var(--vx-ink-soft);
}
.vx-brand-search .vx-search-ico .vx-ico { width: 18px; height: 18px; }
.vx-brand-search input.search-field {
flex: 1 1 auto;
min-width: 0;
height: 2.75rem;
padding: 0 .6rem;
border: 1.5px solid var(--vx-mint);
border-radius: 999px;
background: #fff;
color: var(--vx-ink);
font-family: inherit;
font-size: .95rem;
line-height: 1.4;
}
.vx-brand-search input.search-field:focus {
border-color: var(--vx-primary);
box-shadow: 0 0 0 3px rgba(157, 69, 21, .18);
}
.vx-brand-search input.search-field:focus-visible {
outline: 3px solid var(--vx-ink);
outline-offset: 1px;
}
.vx-brand-search .vx-search-go {
flex: 0 0 auto;
height: 2.75rem;
margin-right: .1rem;
padding: 0 1.15rem;
border: 0;
border-radius: 999px;
background: var(--vx-primary);
color: #fff;
font-family: var(--vx-font-display);
font-size: .84rem;
font-weight: 700;
letter-spacing: .04em;
cursor: pointer;
}
.vx-brand-search .vx-search-go:hover { background: var(--vx-primary-deep); }
.vx-brand-search .vx-search-close {
display: none; /* ≤600px で表示（下の media query） */
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1.5px solid var(--vx-mint);
border-radius: 999px;
background: #fff;
color: var(--vx-ink);
cursor: pointer;
}
.vx-brand-search .vx-search-close:hover { border-color: var(--vx-primary); color: var(--vx-primary); }
.vx-brand-search .vx-search-close:focus-visible { outline: 3px solid var(--vx-ink); outline-offset: 1px; }
.vx-brand-search .vx-search-close .vx-ico { width: 18px; height: 18px; }
/* 狭幅でラベルを残すと入力欄の列が潰れる → 開いている間だけアイコンのみに畳む。
名前は screen-reader 側で保持しているので、視覚だけ畳む（display:none は不可）。 */
@media (max-width: 900px) {
#masthead.vx-search-open .vx-util .vx-util-label {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#masthead.vx-search-open .vx-util,
#masthead.vx-search-open #site-header-cart > li > a.cart-contents { padding: 0 .45rem !important; }
}
@media (max-width: 560px) {
.vx-brand-search .vx-search-go { padding: 0 .7rem; font-size: .78rem; }
.vx-brand-search .vx-search-ico { display: none; }
.vx-brand-search input.search-field { border-radius: .9rem; }
}
/* -------------------------------------------------- footer（ブランド＋リンク群を 1 組に） */
/* ★ 2026-10-02 運営 2 度目の指摘「footer の网站导航はやはり字が見えない」の実因（probe70 実測）。
1 回目の対策は色の「値」を #a99c8b → #ded3c4 に上げただけで、当たっていなかった。
読み込み順（live HTML の 順そのもの）:
2 番 = storefront/style.css … .site-footer a:not(.button):not(.components-button){color:#333333} 特異度 0-3-1
9 番 = vexolite chrome.css … .vx-footer-col a{color:#ded3c4} 特異度 0-1-1
→ 特異度で Storefront の勝ち。#3b2f24 の背景に #333 の文字＝コントラスト比 **1.03:1**（ほぼ同色）。
h2 の列見出しも `.site-footer h2{color:#333}`（0-1-1）が `.vx-footer-title`（0-1-0）に勝つ。
対策: footer 内の と見出しは **`#colophon`（live markup の