/*
Theme Name:  Vexolite
Theme URI:   https://vexolite.com
Description: Vexolite 品牌子主题：暖色极简儿童杂货风（奶油底/暖橙/薄荷），基于 Storefront。
Author:      Vexolite
Author URI:  https://vexolite.com
Template:    storefront
Version:     1.5.12
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License:     Unlicensed proprietary theme for vexolite.com
Text Domain: vexolite
*/

/* ============================================================
   Vexolite design tokens
   ============================================================ */
:root {
	--vx-cream: #faf6f0;
	--vx-ink: #33291f;
	--vx-ink-soft: #6b5d4f;
	--vx-primary: #b1511b;
	--vx-primary-deep: #9d4515;
	--vx-sun: #f4a259;
	--vx-mint: #7fb5a6;
	--vx-mint-pale: #dfece6;
	--vx-accent: #fbeed7;
	--vx-card: #fffdf9;
	--vx-radius: 1rem;
	--vx-radius-sm: .6rem;
	--vx-shadow: 0 2px 10px rgba(51, 41, 31, .07);
	--vx-shadow-hover: 0 6px 18px rgba(51, 41, 31, .12);
	--vx-font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--vx-font-display: "Zen Maru Gothic", "Zen Kaku Gothic New", "Hiragino Maru Gothic ProN", sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
body {
	background: var(--vx-cream);
	color: var(--vx-ink);
	font-family: var(--vx-font-body);
	letter-spacing: .01em;
	line-height: 1.75;
}
h1, h2, h3, h4, h5, h6, .vx-display {
	font-family: var(--vx-font-display);
	color: var(--vx-ink);
	line-height: 1.35;
	font-weight: 700;
}
a { color: var(--vx-primary); }
a:hover, a:focus { color: var(--vx-primary-deep); }

:focus-visible {
	outline: 3px solid var(--vx-ink);
	outline-offset: 2px;
	border-radius: 2px;
}
/* 濃色のフッター上では墨色のリングが見えないため、ブランドのサン色に切り替える。 */
#colophon :focus-visible { outline-color: var(--vx-sun); }

.screen-reader-text { /* keep WP helper working */
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	overflow: hidden;
}

.site { background: transparent; }
.wrapper::after { display: none; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
	background: var(--vx-card);
	border-bottom: 1px solid #efe6d8;
	box-shadow: 0 1px 4px rgba(51, 41, 31, .05);
}
.storefront-primary-navigation {
	background: var(--vx-card);
	border: 0;
}
.site-branding .site-title,
.site-title, .site-title a {
	font-family: var(--vx-font-display);
	font-weight: 900;
	font-size: 1.7rem;
	color: var(--vx-ink);
	letter-spacing: .04em;
}
.site-branding .site-title a::after { content: "●"; color: var(--vx-primary); margin-left: .18em; font-size: .55em; vertical-align: .45em; }
.site-description { color: var(--vx-ink-soft); }

.main-navigation { font-family: var(--vx-font-display); }
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	color: var(--vx-ink);
	font-weight: 700;
	padding: .85em 1em;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover { color: var(--vx-primary); }

/* cart / account mini icons */
.header-cart { background-color: var(--vx-primary); }
.header-cart:after, .header-cart .storefront-cart-count { color: #fff; }

/* section nav bar (front page) — 廃止済み（ヘッダー1行化に伴い chrome.css 側へ統合） */

/* ============================================================
   Buttons & forms
   ============================================================ */
button, .button, a.button,
input[type="submit"], input[type="button"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.wp-block-button__link {
	background: var(--vx-primary);
	border: 2px solid var(--vx-primary);
	border-radius: 999px;
	color: #fff;
	font-family: var(--vx-font-display);
	font-weight: 700;
	letter-spacing: .03em;
	padding: .65em 1.6em;
	line-height: 1.4;
	box-shadow: none;
	text-shadow: none;
	transition: background .15s ease, transform .06s ease;
}
button:hover, .button:hover, a.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--vx-primary-deep);
	border-color: var(--vx-primary-deep);
	color: #fff;
}
button:active, .button:active { transform: translateY(1px); }
/* P1-5（2026-10-29 実測）: `.woocommerce a.button.alt` は吸底「カゴに追加」と
   カートの「レジに進む」の両方に付く。以前はここで mint 地 + 白文字（16px で 2.32）に
   していたため、どちらも読みにくかった。ページ内の主 CTA と同じ --vx-primary に揃える
   （白文字 5.17）。.button.secondary は現在どこからも使われていないが、同じ 2.32 を
   残さないよう、mint 地はそのままに文字を ink にする（6.13）。 */
.button.secondary {
	background: var(--vx-mint);
	border-color: var(--vx-mint);
	color: var(--vx-ink);
}
.button.secondary:hover { background: #6ba091; border-color: #6ba091; color: var(--vx-ink); }
.woocommerce a.button.alt {
	background: var(--vx-primary);
	border-color: var(--vx-primary);
	color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus-visible {
	background: var(--vx-primary-deep);
	border-color: var(--vx-primary-deep);
	color: #fff;
}

/* P1-5: 吸底バーの価格は Storefront の `opacity:.5` で実効 #b6b6b6（白地 2.03）。
   16px の本文相当なので 4.5 必要。opacity を外すと #6d6d6d = 5.17 になる。 */
.storefront-sticky-add-to-cart__content-price { opacity: 1; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
input[type="url"], select, textarea {
	border: 2px solid #e4d9c8;
	border-radius: var(--vx-radius-sm);
	background: #fff;
	padding: .55em .8em;
	color: var(--vx-ink);
	font-family: var(--vx-font-body);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--vx-mint);
	box-shadow: 0 0 0 3px rgba(127, 181, 166, .25);
}

/* ============================================================
   Front page sections
   ============================================================ */
.vx-hero {
	background: linear-gradient(135deg, var(--vx-accent) 0%, var(--vx-cream) 55%, var(--vx-mint-pale) 100%);
	padding: 4.5rem 0 3.5rem;
}
.vx-hero .vx-hero-inner { display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; }
.vx-hero .vx-hero-copy { flex: 1 1 26rem; min-width: 0; }
.vx-hero .vx-hero-art { flex: 1 1 22rem; min-width: 0; }
.vx-hero .vx-hero-art img { width: 100%; height: auto; border-radius: var(--vx-radius); box-shadow: var(--vx-shadow-hover); }
.vx-eyebrow {
	display: inline-block;
	background: var(--vx-mint-pale);
	color: #2f5d50;
	border-radius: 999px;
	padding: .3em 1.1em;
	font-weight: 700;
	margin-bottom: 1rem;
}
.vx-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 900; margin-bottom: .6em; }
.vx-hero p { font-size: 1.05rem; color: var(--vx-ink-soft); max-width: 34em; }
.vx-hero .vx-hero-cta { margin-top: 1.6rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.vx-hero .vx-hero-notes { margin-top: 1.4rem; font-size: .88rem; color: var(--vx-ink-soft); }
.vx-hero .vx-hero-notes li { margin-bottom: .2em; }

.vx-section { padding: 3.2rem 0; }
.vx-section:nth-of-type(even) { background: var(--vx-card); }
.vx-section h2 {
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: .3em;
}
.vx-section .vx-section-sub {
	text-align: center;
	color: var(--vx-ink-soft);
	max-width: 40rem;
	margin: 0 auto 2rem;
}
.vx-section h2::after {
	content: "";
	display: block;
	width: 64px; height: 5px;
	background: var(--vx-sun);
	border-radius: 999px;
	margin: .55em auto 0;
}

.vx-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.vx-card {
	background: var(--vx-cream);
	border: 1px solid #efe6d8;
	border-radius: var(--vx-radius);
	padding: 1.5rem 1.3rem;
	box-shadow: var(--vx-shadow);
	transition: box-shadow .15s ease, transform .1s ease;
}
.vx-section:nth-of-type(even) .vx-card { background: var(--vx-cream); }
.vx-card:hover { box-shadow: var(--vx-shadow-hover); transform: translateY(-2px); }
.vx-card h3 { font-size: 1.1rem; margin-bottom: .45em; }
.vx-card .vx-card-ico { font-size: 1.9rem; line-height: 1; margin-bottom: .55rem; }
.vx-card a.vx-card-link { font-weight: 700; }
.vx-card ul { padding-left: 1.1em; margin: .4em 0; }
.vx-card ul li { margin-bottom: .35em; }

.vx-cats .vx-card { text-align: center; }
/* 商品図は 1000x1000 の角丸白ぬり（importers/webp_convert.php）= 1:1 前提。
   4/3 + cover だと上下が 12.5% ずつ切れて商品写真が欠ける（2026-10-01 運営指摘）
   ので、枠も 1:1・中は割らずに収める。 */
.vx-cats .vx-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: var(--vx-radius-sm); margin-bottom: .9rem; }

/* ============================================================
   WooCommerce surfaces
   ============================================================ */
.woocommerce ul.products li.product {
	background: var(--vx-card);
	border: 1px solid #efe6d8;
	border-radius: var(--vx-radius);
	box-shadow: var(--vx-shadow);
	padding-bottom: 1rem;
	transition: box-shadow .15s ease, transform .1s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--vx-shadow-hover); transform: translateY(-3px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--vx-font-display);
	font-size: 1rem;
	line-height: 1.5;
	padding: .6em .9em 0;
	color: var(--vx-ink);
}
.woocommerce ul.products li.product .price {
	color: var(--vx-primary);
	font-family: var(--vx-font-display);
	font-weight: 700;
	padding: 0 .9em;
}
.woocommerce ul.products li.product .vx-buynotes { padding: 0 .9em; font-size: .8rem; color: var(--vx-ink-soft); }
.woocommerce ul.products li.product .button { margin: .6em .9em 0; }

.woocommerce .products .vx-badge-row { margin: 0 .9em; }
.vx-badge {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	border-radius: 999px;
	padding: .12em .7em;
	background: var(--vx-mint-pale);
	color: #2f5d50;
	margin: .1em .15em 0 0;
}
.vx-badge.hot { background: #fbe3d3; color: var(--vx-primary-deep); }
/* Amazon.co.jp の実評価ピル（functions.php の vexolite_loop_badges）。
   --vx-accent 上的 --vx-primary-deep はコントラスト比 5.56:1（2026-10-02 計算済み）。 */
.vx-badge.rate { background: var(--vx-accent); color: var(--vx-primary-deep); }
.vx-badge.rate .vx-ico { width: .95em; height: .95em; }

.single-product div.product .woocommerce-product-details__short-description { color: var(--vx-ink-soft); }
.single-product .product_title { font-size: clamp(1.4rem, 3vw, 2rem); }
.single-product .summary .price { color: var(--vx-primary); font-family: var(--vx-font-display); }
.single-product .woocommerce-product-details__short-description .vx-earn-notice,
.vxp-earn-notice {
	background: var(--vx-accent);
	border-radius: var(--vx-radius-sm);
	padding: .5em .9em;
	display: inline-block;
}
/* ============================================================
   この商品について（特長リスト）
   2026-10-02 運営「板块布局没有协调统一，统一采用底纹 + 每点的核心介绍：详细介绍」
   → ラベルを別カラムのピルに積むやめ、全件を同じ底纹の行にして
     「核心紹介：詳細説明」の 1 文形式に揃える。
     【タグ】/「key: detail」が無い行も同じ行スタイルのまま（値を作り替えない）。
   ============================================================ */
.vx-bullets-section { margin-top: 2.4rem; }
.vx-bullets-section > h3 { font-size: 1.3rem; margin: 0 0 .8rem; }
.woocommerce div.product ul.vx-bullets {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce div.product ul.vx-bullets li {
	display: block;                 /* grid にすると子 span が block 化して 2 行に割れる */
	background: var(--vx-mint-pale);
	border: 1px solid #dceae3;
	border-radius: var(--vx-radius-sm);
	padding: .78rem .95rem;
	font-size: .9rem;
	line-height: 1.8;
	color: var(--vx-ink-soft);
}
.woocommerce div.product ul.vx-bullets .vx-b-k,
.woocommerce div.product ul.vx-bullets .vx-b-t {
	display: inline;
	background: none;
	padding: 0;
	margin: 0;
	text-align: left;
	font-size: inherit;
	line-height: inherit;
}
.woocommerce div.product ul.vx-bullets .vx-b-k {
	font-family: var(--vx-font-display);
	font-weight: 700;
	color: var(--vx-primary-deep);
}
/* 「核心紹介：詳細紹介」のコロン（源码にコロンが無い形だけ補う） */
.woocommerce div.product ul.vx-bullets .vx-b-k + .vx-b-t::before { content: "："; color: #9db6ab; }
.woocommerce div.product ul.vx-bullets li::before { content: none; }

/* 価値リード＝短描述（サマリーの抜粋。まだ未設定の商品ではこの箱自体出ません） */
.single-product div.product .woocommerce-product-details__short-description {
	background: var(--vx-card);
	border-left: 4px solid var(--vx-sun);
	border-radius: 0 var(--vx-radius-sm) var(--vx-radius-sm) 0;
	padding: .85em 1.1em;
	font-size: 1.02rem;
	line-height: 1.8;
	color: var(--vx-ink);
}
.single-product div.product .woocommerce-product-details__short-description > p:last-child { margin-bottom: 0; }

/* 信頼バッジ（購入ボックス直下） */
.vx-trust { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.vx-trust li {
	display: flex; align-items: flex-start; gap: .6rem;
	background: var(--vx-card);
	border: 1px solid #f0e5d6;
	border-radius: var(--vx-radius-sm);
	padding: .6rem .75rem;
}
.vx-trust-ico { flex: 0 0 auto; color: var(--vx-mint); margin-top: .15rem; }
.vx-trust-body { display: flex; flex-direction: column; gap: .05rem; }
.vx-trust-body strong { font-size: .88rem; font-weight: 700; color: var(--vx-ink); }
.vx-trust-body span { font-size: .78rem; color: var(--vx-ink-soft); line-height: 1.6; }

/* スペック + 安全上のお知らせ */
.vx-specs-section { margin-top: 2.4rem; }
.vx-specs-section h3 { font-size: 1.3rem; margin-bottom: .8rem; }
.vx-specs {
	display: grid;
	grid-template-columns: minmax(8.5em, max-content) minmax(0, 1fr);
	gap: 0;
	margin: 0;
	border-top: 1px solid #eadfcd;
}
.vx-specs dt {
	padding: .6em .8em .6em 0;
	font-size: .85rem;
	font-weight: 700;
	color: var(--vx-ink);
	border-bottom: 1px solid #f1e8da;
	background: linear-gradient(0deg, var(--vx-cream), var(--vx-cream));
}
.vx-specs dd {
	margin: 0;
	padding: .6em 0 .6em .9em;
	font-size: .9rem;
	color: var(--vx-ink-soft);
	border-bottom: 1px solid #f1e8da;
}
.vx-safety {
	margin-top: 1.2rem;
	background: #fdf3f0;
	border: 1px solid #f3ded7;
	border-radius: var(--vx-radius-sm);
	padding: .9rem 1.1rem;
}
.vx-safety h4 { margin: 0 0 .4rem; font-size: .95rem; color: var(--vx-primary-deep); }
.vx-safety ul { margin: 0; padding-left: 1.1em; }
.vx-safety li { font-size: .84rem; color: var(--vx-ink-soft); margin-bottom: .3em; }

/* A+ blocks */
.vx-aplus { margin-top: 2.4rem; }
.vx-aplus > h2 { text-align: center; font-size: 1.5rem; }
.vx-aplus-block { margin: 1.6rem 0; }
.vx-aplus-block img {
	display: block;
	width: 100%;
	max-width: 970px;
	height: auto;
	margin: 0 auto;
	border-radius: var(--vx-radius);
	box-shadow: var(--vx-shadow);
}
.vx-aplus-block h4 { font-size: 1.15rem; color: var(--vx-primary-deep); }
.vx-aplus-block p { color: var(--vx-ink-soft); max-width: 52rem; margin-inline: auto; }

/* notices / tabs / my-account */
/* P0-2（2026-10-29 実測）: WooCommerce 本体は「色付き背景＋白文字」を前提に
   `.woocommerce-info { color:#fff }` / `a { color:#fff }` / `::before { color:#fff }`
   / `.button { color:#fff }` を当てる。子テーマは背景だけを白へ変えていたため、
   /cart/ の空カート案内が白地に白文字（コントラスト 1:1）で完全に読めなかった。
   背景はデザイン通り白のまま、文字・リンク・アイコン・ボタンだけ反転する。
   1.5.8: 同じ青地白字だった `.woocommerce-noreviews`（商品页の空レビュー案内、
   3.05:1）と `p.no-comments`（コメント締切時）も同じ白カードに揃えた。 */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-noreviews, p.no-comments {
	border-top-color: var(--vx-mint);
	background: #fff;
	border-radius: var(--vx-radius-sm);
	color: var(--vx-ink);
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-noreviews a,
p.no-comments a {
	color: var(--vx-primary-deep);
	text-decoration: underline;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.woocommerce-noreviews a:hover,
p.no-comments a:hover { color: var(--vx-primary); opacity: 1; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
p.no-comments::before { color: var(--vx-primary); }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-noreviews .button,
p.no-comments .button {
	color: var(--vx-primary-deep);
	border-left-color: rgba(51, 41, 31, .18) !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.woocommerce-noreviews .button:hover,
p.no-comments .button:hover { color: var(--vx-primary); opacity: 1; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--vx-mint-pale); border-radius: .6rem .6rem 0 0; }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 .2em; }
.woocommerce nav.woocommerce-pagination ul li a { border-radius: 999px; border: 2px solid #e4d9c8; color: var(--vx-ink); }
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--vx-primary); color: #fff; border-color: var(--vx-primary);
}

.wc-block-grid .wc-block-grid__product,
.vx-account-points-balance {
	background: var(--vx-accent);
	border-radius: var(--vx-radius);
	padding: 1rem 1.4rem;
	font-family: var(--vx-font-display);
	font-weight: 700;
	color: var(--vx-primary-deep);
}

/* checkout summary + tables */
.woocommerce table.shop_table {
	border: 1px solid #efe6d8;
	border-radius: var(--vx-radius);
	overflow: hidden;
	background: var(--vx-card);
}
.woocommerce table.shop_table th { background: var(--vx-mint-pale); }
.vxp-checkout-field {
	background: var(--vx-card);
	border: 2px solid var(--vx-mint-pale) !important;
	border-radius: var(--vx-radius) !important;
	padding: 1rem 1.2rem !important;
	margin-bottom: 1.2rem;
}

/* footer: ヘッダー/フッターの再構成に伴い assets/css/chrome.css が担当する
   （ここで .site-footer を塗ると後読みの chrome.css と衝突して混乱のもとになるため削除） */

/* ============================================================
   Responsive tweaks (Storefront handles most)
   ============================================================ */
@media (max-width: 768px) {
	.vx-hero { padding: 2.8rem 0 2.2rem; }
	.vx-section { padding: 2.2rem 0; }
	.vx-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; }
	.site-header { padding-block: .8rem; }
	.vx-hero-inner { gap: 1.6rem; }
	.vx-infogrid dl { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   Front-page additions (home template)
   ============================================================ */
.vx-lede { font-size: 1.08rem; color: var(--vx-ink-soft); max-width: 32em; }

/* pill links used as buttons */
.vx-btn {
	display: inline-block;
	font-family: var(--vx-font-display);
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	border-radius: 999px;
	padding: .68em 1.7em;
	border: 2px solid transparent;
	line-height: 1.4;
}
.vx-btn.primary { background: var(--vx-primary); border-color: var(--vx-primary); color: #fff; }
.vx-btn.primary:hover, .vx-btn.primary:focus { background: var(--vx-primary-deep); border-color: var(--vx-primary-deep); color: #fff; }
.vx-btn.deep { background: var(--vx-primary-deep); border-color: var(--vx-primary-deep); color: #fff; }
.vx-btn.deep:hover, .vx-btn.deep:focus { background: var(--vx-primary); border-color: var(--vx-primary); color: #fff; }
.vx-btn.ghost { background: #fff; border-color: var(--vx-mint); color: #2f5d50; }
.vx-btn.ghost:hover, .vx-btn.ghost:focus { background: var(--vx-mint-pale); color: #23473d; }

/* hero art fallback: a small stack of cubes */
.vx-cubes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .8rem;
	max-width: 20rem;
	margin-inline: auto;
}
.vx-cubes span {
	aspect-ratio: 1;
	border-radius: 18%;
	box-shadow: var(--vx-shadow-hover);
}
.vx-cubes span:nth-child(1) { background: var(--vx-primary); }
.vx-cubes span:nth-child(2) { background: var(--vx-sun); }
.vx-cubes span:nth-child(3) { background: var(--vx-mint); }
.vx-cubes span:nth-child(4) { background: var(--vx-mint-pale); }
.vx-cubes span:nth-child(5) { background: var(--vx-accent); }
.vx-cubes span:nth-child(6) { background: var(--vx-primary-deep); }

.vx-card-meta { font-size: .85rem; color: var(--vx-ink-soft); margin-bottom: .4em; }

/* category cards are links */
a.vx-card { display: block; color: inherit; text-decoration: none; }
a.vx-card h3 { color: var(--vx-ink); }
a.vx-card:hover h3 { color: var(--vx-primary-deep); }

/* single-product extras */
.vx-amazon-line { font-size: .92rem; color: var(--vx-ink-soft); margin-top: .4rem; }
.vx-card p { color: var(--vx-ink-soft); }
.vx-card .vx-card-link { display: inline-block; margin-top: .6em; }

.vx-section-tint { background: var(--vx-card); }
.vx-section-mint { background: linear-gradient(135deg, var(--vx-mint-pale), #eef6f2); }

.vx-more { text-align: center; margin-top: 2rem; }

.vx-about { max-width: 52rem; margin-inline: auto; text-align: center; }
.vx-about > p { text-align: left; color: var(--vx-ink-soft); }
.vx-about .vx-hero-cta { justify-content: center; }

/* /about/（[vx_about] の出し方）。ホームのセクションと同じ間隔で読む。 */
.vx-about-page { max-width: 56rem; }
.vx-about-page > .vx-lede { margin-bottom: 1.6rem; }
.vx-about-page h2 {
	margin: 2.2rem 0 .8rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--vx-mint-pale);
	font-size: 1.28rem;
	color: var(--vx-primary-deep);
}
.vx-about-page h2:first-of-type { margin-top: 1.2rem; }
.vx-about-page p { color: var(--vx-ink-soft); line-height: 1.95; }
.vx-about-page .vx-dl { margin: 1rem 0 0; }

.vx-infogrid { text-align: left; margin: 1.8rem 0; }
.vx-infogrid h3 { font-size: 1.15rem; margin-bottom: .6em; }
.vx-infogrid dl {
	display: grid;
	grid-template-columns: 7.5em 1fr;
	gap: .1rem 1.2rem;
	margin: 0;
}
.vx-infogrid dt {
	font-family: var(--vx-font-display);
	font-weight: 700;
	color: var(--vx-primary-deep);
	padding-block: .45em;
}
.vx-infogrid dd {
	margin: 0;
	padding-block: .45em;
	border-bottom: 1px dashed #cfe0d8;
	color: var(--vx-ink-soft);
	font-size: .95rem;
}

/* --- 1.1.0 hero の購入条件チップ（送料・ポイント・決済） --- */
.vx-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .7rem 1.1rem;
	margin: 1.5rem 0 0;
	padding: 0;
}
.vx-chips li {
	display: flex;
	align-items: center;
	gap: .55rem;
	background: rgba(255, 253, 249, .8);
	border: 1px solid #efe2d0;
	border-radius: 999px;
	padding: .4rem 1rem .4rem .7rem;
	font-size: .82rem;
	line-height: 1.35;
	color: var(--vx-ink);
}
.vx-chips li small { color: var(--vx-ink-soft); font-size: .78rem; }
.vx-chips .vx-ico { width: 22px; height: 22px; color: var(--vx-primary); flex: 0 0 auto; }

/* --- 1.1.0 hero 右側: 実商品のモザイク（何を買えるサイトを最初に見せる） --- */
.vx-mosaic {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .8rem;
	margin: 0;
	padding: 0;
}
.vx-mosaic a {
	display: block;
	background: var(--vx-card);
	border: 1px solid #efe6d8;
	border-radius: var(--vx-radius);
	box-shadow: var(--vx-shadow);
	padding: .6rem;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease, transform .1s ease;
}
.vx-mosaic a:hover { box-shadow: var(--vx-shadow-hover); transform: translateY(-2px); }
.vx-mosaic img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	border-radius: var(--vx-radius-sm);
}
.vx-mosaic-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .45rem;
}
.vx-mosaic-price { color: var(--vx-primary); font-family: var(--vx-font-display); font-weight: 700; }
.vx-mosaic-price .woocommerce-Price-amount { font-size: .98rem; }
.vx-mosaic-pts {
	background: #fbe3d3;
	color: var(--vx-primary-deep);
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	padding: .1em .6em;
	white-space: nowrap;
}
.vx-mosaic-name {
	display: block;
	margin-top: .25rem;
	font-size: .74rem;
	line-height: 1.45;
	color: var(--vx-ink-soft);
	/* タイトルが長い（Amazon 系キーワード）ので 2 行で切る */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- 1.1.0 特長カード（価値ベース。2 段組みでも読める幅） --- */
.vx-grid-value { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vx-grid-value .vx-card h3 { font-size: 1.12rem; }
.vx-grid-value .vx-card p { font-size: .93rem; line-height: 1.85; }

/* --- 1.1.0 安全・品質: 商品ページの原文引用 --- */
.vx-quotes {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	max-width: 62rem;
	margin-inline: auto;
}
.vx-quote {
	margin: 0;
	background: var(--vx-card);
	border: 1px solid #efe6d8;
	border-left: 5px solid var(--vx-mint);
	border-radius: var(--vx-radius);
	padding: 1.2rem 1.3rem;
	box-shadow: var(--vx-shadow);
}
.vx-quote p {
	font-family: var(--vx-font-display);
	font-size: .95rem;
	line-height: 1.8;
	color: var(--vx-ink);
	margin: 0 0 .7em;
}
.vx-quote footer {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .5rem;
	align-items: baseline;
	font-size: .78rem;
	color: var(--vx-ink-soft);
	border-top: 1px dashed #e8dcc8;
	padding-top: .6rem;
}
.vx-quote footer a {
	/* 商品名が長いので必ず切る（レイアウト崩れ防止） */
	max-width: 22rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	vertical-align: bottom;
}
.vx-quote-from { font-weight: 700; }

.vx-dl {
	display: grid;
	grid-template-columns: 8.5em 1fr;
	gap: .1rem 1.2rem;
	margin: 0;
}
.vx-dl dt {
	font-family: var(--vx-font-display);
	font-weight: 700;
	color: var(--vx-primary-deep);
	padding-block: .5em;
}
.vx-dl dd {
	margin: 0;
	padding-block: .5em;
	border-bottom: 1px dashed #cfe0d8;
	color: var(--vx-ink-soft);
	font-size: .95rem;
}
.vx-dl dd a { font-weight: 700; }
.vx-note-inline { color: var(--vx-ink-soft); font-size: .88rem; }

.vx-note {
	max-width: 46rem;
	margin: 1.6rem auto 0;
	font-size: .82rem;
	line-height: 1.8;
	color: var(--vx-ink-soft);
	background: rgba(255, 253, 249, .7);
	border: 1px dashed #d8c9b3;
	border-radius: var(--vx-radius-sm);
	padding: .8rem 1.1rem;
}
.vx-center { text-align: center; }
p.vx-hero-cta.vx-center, .vx-center.vx-hero-cta { justify-content: center; }

@media (max-width: 768px) {
	.vx-dl, .vx-infogrid dl { grid-template-columns: 1fr; gap: 0; }
	.vx-dl dt { padding-block: .5em .1em; border-top: 1px dashed #cfe0d8; }
	.vx-dl dt:first-child { border-top: 0; }
	.vx-chips { gap: .5rem; }
	.vx-chips li { font-size: .78rem; padding: .35rem .8rem .35rem .6rem; }
	.vx-mosaic { gap: .6rem; }
	.vx-quote footer a { max-width: 15rem; }
}

/* ============================================================
   1.4.6: コンテン幅を 1400px ベースへ広げた分の「読みやすさ上限」
   （chrome.css の --vx-wrap と対。広げるのは面・長くなるのは行、を分ける）
   ============================================================ */
.vx-hero .vx-hero-inner { max-width: 74rem; margin-inline: auto; }
.vx-section > .wrapper > .vx-grid,
.vx-section > .wrapper > .vx-cats { max-width: 74rem; margin-inline: auto; }
.vx-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-grid-value { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 78rem; margin-inline: auto; }
.vx-infogrid { max-width: 70rem; margin-inline: auto; }
.vx-infogrid dd { font-size: .96rem; }
.vx-about { max-width: 60rem; }
.vx-home .vx-mosaic { max-width: 34rem; margin-inline: auto; }
@media (max-width: 1080px) {
	.vx-grid-value { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.vx-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.vx-cats,
	.vx-grid-value { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   Wishlist (wishlist-for-woocommerce)
   ============================================================ */
.woocommerce a.pwlp_product,
a.pwlp_product {
	/* 2026-10-02 運営「カゴに追加と同一列／ハート logo にしては」→
	   主ボタン（塗り）と同高の幽霊ピルにし、ハートアイコンを付ける。
	   アイコンは CSS mask（currentColor）＝PHP の markup を触らない
	   ＝プラグイン更新で消えない。ラベル文字はプラグイン設定値のまま使う。 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	background: #fff;
	border: 2px solid var(--vx-mint);
	border-radius: 999px;
	color: #2f5d50 !important;
	font-family: var(--vx-font-display);
	font-weight: 700;
	letter-spacing: .03em;
	padding: 0 1.15rem;
	min-height: 2.85rem;
	margin: 0;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.35;
	font-size: .86rem;
}
.woocommerce a.pwlp_product::before,
a.pwlp_product::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.4s-7.4-4.8-7.4-9.8A4 4 0 0 1 12 8.1a4 4 0 0 1 7.4 2.5c0 5-7.4 9.8-7.4 9.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.4s-7.4-4.8-7.4-9.8A4 4 0 0 1 12 8.1a4 4 0 0 1 7.4 2.5c0 5-7.4 9.8-7.4 9.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce a.pwlp_product:hover,
a.pwlp_product:hover {
	background: var(--vx-mint-pale);
	border-color: #6ba091;
	color: #23473d !important;
}
.woocommerce a.see_wish,
a.see_wish {
	display: inline-block;
	background: var(--vx-primary);
	border: 2px solid var(--vx-primary);
	border-radius: 999px;
	color: #fff !important;
	font-family: var(--vx-font-display);
	font-weight: 700;
	padding: .4em 1.3em;
	margin: .5em .5em .5em 0;
	text-decoration: none;
}
.woocommerce a.see_wish:hover,
a.see_wish:hover {
	background: var(--vx-primary-deep);
	border-color: var(--vx-primary-deep);
	color: #fff !important;
}
.already_meg,
.pr_added {
	display: inline-block;
	background: var(--vx-accent);
	border-radius: 999px;
	padding: .3em 1.1em;
	margin: .5em .4em .2em 0;
	font-weight: 700;
	font-size: .9rem;
}
.pwlp_table .product-remove a {
	color: var(--vx-ink-soft);
	font-size: 1.2rem;
	text-decoration: none;
}
.pwlp_table .product-remove a:hover { color: var(--vx-primary-deep); }

/* ============================================================ サポートページ */

/* FAQ（details/summary） */
.vx-faq { margin: 1.4rem 0 0; }
.vx-faq-item {
	background: var(--vx-card);
	border: 1px solid #f0e5d6;
	border-radius: var(--vx-radius-sm);
	padding: 0;
	margin-bottom: .6rem;
}
.vx-faq-item summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--vx-font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--vx-primary-deep);
	padding: .85em 2.4em .85em 1em;
	position: relative;
}
.vx-faq-item summary::-webkit-details-marker { display: none; }
.vx-faq-item summary::after {
	content: "+";
	position: absolute; right: .9em; top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	color: var(--vx-primary);
}
.vx-faq-item[open] summary::after { content: "\2212"; }
.vx-faq-item[open] summary { border-bottom: 1px dashed #e8dcc8; }
.vx-faq-a {
	padding: .9em 1em 1em;
	color: var(--vx-ink-soft);
	line-height: 1.85;
	font-size: .95rem;
}
.vx-faq-foot { margin-top: 1.4rem; color: var(--vx-ink-soft); }

/* フォーム共通（お問い合わせ） */
.vx-contact { max-width: 44rem; margin-top: 1.4rem; }
.vx-contact p { margin-bottom: 1.1rem; }
.vx-contact label {
	display: block;
	font-weight: 700;
	font-size: .9rem;
	color: var(--vx-ink);
	margin-bottom: .35em;
}
.vx-contact input[type="text"],
.vx-contact input[type="email"],
.vx-contact select,
.vx-contact textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid #e2d6c2;
	border-radius: var(--vx-radius-sm);
	background: #fff;
	padding: .7em .8em;
	font-size: 1rem;
	line-height: 1.6;
}
.vx-contact textarea { min-height: 9.5em; }
.vx-contact input:focus,
.vx-contact select:focus,
.vx-contact textarea:focus {
	outline: 3px solid var(--vx-mint-pale);
	border-color: var(--vx-primary);
}
.vx-req {
	font-size: .72rem;
	font-weight: 700;
	background: var(--vx-accent);
	color: var(--vx-primary-deep);
	border-radius: 999px;
	padding: .15em .6em;
	margin-left: .4em;
	vertical-align: middle;
}
.vx-hint { display: block; font-size: .8rem; color: var(--vx-ink-soft); margin-top: .35em; }
.vx-form-actions { margin-top: 1.4rem; }
.vx-form-ok {
	background: var(--vx-mint-pale);
	border-left: 4px solid var(--vx-mint);
	border-radius: 0 var(--vx-radius-sm) var(--vx-radius-sm) 0;
	padding: .85em 1em;
	font-weight: 500;
}
.vx-form-err {
	background: #fff2ee;
	border-left: 4px solid #e2705a;
	border-radius: 0 var(--vx-radius-sm) var(--vx-radius-sm) 0;
	padding: .85em 1em;
	color: #8f3a26;
	font-weight: 500;
}
.vx-form-note { font-size: .8rem; color: var(--vx-ink-soft); }

/* お知らせ一覧 */
.vx-news { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.vx-news li {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0 1em;
	padding: .9em .2em;
	border-bottom: 1px dashed #e8dcc8;
}
.vx-news time {
	font-family: var(--vx-font-display);
	font-size: .84rem;
	color: var(--vx-ink-soft);
	padding-top: .15em;
}
.vx-news a { font-weight: 700; color: var(--vx-primary-deep); }
.vx-news p {
	grid-column: 2;
	margin: .3em 0 0;
	font-size: .88rem;
	color: var(--vx-ink-soft);
}

/* -------------------------------------------------- お知らせの単体記事（標準投稿） */
/* 2026-10-02 運営「お知らせ板块で先に 1 記事書いて、版式と字体を確認したい」。
   子テーマに single 用の規則が無かった（style.css は .single-product のみ）ため、
   これまで記事は Storefront 既定（本文幅がそのまま・見出しに装飾なし・行間 1.7・
   改行の重さが日本語に合わない）で出ていた。ここで Vexolite の本文規定に揃える。

  セレクタをすべて `#main`（Storefront の <main id="main" class="site-main">）付きで
   書いている理由: footer で一度やられた「値を上げても特異度で負ける」を避けるため。
   Storefront 側は .hentry .entry-header .posted-on a（0-3-1）などクラス 3 段で来るので、
   クラスだけの規則だと上書きできない。#main は 1-1-1 なので順序に依存しない。 */
#main .type-post {
	max-width: 47rem;
	margin: 0 auto;
	background: var(--vx-card);
	border: 1px solid #f0e5d6;
	border-radius: var(--vx-radius);
	box-shadow: var(--vx-shadow);
	padding: clamp(1.3rem, 3.4vw, 2.4rem);
}
#main .type-post .entry-header { margin: 0 0 1.5rem; padding: 0 0 1rem; border-bottom: 1px solid #f0e5d6; }
#main .type-post .entry-title {
	margin: 0;
	font-family: var(--vx-font-display);
	font-weight: 700;
	font-size: clamp(1.32rem, 3.4vw, 1.85rem);
	line-height: 1.55;
	letter-spacing: .01em;
	color: var(--vx-ink);
}
#main .type-post .entry-meta,
#main .type-post .entry-meta a {
	font-size: .82rem;
	color: var(--vx-ink-soft);
	text-decoration: none;
}
#main .type-post .entry-meta { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
#main .type-post .entry-meta a:hover { color: var(--vx-primary-deep); text-decoration: underline; }
/* 本文: 日本語の可読性に合わせて行幅 46 字前後／行間 2.05。 */
#main .type-post .entry-content {
	font-size: .98rem;
	line-height: 2.05;
	color: var(--vx-ink);
	word-break: break-word;
}
#main .type-post .entry-content > p { margin: 0 0 1.35em; }
#main .type-post .entry-content h2 {
	margin: 2em 0 .8em;
	padding: 0 0 .35em .65em;
	border-left: 4px solid var(--vx-sun);
	border-bottom: 1px solid #f0e5d6;
	font-family: var(--vx-font-display);
	font-size: 1.16rem;
	line-height: 1.6;
	color: var(--vx-primary-deep);
}
#main .type-post .entry-content h3 {
	margin: 1.8em 0 .6em;
	font-family: var(--vx-font-display);
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--vx-ink);
}
#main .type-post .entry-content ul,
#main .type-post .entry-content ol { margin: 0 0 1.35em; padding-left: 1.4em; }
#main .type-post .entry-content li { margin: 0 0 .5em; }
#main .type-post .entry-content a { color: var(--vx-primary-deep); text-decoration: underline; text-underline-offset: .18em; }
#main .type-post .entry-content a:hover { color: var(--vx-primary); }
#main .type-post .entry-content strong { font-weight: 700; }
#main .type-post .entry-content em { font-style: normal; background: linear-gradient(transparent 62%, var(--vx-accent) 62%); }
#main .type-post .entry-content blockquote {
	margin: 1.6em 0;
	padding: 1em 1.2em;
	background: var(--vx-mint-pale);
	border-left: 4px solid var(--vx-mint);
	border-radius: 0 var(--vx-radius-sm) var(--vx-radius-sm) 0;
	font-size: .95rem;
	line-height: 1.95;
}
#main .type-post .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--vx-radius-sm);
	margin: 1.2em 0;
}
#main .type-post .entry-content .wp-block-image figcaption {
	font-size: .8rem;
	color: var(--vx-ink-soft);
	text-align: center;
	margin-top: -.6em;
}
#main .type-post .entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .92rem; }
#main .type-post .entry-content th,
#main .type-post .entry-content td { border: 1px solid #ecdfcd; padding: .6em .75em; }
#main .type-post .entry-content th { background: var(--vx-cream); font-weight: 700; text-align: left; }
#main .type-post .entry-footer { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid #f0e5d6; font-size: .84rem; color: var(--vx-ink-soft); }
/* 「← お知らせへ戻る」＝一覧への往復導線（the_content の末尾に付く。inc/pages.php）。 */
.vx-news-back { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px dashed #e8dcc8; }
.vx-news-back a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-family: var(--vx-font-display);
	font-size: .88rem;
	font-weight: 700;
	color: var(--vx-primary-deep);
	text-decoration: none;
}
.vx-news-back a:hover { text-decoration: underline; }
@media (max-width: 600px) {
	#main .type-post { border-radius: var(--vx-radius-sm); padding: 1.15rem 1rem; }
	#main .type-post .entry-content { font-size: .95rem; line-height: 1.95; }
}

/* お客様の声 */
.vx-voice-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; }
/* 声の卡片は 2 列で「探せる」見た目にする（1 列だと安全・品質欄と変わらず長い）。
   ホーム #vx-voices と /reviews/（.vx-voices-page）で同じ版式＝共通関数の出力を
   両ページで同じ格好に見せるため、セレクタを 2 つ持たせる。 */
#vx-voices .vx-voice-list,
.vx-voices-page .vx-voice-list { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
#vx-voices .vx-voice,
.vx-voices-page .vx-voice { display: flex; flex-direction: column; }
#vx-voices .vx-voice blockquote,
.vx-voices-page .vx-voice blockquote { flex: 1 1 auto; }
#vx-voices .vx-voice-foot,
.vx-voices-page .vx-voice-foot { font-size: .78rem; }
@media (max-width: 620px) {
	#vx-voices .vx-voice-list,
	.vx-voices-page .vx-voice-list { grid-template-columns: minmax(0, 1fr); }
}
.vx-voice {
	background: var(--vx-card);
	border: 1px solid #f0e5d6;
	border-radius: var(--vx-radius-sm);
	padding: 1rem 1.1rem;
}
.vx-voice-head { display: flex; align-items: center; gap: .6em; margin: 0 0 .5em; }
.vx-stars { color: var(--vx-primary); letter-spacing: .08em; }
.vx-voice-head a { font-size: .86rem; font-weight: 700; color: var(--vx-primary-deep); }
/* レビューの見出し（声カードで title がある場合だけ出る。当サイトのレビューは
   本文のみなので、実運用では本文が直に来る）。本文より一段太くする。 */
.vx-voice-title { margin: 0 0 .35em; font-family: var(--vx-font-display); font-weight: 700; font-size: 1rem; color: var(--vx-ink); }
.vx-voice blockquote {
	margin: 0;
	padding: 0;
	color: var(--vx-ink-soft);
	line-height: 1.85;
	font-size: .95rem;
}
.vx-voice-foot { margin: .6em 0 0; font-size: .8rem; color: var(--vx-ink-soft); }
.vx-voice-soon {
	background: var(--vx-card);
	border: 1px dashed #e2d6c2;
	border-radius: var(--vx-radius);
	padding: 1.6rem 1.4rem;
	text-align: center;
}
.vx-voice-soon h2 { font-size: 1.2rem; margin: 0 0 .5rem; color: var(--vx-primary-deep); }
.vx-voice-soon p { color: var(--vx-ink-soft); line-height: 1.85; margin-inline: auto; max-width: 36rem; }

/* Amazon.co.jp の「星・件数」表（2026-10-04 B 方案: レビュー文章は載せない）
   ホーム #vx-voices と /reviews/ の同じ関数が同じ版式で使う。
   数値だけだと素っ気ないので、まとまった 1 枚のカードに見せる。 */
.vx-rate {
	background: var(--vx-card);
	border: 1px solid #f0e5d6;
	border-radius: var(--vx-radius);
	padding: 1.3rem 1.4rem 1.1rem;
	margin-top: 1.4rem;
	box-shadow: 0 1px 2px rgba(59, 41, 25, .05);
}
.vx-rate-avg { display: flex; align-items: baseline; gap: .55em; margin: 0 0 .3rem; flex-wrap: wrap; }
.vx-rate-num { font-family: var(--vx-font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--vx-primary-deep); }
.vx-rate-avg .vx-stars { font-size: 1.15rem; }
.vx-rate-avgnote { font-size: .76rem; color: var(--vx-ink-soft); }
.vx-rate-meta { margin: 0 0 1rem; font-size: .82rem; color: var(--vx-ink-soft); }
.vx-rate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.vx-rate-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 5.2em;
	align-items: center;
	gap: .8rem;
	padding: .62rem 0;
	border-top: 1px solid #f2e8da;
}
.vx-rate-name {
	font-size: .88rem;
	font-weight: 700;
	color: var(--vx-primary-deep);
	text-decoration: none;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.vx-rate-name:hover,
.vx-rate-name:focus-visible { text-decoration: underline; }
.vx-rate-score { display: inline-flex; align-items: center; gap: .35em; font-size: .86rem; font-weight: 700; color: var(--vx-ink); white-space: nowrap; }
.vx-rate-score .vx-stars { font-size: .82rem; }
.vx-rate-count { font-size: .8rem; color: var(--vx-ink-soft); text-align: right; white-space: nowrap; }
.vx-rate-note { margin: .9rem 0 0; font-size: .74rem; line-height: 1.75; color: var(--vx-ink-soft); }
@media (max-width: 560px) {
	.vx-rate { padding: 1.1rem 1rem .9rem; }
	.vx-rate-row { grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; }
	.vx-rate-count { grid-column: 2; text-align: right; }
	.vx-rate-num { font-size: 1.75rem; }
}

/* 空状態 */
.vx-empty {
	background: var(--vx-card);
	border: 1px dashed #e2d6c2;
	border-radius: var(--vx-radius-sm);
	padding: 1.1em 1.2em;
	color: var(--vx-ink-soft);
	line-height: 1.85;
	margin-top: 1.4rem;
}

/* 特商法ページの表 */
.vx-tokushoho { width: 100%; border-collapse: collapse; margin: .6rem 0 1.4rem; }
.vx-tokushoho th {
	width: 11em;
	text-align: left;
	vertical-align: top;
	background: var(--vx-mint-pale);
	font-size: .86rem;
	font-weight: 700;
	padding: .7em .8em;
	border: 1px solid #eee2cf;
}
.vx-tokushoho td {
	padding: .7em .8em;
	font-size: .92rem;
	line-height: 1.8;
	border: 1px solid #eee2cf;
	color: var(--vx-ink-soft);
}
.vx-tokushoho + p,
.page-content .vx-tokushoho ~ p { color: var(--vx-ink-soft); }

/* ============================================================ マイページ */

.woocommerce-account .vx-account-hello {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	background: var(--vx-card);
	border: 1px solid #f0e5d6;
	border-radius: var(--vx-radius-sm);
	padding: .8em 1.1em;
	margin: 0 0 1.2rem;
}
.vx-account-hello p,
.vx-account-hello-text { margin: 0; color: var(--vx-ink-soft); }
.vx-account-hello strong { color: var(--vx-primary-deep); }
.vx-account-logout {
	font-size: .84rem;
	color: var(--vx-ink-soft);
	border: 1px solid #e2d6c2;
	border-radius: 999px;
	padding: .3em 1em;
}
.vx-account-logout:hover { border-color: var(--vx-primary); color: var(--vx-primary-deep); }

.vx-account-section-h,
h2.vx-account-section-h {
	font-size: 1.25rem;
	margin: 1.4rem 0 .7rem;
	color: var(--vx-primary-deep);
}
h3.vx-account-section-h { font-size: 1.05rem; }

.vx-acards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: .8rem;
}
.vx-acard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #f0e5d6;
	border-radius: var(--vx-radius);
	padding: 1rem 1.05rem 1.05rem;
	box-shadow: var(--vx-shadow-sm, 0 2px 10px rgba(87, 66, 34, .05));
}
.vx-acard-top {
	display: flex;
	align-items: center;
	gap: .45em;
	margin: 0 0 .5em;
	font-family: var(--vx-font-display);
	font-size: .92rem;
	font-weight: 700;
	color: var(--vx-ink-soft);
}
.vx-acard-top .vx-ico { color: var(--vx-mint); }
.vx-acard-num {
	margin: 0;
	font-family: var(--vx-font-display);
	font-size: 1.7rem;
	font-weight: 900;
	line-height: 1.2;
	color: var(--vx-primary);
}
.vx-acard-pill {
	margin: .35em 0 0;
	align-self: flex-start;
	font-size: .76rem;
	font-weight: 700;
	background: var(--vx-accent);
	color: var(--vx-primary-deep);
	border-radius: 999px;
	padding: .2em .7em;
}
.vx-acard-note {
	margin: .5em 0 .9em;
	font-size: .85rem;
	line-height: 1.7;
	color: var(--vx-ink-soft);
	flex: 1 1 auto;
}
.vx-acard-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: .4em;
	font-size: .86rem;
	font-weight: 700;
	color: var(--vx-primary-deep);
	border-top: 1px dashed #e8dcc8;
	padding-top: .7em;
}
.vx-acard-cta .vx-ico { transform: rotate(-90deg); width: 16px; height: 16px; }
.vx-acard-cta:hover { color: var(--vx-primary); }

.vx-o-list { list-style: none; margin: 0; padding: 0; }
.vx-o { border-bottom: 1px dashed #e8dcc8; }
.vx-o a {
	display: grid;
	grid-template-columns: 1fr max-content;
	align-items: center;
	gap: 0 .8em;
	padding: .75em .2em;
	color: var(--vx-ink);
}
.vx-o-no { font-weight: 700; font-size: .92rem; }
.vx-o-date,
.vx-o-status { font-size: .8rem; color: var(--vx-ink-soft); }
.vx-o-status {
	justify-self: end;
	background: var(--vx-mint-pale);
	border-radius: 999px;
	padding: .15em .7em;
}
.vx-o-total {
	grid-column: 1 / -1;
	font-family: var(--vx-font-display);
	font-weight: 700;
	color: var(--vx-primary);
	font-size: .95rem;
}
.vx-o a:hover .vx-o-no { color: var(--vx-primary-deep); }

/* アカウント画面のメニュー（Storefront の sidebar をカード風に） */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	display: grid;
	gap: .3rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .6em .9em;
	border-radius: var(--vx-radius-sm);
	border: 1px solid #f0e5d6;
	font-size: .92rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--vx-accent);
	border-color: var(--vx-accent);
	color: var(--vx-primary-deep);
	font-weight: 700;
}

/* ============================================================
   Search (P1-4)
   ============================================================ */
/* 2026-10-29: 商品検索が 0 件のとき Woo のアーカイブは案内文だけで、その場に
   検索欄が無かった（コア既定のフォームは post_type を送らず汎用テンプレートに
   落ちていた）。searchform.php を添えて、同じ場所で商品検索をやり直せるようにする。 */
.vx-search-empty {
	max-width: 40rem;
	margin: 1.2rem auto 2.4rem;
}
.vx-search-empty > p {
	margin: 0 0 .8rem;
	color: var(--vx-ink-soft);
	text-align: center;
}
.vx-search-empty .search-form {
	display: flex;
	gap: .5rem;
	align-items: stretch;
}
.vx-search-empty .search-field {
	flex: 1 1 auto;
	min-width: 0;
}
.vx-search-empty .search-submit {
	flex: 0 0 auto;
}
@media (max-width: 480px) {
	.vx-search-empty .search-form { flex-direction: column; }
	.vx-search-empty .search-submit { width: 100%; }
}