/*
 * Pixsop single-product mobile reference layout v0.9.14.
 * Desktop remains controlled by product-customizer.css.
 */

@media (max-width: 620px) {
	/* Let the customizer touch the mobile viewport edges, as in the reference. */
	.pixsop-product-page > .bera-software-container {
		width: 100%;
		max-width: none;
		padding-inline: 0;
	}

	.pixsop-customizer {
		width: 100%;
		border-inline: 0;
		border-radius: 0;
	}

	/*
	 * Portrait reaches roughly the same visual scale as the right-hand
	 * reference. JS reads this box and fits portrait, landscape and square
	 * proportionally without stretching any frame.
	 */
	.pixsop-customizer__stage {
		height: clamp(330px, 86vw, 390px) !important;
		min-height: 330px !important;
		padding: 0 !important;
		background: #0d0e0b;
		box-shadow: 0 9px 22px rgba(25, 20, 8, .18);
	}

	.pixsop-frame-scene {
		height: 100% !important;
		min-height: 0 !important;
		padding: 4px 2px !important;
		box-sizing: border-box;
		overflow: hidden;
	}

	.pixsop-frame-scene .pixsop-photo-frame {
		flex: none;
		min-width: 0;
		max-width: none !important;
		max-height: none !important;
		box-sizing: border-box;
		margin-inline: auto;
		transform: none;
	}

	.pixsop-frame-scene .pixsop-photo-frame__matte,
	.pixsop-frame-scene .pixsop-canvas-wrap {
		min-width: 0;
		min-height: 0;
		box-sizing: border-box;
	}

	.pixsop-frame-scene .pixsop-canvas-wrap canvas {
		display: block;
		width: 100% !important;
		height: 100% !important;
		max-width: none;
		max-height: none;
	}

	/* Keep custom mockups full and centred without exposing white side space. */
	.pixsop-customizer.has-custom-mockup .pixsop-canvas-wrap canvas {
		transform: scale(1.035);
		transform-origin: center;
	}

	/* Compact content rhythm beneath the larger preview. */
	.pixsop-customizer__panel {
		padding: 12px 14px 22px;
	}

	.pixsop-customizer__panel > .pixsop-kicker {
		font-size: .52rem;
		letter-spacing: .15em;
	}

	.pixsop-customizer__panel h1 {
		margin: 3px 0 4px;
		font-size: clamp(1.42rem, 6.4vw, 1.68rem);
		line-height: 1.04;
	}

	.pixsop-product-price {
		margin: 4px 0;
	}

	.pixsop-product-price strong {
		font-size: 1.25rem;
	}

	.pixsop-product-price > span {
		margin-top: 2px;
	}

	/* These headings were intentionally removed in the approved mobile UI. */
	.pixsop-option-title,
	.pixsop-message-label {
		display: none !important;
	}

	.pixsop-option-group {
		margin-top: 8px;
	}

	.pixsop-orientation-options,
	.pixsop-size-options {
		gap: 6px;
	}

	.pixsop-orientation-option {
		min-height: 46px;
		padding: 7px 8px;
	}

	.pixsop-size-option {
		min-height: 42px;
		padding: 7px 7px;
	}

	.pixsop-photo-picker {
		min-height: 48px;
		padding: 7px 8px;
	}

	.pixsop-photo-picker__icon {
		flex-basis: 36px;
		height: 36px;
	}

	.pixsop-customizer__assurance {
		gap: 5px;
		margin: 9px 0 7px;
	}

	.pixsop-add-design {
		min-height: 48px;
	}

	/* Fullscreen control at the marked bottom-right position. */
	.pixsop-preview-fullscreen-button {
		position: absolute;
		z-index: 12;
		right: 16px;
		bottom: 16px;
		display: grid !important;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid rgba(255, 202, 65, .76);
		border-radius: 14px;
		background: rgba(17, 18, 14, .9);
		color: #ffd154;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
		cursor: pointer;
		touch-action: manipulation;
	}

	.pixsop-preview-fullscreen-button svg {
		width: 23px;
		height: 23px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.pixsop-preview-fullscreen-button:active {
		transform: scale(.95);
	}
}

/* Hidden on desktop; the requested control is mobile-specific. */
.pixsop-preview-fullscreen-button {
	display: none;
}

.pixsop-preview-fullscreen[hidden] {
	display: none !important;
}

.pixsop-preview-fullscreen {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
	box-sizing: border-box;
	overflow: hidden;
	background: radial-gradient(circle at 50% 45%, #24261e 0, #0c0d0a 58%, #050604 100%);
	color: #fff;
}

.pixsop-preview-fullscreen:fullscreen,
.pixsop-preview-fullscreen:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: radial-gradient(circle at 50% 45%, #24261e 0, #0c0d0a 58%, #050604 100%);
}

.pixsop-preview-fullscreen__canvas-shell {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

.pixsop-preview-fullscreen__canvas-shell canvas {
	display: block;
	width: auto;
	height: auto;
	max-width: min(94vw, 1100px);
	max-height: calc(100dvh - 48px);
	object-fit: contain;
	box-shadow: 0 25px 70px rgba(0, 0, 0, .56);
}

.pixsop-preview-fullscreen__close {
	position: absolute;
	z-index: 2;
	top: max(14px, env(safe-area-inset-top));
	right: max(14px, env(safe-area-inset-right));
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0 0 3px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 50%;
	background: rgba(7, 8, 6, .78);
	color: #fff;
	font: 300 31px/1 Arial, sans-serif;
	box-shadow: 0 8px 25px rgba(0, 0, 0, .3);
	cursor: pointer;
}

.pixsop-preview-fullscreen__hint {
	position: absolute;
	left: 50%;
	bottom: max(14px, env(safe-area-inset-bottom));
	max-width: calc(100% - 110px);
	margin: 0;
	padding: 8px 12px;
	border: 1px solid rgba(255, 209, 84, .35);
	border-radius: 999px;
	background: rgba(8, 9, 7, .76);
	color: #f5d782;
	font-size: 11px;
	line-height: 1.35;
	text-align: center;
	transform: translateX(-50%);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

body.pixsop-preview-fullscreen-open {
	overflow: hidden !important;
	touch-action: none;
}

@media (orientation: landscape) and (max-height: 620px) {
	.pixsop-preview-fullscreen__canvas-shell canvas {
		max-width: calc(100vw - 48px);
		max-height: 94dvh;
	}

	.pixsop-preview-fullscreen__hint {
		display: none;
	}
}

@media (max-width: 380px) {
	.pixsop-customizer__stage {
		height: clamp(326px, 90vw, 344px) !important;
		min-height: 326px !important;
	}

	.pixsop-customizer__panel {
		padding-inline: 12px;
	}
}