/* Orank Product Table
   商品一覧表のスタイル。テーマの配色を邪魔しないよう、色は控えめに扱う。 */

.opt-wrap {
	margin: 1.5em 0;
	font-size: 15px;
}

/* 上部の道具立て ------------------------------------------------------- */

.opt-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75em 1em;
	margin-bottom: .75em;
}

.opt-search {
	flex: 1 1 18em;
	min-width: 0;
}

.opt-search-input {
	width: 100%;
	max-width: 24em;
	padding: .5em .75em;
	border: 1px solid #c9ced6;
	border-radius: 4px;
	background: #fff;
	font-size: inherit;
	line-height: 1.4;
}

.opt-search-input:focus {
	outline: 2px solid #2b6cb0;
	outline-offset: 1px;
	border-color: #2b6cb0;
}

.opt-count {
	color: #5a6270;
	font-size: .9em;
	white-space: nowrap;
}

/* 表本体 --------------------------------------------------------------- */

.opt-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.opt-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	background: #fff;
}

.opt-table th,
.opt-table td {
	padding: .6em .7em;
	border-bottom: 1px solid #e4e7ec;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.opt-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #f5f6f8;
	border-bottom: 2px solid #d7dbe2;
	font-weight: 600;
	font-size: .9em;
	color: #3a4150;
}

.opt-table tbody tr:hover {
	background: #fafbfc;
}

/* 並べ替え ------------------------------------------------------------- */

.opt-sortable {
	cursor: pointer;
	user-select: none;
}

.opt-sortable::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: .45em;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #b3bac5;
}

.opt-sortable[aria-sort="ascending"]::after {
	border-top: 0;
	border-bottom: 5px solid #2b6cb0;
}

.opt-sortable[aria-sort="descending"]::after {
	border-top: 5px solid #2b6cb0;
}

.opt-sortable:focus-visible {
	outline: 2px solid #2b6cb0;
	outline-offset: -2px;
}

/* 列ごとの調整 --------------------------------------------------------- */

.opt-table .opt-col-title {
	white-space: normal;
	min-width: 12em;
	font-weight: 600;
}

.opt-table .opt-col-title a {
	text-decoration: none;
}

.opt-table .opt-col-title a:hover {
	text-decoration: underline;
}

.opt-table .opt-col-category {
	white-space: normal;
	color: #5a6270;
	font-size: .9em;
}

.opt-table .opt-col-price {
	font-weight: 600;
	text-align: right;
}

.opt-table .opt-col-action {
	text-align: right;
}

.opt-soldout {
	color: #8a8f99;
	font-size: .9em;
}

/* 状態表示 ------------------------------------------------------------- */

.opt-row[hidden] {
	display: none;
}

.opt-noresult,
.opt-empty {
	margin: 1em 0;
	padding: 1em;
	background: #f5f6f8;
	border-radius: 4px;
	color: #5a6270;
}

.opt-more-wrap {
	margin-top: 1em;
	text-align: center;
}

.opt-more[hidden] {
	display: none;
}

/* 狭い画面 ------------------------------------------------------------- */

@media screen and (max-width: 782px) {

	.opt-table thead {
		display: none;
	}

	.opt-table,
	.opt-table tbody,
	.opt-table tr,
	.opt-table td {
		display: block;
		width: auto;
	}

	.opt-table tr {
		margin-bottom: .9em;
		border: 1px solid #e4e7ec;
		border-radius: 6px;
		overflow: hidden;
	}

	.opt-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1em;
		border-bottom: 1px solid #f0f2f5;
		white-space: normal;
		text-align: right;
	}

	.opt-table td:last-child {
		border-bottom: 0;
	}

	.opt-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: #5a6270;
		font-size: .85em;
		font-weight: 600;
		text-align: left;
	}

	/* 値が空の列は狭い画面では畳む */
	.opt-table td:empty {
		display: none;
	}

	.opt-table .opt-col-title {
		background: #f7f8fa;
		font-size: 1.05em;
	}
}