.miram-switch {
	margin: 0 0 16px;
}

.miram-switch__row {
	margin: 0 0 12px;
}

.miram-switch__label {
	display: block;
	margin-bottom: 6px;
	color: #666;
	font-size: 13px;
	line-height: 1.3;
}

.miram-switch__label b {
	color: #222;
	font-weight: 600;
}

.miram-switch__values {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.miram-switch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 4px 10px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	background: #fff;
	color: #222;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
}

.miram-switch__btn:hover,
.miram-switch__btn:focus {
	border-color: #222;
	color: #222;
	text-decoration: none;
}

.miram-switch__btn.is-current {
	border-color: #222;
	box-shadow: inset 0 0 0 1px #222;
}

.miram-switch__btn.is-muted {
	color: #9a9a9a;
}

.miram-switch__values_dots {
	gap: 8px;
	align-items: center;
}

.miram-switch__dot {
	position: relative;
	display: inline-block;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, 0.28);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #fff;
	vertical-align: middle;
}

.miram-switch__dot:hover,
.miram-switch__dot:focus {
	box-shadow: 0 0 0 2px #222, inset 0 0 0 2px #fff;
}

.miram-switch__dot.is-current {
	box-shadow: 0 0 0 2px #222, inset 0 0 0 2px #fff;
}

.miram-switch__dot.is-muted {
	opacity: 0.38;
}

.miram-switch__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.miram-switch.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

.catalog-detail-node:has(.miram-switch) .catalog-detail-gallery__stage {
	aspect-ratio: 1 / 1;
	background: #fff;
}

.catalog-detail-node:has(.miram-switch) .catalog-detail-gallery__slide.is-active {
	position: absolute;
	inset: 0;
}

.catalog-detail-node:has(.miram-switch) .catalog-detail-gallery__slide.is-active img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.miram-switch__row {
	border-radius: 6px;
	transition: background-color 0.3s;
}

.miram-switch__row.is-changed {
	background: #fff3d6;
	box-shadow: 0 0 0 6px #fff3d6;
}

.miram-switch__more {
	margin-left: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: #1a5fb4;
	font: inherit;
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 3px;
	cursor: pointer;
}

.miram-switch__more:hover,
.miram-switch__more:focus {
	color: #e8700a;
}

.miram-switch__note {
	display: none;
	margin: -4px 0 12px;
	padding: 8px 10px;
	border-left: 3px solid #f0a020;
	background: #fff8e8;
	color: #5a4200;
	font-size: 13px;
	line-height: 1.35;
}

.miram-switch__note.is-on {
	display: block;
}

.miram-switch__pop[hidden] {
	display: none;
}

.miram-switch__pop {
	position: fixed;
	inset: 0;
	z-index: 1060;
	display: flex;
	align-items: center;
	justify-content: center;
}

.miram-switch__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.miram-switch__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.miram-switch__head {
	position: relative;
	padding: 14px 48px 10px 16px;
	border-bottom: 1px solid #eee;
	font-size: 16px;
}

.miram-switch__hint {
	display: block;
	margin-top: 2px;
	color: #777;
	font-size: 13px;
}

.miram-switch__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: #555;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.miram-switch__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	padding: 14px 16px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.miram-switch__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 8px 10px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	color: #222;
	text-align: center;
	text-decoration: none;
}

.miram-switch__tile:hover,
.miram-switch__tile:focus {
	border-color: #222;
	color: #222;
	text-decoration: none;
}

.miram-switch__tile.is-current {
	border-color: #222;
	box-shadow: inset 0 0 0 1px #222;
}

.miram-switch__tile.is-muted .miram-switch__pic,
.miram-switch__tile.is-muted .miram-switch__name,
.miram-switch__tile.is-muted .miram-switch__width {
	opacity: 0.4;
}

.miram-switch__pic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 6px;
	background: #fafafa;
}

.miram-switch__pic img {
	max-width: 100%;
	height: auto;
}

.miram-switch__noscheme {
	color: #aaa;
	font-size: 12px;
}

.miram-switch__name {
	font-size: 15px;
	font-weight: 600;
}

.miram-switch__width {
	color: #666;
	font-size: 12px;
}

html.miram-pop-open,
html.miram-pop-open body {
	overflow: hidden;
}

@media (max-width: 767px) {
	.miram-switch__pop {
		align-items: flex-end;
	}

	.miram-switch__dialog {
		width: 100%;
		max-height: 88vh;
		border-radius: 14px 14px 0 0;
	}

	.miram-switch__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
	}
}

.miram-switch__peek {
	display: none;
}

@media (hover: hover) {
	.miram-switch__dot:hover,
	.miram-switch__dot:focus-visible {
		z-index: 20;
	}

	.miram-switch__dot:hover .miram-switch__peek,
	.miram-switch__dot:focus-visible .miram-switch__peek {
		position: absolute;
		bottom: calc(100% + 10px);
		left: 50%;
		z-index: 20;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 156px;
		padding: 8px 8px 6px;
		border: 1px solid #ddd;
		border-radius: 8px;
		background: #fff;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
		color: #222;
		font-size: 13px;
		line-height: 1.3;
		text-align: center;
		transform: translateX(-50%);
		pointer-events: none;
	}

	.miram-switch__dot:hover .miram-switch__peek::after,
	.miram-switch__dot:focus-visible .miram-switch__peek::after {
		position: absolute;
		top: 100%;
		left: 50%;
		width: 10px;
		height: 10px;
		margin: -5px 0 0 -5px;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		background: #fff;
		transform: rotate(45deg);
		content: "";
	}

	.miram-switch__dot.is-muted:hover {
		opacity: 1;
	}
}

.miram-switch__peek img {
	display: block;
	width: 140px;
	height: 140px;
	margin-bottom: 4px;
	object-fit: contain;
	background: #fafafa;
}

.miram-switch__peek-name {
	font-weight: 600;
}

.miram-switch__peek-more {
	color: #8a6d00;
	font-size: 12px;
}

.miram-buybar {
	display: none;
}

@media (min-width: 992px) {
	.miram-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 220px;
		grid-template-rows: auto auto auto 1fr;
		column-gap: 20px;
		align-items: start;
	}

	.miram-layout > .miram-switch,
	.miram-layout > .catalog-detail-node {
		grid-column: 1;
	}

	.miram-layout > .row {
		grid-column: 2;
		grid-row: 1 / -1;
		margin: 0;
	}

	.miram-layout > .row > [class*="col-"] {
		float: none;
		width: auto;
		padding: 0;
	}

	.miram-layout .catalog-detail-tool {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 6px;
		margin-bottom: 12px;
		padding: 14px;
		border: 1px solid #e3e3e3;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	}

	.miram-layout .catalog-detail-tool > * {
		flex: 0 0 100%;
		margin: 0;
	}

	.miram-layout .catalog-detail-tool > .catalog-detail-tool__price {
		flex: 1 1 auto;
	}

	.miram-layout .catalog-detail-tool > .catalog-detail-tool__favorite,
	.miram-layout .catalog-detail-tool > .catalog-detail-tool__compare {
		flex: 0 0 auto;
	}

	.miram-layout .catalog-detail-tool > .label:empty {
		display: none;
	}

	.miram-layout .catalog-detail-tool > .label {
		flex: 0 0 auto;
		margin-right: auto;
	}

	.miram-layout .catalog-detail-tool .input-group_type_count {
		display: flex;
	}

	.miram-layout .catalog-detail-tool .input-group_type_count .input-group-btn:last-child {
		flex: 1 1 auto;
		width: auto;
	}

	.miram-layout .catalog-detail-tool .input-group_type_count .quantity-product {
		flex: 0 0 52px;
		width: 52px;
		height: 40px;
		padding: 6px 4px;
	}

	.miram-layout .catalog-detail-tool .input-group_type_count .quantity-button {
		flex: 0 0 auto;
		width: auto;
	}

	.miram-layout .catalog-detail-tool .input-group_type_count .input-group-btn:last-child .btn {
		width: 100%;
		height: 40px;
		font-size: 16px;
	}

	.miram-layout .miram-switch__btn {
		padding: 4px 8px;
		font-size: 13px;
	}
}

@media (max-width: 991px) {
	body.has-miram-buybar {
		padding-bottom: 72px;
	}

	.miram-buybar.is-on {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1030;
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 64px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		border-top: 1px solid #e3e3e3;
		background: #fff;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
	}

	.miram-buybar__info {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.2;
	}

	.miram-buybar__price {
		display: block;
		color: #222;
		font-size: 20px;
		font-weight: 700;
		white-space: nowrap;
	}

	.miram-buybar__stock {
		display: block;
		overflow: hidden;
		color: #3c8d2f;
		font-size: 13px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.miram-buybar__stock.is-out {
		color: #888;
	}

	.miram-buybar__btn {
		flex: 0 0 auto;
		min-width: 140px;
		min-height: 44px;
		padding: 8px 16px;
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.miram-switch__dot {
		width: 40px;
		height: 40px;
	}

	.miram-switch__btn {
		min-height: 40px;
		padding: 8px 12px;
	}
}