/* Beauty Clinic Patterns — Dynamic Price List
 *
 * v0.51.0: 静的パターン (patterns/price/price-dynamic-*) と DOM 構造を統一し、
 * フレックスレイアウト本体は WP コアの is-layout-flex /
 * is-content-justification-space-between / is-vertical / is-nowrap が担う。
 * このファイルには「カード装飾」「モニター価格色」「モバイル積み替え」だけを残す。
 */

/* サブカテゴリ アンカー (#subcat-<slug>) のスクロール位置を sticky ピルナビ分オフセット。
 * groupBySubcategory の bg div はインライン scroll-margin を持つが、サブカテゴリ別ブロック
 * (subcategory 指定) を id="subcat-<slug>" のラッパー group で包む構成でもジャンプ位置を揃える。 */
[id^="subcat-"] {
	scroll-margin-top: 96px;
}

/* ==== Cards container (右カラム 61% の内側、border-radius を持つカード入れ物) ==== */
.bcp-price-cards {
	border-radius: 5px;
	overflow: hidden;
}

/* 内側スクロール (menuScrollable=ON のとき is-scrollable) ---- */
.bcp-price-cards.is-scrollable {
	max-height: var(--bcp-price-list-menu-max-h, 480px);
	scrollbar-gutter: stable;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, currentColor 22%, transparent) transparent;
}
.bcp-price-cards.is-scrollable::-webkit-scrollbar {
	width: 8px;
}
.bcp-price-cards.is-scrollable::-webkit-scrollbar-track {
	background: transparent;
}
.bcp-price-cards.is-scrollable::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 4px;
}
.bcp-price-cards.is-scrollable::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, currentColor 30%, transparent);
}

/* ---- スクロールフェード (table ブロックの水平スクロール fade と統一) ----
   `assets/js/scrollable-fade.js` が overflow を検出して .has-overflow を付与する。
   price-list の `.price-row` は alt-row 背景を持つため inset box-shadow が children に
   occlude される。そこで position: sticky な pseudo-element をオーバーレイとして使い、
   linear-gradient で children の上にフェードを描く。
   色とカーブは table-extension.css の左右フェードと同一 (色 17,17,26 の 5 段 stop・
   到達距離 56px) にし、サイト内のスクロール可能インジケータの見た目を統一する。 */
.bcp-price-cards.is-scrollable.has-overflow::before,
.bcp-price-cards.is-scrollable.has-overflow::after {
	content: '';
	display: block;
	position: sticky;
	left: 0;
	right: 0;
	height: 56px;
	pointer-events: none;
	z-index: 1;
	/* scroll-driven 非対応ブラウザ向けに opacity 1 を確定(両端常時表示) */
	opacity: 1;
}

.bcp-price-cards.is-scrollable.has-overflow::before {
	top: 0;
	margin-bottom: -56px;
	background: linear-gradient(
		to bottom,
		var(--bcp-table-fade-color, rgba( 17, 17, 26, 0.17 )) 0%,
		rgba( 17, 17, 26, 0.11 ) 22%,
		rgba( 17, 17, 26, 0.05 ) 50%,
		rgba( 17, 17, 26, 0.015 ) 75%,
		rgba( 17, 17, 26, 0 ) 100%
	);
}

.bcp-price-cards.is-scrollable.has-overflow::after {
	bottom: 0;
	margin-top: -56px;
	background: linear-gradient(
		to top,
		var(--bcp-table-fade-color, rgba( 17, 17, 26, 0.17 )) 0%,
		rgba( 17, 17, 26, 0.11 ) 22%,
		rgba( 17, 17, 26, 0.05 ) 50%,
		rgba( 17, 17, 26, 0.015 ) 75%,
		rgba( 17, 17, 26, 0 ) 100%
	);
}

@supports (animation-timeline: scroll()) {
	@property --bcp-pl-top-shadow-alpha {
		syntax: '<number>';
		inherits: true;
		initial-value: 0;
	}
	@property --bcp-pl-bottom-shadow-alpha {
		syntax: '<number>';
		inherits: true;
		initial-value: 0;
	}

	/* alpha は 0→1 の opacity multiplier として使う。gradient stop の色は
	   固定 (上で定義済) なので、curve は壊さずに「全体の見え隠れ」だけを
	   スクロール位置に追従させる。 */
	@keyframes bcp-price-list-scroll-fade {
		0%   { --bcp-pl-top-shadow-alpha: 0; --bcp-pl-bottom-shadow-alpha: 1; }
		8%   { --bcp-pl-top-shadow-alpha: 1; --bcp-pl-bottom-shadow-alpha: 1; }
		92%  { --bcp-pl-top-shadow-alpha: 1; --bcp-pl-bottom-shadow-alpha: 1; }
		100% { --bcp-pl-top-shadow-alpha: 1; --bcp-pl-bottom-shadow-alpha: 0; }
	}

	.bcp-price-cards.is-scrollable.has-overflow {
		animation: bcp-price-list-scroll-fade linear both;
		animation-timeline: scroll(self block);
	}

	.bcp-price-cards.is-scrollable.has-overflow::before {
		opacity: var(--bcp-pl-top-shadow-alpha);
	}

	.bcp-price-cards.is-scrollable.has-overflow::after {
		opacity: var(--bcp-pl-bottom-shadow-alpha);
	}
}

/* ==== お悩み別アイコン (自動入力見出しの先頭) ==== */
/* お悩み(concern)で絞り込み + 見出し自動入力 ON のとき、見出し名の左に
   悩みカテゴリの内蔵アイコンを添える。サイズは見出し文字に追従 (em)。 */
.bcp-price-list__auto-heading-icon {
	display: flex;
	align-items: center;
	gap: 0.4em;
}
.bcp-price-list__concern-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary, currentColor);
}
.bcp-price-list__concern-icon-svg,
.bcp-price-list__concern-icon svg {
	width: 1.25em;
	height: 1.25em;
	display: block;
}

/* ==== price-row (alternating row) ==== */
.price-row {
	margin: 0 !important;
	border-bottom: 0;
}

.price-row p {
	margin-top: 0;
	margin-bottom: 0;
}

/* ---- iOS Safari 見切れ対策 ----
   テーマ (vip2026) が `.wp-block-post-content p / .entry-content p` へ付与する
   本文向けタイポ (`word-break: auto-phrase` / `text-wrap: balance`) が、投稿本文内に
   出力される動的料金表の `<p>` にも継承される。この2値は Chromium(Android)専用/挙動差が
   あり、`overflow: hidden` かつ flex-basis:0 の狭いフレックス行内では iOS Safari が
   フレックス確定前の幅でテキストを組み、はみ出し分が .bcp-price-cards の overflow で
   切り取られて「文字が見切れる」。ブロック内段落では prose タイポを中立化して両OSを揃える。 */
.bcp-price-cards p,
.price-row p {
	word-break: normal;
	text-wrap: wrap; /* balance を無効化 */
	overflow-wrap: anywhere;
}

/* ---- iOS Safari 見切れ対策 (構造側) ----
   価格カラム内の各サブ行 (通常価格 / モニター / セット割 / 段階価格 / オプション) は
   `justify-content:space-between` の flex 行。flex item の既定 `min-width:auto` により、
   iOS Safari では長い CJK ラベル (段階価格の部位・サイズ) が min-content 幅を保持したまま
   縮まず行から溢れ、角丸クリップ用の `.bcp-price-cards{overflow:hidden}` に切り取られる。
   左ラベル (行頭の <p>/<span>) に min-width:0 を効かせて確実に縮小・折返しさせ、
   右の価格グループ (.wp-block-group) は縮ませず全表示する。PHP 直生成の各 sprintf にも
   個別に min-width:0 を入れているが、将来行が追加されても崩れないための保険。 */
.price-row__prices .is-layout-flex > p,
.price-row__prices .is-layout-flex > span {
	min-width: 0;
}
.price-row__prices .is-layout-flex > .wp-block-group {
	min-width: 0;
	flex-shrink: 0;
}

/* 数字を等幅化 (¥1,234 が縦に揃う) */
.price-row [class*="is-vertical"] {
	font-variant-numeric: tabular-nums;
}

/* モニター価格の強調色 (vip2026 の `sale` パレット #E11D48 を参照) */
.monitor-price {
	color: var(--wp--preset--color--sale, #E11D48);
	font-weight: 500;
}

/* ---- v0.56.0: おすすめバッジ (price-finder と同等)
   - --bcp-price-list-recommend-color: Inspector で選んだ色 (未指定なら primary)
   - --bcp-recommend-index: 各 recommended 行の stagger animation 用 index
   - .is-shimmer + .is-shimmer--<trigger> でシマー演出を制御
   - リボンは行の左上から右下に三角ノッチで斜めに切り取る
   v0.57.2: 背景色 tint を削除 (リボンバッジだけ表示、行背景は他行と同じ)
*/
.price-row--recommended {
	position: relative;
}

.price-row__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 2px 14px 2px 10px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --wp--preset--color--background, #fff );
	background: var( --bcp-price-list-recommend-color, var( --wp--preset--color--primary, currentColor ) );
	letter-spacing: 0.04em;
	z-index: 2;
	clip-path: polygon( 0 0, 100% 0, calc( 100% - 7px ) 100%, 0 100% );
	border-radius: 0;
	border-top-left-radius: inherit;
	pointer-events: none;
	overflow: hidden;
	isolation: isolate;
}

@media ( min-width: 768px ) {
	.price-row__badge {
		padding: 5px 18px 5px 12px;
		font-size: 11px;
		line-height: 1.35;
		gap: 0.3em;
	}
}

.price-row__badge > [aria-hidden="true"] {
	font-size: 1em;
	line-height: 1;
}

/* シマー演出 — SWELL 風の 50% 幅光が左→右に skewX で抜ける */
.price-row__badge.is-shimmer::after {
	content: '';
	position: absolute;
	top: -50%;
	bottom: -50%;
	left: -75%;
	width: 50%;
	background: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0 ) 0%,
		rgba( 255, 255, 255, 0.6 ) 70%,
		rgba( 255, 255, 255, 0 ) 100%
	);
	transform: skewX( -20deg );
	pointer-events: none;
	z-index: 1;
}

@keyframes bcp-price-list-shimmer {
	0%   { left: -75%; }
	100% { left: 175%; }
}

.price-row--recommended:hover .price-row__badge.is-shimmer--hover::after,
.price-row__badge.is-shimmer--hover:hover::after {
	animation: bcp-price-list-shimmer 0.7s ease-out 1;
}

.price-row__badge.is-shimmer--viewport-once.is-shimmer-fired::after {
	animation: bcp-price-list-shimmer 0.9s ease-out 1;
}

.price-row__badge.is-shimmer--always::after {
	animation: bcp-price-list-shimmer 5s ease-in-out infinite;
	animation-delay: calc( var( --bcp-recommend-index, 0 ) * 0.6s );
}

@media ( prefers-reduced-motion: reduce ) {
	.price-row__badge.is-shimmer::after {
		animation: none !important;
	}
}

/* ---- v0.54.0: 施術名リンク + chevron ---- */
.price-row__name-link {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	transition: color 0.15s ease;
}

.price-row__name-link:hover,
.price-row__name-link:focus-visible {
	color: var(--wp--preset--color--primary, #5344F4);
}

.price-row__chevron {
	display: inline-block;
	color: var(--wp--preset--color--secondary, #545473);
	font-weight: 400;
	font-size: 0.9em;
	transition: transform 0.15s ease, color 0.15s ease;
	line-height: 1;
}

.price-row__name-link:hover .price-row__chevron,
.price-row__name-link:focus-visible .price-row__chevron {
	color: var(--wp--preset--color--primary, #5344F4);
	transform: translateX(2px);
}

.price-row__name-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #5344F4);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 無料バッジ */
.bcp-price-list__free {
	color: var(--wp--preset--color--secondary, #545473);
	font-size: 0.9em;
}

/* 空状態 */
.bcp-price-list--empty {
	padding: 2rem;
	text-align: center;
	color: var(--wp--preset--color--secondary, #545473);
	background: var(--wp--preset--color--tertiary, #f8f7fc);
	border-radius: 8px;
}

/* ==== Tablet / Mobile ==== */
/* price-row の左右比率:
 *   デスクトップ: 名前 60 / 価格 40 (PHP inline でデフォルト)
 *   ~1024px (タブレット〜スマホ): 50 / 50 に切替
 * inline style の flex は var(--bcp-name-grow, 60) を解決するため、
 * .price-row 上で CSS 変数を上書きするだけで比率が切り替わる。 */
@media (max-width: 1024px) {
	.price-row {
		--bcp-name-grow: 50;
		--bcp-prices-grow: 50;
	}
}

@media (max-width: 781px) {
	/* 左カラム 39% を畳んで右カラム 100% に */
	.wp-block-columns.alignwide > .wp-block-column:first-child:empty {
		display: none;
	}

	.price-row {
		padding: var(--wp--preset--spacing--small, 1rem) var(--wp--preset--spacing--medium, 1.25rem) !important;
	}
}

@media (max-width: 480px) {
	/* さらに狭いときは price-row を縦積み (名前 → 価格群) */
	.price-row {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	/* WebKit (iOS Safari) 対策:
	   名前列・価格列とも flex-basis:0 の入れ子 flex-column。column のままだと各直下要素の
	   width:100% が「フレックス確定前の intrinsic(max-content)幅」に対して解決され、長い
	   ラベル(バンドル内訳「(トーニング＋…)」や段階価格の部位名)がカード幅を超えて
	   .bcp-price-cards{overflow:hidden} に切り取られる(Chromium は仕様どおり縮むため
	   再発しない=OS差)。flex-direction:row + flex-wrap:wrap にして各直下要素を width:100%
	   で1行占有させ「折り返し積み(見た目は縦積み)」にすると、幅が主軸で正しく確定し
	   両OSで一致する。 */
	.price-row__name,
	.price-row__prices {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		width: 100%;
	}

	/* 直下要素(名前見出し・バンドル内訳・メーカー / 各サブ行・注記)は 1 行占有 → 折り返しで縦積み */
	.price-row__name > *,
	.price-row__prices > * {
		width: 100% !important;
		flex: 0 0 100% !important;
	}

	.price-row__prices > .wp-block-group {
		justify-content: space-between !important;
	}
}

/* ---- セット割 対象施術ポップオーバー ("?" アイコン) ----
   price-finder のヘルプポップオーバーと同等の見た目。 */
.bcp-combo-help {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--sale, #E11D48);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--sale, #E11D48);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bcp-combo-help:hover,
.bcp-combo-help[aria-expanded="true"] {
	background: var(--wp--preset--color--sale, #E11D48);
	color: var(--wp--preset--color--background, #fff);
}

.bcp-combo-help:focus-visible {
	outline: 2px solid var(--wp--preset--color--sale, #E11D48);
	outline-offset: 2px;
}

/* popover="manual" を JS で showPopover() → top-layer に表示。位置は JS が付与。
   入場は ? アイコンを起点 (transform-origin) にスケール。
   外殻 (箱の見た目 + 入退場アニメ) はセット割 (.bcp-combo-popover) と
   施術ヘルプ (.bcp-pl-help-popover / v1.9.0) で共通。差分 (max-width / 内部スクロール)
   のみ各クラスで上書きする。 */
.bcp-combo-popover,
.bcp-pl-help-popover {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #e2e2ef;
	border-radius: 8px;
	background: var(--wp--preset--color--background, #fff);
	color: var(--wp--preset--color--contrast, #1a1a1a);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
	font-size: 13px;
	line-height: 1.6;
	z-index: 2147483647;

	/* 入場/退場アニメ (price-finder ヘルプと同一値で統一) */
	transform-origin: top center; /* 既定。JS が配置に応じて上書き */
	opacity: 1;
	transform: scale(1);
	will-change: opacity, transform;
	transition:
		opacity 0.2s ease,
		transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
		display 0.24s allow-discrete,
		overlay 0.24s allow-discrete;
	display: none;
}

.bcp-combo-popover:popover-open,
.bcp-combo-popover.is-open,
.bcp-pl-help-popover:popover-open,
.bcp-pl-help-popover.is-open {
	display: block;
}

@starting-style {
	.bcp-combo-popover:popover-open,
	.bcp-combo-popover.is-open,
	.bcp-pl-help-popover:popover-open,
	.bcp-pl-help-popover.is-open {
		opacity: 0;
		transform: scale(0.9);
	}
}

.bcp-combo-popover:not(:popover-open):not(.is-open),
.bcp-pl-help-popover:not(:popover-open):not(.is-open) {
	opacity: 0;
	transform: scale(0.9);
}

/* セット割ポップオーバー固有 (幅のみ) */
.bcp-combo-popover {
	max-width: 280px;
}

.bcp-combo-popover__title {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.bcp-combo-popover__list {
	margin: 0;
	padding-left: 1.1em;
	list-style: disc;
}

.bcp-combo-popover__list li {
	margin: 2px 0;
}

/* ---- v1.9.0 施術ヘルプ ("?" アイコン + 詳細ポップオーバー) ----
   開閉/位置は price-list-combo-popover.js が制御 (aria-controls / .bcp-pl-help)。
   セット割アイコン(赤)と区別するため、ヘルプは中立グレーの informational トーン。 */
.bcp-pl-help-wrap {
	display: inline-flex;
	position: relative;
	flex: 0 0 auto;
}

.bcp-pl-help {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 1px solid #b5b5c6;
	border-radius: 50%;
	background: transparent;
	color: #6a6a82;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bcp-pl-help:hover,
.bcp-pl-help[aria-expanded="true"] {
	background: #6a6a82;
	border-color: #6a6a82;
	color: var(--wp--preset--color--background, #fff);
}

.bcp-pl-help:focus-visible {
	outline: 2px solid #6a6a82;
	outline-offset: 2px;
}

/* 施術ヘルプポップオーバー固有 (外殻 + 入退場アニメは上の共通ルールを継承)。
   ここでは幅と、情報量が多い施術でも画面外に溢れないための内部スクロールのみ指定。
   高さは JS (positionPopover) が getBoundingClientRect で測るため、上限を与えれば
   配置時の上下フリップ判定が正しく働く。 */
.bcp-pl-help-popover {
	max-width: min(320px, calc(100vw - 2rem));
	max-height: min(70vh, 460px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.bcp-pl-help__title {
	display: block;
	margin: 0 0 0.4em;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.bcp-pl-help__desc {
	margin: 0 0 0.5em;
	color: color-mix(in srgb, currentColor 80%, transparent);
}

.bcp-pl-help__specs {
	list-style: none;
	margin: 0 0 0.7em;
	padding: 0.55em 0.7em;
	background: color-mix(in srgb, currentColor 4%, transparent);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	font-size: 0.92em;
}

.bcp-pl-help__spec {
	display: grid;
	grid-template-columns: 1.3em 6.5em 1fr;
	align-items: center;
	gap: 0.5em;
	min-width: 0;
}

.bcp-pl-help__spec-icon {
	font-size: 0.95em;
	line-height: 1;
	text-align: center;
}

.bcp-pl-help__spec-label {
	font-size: 0.8em;
	font-weight: 500;
	color: color-mix(in srgb, currentColor 60%, transparent);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.bcp-pl-help__spec-value {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.bcp-pl-help__spec-stars {
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary, currentColor);
	white-space: nowrap;
}

.bcp-pl-help__meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.7em;
	row-gap: 0.25em;
	margin: 0;
	font-size: 0.92em;
}

.bcp-pl-help__meta dt {
	margin: 0;
	font-weight: 500;
	color: color-mix(in srgb, currentColor 55%, transparent);
	white-space: nowrap;
}

.bcp-pl-help__meta dd {
	margin: 0;
	color: inherit;
	overflow-wrap: anywhere;
}

.bcp-pl-help__nurse {
	margin: 0.7em 0 0;
	padding: 0.85em 0.8em 0.6em;
	background: color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 6%, transparent);
	border-left: 3px solid var(--wp--preset--color--primary, currentColor);
	border-radius: 4px;
}

.bcp-pl-help__nurse-label {
	display: inline-block;
	margin-bottom: 0.2em;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary, inherit);
}

.bcp-pl-help__nurse-body {
	margin: 0;
	font-size: 0.92em;
	line-height: 1.55;
	color: inherit;
}