/*
 * TM Inventory Manager — 公開ページ用スタイル
 *
 * 既存ページの見た目を再現するための基本スタイル。
 * - アコーディオン：VK Blocks Pro のアコーディオン（標準スタイル）と同じ寸法・矢印。
 * - テーブル／カラム：WordPress標準ブロックと VK Blocks「枠線＋ストライプ」と同じ指定。
 *   テーマ等が同じ CSS を読み込んでいる場合も結果は変わらない（:where() で詳細度を上げない）。
 * - メーカー一覧（.maker-zaiko）と見出し（.item-midashi）は既存のカスタムCSSと同じ指定。
 *   「在庫商品管理 > 設定」の追加CSS（既存ページ専用CSSを移行したもの）が後から読み込まれ、優先される。
 */

:where(.tmim) {
	--tmim-border: rgba(0, 0, 0, .12);
	--tmim-accent: #0a6484;
}

/* ---------- メーカー一覧（アンカーリンク） ---------- */
.maker-zaiko { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.zaiko { margin: 1%; }
.maker-zaiko a { width: 11%; text-align: center; }
.maker-zaiko a:hover { color: #fff; background-color: #0a6484; }
@media screen and (max-width: 911px) { .maker-zaiko a { width: 13%; padding: 1% 0; } }
@media screen and (max-width: 767px) { .maker-zaiko a { width: 19%; } }
@media screen and (max-width: 481px) { .maker-zaiko a { width: 30%; } }

/* ---------- メーカー見出し ---------- */
.item-midashi {
	padding: 1rem;
	margin-bottom: 2rem;
	background: linear-gradient(90deg, #0a6484 0% 100%);
	background-repeat: no-repeat;
	background-size: 6rem .4rem;
	background-position: center bottom;
	font-weight: bold;
	font-size: 26px;
	text-align: center;
}
@media screen and (max-width: 767px) { .item-midashi { font-size: 24px; } }

/* ---------- アコーディオン ---------- */
.tmim-acc {
	display: block;
	overflow: hidden;
	margin: 0 auto 1em auto;
	width: 100%;
	position: relative;
	border-bottom: 1px solid var(--tmim-border, rgba(0, 0, 0, .12));
}
.tmim-acc__trigger {
	border: none;
	padding: 1rem 2rem 1rem 1rem;
	margin: 0 0 -1px 0;
	position: relative;
	font-size: 16px;
	background: transparent;
	cursor: pointer;
}
.tmim-acc__trigger:has(.tmim-acc__toggle:focus-visible) { margin-bottom: 0; }
.tmim-acc__trigger p { margin-block-start: 0; }
.tmim-acc__trigger > *:last-of-type { margin-top: 0; margin-bottom: 0; }
.tmim-acc .tmim-acc__toggle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.tmim-acc .tmim-acc__toggle:hover,
.tmim-acc .tmim-acc__toggle:active { background: transparent; box-shadow: none; }
.tmim-acc .tmim-acc__toggle:focus { outline: none; }
.tmim-acc .tmim-acc__toggle:focus-visible { outline: 2px solid var(--vk-color-primary, #337ab7); outline-offset: -2px; }
.tmim-acc .tmim-acc__toggle.is-open { border-bottom: 1px dotted var(--tmim-border, rgba(0, 0, 0, .12)); }
.tmim-acc .tmim-acc__toggle::after {
	position: absolute;
	top: 50%;
	right: 4rem;
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1px solid #222;
	border-top: 1px solid #222;
	transition: border-color .3s ease, transform .6s ease;
}
.tmim-acc .tmim-acc__toggle.is-close::after { transform: translate(32px, -5px) rotate(135deg); }
.tmim-acc .tmim-acc__toggle.is-open::after { transform: translate(32px, -2px) rotate(-45deg); }
.tmim-acc__target { padding: 1rem; }
.tmim-acc__target.is-close { padding-top: 0; padding-bottom: 0; height: 0; overflow: hidden; }
.tmim-acc__target > *:last-child { margin-bottom: 0; }
.tmim-acc__target p { margin-block-start: 0; }
.tmim-acc__target.is-open { animation: tmim-fade .25s ease; }
@keyframes tmim-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.tmim-acc__target.is-open { animation: none; }
	.tmim-acc .tmim-acc__toggle::after { transition: none; }
}
.tmim-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- カラム（WordPress標準「カラム」ブロックと同じ） ---------- */
:where(.tmim) .wp-block-columns { display: flex; box-sizing: border-box; flex-wrap: wrap !important; align-items: normal !important; gap: var(--wp--style--block-gap, 2em); }
@media (min-width: 782px) { :where(.tmim) .wp-block-columns { flex-wrap: nowrap !important; } }
@media (max-width: 781px) { :where(.tmim) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; } }
@media (min-width: 782px) {
:where(.tmim) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0; flex-grow: 1; }
:where(.tmim) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*=flex-basis] { flex-grow: 0; }
}
:where(.tmim) :where(.wp-block-columns) { margin-bottom: 1.75em; }
:where(.tmim) .wp-block-column { flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; }

/* ---------- テーブル（WordPress標準「テーブル」ブロックと同じ） ---------- */
:where(.tmim) .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:where(.tmim) .wp-block-table table { border-collapse: collapse; width: 100%; }
:where(.tmim) .wp-block-table thead { border-bottom: 3px solid; }
:where(.tmim) .wp-block-table td,
:where(.tmim) .wp-block-table th { border: 1px solid; padding: .5em; }
:where(.tmim) .wp-block-table .has-fixed-layout { table-layout: fixed; width: 100%; }
:where(.tmim) .wp-block-table .has-fixed-layout td,
:where(.tmim) .wp-block-table .has-fixed-layout th { word-break: break-word; }
:where(.tmim) .wp-block-table.is-style-stripes { background-color: transparent; border-collapse: inherit; border-spacing: 0; border-bottom: 1px solid #f0f0f0; }
:where(.tmim) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: #f0f0f0; }
:where(.tmim) .wp-block-table.is-style-stripes td,
:where(.tmim) .wp-block-table.is-style-stripes th { border-color: transparent; }

/* VK Blocks「枠線」「枠線＋ストライプ」 */
:where(.tmim) .wp-block-table.is-style-vk-table-border table:not(.has-border-color) :is(th, td),
:where(.tmim) .wp-block-table.is-style-vk-table-border-stripes table:not(.has-border-color) :is(th, td) { border: 1px solid; border-color: inherit; }
:where(.tmim) .wp-block-table.is-style-vk-table-border-stripes tbody tr:nth-child(2n+1) { background-color: #f0f0f0; }

:where(.tmim) .has-text-align-left { text-align: left; }
:where(.tmim) .has-text-align-center { text-align: center; }
:where(.tmim) .has-text-align-right { text-align: right; }