/**
 * PrintBox editor styling.
 *
 * Deliberately minimal: the button reuses the theme's .button class so the
 * three designers on kviktisk.cz look the same, and only the editor mount
 * point needs rules of its own.
 */

.kvtpb-design-button {
	margin-bottom: 1em;
}

.kvtpb-editor-mount {
	display: none;
}

/*
 * The editor opens as a block inside the product page. This is not a detail:
 * PrintBox decides when it wants the whole screen and takes it itself, so
 * until it does, the shop around the editor has to stay visible. Making this
 * rule a fullscreen overlay was the defect — a visitor who clicked "Design it"
 * lost the header, the footer and the breadcrumb while PrintBox was still
 * showing its own landing step, and the shop simply looked like a different
 * website.
 *
 * min-height rather than height: the SDK renders into #app, which needs a real
 * box, and 70vh is enough for the editor to lay out without pinning the page.
 */
.kvtpb-editor-mount.is-open {
	display: block;
	position: relative;
	min-height: 70vh;
	margin-bottom: 1em;
	background: #fff;
}

/*
 * There is deliberately NO fullscreen rule here.
 *
 * Hiding the shop is the SDK's job and this stylesheet must not do it in
 * parallel. Measured in the bundle 2026.08.28 and confirmed on the replica
 * on 2026-09-22: EcommerceVisibilityModule walks the ancestors of #app and
 * hides their SIBLINGS with display:none — never an ancestor, which is why
 * the mount survives wherever the theme puts it — stores
 * each previous value in a data attribute, puts them all back on
 * showEcommerce, and skips every id in window.printbox.doNotHideIds. It also
 * fixes #app to the viewport itself and sets body.style.overflow, so the
 * fullscreen surface needs no rule of ours either.
 *
 * What used to be here was inherited visibility on <body>, and it was wrong
 * in a way no allowlist could repair: that property is inherited and beats
 * position:fixed, so it also put out the Complianz cookie bar, the sticky
 * header, the chat widget and every Elementor popup, with no way to exempt
 * any of them.
 */

/*
 * The failure state is inline, not a fullscreen overlay: an error box covering
 * the whole viewport would have no way out, because the close button lives
 * inside the editor the visitor could not open.
 */
.kvtpb-editor-mount.is-error {
	display: block;
	margin-bottom: 1em;
	padding: 1em;
	border: 1px solid #d63638;
	border-radius: 3px;
	background: #fcf0f1;
}

.kvtpb-editor-message {
	margin: 0 0 0.75em;
}

/*
 * The loading state is inline too, and neutral: the visitor pressed "Design
 * it" and has to see, not only guess from a greyed-out button, that something
 * is happening. The text carries role="status", so a screen reader says it.
 */
.kvtpb-editor-mount.is-loading {
	display: block;
	margin-bottom: 1em;
	padding: 1em;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	background: #f6f7f7;
}

.kvtpb-editor-mount.is-loading .kvtpb-editor-message {
	margin: 0;
}

/*
 * The consent state is inline for the same reason the error state is: the
 * visitor pressed a button and has to see an answer where they pressed it.
 * Neutral rather than red — nothing failed, the shop is simply waiting for a
 * cookie answer, and a red box would read as a broken designer.
 */
.kvtpb-editor-mount.is-consent {
	display: block;
	margin-bottom: 1em;
	padding: 1em;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	background: #f6f7f7;
}

/*
 * The SDK renders the editor into #app itself, so there is no child of ours to
 * size — but the element it renders into has to be a real box, or the editor
 * lays out inside a zero-height container and the page stays blank with no
 * error anywhere. The mount has to be a real box too, which is what .is-open
 * above provides; .is-ready is only set once the SDK reports the project
 * loaded, and carries no styling on purpose — an editor that is up looks like
 * whatever PrintBox drew, not like something this stylesheet decided.
 *
 * #app itself cannot be avoided: the loader's getAppContainer() is a
 * hardcoded document.getElementById("app"), with no selector option
 * anywhere in the bundle, so the plugin has to emit that id. What
 * css-anti-conflicts-guidelines forbids is targeting it generically — #app
 * is one of the commonest ids on the web, and on a page also running
 * Elementor, JupiterX or another plugin the risk of hitting a foreign one
 * is real. The left side of this rule is therefore #kvtpb-editor-root, the
 * id this plugin mints and nothing else on the page can carry — not the
 * .kvtpb-editor-mount class alone, which is not guaranteed unique the way
 * an id is. Only an #app that is a direct child of THAT id can ever match.
 */
#kvtpb-editor-root.is-open > #app {
	width: 100%;
	height: 100%;
}

.kvtpb-cart-thumbnail img {
	max-width: 80px;
	height: auto;
}