/* Sabeon Product – modal / bottom sheet. Scoped under .sabeon-product-modal. */

html.sabeon-product-lock {
	overflow: hidden !important;
}

.sabeon-product-modal,
.sabeon-product-modal *,
.sabeon-product-modal *::before,
.sabeon-product-modal *::after {
	box-sizing: border-box;
}

.sabeon-product-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: var(--sp-text, #0f172a);
	font-family: var(--sp-font, inherit);
	font-size: var(--sp-font-size, 15px);
	line-height: 1.5;
	text-align: start;
}

.sabeon-product-modal[hidden] {
	display: none !important;
}

.sabeon-product-modal :focus-visible {
	outline: 2px solid var(--sp-primary, #1d4ed8);
	outline-offset: 2px;
}

.sabeon-product-modal .sabeon-product__icon {
	display: block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	pointer-events: none;
}

/* Overlay */
.sabeon-product-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--sp-overlay, rgba(15, 23, 42, 0.55));
	opacity: 0;
	transition: opacity 0.22s ease;
}

.sabeon-product-modal[data-overlay='0'] .sabeon-product-modal__overlay {
	background: transparent;
}

.sabeon-product-modal[data-open] .sabeon-product-modal__overlay {
	opacity: 1;
}

/* Dialog (desktop = centered) */
.sabeon-product-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--sp-modal-w, 980px);
	max-height: var(--sp-modal-h, 90vh);
	overflow: hidden;
	background: var(--sp-modal-bg, #fff);
	border-radius: var(--sp-modal-radius, 20px);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
	opacity: 0;
	outline: none;
	transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@supports (height: 1dvh) {
	.sabeon-product-modal__dialog {
		max-height: var(--sp-modal-h-dv, 90dvh);
	}
}

.sabeon-product-modal[data-anim='scale'] .sabeon-product-modal__dialog {
	transform: scale(0.95);
}

.sabeon-product-modal[data-anim='slide'] .sabeon-product-modal__dialog,
.sabeon-product-modal[data-anim='bottom_sheet'] .sabeon-product-modal__dialog {
	transform: translateY(28px);
}

.sabeon-product-modal[data-anim='none'] .sabeon-product-modal__dialog,
.sabeon-product-modal[data-anim='none'] .sabeon-product-modal__overlay {
	transition: none;
}

.sabeon-product-modal[data-open] .sabeon-product-modal__dialog {
	opacity: 1;
	transform: none;
}

.sabeon-product-modal__handle {
	display: none;
}

.sabeon-product-modal__close {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 6px rgba(15, 23, 42, 0.25);
	color: #0f172a;
	cursor: pointer;
}

.sabeon-product-modal__content {
	position: relative;
	flex: 1 1 auto;
	min-height: 120px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Layout */
.sabeon-product-modal__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: calc(var(--sp-space, 16px) * 2);
	padding: calc(var(--sp-space, 16px) * 1.75);
}

.sabeon-product-modal__layout--single {
	grid-template-columns: minmax(0, 1fr);
}

.sabeon-product-modal__media {
	min-width: 0;
	position: relative;
}

.sabeon-product-modal__media[hidden] {
	display: none;
}

.sabeon-product-modal__info {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding-block-start: 4px;
}

.sabeon-product-modal__sale-flag {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 2;
	padding: 0.25em 0.8em;
	border-radius: 999px;
	background: var(--sp-accent, #f59e0b);
	color: #1f1300;
	font-size: 0.8em;
	font-weight: 700;
}

/* Gallery */
.sabeon-product-modal__gallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sabeon-product-modal__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--sp-image-radius, 12px);
	background: var(--sp-secondary, #eef2ff);
	touch-action: pan-y;
}

.sabeon-product-modal .sabeon-product-modal__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: contain;
}

.sabeon-product-modal__nav {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -20px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 6px rgba(15, 23, 42, 0.25);
	color: #0f172a;
	cursor: pointer;
}

.sabeon-product-modal__nav--prev {
	inset-inline-start: 10px;
}

.sabeon-product-modal__nav--next {
	inset-inline-end: 10px;
}

.sabeon-product--rtl .sabeon-product-modal__nav .sabeon-product__icon {
	transform: scaleX(-1);
}

.sabeon-product-modal__thumbs {
	display: flex;
	gap: 8px;
	padding: 3px;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.sabeon-product-modal__thumb {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 64px;
	height: 64px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--sp-radius, 10px);
	background: var(--sp-secondary, #eef2ff);
	cursor: pointer;
	opacity: 0.8;
}

.sabeon-product-modal__thumb[aria-current='true'] {
	border-color: var(--sp-primary, #1d4ed8);
	opacity: 1;
}

.sabeon-product-modal__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Text */
.sabeon-product-modal .sabeon-product-modal__title {
	margin: 0;
	padding: 0 48px 0 0;
	padding-inline: 0 48px;
	font-family: inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sp-text, #0f172a);
}

.sabeon-product-modal__rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--sp-rating-size, 14px);
	color: var(--sp-muted, #64748b);
}

.sabeon-product-modal__rating .sabeon-product__icon {
	width: 1.1em;
	height: 1.1em;
	color: var(--sp-accent, #f59e0b);
}

.sabeon-product-modal__rating-value {
	font-weight: 600;
	color: var(--sp-text, #0f172a);
}

.sabeon-product-modal__price {
	font-size: calc(var(--sp-price-size, 15px) * 1.4);
	font-weight: 700;
	color: var(--sp-text, #0f172a);
}

.sabeon-product-modal__price del {
	margin-inline-end: 6px;
	font-weight: 400;
	opacity: 0.6;
}

.sabeon-product-modal__price ins {
	background: none;
	text-decoration: none;
}

.sabeon-product-modal__text {
	color: var(--sp-text, #0f172a);
}

.sabeon-product-modal__text > :first-child {
	margin-top: 0;
}

.sabeon-product-modal__text > :last-child {
	margin-bottom: 0;
}

.sabeon-product-modal__text img {
	max-width: 100%;
	height: auto;
}

.sabeon-product-modal__stock {
	margin: 0;
	font-weight: 600;
	color: #15803d;
}

.sabeon-product-modal__stock::before {
	content: '\25CF\00a0';
}

.sabeon-product-modal__stock.is-outofstock {
	color: #b91c1c;
}

.sabeon-product-modal__stock.is-outofstock::before {
	content: '\2715\00a0';
}

.sabeon-product-modal__stock.is-onbackorder {
	color: #b45309;
}

.sabeon-product-modal__sku,
.sabeon-product-modal__terms {
	margin: 0;
	color: var(--sp-muted, #64748b);
	font-size: 0.92em;
}

.sabeon-product-modal__label {
	font-weight: 600;
	color: var(--sp-text, #0f172a);
}

.sabeon-product-modal__terms a,
.sabeon-product-modal__link {
	color: var(--sp-primary, #1d4ed8);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sabeon-product-modal__meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 14px;
	margin: 0;
	font-size: 0.92em;
}

.sabeon-product-modal__meta dt {
	margin: 0;
	font-weight: 600;
}

.sabeon-product-modal__meta dd {
	margin: 0;
	color: var(--sp-muted, #64748b);
}

/* Wishlist button */
.sabeon-product-modal .sabeon-product-modal__wish {
	appearance: none;
	-webkit-appearance: none;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0.5em 1em;
	border: 1px solid var(--sp-border, #e2e8f0);
	border-radius: var(--sp-radius, 10px);
	background: transparent;
	color: var(--sp-text, #0f172a);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.sabeon-product-modal .sabeon-product-modal__wish[aria-pressed='true'] {
	border-color: #e11d48;
	color: #e11d48;
}

/* Variations */
.sabeon-product-modal__variations {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sabeon-product-modal .sabeon-product-modal__attr {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sabeon-product-modal .sabeon-product-modal__attr-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-weight: 700;
}

.sabeon-product-modal__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sabeon-product-modal__chip {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

.sabeon-product-modal__chip-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.sabeon-product-modal__chip-text {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4em 1.1em;
	border: 1px solid var(--sp-border, #cbd5e1);
	border-radius: var(--sp-radius, 10px);
	background: var(--sp-modal-bg, #fff);
	color: var(--sp-text, #0f172a);
	font-weight: 500;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.sabeon-product-modal__chip:hover .sabeon-product-modal__chip-text {
	border-color: var(--sp-primary, #1d4ed8);
}

.sabeon-product-modal__chip-input:checked + .sabeon-product-modal__chip-text {
	border-color: var(--sp-primary, #1d4ed8);
	background: var(--sp-secondary, #eef2ff);
	color: var(--sp-primary, #1d4ed8);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px var(--sp-primary, #1d4ed8);
}

.sabeon-product-modal__chip-input:checked + .sabeon-product-modal__chip-text::before {
	content: '\2713\00a0';
}

.sabeon-product-modal__chip-input:focus-visible + .sabeon-product-modal__chip-text {
	outline: 2px solid var(--sp-primary, #1d4ed8);
	outline-offset: 2px;
}

.sabeon-product-modal__chip.is-unavailable {
	cursor: not-allowed;
}

.sabeon-product-modal__chip.is-unavailable .sabeon-product-modal__chip-text {
	opacity: 0.45;
	text-decoration: line-through;
}

.sabeon-product-modal .sabeon-product-modal__select {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0.45em 0.8em;
	border: 1px solid var(--sp-border, #cbd5e1);
	border-radius: var(--sp-radius, 10px);
	background-color: var(--sp-modal-bg, #fff);
	color: var(--sp-text, #0f172a);
	font: inherit;
}

.sabeon-product-modal .sabeon-product-modal__clear {
	appearance: none;
	-webkit-appearance: none;
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sp-muted, #64748b);
	font: inherit;
	font-size: 0.9em;
	text-decoration: underline;
	cursor: pointer;
}

.sabeon-product-modal .sabeon-product-modal__clear[hidden] {
	display: none;
}

/* Actions */
.sabeon-product-modal__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sabeon-product-modal__action-row {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.sabeon-product-modal__qty {
	display: inline-flex;
	flex: none;
	align-items: stretch;
	border: 1px solid var(--sp-border, #cbd5e1);
	border-radius: var(--sp-radius, 10px);
	background: var(--sp-modal-bg, #fff);
	overflow: hidden;
}

.sabeon-product-modal .sabeon-product-modal__qty-btn {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sp-text, #0f172a);
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.sabeon-product-modal .sabeon-product-modal__qty-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.sabeon-product-modal .sabeon-product-modal__qty-input {
	appearance: textfield;
	-moz-appearance: textfield;
	width: 56px;
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--sp-border, #cbd5e1);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sp-text, #0f172a);
	font: inherit;
	font-weight: 700;
	text-align: center;
}

.sabeon-product-modal .sabeon-product-modal__qty-input::-webkit-outer-spin-button,
.sabeon-product-modal .sabeon-product-modal__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sabeon-product-modal .sabeon-product-modal__btn {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 0.6em 1.4em;
	border: 1px solid var(--sp-primary, #1d4ed8);
	border-radius: var(--sp-btn-radius, 10px);
	background: var(--sp-primary, #1d4ed8);
	box-shadow: none;
	color: var(--sp-primary-contrast, #fff);
	font: inherit;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.12s ease;
}

.sabeon-product-modal .sabeon-product-modal__btn:hover {
	color: var(--sp-primary-contrast, #fff);
}

.sabeon-product-modal.sabeon-product--btn-outline .sabeon-product-modal__btn {
	background: transparent;
	color: var(--sp-primary, #1d4ed8);
}

.sabeon-product-modal.sabeon-product--btn-soft .sabeon-product-modal__btn {
	background: var(--sp-secondary, #eef2ff);
	border-color: transparent;
	color: var(--sp-primary, #1d4ed8);
}

.sabeon-product-modal .sabeon-product-modal__btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.sabeon-product-modal .sabeon-product-modal__btn[data-state='loading']::before {
	content: '';
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: sabeon-product-spin 0.7s linear infinite;
}

.sabeon-product-modal .sabeon-product-modal__btn[data-state='success'] {
	opacity: 1;
}

.sabeon-product-modal__hint {
	margin: 0;
	color: var(--sp-muted, #64748b);
	font-size: 0.9em;
}

.sabeon-product-modal__hint:empty {
	display: none;
}

.sabeon-product-modal__feedback {
	display: none;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.sabeon-product-modal__feedback.is-success,
.sabeon-product-modal__feedback.is-error {
	display: flex;
	flex-wrap: wrap;
}

.sabeon-product-modal__feedback.is-success {
	color: #15803d;
}

.sabeon-product-modal__feedback.is-error {
	color: #b91c1c;
}

.sabeon-product-modal__feedback a {
	margin-inline-start: auto;
	color: var(--sp-primary, #1d4ed8);
	text-decoration: underline;
}

/* Grouped */
.sabeon-product-modal__grouped {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sabeon-product-modal__grouped-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 0;
	border-block-end: 1px solid var(--sp-border, #e2e8f0);
}

.sabeon-product-modal__grouped-item img {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
}

.sabeon-product-modal__grouped-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.sabeon-product-modal__grouped-name {
	font-weight: 600;
}

.sabeon-product-modal__grouped-link {
	color: var(--sp-primary, #1d4ed8);
	font-size: 0.9em;
	text-decoration: underline;
}

/* Skeleton / error */
.sabeon-product-modal__sk {
	border-radius: 8px;
	background: linear-gradient(90deg, var(--sp-secondary, #eef2ff) 25%, rgba(148, 163, 184, 0.25) 50%, var(--sp-secondary, #eef2ff) 75%);
	background-size: 200% 100%;
	animation: sabeon-product-shimmer 1.3s linear infinite;
}

.sabeon-product-modal__sk--image {
	aspect-ratio: 1 / 1;
	border-radius: var(--sp-image-radius, 12px);
}

.sabeon-product-modal__sk--title {
	width: 70%;
	height: 28px;
}

.sabeon-product-modal__sk--line {
	width: 100%;
	height: 14px;
}

.sabeon-product-modal__sk--short {
	width: 55%;
}

.sabeon-product-modal__sk--price {
	width: 35%;
	height: 24px;
}

.sabeon-product-modal__sk--btn {
	width: 100%;
	height: 48px;
	margin-block-start: 8px;
}

@keyframes sabeon-product-shimmer {
	to {
		background-position: -200% 0;
	}
}

.sabeon-product-modal__error {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 48px 24px;
	text-align: center;
}

.sabeon-product-modal__error-title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
}

.sabeon-product-modal__error-text {
	margin: 0;
	color: var(--sp-muted, #64748b);
}

.sabeon-product-modal__error-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-block-start: 12px;
}

.sabeon-product-modal__error-actions .sabeon-product-modal__btn {
	flex: none;
}

/* ============================ Mobile bottom sheet ============================ */
.sabeon-product-modal[data-layout='mobile'] {
	align-items: flex-end;
	padding: 0;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__dialog {
	max-width: none;
	max-height: var(--sp-sheet-h, 92vh);
	border-radius: var(--sp-modal-radius, 20px) var(--sp-modal-radius, 20px) 0 0;
	padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
	transform: translateY(100%);
	opacity: 1;
}

@supports (height: 1dvh) {
	.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__dialog {
		max-height: var(--sp-sheet-h-dv, 92dvh);
	}
}

.sabeon-product-modal[data-layout='mobile'][data-open] .sabeon-product-modal__dialog {
	transform: translateY(0);
}

.sabeon-product-modal[data-layout='mobile'][data-anim='fade'] .sabeon-product-modal__dialog {
	transform: none;
	opacity: 0;
}

.sabeon-product-modal[data-layout='mobile'][data-anim='fade'][data-open] .sabeon-product-modal__dialog {
	opacity: 1;
}

.sabeon-product-modal[data-layout='mobile'][data-anim='none'] .sabeon-product-modal__dialog {
	transform: none;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__handle {
	display: block;
	flex: none;
	width: 100%;
	height: 24px;
	cursor: grab;
	touch-action: none;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__handle::after {
	content: '';
	display: block;
	width: 44px;
	height: 5px;
	margin: 10px auto 0;
	border-radius: 999px;
	background: var(--sp-border, #cbd5e1);
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__close {
	inset-block-start: 28px;
	inset-inline-end: 12px;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__layout {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding: 0;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__stage {
	border-radius: 0;
	aspect-ratio: 4 / 3;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__thumbs {
	padding: 10px 16px 0;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__info {
	gap: 12px;
	padding: 16px 16px 0;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__title {
	font-size: 22px;
	padding-inline: 0;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__actions {
	position: sticky;
	inset-block-end: 0;
	z-index: 4;
	margin-inline: -16px;
	margin-block-start: 4px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid var(--sp-border, #e2e8f0);
	background: var(--sp-modal-bg, #fff);
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__info > :last-child:not(.sabeon-product-modal__actions) {
	padding-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__sk--image {
	border-radius: 0;
	aspect-ratio: 4 / 3;
}

.sabeon-product-modal[data-layout='mobile'] .sabeon-product-modal__skeleton .sabeon-product-modal__info {
	padding-block-end: 24px;
}

/* ============================ Admin preview (static) ========================= */
.sabeon-product-modal--static {
	position: relative;
	inset: auto;
	z-index: auto;
	display: block;
	padding: 0;
}

.sabeon-product-modal--static .sabeon-product-modal__overlay {
	display: none;
}

.sabeon-product-modal--static .sabeon-product-modal__dialog {
	margin-inline: auto;
	opacity: 1;
	transform: none !important;
	transition: none;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
}

.sabeon-product-modal--static[data-layout='mobile'] .sabeon-product-modal__dialog {
	max-width: 390px;
	max-height: 640px;
	border-radius: var(--sp-modal-radius, 20px);
}

.sabeon-product-modal--static[data-layout='desktop'] .sabeon-product-modal__dialog {
	max-height: 640px;
}

@media (prefers-reduced-motion: reduce) {
	.sabeon-product-modal *,
	.sabeon-product-modal *::before {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------- */
/* Accordion (information sections)                                        */
/* ---------------------------------------------------------------------- */

.sabeon-product-modal .sabeon-product-modal__acc {
	border-block-end: 1px solid var(--sp-border, #e2e8f0);
}

.sabeon-product-modal .sabeon-product-modal__info > :not(.sabeon-product-modal__acc) + .sabeon-product-modal__acc {
	border-block-start: 1px solid var(--sp-border, #e2e8f0);
}

.sabeon-product-modal .sabeon-product-modal__acc-h {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.sabeon-product-modal .sabeon-product-modal__acc-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sp-text, #0f172a);
	font: inherit;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sabeon-product-modal .sabeon-product-modal__acc-btn:hover {
	color: var(--sp-primary, #1d4ed8);
}

.sabeon-product-modal .sabeon-product-modal__acc-icon {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--sp-muted, #64748b);
}

/* Chevron (default) */
.sabeon-product-modal .sabeon-product-modal__acc--chevron .sabeon-product-modal__acc-icon::before {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	width: 8px;
	height: 8px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.sabeon-product-modal .sabeon-product-modal__acc--chevron[data-open="1"] .sabeon-product-modal__acc-icon::before {
	transform: translateY(3px) rotate(225deg);
}

/* Plus / minus */
.sabeon-product-modal .sabeon-product-modal__acc--plus .sabeon-product-modal__acc-icon::before,
.sabeon-product-modal .sabeon-product-modal__acc--plus .sabeon-product-modal__acc-icon::after {
	content: "";
	position: absolute;
	inset-block-start: 7px;
	inset-inline-start: 1px;
	width: 14px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.sabeon-product-modal .sabeon-product-modal__acc--plus .sabeon-product-modal__acc-icon::after {
	transform: rotate(90deg);
}

.sabeon-product-modal .sabeon-product-modal__acc--plus[data-open="1"] .sabeon-product-modal__acc-icon::after {
	transform: rotate(0deg);
	opacity: 0;
}

/* Caret (triangle) */
.sabeon-product-modal .sabeon-product-modal__acc--caret .sabeon-product-modal__acc-icon::before {
	content: "";
	position: absolute;
	inset-block-start: 5px;
	inset-inline-start: 2px;
	border-inline: 6px solid transparent;
	border-block-start: 7px solid currentColor;
	transition: transform 0.2s ease;
}

.sabeon-product-modal .sabeon-product-modal__acc--caret[data-open="1"] .sabeon-product-modal__acc-icon::before {
	transform: rotate(180deg);
}

/* Panel: grid-rows animation; closed panels are invisible to focus and AT. */
.sabeon-product-modal .sabeon-product-modal__acc-panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.22s ease, visibility 0s linear 0.22s;
}

.sabeon-product-modal .sabeon-product-modal__acc[data-open="1"] > .sabeon-product-modal__acc-panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 0.22s ease, visibility 0s;
}

.sabeon-product-modal .sabeon-product-modal__acc-inner {
	min-height: 0;
	overflow: hidden;
}

.sabeon-product-modal .sabeon-product-modal__acc[data-open="1"] .sabeon-product-modal__acc-inner > * {
	margin-block-end: 12px;
}

.sabeon-product-modal .sabeon-product-modal__acc-inner > :first-child {
	margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sabeon-product-modal .sabeon-product-modal__acc-panel,
	.sabeon-product-modal .sabeon-product-modal__acc-icon::before,
	.sabeon-product-modal .sabeon-product-modal__acc-icon::after {
		transition: none;
	}
}

/* ======================== Professional shop style (data-mstyle="pro") ========================
   Everything below is scoped to .sabeon-product-modal[data-mstyle='pro']; the classic style is untouched.
   Structure: image / title / price + quantity / scrolling details / buy bar (total + add to cart). */
.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__dialog {
	max-width: min(100%, var(--sp-pro-w, 520px));
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__layout {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0;
	min-height: 0;
	padding: 0;
}

/* Image area: fixed height, never distorted */
.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__media {
	flex: none;
	height: var(--sp-pro-img-h, 280px);
	overflow: hidden;
	background: var(--sp-secondary, #eef2ff);
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__gallery {
	position: relative;
	height: 100%;
	gap: 0;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__stage {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__img {
	object-fit: var(--sp-pro-fit, cover);
	object-position: var(--sp-pro-pos, center center);
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__thumbs {
	position: absolute;
	inset-block-end: 8px;
	inset-inline: 0;
	z-index: 2;
	justify-content: center;
	padding: 0 12px;
	pointer-events: none;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__thumb {
	width: 40px;
	height: 40px;
	pointer-events: auto;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__thumb img {
	width: 100%;
	height: 100%;
}

/* Info column: fixed head, scrolling middle, fixed bar */
.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__info--pro {
	flex: 1 1 auto;
	gap: 0;
	min-height: 0;
	padding: 0;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-head {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px 6px;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__layout--single .sabeon-product-modal__pro-head {
	padding-block-start: 56px;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__title {
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-row {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 20px 14px;
	border-block-end: 1px solid var(--sp-border, #e2e8f0);
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-row .sabeon-product-modal__price {
	min-width: 0;
	font-size: 20px;
	font-weight: 700;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-row .sabeon-product-modal__qty-btn {
	width: 40px;
	min-height: 40px;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-row .sabeon-product-modal__qty-input {
	width: 46px;
	min-height: 40px;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-scroll {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	padding: 14px 20px 24px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__actions--pro {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* Buy bar */
.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-bar {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid var(--sp-border, #e2e8f0);
	background: var(--sp-modal-bg, #fff);
	box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-bar--static {
	margin-block-start: 8px;
	padding-inline: 0;
	box-shadow: none;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-msgs {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-main {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__total {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__total-label {
	color: var(--sp-muted, #64748b);
	font-size: 0.85em;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__total-value {
	overflow-wrap: anywhere;
	font-size: 20px;
	font-weight: 800;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__total-value del {
	display: none;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-main .sabeon-product-modal__btn {
	flex: 1 1 auto;
	min-height: 52px;
}

/* Loading skeleton */
.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__skeleton {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__skeleton .sabeon-product-modal__sk--image {
	height: var(--sp-pro-img-h, 280px);
	aspect-ratio: auto;
	border-radius: 0;
}

.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__skeleton .sabeon-product-modal__info {
	padding: 16px 20px 24px;
}

/* Mobile bottom sheet */
.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__media {
	height: min(var(--sp-pro-img-h, 280px), 34vh);
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__stage {
	aspect-ratio: auto;
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__thumbs {
	padding: 0 12px;
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__info--pro {
	gap: 0;
	padding: 0;
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__pro-head,
.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__pro-row,
.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__pro-scroll,
.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__pro-bar {
	padding-inline: 16px;
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__pro-bar--static {
	padding-inline: 0;
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__title {
	font-size: 18px;
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__actions--pro {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__pro-scroll > :last-child:not(.sabeon-product-modal__actions) {
	padding-block-end: 0;
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__skeleton .sabeon-product-modal__sk--image {
	height: min(var(--sp-pro-img-h, 280px), 34vh);
}

.sabeon-product-modal[data-mstyle='pro'][data-layout='mobile'] .sabeon-product-modal__skeleton .sabeon-product-modal__info {
	padding: 16px 16px 24px;
}

@media (max-width: 380px) {
	.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__pro-main {
		gap: 10px;
	}

	.sabeon-product-modal[data-mstyle='pro'] .sabeon-product-modal__total-value {
		font-size: 17px;
	}
}

/* ======================== Split showcase / Immersive editorial / Compact quick view ========================
   Three more layout styles. Every rule is scoped to its own data-mstyle value (split, editorial, compact), so the
   classic and professional styles, the cards and the theme are untouched. They reuse the classic quantity control,
   add to cart button, variation chips and accordions; only the arrangement changes.
   Desktop rules use :not([data-layout='mobile']); the mobile bottom sheet is a single column. */

/* ---- shared: information column (split + compact) ---- */
.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__info--col,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__info--col {
	gap: 0;
	min-height: 0;
	padding: 0;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-head,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-head {
	flex: none;
	min-width: 0;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-meta,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	min-width: 0;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-meta .sabeon-product-modal__stock,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-meta .sabeon-product-modal__stock {
	font-size: 0.9em;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-scroll,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-scroll {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-buy {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 8px;
	background: var(--sp-modal-bg, #fff);
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy .sabeon-product-modal__action-row,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-buy .sabeon-product-modal__action-row {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy .sabeon-product-modal__btn,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-buy .sabeon-product-modal__btn {
	flex: 1 1 auto;
	min-height: 48px;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy .sabeon-product-modal__hint,
.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy .sabeon-product-modal__feedback,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-buy .sabeon-product-modal__hint,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-buy .sabeon-product-modal__feedback {
	margin: 0;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__title,
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__title,
.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__title {
	overflow-wrap: anywhere;
}

/* ---- Split showcase ---- */
.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__dialog {
	max-width: min(100%, max(var(--sp-modal-w, 980px), 1040px));
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__media {
	min-width: 0;
	background: var(--sp-secondary, #eef2ff);
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__gallery {
	gap: 12px;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__stage {
	background: transparent;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-head {
	padding: 36px 32px 14px;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-head .sabeon-product-modal__title {
	margin: 0;
	padding-inline: 0 44px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-meta {
	margin-block: 8px 14px;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-head .sabeon-product-modal__price {
	font-size: calc(var(--sp-price-size, 15px) * 1.9);
	font-weight: 800;
	line-height: 1.2;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-scroll {
	gap: 18px;
	padding: 18px 32px 24px;
	border-block-start: 1px solid var(--sp-border, #e2e8f0);
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy {
	padding: 14px 32px calc(18px + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid var(--sp-border, #e2e8f0);
	box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06);
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy .sabeon-product-modal__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy .sabeon-product-modal__total-label {
	color: var(--sp-muted, #64748b);
	font-size: 0.9em;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy .sabeon-product-modal__total-value {
	font-size: 22px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy .sabeon-product-modal__total-value del {
	display: none;
}

.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__col-buy .sabeon-product-modal__btn {
	min-height: 52px;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__dialog {
	max-height: min(var(--sp-modal-h, 90vh), 720px);
}

@supports (height: 1dvh) {
	.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__dialog {
		max-height: min(var(--sp-modal-h-dv, 90dvh), 720px);
	}
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	gap: 0;
	min-height: 0;
	padding: 0;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split.sabeon-product-modal__layout--single {
	grid-template-columns: minmax(0, 1fr);
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split.sabeon-product-modal__layout--single .sabeon-product-modal__info--col {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split .sabeon-product-modal__media {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 28px;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split .sabeon-product-modal__gallery {
	flex: 1 1 auto;
	min-height: 0;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split .sabeon-product-modal__stage {
	flex: 1 1 auto;
	min-height: 300px;
	aspect-ratio: auto;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split .sabeon-product-modal__img {
	position: absolute;
	inset: 0;
	object-fit: contain;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split .sabeon-product-modal__thumbs {
	flex: none;
	justify-content: safe center;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split .sabeon-product-modal__info--col {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__layout--split .sabeon-product-modal__col-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__skeleton {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: 28px;
	padding: 28px;
}

.sabeon-product-modal[data-mstyle='split']:not([data-layout='mobile']) .sabeon-product-modal__skeleton .sabeon-product-modal__sk--image {
	aspect-ratio: auto;
	height: 380px;
}

/* ---- Compact quick view ---- */
.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__dialog {
	max-width: min(100%, var(--sp-modal-w, 980px), 780px);
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__media {
	min-width: 0;
	background: var(--sp-secondary, #eef2ff);
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__stage {
	background: transparent;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__img {
	object-fit: contain;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__thumbs {
	flex-wrap: wrap;
	justify-content: center;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__thumb {
	width: 40px;
	height: 40px;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__thumb img {
	width: 100%;
	height: 100%;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding: 18px 20px 10px;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-head .sabeon-product-modal__title {
	flex: 0 0 100%;
	order: 1;
	margin: 0;
	padding-inline: 0 44px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-head .sabeon-product-modal__price {
	order: 2;
	font-size: calc(var(--sp-price-size, 15px) * 1.35);
	font-weight: 800;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-meta {
	order: 3;
	font-size: 0.92em;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-scroll {
	gap: 12px;
	padding: 12px 20px 16px;
	border-block-start: 1px solid var(--sp-border, #e2e8f0);
	font-size: 0.94em;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-buy {
	padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid var(--sp-border, #e2e8f0);
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-buy .sabeon-product-modal__qty-btn {
	width: 40px;
	min-height: 44px;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-buy .sabeon-product-modal__qty-input {
	width: 44px;
	min-height: 44px;
}

.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__col-buy .sabeon-product-modal__btn {
	min-height: 44px;
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__dialog {
	max-height: min(var(--sp-modal-h, 90vh), 560px);
}

@supports (height: 1dvh) {
	.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__dialog {
		max-height: min(var(--sp-modal-h-dv, 90dvh), 560px);
	}
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__layout--compact {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: 236px minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	gap: 0;
	min-height: 0;
	padding: 0;
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__layout--compact.sabeon-product-modal__layout--single {
	grid-template-columns: minmax(0, 1fr);
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__layout--compact .sabeon-product-modal__media {
	padding: 16px;
	overflow-y: auto;
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__layout--compact .sabeon-product-modal__stage {
	aspect-ratio: 1 / 1;
	border-radius: var(--sp-image-radius, 12px);
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__layout--compact .sabeon-product-modal__info--col {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__layout--compact .sabeon-product-modal__col-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__skeleton {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 20px;
	padding: 16px;
}

.sabeon-product-modal[data-mstyle='compact']:not([data-layout='mobile']) .sabeon-product-modal__skeleton .sabeon-product-modal__sk--image {
	aspect-ratio: 1 / 1;
}

/* ---- Immersive editorial ---- */
.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__dialog {
	max-width: min(100%, max(var(--sp-modal-w, 980px), 1000px));
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__media {
	min-width: 0;
	background: var(--sp-secondary, #eef2ff);
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__gallery {
	position: relative;
	height: 100%;
	gap: 0;
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__stage {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__img {
	object-fit: cover;
}

/* Thumbnails float on a solid chip, so they stay readable over any image. */
.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__thumbs {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-start: 16px;
	z-index: 2;
	max-width: calc(100% - 32px);
	padding: 6px;
	border-radius: 14px;
	background: var(--sp-modal-bg, #fff);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22);
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__thumb {
	width: 44px;
	height: 44px;
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__thumb img {
	width: 100%;
	height: 100%;
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__info--ed {
	gap: 20px;
	padding: 60px 44px 40px;
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__ed-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__ed-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__ed-kicker .sabeon-product-modal__stock {
	text-transform: uppercase;
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__ed-head .sabeon-product-modal__title {
	margin: 0;
	padding: 0;
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: normal;
}

.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__ed-head .sabeon-product-modal__price {
	align-self: flex-start;
	padding-block-end: 8px;
	border-block-end: 3px solid var(--sp-accent, #f59e0b);
	font-size: calc(var(--sp-price-size, 15px) * 1.7);
	font-weight: 700;
	line-height: 1.2;
}

/* The short description reads as a lead paragraph. */
.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__info--ed > .sabeon-product-modal__text:not(.sabeon-product-modal__text--full) {
	padding-inline-start: 16px;
	border-inline-start: 3px solid var(--sp-border, #e2e8f0);
	font-size: 1.1em;
	line-height: 1.75;
}

.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__dialog {
	height: min(var(--sp-modal-h, 90vh), 700px);
}

@supports (height: 1dvh) {
	.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__dialog {
		height: min(var(--sp-modal-h-dv, 90dvh), 700px);
	}
}

.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__layout--editorial {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 0;
	align-items: start;
	min-height: 100%;
	padding: 0;
}

.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__layout--editorial.sabeon-product-modal__layout--single {
	grid-template-columns: minmax(0, 1fr);
}

.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__layout--editorial.sabeon-product-modal__layout--single .sabeon-product-modal__info--ed {
	width: 100%;
	max-width: 680px;
	margin-inline: auto;
}

/* The image column stays in view while the information column scrolls. */
.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__layout--editorial .sabeon-product-modal__media {
	position: sticky;
	inset-block-start: 0;
	height: min(var(--sp-modal-h, 90vh), 700px);
}

@supports (height: 1dvh) {
	.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__layout--editorial .sabeon-product-modal__media {
		height: min(var(--sp-modal-h-dv, 90dvh), 700px);
	}
}

.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__skeleton {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 0;
	padding: 0;
}

.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__skeleton .sabeon-product-modal__sk--image {
	aspect-ratio: auto;
	height: min(var(--sp-modal-h, 90vh), 700px);
	border-radius: 0;
}

.sabeon-product-modal[data-mstyle='editorial']:not([data-layout='mobile']) .sabeon-product-modal__skeleton .sabeon-product-modal__info {
	padding: 60px 44px 40px;
}

/* ---- Mobile bottom sheet (single column, buy area stays reachable) ---- */
.sabeon-product-modal[data-mstyle='split'][data-layout='mobile'] .sabeon-product-modal__info--col,
.sabeon-product-modal[data-mstyle='compact'][data-layout='mobile'] .sabeon-product-modal__info--col {
	gap: 0;
	padding: 0;
}

.sabeon-product-modal[data-mstyle='split'][data-layout='mobile'] .sabeon-product-modal__col-head,
.sabeon-product-modal[data-mstyle='compact'][data-layout='mobile'] .sabeon-product-modal__col-head {
	padding: 16px 16px 8px;
}

.sabeon-product-modal[data-mstyle='split'][data-layout='mobile'] .sabeon-product-modal__col-head .sabeon-product-modal__title,
.sabeon-product-modal[data-mstyle='compact'][data-layout='mobile'] .sabeon-product-modal__col-head .sabeon-product-modal__title {
	font-size: 22px;
	padding-inline: 0 44px;
}

.sabeon-product-modal[data-mstyle='split'][data-layout='mobile'] .sabeon-product-modal__col-scroll,
.sabeon-product-modal[data-mstyle='compact'][data-layout='mobile'] .sabeon-product-modal__col-scroll {
	gap: 14px;
	padding: 12px 16px 20px;
	border-block-start: 1px solid var(--sp-border, #e2e8f0);
}

.sabeon-product-modal[data-mstyle='split'][data-layout='mobile'] .sabeon-product-modal__col-buy,
.sabeon-product-modal[data-mstyle='compact'][data-layout='mobile'] .sabeon-product-modal__col-buy {
	position: sticky;
	inset-block-end: 0;
	z-index: 4;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid var(--sp-border, #e2e8f0);
	box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
}

.sabeon-product-modal[data-mstyle='split'][data-layout='mobile'] .sabeon-product-modal__layout--nobuy .sabeon-product-modal__col-scroll,
.sabeon-product-modal[data-mstyle='compact'][data-layout='mobile'] .sabeon-product-modal__layout--nobuy .sabeon-product-modal__col-scroll {
	padding-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
}

.sabeon-product-modal[data-mstyle='split'][data-layout='mobile'] .sabeon-product-modal__col-buy .sabeon-product-modal__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.sabeon-product-modal[data-mstyle='split'][data-layout='mobile'] .sabeon-product-modal__stage {
	aspect-ratio: 4 / 3;
}

.sabeon-product-modal[data-mstyle='split'][data-layout='mobile'] .sabeon-product-modal__media {
	padding: 0;
}

.sabeon-product-modal[data-mstyle='compact'][data-layout='mobile'] .sabeon-product-modal__media {
	padding: 12px 16px 0;
}

.sabeon-product-modal[data-mstyle='compact'][data-layout='mobile'] .sabeon-product-modal__stage {
	aspect-ratio: 16 / 10;
	border-radius: var(--sp-image-radius, 12px);
}

.sabeon-product-modal[data-mstyle='compact'][data-layout='mobile'] .sabeon-product-modal__col-head .sabeon-product-modal__price {
	font-size: calc(var(--sp-price-size, 15px) * 1.3);
}

.sabeon-product-modal[data-mstyle='editorial'][data-layout='mobile'] .sabeon-product-modal__media {
	height: auto;
	aspect-ratio: 4 / 3;
}

.sabeon-product-modal[data-mstyle='editorial'][data-layout='mobile'] .sabeon-product-modal__info--ed {
	gap: 16px;
	padding: 22px 16px 0;
}

.sabeon-product-modal[data-mstyle='editorial'][data-layout='mobile'] .sabeon-product-modal__ed-head .sabeon-product-modal__title {
	font-size: 26px;
}

.sabeon-product-modal[data-mstyle='editorial'][data-layout='mobile'] .sabeon-product-modal__thumbs {
	inset-block-end: 10px;
	inset-inline-start: 10px;
}

.sabeon-product-modal[data-mstyle='editorial'][data-layout='mobile'] .sabeon-product-modal__info--ed > :last-child:not(.sabeon-product-modal__actions) {
	padding-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.sabeon-product-modal[data-mstyle='split'] .sabeon-product-modal__dialog,
	.sabeon-product-modal[data-mstyle='compact'] .sabeon-product-modal__dialog,
	.sabeon-product-modal[data-mstyle='editorial'] .sabeon-product-modal__dialog {
		transition-duration: 0.01ms;
	}
}

/* Admin preview: keep the new layouts inside the preview panel height. */
.sabeon-product-modal--static[data-mstyle='split'][data-layout='desktop'] .sabeon-product-modal__dialog,
.sabeon-product-modal--static[data-mstyle='compact'][data-layout='desktop'] .sabeon-product-modal__dialog,
.sabeon-product-modal--static[data-mstyle='editorial'][data-layout='desktop'] .sabeon-product-modal__dialog {
	max-height: 640px;
}

.sabeon-product-modal--static[data-mstyle='editorial'][data-layout='desktop'] .sabeon-product-modal__dialog {
	height: 640px;
}

.sabeon-product-modal--static[data-mstyle='editorial'][data-layout='desktop'] .sabeon-product-modal__layout--editorial .sabeon-product-modal__media {
	height: 640px;
}