:root {
	--gsg-orange: #ef5b24;
	--gsg-orange-dark: #c84312;
	--gsg-charcoal: #1c1c1c;
	--gsg-ink: #2c2a28;
	--gsg-paper: #f6f3ee;
	--gsg-card: #fffdf9;
	--gsg-line: #e3dbd1;
	--gsg-muted: #6f675f;
	--gsg-warn: #a56b08;
	--gsg-warn-bg: #fff4dc;
	--gsg-bad: #b4332a;
	--gsg-bad-bg: #fdeceb;
	--gsg-stage: #161616;
	--gsg-radius: 18px;
}

body.gsg-builder-page {
	background: var(--gsg-paper);
}

body.gsg-builder-page .entry-title,
body.gsg-builder-page .wp-block-post-title,
body.gsg-builder-page .entry-header {
	display: none;
}

body.gsg-builder-page .entry-content,
body.gsg-builder-page .wp-block-post-content,
body.gsg-builder-page .site-content,
body.gsg-builder-page main {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.gsg-app {
	max-width: 1120px;
	margin: 0 auto;
	padding: 12px 0 40px;
	color: var(--gsg-ink);
	font-family: "Avenir Next", "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.45;
}

.gsg-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.gsg-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gsg-brand h1 {
	margin: 0;
	font-size: 1.55rem;
	letter-spacing: -0.03em;
	color: var(--gsg-charcoal);
}

.gsg-kicker {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gsg-orange);
}

.gsg-mark {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--gsg-charcoal);
	color: #fff;
	font-weight: 750;
	font-size: 1.3rem;
}

.gsg-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--gsg-line);
	color: var(--gsg-charcoal);
	text-decoration: none;
	font-weight: 650;
}

.gsg-cart-link span {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--gsg-orange);
	color: #fff;
	font-size: 0.85rem;
}

.gsg-banner {
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--gsg-warn-bg);
	color: #6d4b08;
}

.gsg-widths {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.gsg-width-note {
	margin: 0;
	color: var(--gsg-muted);
	font-weight: 650;
}

.gsg-width,
.gsg-presets button,
.gsg-qty button,
.gsg-secondary,
.gsg-quiet,
.gsg-stage-actions button,
.gsg-remove,
.gsg-offer button {
	min-height: 44px;
	border: 1px solid var(--gsg-line);
	border-radius: 999px;
	background: #fff;
	color: var(--gsg-charcoal);
	font: inherit;
	font-weight: 650;
	padding: 0 14px;
	cursor: pointer;
}

.gsg-width.is-selected,
.gsg-presets button.is-selected,
.gsg-stage-actions button.is-on {
	background: var(--gsg-charcoal);
	border-color: var(--gsg-charcoal);
	color: #fff;
}

.gsg-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 20px;
	align-items: start;
}

.gsg-drop {
	padding: 22px;
	border: 1.5px dashed #c9bfb4;
	border-radius: var(--gsg-radius);
	background: var(--gsg-card);
	text-align: center;
}

.gsg-drop.is-over {
	border-color: var(--gsg-orange);
	background: #fff6f1;
}

.gsg-drop-title {
	margin: 0 0 4px;
	font-size: 1.2rem;
	font-weight: 700;
}

.gsg-drop-copy {
	margin: 0 0 14px;
	color: var(--gsg-muted);
}

.gsg-drop-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.gsg-secondary {
	background: var(--gsg-orange);
	border-color: var(--gsg-orange);
	color: #fff;
}

.gsg-secondary:hover,
.gsg-primary:hover {
	background: var(--gsg-orange-dark);
	border-color: var(--gsg-orange-dark);
}

.gsg-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 14px;
}

.gsg-item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: 12px;
	padding: 12px;
	border-radius: 16px;
	background: var(--gsg-card);
	border: 1px solid var(--gsg-line);
}

.gsg-item.is-warn {
	border-color: #e7c57a;
	background: #fffaf1;
}

.gsg-item.is-bad {
	border-color: #f0b2ad;
	background: #fff8f7;
}

.gsg-item img {
	width: 84px;
	height: 84px;
	object-fit: contain;
	border-radius: 12px;
	background:
		linear-gradient(45deg, #ece7e0 25%, transparent 25%),
		linear-gradient(-45deg, #ece7e0 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #ece7e0 75%),
		linear-gradient(-45deg, transparent 75%, #ece7e0 75%);
	background-size: 12px 12px;
	background-position: 0 0, 0 6px, 6px -6px, -6px 0;
	background-color: #f7f4ef;
}

.gsg-item-name {
	margin: 0 0 2px;
	font-weight: 700;
	word-break: break-word;
}

.gsg-item-size {
	margin: 0 0 8px;
	color: var(--gsg-muted);
	font-size: 0.92rem;
}

.gsg-item.is-warn .gsg-item-size { color: var(--gsg-warn); }
.gsg-item.is-bad .gsg-item-size { color: var(--gsg-bad); font-weight: 700; }

.gsg-presets,
.gsg-qty,
.gsg-custom {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.gsg-presets button,
.gsg-qty button {
	min-height: 40px;
	padding: 0 12px;
}

.gsg-custom input[type="number"] {
	width: 76px;
	min-height: 40px;
	border: 1px solid var(--gsg-line);
	border-radius: 10px;
	padding: 0 8px;
	font: inherit;
}

.gsg-lock,
.gsg-bg,
.gsg-ack {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.92rem;
}

.gsg-lock input,
.gsg-bg input,
.gsg-ack input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.gsg-qty span {
	min-width: 28px;
	text-align: center;
	font-weight: 750;
	align-self: center;
}

.gsg-remove {
	align-self: start;
	min-height: 36px;
	padding: 0 10px;
	background: transparent;
	color: var(--gsg-muted);
}

.gsg-stage {
	position: sticky;
	top: 16px;
	padding: 16px;
	border-radius: 22px;
	background: var(--gsg-stage);
	color: #f6f3ee;
}

.gsg-stage-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.gsg-stage-bar h2 {
	margin: 0;
	font-size: 1.05rem;
}

.gsg-stage-actions {
	display: flex;
	gap: 6px;
}

.gsg-stage-actions button {
	min-height: 40px;
	background: transparent;
	color: #fff;
	border-color: #4a4a4a;
}

.gsg-sheet-scroll {
	max-height: 62vh;
	overflow: auto;
	border-radius: 14px;
}

.gsg-sheet {
	position: relative;
	width: 100%;
	min-height: 160px;
	border-radius: 12px;
	background-color: #f4f1ec;
	background-image:
		linear-gradient(45deg, #e4ddd3 25%, transparent 25%),
		linear-gradient(-45deg, #e4ddd3 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #e4ddd3 75%),
		linear-gradient(-45deg, transparent 75%, #e4ddd3 75%);
	background-size: 18px 18px;
	background-position: 0 0, 0 9px, 9px -9px, -9px 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.gsg-sheet-empty {
	margin: 0;
	padding: 48px 18px;
	text-align: center;
	color: #5e574f;
}

.gsg-piece {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 2px;
}

.gsg-piece.is-warn { outline: 2px solid #e0a325; }
.gsg-piece.is-bad { outline: 2px solid #e15a50; }
.gsg-piece.is-draggable { cursor: grab; touch-action: none; }

.gsg-piece img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}

.gsg-piece.is-rotated img {
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: none;
	transform: translate(-50%, -50%) rotate(90deg);
	object-fit: fill;
}

.gsg-film-note {
	min-height: 1.2em;
	margin: 10px 0 0;
	color: #c9c2b8;
	font-size: 0.92rem;
}

.gsg-price {
	margin: 12px 0 4px;
	font-size: 1.7rem;
	font-weight: 750;
	letter-spacing: -0.03em;
}

.gsg-lines {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	color: #cfc6bc;
	font-size: 0.92rem;
}

.gsg-offer button {
	width: 100%;
	margin-bottom: 10px;
	background: transparent;
	color: #fff;
	border-color: #5a4638;
	text-align: left;
}

.gsg-ack {
	margin: 8px 0 12px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #3a2a14;
	color: #ffe3b0;
}

.gsg-primary {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: 14px;
	background: var(--gsg-orange);
	color: #fff;
	font: inherit;
	font-weight: 750;
	font-size: 1.05rem;
	cursor: pointer;
}

.gsg-primary:disabled {
	background: #5c534c;
	cursor: not-allowed;
}

.gsg-status {
	min-height: 1.3em;
	margin: 8px 0 0;
	color: #d9d0c6;
}

.gsg-status a {
	color: #ffb088;
}

.gsg-account {
	font-family: "Avenir Next", "Segoe UI", sans-serif;
}

.gsg-account .button {
	background: var(--gsg-orange);
	color: #fff;
	border-radius: 999px;
}

@media (max-width: 900px) {
	.gsg-grid {
		grid-template-columns: 1fr;
	}

	.gsg-stage {
		position: static;
		padding-bottom: 8px;
	}

	.gsg-buy {
		position: sticky;
		bottom: 0;
		z-index: 5;
		margin: 8px -8px -8px;
		padding: 12px 12px 16px;
		background: linear-gradient(to top, #161616 80%, rgba(22, 22, 22, 0));
	}

	.gsg-sheet-scroll {
		max-height: 46vh;
	}

	.gsg-item {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.gsg-remove {
		grid-column: 2;
	}
}