/* Güse Personalizer — frontend configurator
   Visual identity matched to the Güse brand (Figma): cobalt blue + white +
   bold black type, light-grey surfaces, squared cards, ~6px radii, blue CTAs. */

.gpp-configurator {
	--gpp-blue: #1763cf;
	--gpp-blue-dark: #0f4aa8;
	--gpp-blue-soft: #e9f0fc;
	--gpp-ink: #111418;
	--gpp-muted: #5b626c;
	--gpp-paper: #ffffff;
	--gpp-surface: #f4f5f7;
	--gpp-line: #e2e6eb;
	margin: 1.75rem 0;
	padding: 1.6rem 1.6rem 1.4rem;
	background: var(--gpp-paper);
	border: 1px solid var(--gpp-line);
	border-radius: 10px;
	box-shadow: 0 18px 40px -30px rgba(16,38,76,.55);
	font-size: 15px;
	color: var(--gpp-ink);
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.gpp-title {
	display: inline-flex; align-items: center; gap: .6rem;
	margin: 0 0 1.1rem;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--gpp-ink);
}
.gpp-title::before {
	content: "PERSONALISIERBAR";
	font-size: .6rem; font-weight: 800; letter-spacing: .08em;
	color: #fff; background: var(--gpp-blue);
	padding: .28em .55em; border-radius: 4px;
}

.gpp-field { margin: 1.05rem 0; }
.gpp-label {
	display: block;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .02em;
	margin-bottom: .5rem;
}

/* Prominent quantity control */
.gpp-quantity { background: var(--gpp-surface); border: 1px solid var(--gpp-line); border-radius: 9px; padding: .8rem .9rem; }
.gpp-qty-control { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gpp-qty-step {
	width: 38px; height: 38px; border: 1.5px solid var(--gpp-line); background: #fff; color: var(--gpp-ink);
	border-radius: 8px; font-size: 1.25rem; line-height: 1; cursor: pointer; font-weight: 700;
}
.gpp-qty-step:hover { border-color: var(--gpp-blue); color: var(--gpp-blue); }
.gpp-qty-input { width: 5rem !important; text-align: center; font-size: 1.1rem !important; font-weight: 700; padding: .5rem !important; }
.gpp-qty-hint { font-size: .76rem; color: var(--gpp-muted); flex: 1 1 140px; }

/* Technique — benefit cards (B2C-friendly) */
.gpp-tech-options { display: flex; flex-wrap: wrap; gap: .7rem; }
.gpp-tech {
	position: relative; flex: 1 1 200px; min-width: 0;
	border: 1.5px solid var(--gpp-line); background: #fff;
	padding: .85rem .9rem; cursor: pointer; border-radius: 10px;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.gpp-tech:hover { border-color: #b9c6da; }
.gpp-tech:has( input:checked ) {
	border-color: var(--gpp-blue); background: var(--gpp-blue-soft);
	box-shadow: inset 0 0 0 1px var(--gpp-blue);
}
/* native radio visually hidden; selection shown via the card + a check dot */
.gpp-tech input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gpp-tech:has( input:focus-visible ) { outline: 2px solid var(--gpp-blue); outline-offset: 2px; }
.gpp-tech-card { display: flex; flex-direction: column; gap: .15rem; }
.gpp-tech-icon { font-size: 1.4rem; line-height: 1; }
.gpp-tech-name { font-weight: 800; font-size: 1rem; color: var(--gpp-ink); }
.gpp-tech:has( input:checked ) .gpp-tech-name { color: var(--gpp-blue-dark); }
.gpp-tech-name::after {
	content: ""; display: inline-block; width: 16px; height: 16px; margin-left: .4rem; vertical-align: -2px;
	border: 1.5px solid var(--gpp-line); border-radius: 50%; transition: .15s;
}
.gpp-tech:has( input:checked ) .gpp-tech-name::after {
	border-color: var(--gpp-blue); background: var(--gpp-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6.5 11.5L3 8l1.1-1.1 2.4 2.4 5-5L12.6 5.4z'/%3E%3C/svg%3E") center/13px no-repeat;
}
.gpp-tech-tag { font-size: .74rem; font-weight: 600; color: var(--gpp-muted); }
.gpp-tech-benefit { font-size: .8rem; line-height: 1.45; color: var(--gpp-muted); margin-top: .25rem; }
.gpp-tech-badge {
	position: absolute; top: -9px; right: .8rem;
	background: var(--gpp-blue); color: #fff; font-size: .62rem; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 20px;
}

/* Position cards */
.gpp-pos-card {
	border: 1px solid var(--gpp-line);
	background: #fff;
	margin: .7rem 0;
	border-radius: 9px;
	overflow: hidden;
}
.gpp-pos-card:has( .gpp-pos-active:checked ) { border-color: #c3d2ea; box-shadow: 0 6px 18px -14px rgba(23,99,207,.5); }
.gpp-pos-head {
	display: flex; align-items: center; gap: .65rem;
	padding: .8rem .95rem;
	cursor: pointer; font-weight: 700;
	background: var(--gpp-surface);
}
.gpp-pos-head small { color: var(--gpp-muted); font-weight: 500; }
.gpp-pos-head input { accent-color: var(--gpp-blue); width: 17px; height: 17px; }
.gpp-pos-body { padding: .9rem .95rem 1rem; }
.gpp-row { display: flex; gap: .85rem; flex-wrap: wrap; align-items: flex-end; margin: .6rem 0; }
.gpp-row label { display: flex; flex-direction: column; font-size: .78rem; font-weight: 600; gap: .3rem; flex: 0 0 auto; color: var(--gpp-muted); }
.gpp-row label.gpp-grow { flex: 1 1 180px; }

.gpp-configurator input[type="text"],
.gpp-configurator input[type="number"],
.gpp-configurator select,
.gpp-configurator textarea {
	border: 1.5px solid var(--gpp-line);
	background: #fff;
	padding: .5rem .6rem;
	border-radius: 7px;
	font: inherit;
	color: var(--gpp-ink);
	font-weight: 500;
}
.gpp-configurator input[type="number"] { width: 6.5rem; }
.gpp-configurator input:focus, .gpp-configurator select:focus, .gpp-configurator textarea:focus {
	outline: none; border-color: var(--gpp-blue); box-shadow: 0 0 0 3px rgba(23,99,207,.15);
}

.gpp-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; }
.gpp-check input, .gpp-configurator input[type="checkbox"] { accent-color: var(--gpp-blue); }

/* Spot-color swatches */
.gpp-colorpick { margin: .75rem 0; }
.gpp-colorpick-label { font-size: .8rem; font-weight: 700; margin-bottom: .4rem; }
.gpp-color-count { color: var(--gpp-blue); font-weight: 800; }
.gpp-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.gpp-swatch {
	width: 28px; height: 28px; border-radius: 50%; cursor: pointer; padding: 0;
	border: 1px solid rgba(0,0,0,.2); box-shadow: inset 0 0 0 2px #fff;
	transition: transform .1s, box-shadow .1s;
}
.gpp-swatch:hover { transform: scale(1.12); }
.gpp-swatch.is-on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--gpp-blue); transform: scale(1.12); }
.gpp-color-names { display: flex; flex-wrap: wrap; gap: .4rem .85rem; margin-top: .45rem; }
.gpp-cn { font-size: .75rem; display: inline-flex; align-items: center; gap: .3rem; color: var(--gpp-ink); font-weight: 500; }
.gpp-cn i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); display: inline-block; }

/* Logo */
.gpp-logo-row { margin-top: .55rem; border-top: 1px solid var(--gpp-line); padding-top: .7rem; }
.gpp-logo-wrap { margin-top: .55rem; }
.gpp-logo-notice {
	font-size: .76rem; line-height: 1.5; color: var(--gpp-muted);
	background: #fff8e8; border-left: 3px solid #e3a008; padding: .55rem .7rem; margin: .55rem 0 0; border-radius: 0 6px 6px 0;
}
.gpp-logo-status { font-size: .8rem; margin: .4rem 0; font-weight: 600; }
.gpp-logo-status.gpp-ok { color: #0a7d2c; }
.gpp-logo-status.gpp-error { color: #b3261e; }
/* #1 — live effective-DPI readout */
.gpp-logo-dpi { font-size: .78rem; font-weight: 700; margin: .1rem 0 .3rem; line-height: 1.4; }
.gpp-logo-dpi.gpp-ok { color: #0a7d2c; }
.gpp-logo-dpi.gpp-warn { color: #b26a00; }
.gpp-logo-status .gpp-warn, .gpp-warn { color: #b26a00; font-size: .76rem; font-weight: 500; }
.gpp-loading { color: var(--gpp-muted); }

/* Personalization names */
.gpp-personalization { border-top: 1px solid var(--gpp-line); padding-top: 1rem; }
.gpp-hint { font-size: .78rem; color: var(--gpp-muted); margin: .4rem 0; }
#gpp-names { width: 100%; resize: vertical; }
.gpp-names-count { font-size: .78rem; font-weight: 700; }
.gpp-names-count.gpp-ok { color: #0a7d2c; }
.gpp-names-count.gpp-warn { color: #b26a00; }

/* Summary: preview + price */
.gpp-summary { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.1rem; margin-top: 1.2rem; align-items: start; }
@media (max-width: 640px) { .gpp-summary { grid-template-columns: 1fr; } }

.gpp-prev-pos { margin-bottom: .75rem; }
.gpp-prev-caption { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gpp-muted); margin-bottom: .3rem; font-weight: 700; }
.gpp-prev-stage {
	position: relative; width: 100%; height: 0; padding-bottom: 100%;
	background-color: var(--gpp-surface); background-size: contain; background-position: center; background-repeat: no-repeat;
	border: 1px solid var(--gpp-line); border-radius: 9px; overflow: hidden;
}
/* Zoom viewport clips the scaled stage to a fixed box; stage is transformed inside. */
.gpp-prev-viewport { position: relative; overflow: hidden; border-radius: 9px; }
.gpp-prev-viewport.is-zoomed { cursor: grab; }
.gpp-prev-viewport.is-zoomed .gpp-prev-stage { touch-action: none; }
.gpp-prev-viewport.is-panning { cursor: grabbing; }
.gpp-zoombar { display: flex; align-items: center; gap: .3rem; justify-content: flex-end; margin-top: .4rem; }
.gpp-zoom-btn {
	width: 28px; height: 28px; border: 1px solid var(--gpp-line); background: #fff;
	border-radius: 6px; font-size: 1rem; line-height: 1; cursor: pointer;
	color: var(--gpp-ink); font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.gpp-zoom-btn:hover { background: var(--gpp-surface); }
.gpp-zoom-label { min-width: 3.2em; text-align: center; font-size: .76rem; font-weight: 700; color: var(--gpp-muted); }
/* Laser is monochrome: the MOTIF is single-colour (handled per-object), but the
   product itself keeps its real colour — don't grey the whole image (misleading). */
/* Printable zone (only this area is engravable/printable) */
.gpp-prev-zone {
	position: absolute; box-sizing: border-box;
	border: 1.5px solid rgba(23,99,207,.9);
	box-shadow: 0 0 0 9999px rgba(17,20,24,.45); /* dims everything outside the zone */
	border-radius: 3px; pointer-events: none; z-index: 1;
}
.gpp-prev-zone-label {
	position: absolute; top: -16px; left: 0; font-size: .56rem; font-weight: 800;
	letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--gpp-blue);
	padding: .1rem .35rem; border-radius: 3px; white-space: nowrap;
}
.gpp-prev-area {
	position: absolute; box-sizing: border-box; z-index: 2;
	display: flex; align-items: center; justify-content: center; gap: .3rem;
	outline: 1.5px dashed rgba(23,99,207,.9); outline-offset: 1px; text-align: center;
	overflow: visible;
}
/* #10: lines stack; each line renders on its own axis with NO automatic wrap. */
.gpp-prev-text { font-size: clamp( 11px, 3.4vw, 24px ); line-height: 1.08; display: flex; flex-direction: column; align-items: center; }
.gpp-prev-line { white-space: nowrap; }
.gpp-prev-logo { max-height: 100%; max-width: 100%; object-fit: contain; }
/* #6: Laser is monochrome WITHOUT grayscale — threshold logos to 1-bit black/white. */
.gpp-mono .gpp-prev-logo { filter: grayscale(1) contrast(1000%); }
.gpp-prev-logo-ph { border: 1px dashed #aab4c4; color: var(--gpp-muted); font-size: .65rem; padding: .25rem .5rem; border-radius: 4px; }
.gpp-prev-vector {
	border: 1px solid var(--gpp-line); background: #fff; color: var(--gpp-ink);
	font-size: .6rem; font-weight: 700; padding: .3rem .45rem; border-radius: 5px;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gpp-price-box {
	background: var(--gpp-blue); color: #fff;
	padding: 1.1rem 1.2rem; border-radius: 10px;
	box-shadow: 0 14px 30px -18px rgba(23,99,207,.7);
}
.gpp-price-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .2rem 0; color: #dbe7fb; }
.gpp-total-row {
	font-size: 1.4rem; font-weight: 800; margin-top: .55rem; color: #fff;
	border-top: 1px solid rgba(255,255,255,.28); padding-top: .6rem;
}
.gpp-total-value { color: #fff; }
.gpp-tier-note {
	margin-top: .65rem; font-size: .76rem; color: #fff; font-weight: 600;
	background: rgba(255,255,255,.16); padding: .42rem .6rem; border-radius: 6px;
}

/* Delivery time (per article, weeks) */
.gpp-delivery {
	display: flex; align-items: center; gap: .4rem;
	margin-top: .6rem; font-size: .82rem; font-weight: 700; color: var(--gpp-ink);
	background: var(--gpp-surface); border: 1px solid var(--gpp-line);
	padding: .5rem .7rem; border-radius: 8px;
}
.gpp-delivery-icon { font-size: 1rem; line-height: 1; }

.gpp-errors {
	margin-top: .9rem; background: #fdecea; border: 1px solid #f3b4ad; color: #8c1d18;
	padding: .65rem .8rem; border-radius: 7px; font-size: .82rem; font-weight: 500;
}

/* Buttons inside the configurator */
.gpp-configurator .button, .gpp-configurator button.button {
	background: var(--gpp-blue); border-color: var(--gpp-blue); color: #fff;
	border-radius: 7px; font-weight: 700;
}
.gpp-configurator .button:hover { background: var(--gpp-blue-dark); border-color: var(--gpp-blue-dark); color: #fff; }

/* Interactive motif editor */
.gpp-prev-area { cursor: grab; touch-action: none; }
.gpp-prev-area.is-grab { cursor: grabbing; }
.gpp-prev-area:hover { outline-color: var(--gpp-blue); }
.gpp-prev-handle {
	position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
	background: var(--gpp-blue); border: 2px solid #fff; border-radius: 50%;
	cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0,0,0,.4); touch-action: none;
}
.gpp-prev-badge {
	position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
	font-size: .62rem; font-weight: 700; color: #fff; background: var(--gpp-blue);
	padding: .1rem .35rem; border-radius: 3px; white-space: nowrap; pointer-events: none;
}

/* Base/Veredelung rows */
.gpp-base-row, .gpp-verel-row, .gpp-unit-row { color: #dbe7fb; }
.gpp-unit-row { font-weight: 700; color: #fff; }

/* Quantity tier table */
.gpp-staffel { margin-top: 1rem; border: 1px solid var(--gpp-line); border-radius: 8px; overflow: hidden; }
.gpp-staffel-title { background: var(--gpp-surface); padding: .5rem .8rem; font-weight: 700; font-size: .8rem; }
.gpp-staffel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.gpp-staffel-list li { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .8rem; border-top: 1px solid var(--gpp-line); font-size: .8rem; }
.gpp-staffel-list strong { color: var(--gpp-blue); }

/* Warnings box */
.gpp-warnings {
	margin-top: .8rem; background: #fff8e8; border: 1px solid #f3d488; color: #8a6100;
	padding: .6rem .8rem; border-radius: 7px; font-size: .8rem; font-weight: 500; line-height: 1.5;
}

/* Names CSV/Excel upload */
.gpp-names-upload { display: flex; align-items: center; gap: .7rem; margin: .5rem 0; flex-wrap: wrap; }
.gpp-names-upload-btn {
	display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
	background: #fff; border: 1.5px dashed var(--gpp-blue); color: var(--gpp-blue);
	padding: .45rem .8rem; border-radius: 7px; font-weight: 700; font-size: .82rem;
}
.gpp-names-upload-btn:hover { background: var(--gpp-blue-soft); }
.gpp-names-file-status { font-size: .8rem; font-weight: 600; }
.gpp-names-file-status.gpp-ok { color: #0a7d2c; }
.gpp-names-file-status.gpp-error { color: #b3261e; }

/* P0 #2 — Text-overflow warning in the visualizer */
.gpp-prev-overflow {
	font-size: .7rem; font-weight: 600; color: #8a6100;
	background: #fff8e8; border: 1px solid #f3d488;
	padding: .2rem .45rem; border-radius: 5px; margin-bottom: .3rem;
}
/* Overflow is signalled by the outline + the note only — never by recolouring
   the motif (that would override the chosen print colour). */
.gpp-prev-area.is-overflow { outline-color: #e0a100; }

/* P0 #3 — Unified price: the configurator total is the single source of truth,
   so the theme's native single-product price is hidden on configurable pages.
   The configurator uses .gpp-* classes, so its own amounts stay visible. */
.gpp-personalizer-active p.price,
.gpp-personalizer-active .summary > .price,
.gpp-personalizer-active .entry-summary > .price,
.gpp-personalizer-active .elementor-widget-woocommerce-product-price,
.gpp-personalizer-active .elementor-widget-wc-product-price,
.gpp-personalizer-active .woocommerce-variation-price { display: none !important; }

/* ============================================================
   P1 — Stepped section layout + sticky preview rail
   The configurator usually lives inside a NARROW product-summary column,
   so the two-column split is driven by the configurator's OWN width via a
   container query — NOT the viewport (a viewport media query would wrongly
   keep 2 columns inside a 547px column on a wide screen). Default = 1 column.
   ============================================================ */
.gpp-configurator { container-type: inline-size; container-name: gpp; }

.gpp-layout {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin-top: 1rem;
}
.gpp-rail .gpp-summary { display: block; margin-top: 0; }
.gpp-rail .gpp-preview { margin-bottom: 1rem; }

/* Two columns only when the configurator itself is wide enough for both. */
@container gpp (min-width: 760px) {
	.gpp-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
		align-items: start;
	}
	.gpp-rail { position: sticky; top: 1rem; }
}
/* In one column, flatten the rail so its parts can interleave with the steps:
   Preview on top (live feedback) → controls → price + proof (review) → tiers,
   ending right before the WooCommerce add-to-cart button. */
@container gpp (max-width: 759.98px) {
	.gpp-rail, .gpp-rail .gpp-summary { display: contents; }
	.gpp-preview   { order: -2; margin-bottom: 1rem; }
	.gpp-steps     { order: -1; }
	.gpp-price-box { order: 1; margin-top: 1rem; }
	.gpp-proof     { order: 2; }
	.gpp-staffel   { order: 3; }
}

/* Numbered steps via CSS counters (hidden steps don't count). */
.gpp-steps { counter-reset: gpp-step; display: flex; flex-direction: column; gap: 1rem; }
.gpp-step:not([hidden]) { counter-increment: gpp-step; }
.gpp-step { border: 1px solid var(--gpp-line); border-radius: 10px; background: var(--gpp-paper); }
.gpp-step-head {
	display: flex; align-items: center; gap: .7rem;
	background: var(--gpp-surface); padding: .7rem .9rem; border-bottom: 1px solid var(--gpp-line);
	border-radius: 10px 10px 0 0;
}
.gpp-step-head::before {
	content: counter(gpp-step);
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.7rem; height: 1.7rem; border-radius: 50%;
	background: var(--gpp-blue); color: #fff; font-size: .85rem; font-weight: 800; flex: 0 0 auto;
}
.gpp-step-heading { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.gpp-step-title { font-weight: 800; font-size: 1rem; color: var(--gpp-ink); }
.gpp-step-sub { font-size: .76rem; font-weight: 500; color: var(--gpp-muted); }
.gpp-step-body { padding: .95rem; }
.gpp-step-body > .gpp-field:first-child { margin-top: 0; }
.gpp-step .gpp-pos-card:first-child { margin-top: 0; }

/* Relocated WooCommerce variation table — rows as label + full-width control */
.gpp-variations-host .variations { margin: 0; width: 100%; border: 0; }
.gpp-variations-host .variations tbody { display: flex; flex-direction: column; gap: .6rem; }
.gpp-variations-host .variations tr { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.gpp-variations-host .variations th,
.gpp-variations-host .variations td { padding: 0; border: 0; background: none; text-align: left; }
.gpp-variations-host .variations th.label { flex: 0 0 auto; font-weight: 700; font-size: .85rem; color: var(--gpp-ink); }
.gpp-variations-host .variations td.value { flex: 1 1 220px; min-width: 180px; }
.gpp-variations-host .variations select {
	width: 100%; box-sizing: border-box; min-height: 44px; line-height: 1.3;
	padding: .55rem .8rem; border: 1.5px solid var(--gpp-line); border-radius: 8px;
	background: #fff; font-size: .9rem; color: var(--gpp-ink); appearance: auto;
}
.gpp-variations-host .reset_variations { font-size: .78rem; margin-left: .2rem; }
/* native select hidden once pills are rendered (kept for WC) */
.gpp-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* Shopify-style variant swatches / pills */
.gpp-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.gpp-pill {
	display: inline-flex; align-items: center; gap: .45rem;
	border: 1.5px solid var(--gpp-line); background: #fff; color: var(--gpp-ink);
	padding: .5rem .85rem; border-radius: 9px; cursor: pointer;
	font-weight: 600; font-size: .85rem; min-height: 44px; line-height: 1.2;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.gpp-pill:hover { border-color: #b9c6da; }
.gpp-pill.is-on { border-color: var(--gpp-blue); background: var(--gpp-blue-soft); box-shadow: inset 0 0 0 1px var(--gpp-blue); color: var(--gpp-blue-dark); }
.gpp-pill-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); display: inline-block; flex: 0 0 auto; }

/* The configurator now lives in a modal; hide the native WC qty + add-to-cart
   on the page (the modal's buy bar proxies the real button). */
.gpp-personalizer-active form.cart > .quantity,
.gpp-personalizer-active form.cart .woocommerce-variation-add-to-cart .quantity,
.gpp-personalizer-active form.cart .single_add_to_cart_button { display: none !important; }

/* ============================================================
   Launcher button (opens the modal)
   ============================================================ */
.gpp-launch-wrap { margin: 1.2rem 0; }
.gpp-launch {
	display: flex !important; flex-direction: column; align-items: center; gap: .3rem;
	width: 100%; cursor: pointer; text-align: center !important;
	background: #1763cf !important; color: #fff !important; border: none !important; border-radius: 12px; padding: 1.1rem 1.2rem;
	box-shadow: 0 16px 34px -18px rgba(23,99,207,.85);
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	transition: background .15s, transform .1s;
}
.gpp-launch:hover { background: #0f4aa8 !important; }
.gpp-launch:active { transform: translateY(1px); }
.gpp-launch-icon { font-size: 1.7rem; line-height: 1; }
.gpp-launch-text { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.gpp-launch-text strong { font-size: 1.12rem; font-weight: 800; color: #fff; }
.gpp-launch-text small { font-size: .78rem; opacity: .9; }
.gpp-launch-price { display: inline-flex; align-items: baseline; gap: .35rem; margin-top: .35rem;
	background: rgba(255,255,255,.16); padding: .2rem .7rem; border-radius: 20px; }
.gpp-launch-price small { font-size: .68rem; opacity: .9; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.gpp-launch-price strong { font-size: 1rem; font-weight: 800; color: #fff; }
.gpp-launch-price .woocommerce-Price-amount { color: #fff; }
.gpp-launch-go { display: none; }

/* ============================================================
   Modal (popup) — roomy configuration space
   ============================================================ */
body.gpp-modal-open { overflow: hidden; }
.gpp-modal { position: fixed; inset: 0; z-index: 100000; }
.gpp-modal[hidden] { display: none; }
.gpp-modal-backdrop { position: absolute; inset: 0; background: rgba(10,18,30,.55); backdrop-filter: blur(2px); }
.gpp-modal-panel {
	position: relative; z-index: 1; margin: 3vh auto; width: min(1120px, 94vw); max-height: 94vh;
	background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
}
.gpp-modal-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: .85rem 1.2rem; border-bottom: 1px solid var(--gpp-line); flex: 0 0 auto;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.gpp-modal-title { font-weight: 800; font-size: 1.05rem; color: #111418; }
.gpp-modal-close { border: none; background: #f0f1f3; width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #333; }
.gpp-modal-close:hover { background: #e2e6eb; }
/* configurator fills the panel; strip its standalone card chrome */
.gpp-modal .gpp-configurator {
	flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
	border: 0; border-radius: 0; box-shadow: none; margin: 0; max-height: none;
}
@media (max-width: 768px) {
	.gpp-modal-panel { margin: 0; width: 100vw; max-height: 100vh; height: 100dvh; border-radius: 0; }
}

/* Buy bar = sticky modal footer (always visible inside the modal) */
.gpp-buybar { display: none; }
.gpp-modal-panel .gpp-buybar {
	display: flex; position: sticky; bottom: 0; z-index: 5;
	align-items: center; gap: .8rem;
	background: #fff; border-top: 1px solid var(--gpp-line);
	padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
	box-shadow: 0 -10px 28px -18px rgba(0,0,0,.4);
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.gpp-buybar-info { display: flex; flex-direction: column; line-height: 1.15; flex: 0 0 auto; }
.gpp-buybar-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gpp-muted); font-weight: 800; }
.gpp-buybar-total { font-size: 1.18rem; font-weight: 800; color: var(--gpp-ink); white-space: nowrap; }
.gpp-buybar-btn {
	margin-left: auto; flex: 1 1 auto; max-width: 62%;
	background: #1763cf; color: #fff; border: none; border-radius: 11px;
	padding: .9rem 1rem; font-size: 1rem; font-weight: 800; cursor: pointer;
	box-shadow: 0 12px 26px -16px rgba(23,99,207,.9);
}
.gpp-buybar-btn:active { transform: translateY(1px); }
.gpp-buybar.is-disabled .gpp-buybar-btn { background: #9fb6da; box-shadow: none; }
.gpp-buybar.is-disabled .gpp-buybar-total { color: var(--gpp-muted); }

.gpp-flash { animation: gpp-flash 1.2s ease; }
@keyframes gpp-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(23,99,207,0); } 30% { box-shadow: 0 0 0 3px var(--gpp-blue); } }

/* ============================================================
   Multi-object editor (objects inside a print area)
   ============================================================ */
.gpp-objects { display: flex; flex-direction: column; gap: .7rem; }
.gpp-obj { border: 1px solid var(--gpp-line); border-radius: 8px; background: var(--gpp-surface); overflow: hidden; }
.gpp-obj-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: .35rem .55rem; border-bottom: 1px solid var(--gpp-line); background: #fff;
}
.gpp-obj-type {
	font-weight: 800; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--gpp-blue); background: var(--gpp-blue-soft); padding: .22rem .5rem; border-radius: 4px;
}
.gpp-obj-remove {
	border: none; background: none; font-size: 1.25rem; line-height: 1; cursor: pointer;
	color: var(--gpp-muted); width: 30px; height: 30px; border-radius: 6px;
}
.gpp-obj-remove:hover { background: #fdecea; color: #b3261e; }
.gpp-obj-body { padding: .65rem .7rem .75rem; }
.gpp-add-objects { display: flex; gap: .5rem; margin-top: .6rem; }
.gpp-add-obj { font-size: .8rem !important; padding: .42rem .85rem !important; }

.gpp-obj-colors { margin-top: .7rem; }
.gpp-color-name { font-weight: 500; }
.gpp-cn { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; }
.gpp-cn i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #0003; display: inline-block; }

/* Size row: number + range slider (P1 #5) */
.gpp-size-row input[type="range"] { width: 100%; accent-color: var(--gpp-blue); margin: .15rem 0; }
.gpp-size-row .gpp-w, .gpp-size-row .gpp-h { width: 4.5rem; }
.gpp-rot-row input[type="range"] { width: 100%; accent-color: var(--gpp-blue); margin: .15rem 0; }
.gpp-rot-row .gpp-rot { width: 4.5rem; }
.gpp-rot-reset { align-self: flex-end; }
.gpp-w-val, .gpp-h-val { color: var(--gpp-ink); font-weight: 800; }

/* ============================================================
   Mobile-first responsive + larger tap targets (P1 #7)
   ============================================================ */
/* Narrow context (phone OR narrow product column) — container-based so it also
   applies when the configurator sits in a cramped column on a wide screen. */
@container gpp (max-width: 520px) {
	.gpp-configurator { padding: 1.1rem 1rem; }
	.gpp-qty-step { width: 44px; height: 44px; font-size: 1.2rem; }
	.gpp-qty-input { width: 4.5rem !important; }
	.gpp-swatch { width: 30px; height: 30px; }
	.gpp-prev-handle { width: 20px; height: 20px; right: -10px; bottom: -10px; }
	.gpp-add-obj { flex: 1 1 auto; }
	.gpp-row label.gpp-grow { flex: 1 1 100%; }
	.gpp-tech { flex: 1 1 100%; }
}

/* ============================================================
   P2 #8 — A11y: object actions (duplicate) + keyboard focus
   ============================================================ */
.gpp-obj-actions { display: inline-flex; gap: .2rem; align-items: center; }
.gpp-obj-dup {
	border: none; background: none; cursor: pointer; color: var(--gpp-muted);
	width: 30px; height: 30px; border-radius: 6px; font-size: 1rem; line-height: 1;
}
.gpp-obj-dup:hover { background: var(--gpp-blue-soft); color: var(--gpp-blue); }
.gpp-prev-area:focus-visible { outline: 2px solid var(--gpp-blue); outline-offset: 2px; }
.gpp-configurator :focus-visible { outline: 2px solid var(--gpp-blue); outline-offset: 1px; }

/* ============================================================
   P2 #10 — Proof / configuration overview
   ============================================================ */
.gpp-proof {
	margin-top: 1rem; border: 1px solid var(--gpp-line); border-radius: 9px;
	background: var(--gpp-surface); padding: .85rem .95rem;
}
.gpp-proof-title { font-weight: 800; font-size: .9rem; margin-bottom: .5rem; color: var(--gpp-ink); }
.gpp-proof-tech { font-size: .82rem; font-weight: 700; color: var(--gpp-blue); margin-bottom: .5rem; }
.gpp-proof-area { margin-bottom: .55rem; }
.gpp-proof-area-name { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; color: var(--gpp-muted); }
.gpp-proof-area ul { list-style: none; margin: .25rem 0 0; padding: 0; }
.gpp-proof-area li { font-size: .82rem; padding: .15rem 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.gpp-proof-area li small { color: var(--gpp-muted); }
.gpp-proof-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; background: #fff; border: 1px solid var(--gpp-line); border-radius: 20px; padding: .1rem .45rem; }
.gpp-proof-chip i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #0003; display: inline-block; }
.gpp-proof-chip-missing { color: #b3261e; border-color: #f3b4ad; background: #fdecea; }
.gpp-proof-hint { font-size: .72rem; color: var(--gpp-muted); margin: .5rem 0 0; }

/* ============================================================
   #2 — Druckfarben-Vorauswahl (1–5-farbig), preislich gekoppelt
   ============================================================ */
.gpp-colorcount {
	margin: 0 0 1rem; padding: .85rem .9rem;
	background: var(--gpp-blue-soft); border: 1px solid #c3d6f2; border-radius: 10px;
}
.gpp-cc-title { font-weight: 800; font-size: .9rem; color: var(--gpp-ink); margin-bottom: .6rem; }
.gpp-cc-title small { font-weight: 600; color: var(--gpp-muted); }
.gpp-cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .5rem; }
.gpp-cc-btn {
	display: flex; flex-direction: column; align-items: center; gap: .2rem;
	border: 1.5px solid var(--gpp-line); background: #fff; color: var(--gpp-ink);
	border-radius: 9px; padding: .6rem .4rem; cursor: pointer; min-height: 58px; justify-content: center;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.gpp-cc-btn:hover { border-color: #9db8e2; }
.gpp-cc-btn.is-on { border-color: var(--gpp-blue); background: #fff; box-shadow: inset 0 0 0 1.5px var(--gpp-blue); }
.gpp-cc-n { font-weight: 800; font-size: .9rem; }
.gpp-cc-btn.is-on .gpp-cc-n { color: var(--gpp-blue-dark); }
.gpp-cc-price { font-size: .68rem; color: var(--gpp-muted); font-weight: 600; text-align: center; line-height: 1.2; }
.gpp-cc-usage { margin-top: .55rem; min-height: 0; }
.gpp-cc-warn { font-size: .76rem; font-weight: 700; color: #b26a00; }

/* #10 — 4 line inputs per text object */
.gpp-textlines-field { display: flex; flex-direction: column; gap: .3rem; }
.gpp-textlines-label { font-size: .78rem; font-weight: 600; color: var(--gpp-muted); }
.gpp-textlines-label small { font-weight: 500; }
.gpp-text-lines { display: flex; flex-direction: column; gap: .3rem; }
.gpp-text-lines input { width: 100%; box-sizing: border-box; }

/* #9 — longest-name hint / #8 — Schriftbild checkbox */
.gpp-hint-longest {
	font-weight: 700; color: #8a6100; background: #fff8e8;
	border: 1px solid #f3d488; border-radius: 7px; padding: .5rem .65rem;
}
.gpp-use-schriftbild { margin: .5rem 0; font-size: .84rem; align-items: flex-start; }
.gpp-use-schriftbild input { margin-top: .15rem; }