/* ── Global SLAPS colour tokens — available on every page ───────────────── */
:root {
	--slaps-lime: #96d700;
	--slaps-lime-dark: #78ac00;
	--slaps-ink: #111111;
	--slaps-muted: #6e6e6e;
	--slaps-faint: #b0b0b0;
	--slaps-white: #ffffff;
	--slaps-page: #e9e9e9;
	--slaps-panel: #e2e2e2;
	--slaps-tab: #ededed;
	--slaps-border: #cfcfcf;
	--slaps-error: #ff2b2b;
	/* Back-compat aliases */
	--slaps-black: var(--slaps-ink);
	--slaps-preview: var(--slaps-panel);
	--slaps-field: var(--slaps-white);
}

.slaps-custom-sticker-product {
	background: var(--slaps-page);
	color: var(--slaps-ink);
	font-family: "Alumni Sans", Arial, sans-serif;
}

.slaps-custom-sticker-product footer.wp-block-template-part {
	display: none !important;
}

/* Remove focus outlines from nav, header, and cart icon on the sticker studio page */
.slaps-custom-sticker-product header *:focus,
.slaps-custom-sticker-product header *:focus-visible,
.slaps-custom-sticker-product nav *:focus,
.slaps-custom-sticker-product nav *:focus-visible,
.slaps-custom-sticker-product .wp-block-navigation *:focus,
.slaps-custom-sticker-product .wp-block-navigation *:focus-visible,
.slaps-custom-sticker-product .wp-block-woocommerce-mini-cart *:focus,
.slaps-custom-sticker-product .wp-block-woocommerce-mini-cart *:focus-visible,
.slaps-custom-sticker-product .wc-block-mini-cart *:focus,
.slaps-custom-sticker-product .wc-block-mini-cart *:focus-visible,
.slaps-custom-sticker-product .wc-block-mini-cart__button:focus,
.slaps-custom-sticker-product .wc-block-mini-cart__button:focus-visible,
.slaps-page-nav__cart:focus,
.slaps-page-nav__cart:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Hide "added to cart" notice popup on the sticker studio page */
.slaps-custom-sticker-product .wc-block-store-notices,
.slaps-custom-sticker-product .woocommerce-notices-wrapper,
.slaps-custom-sticker-product .wc-block-components-notices {
	display: none !important;
}

.slaps-custom-sticker-product .wp-site-blocks,
.slaps-custom-sticker-product main,
.slaps-custom-sticker-product .wp-block-post-content,
.slaps-custom-sticker-product .woocommerce {
	background: var(--slaps-page);
	max-width: none;
}

.slaps-custom-sticker-product .wp-site-blocks > header {
	display: none;
}

/* Hide WooCommerce product meta (Category / Tags) — not needed on this page */
.slaps-custom-sticker-product .wp-block-woocommerce-product-meta {
	display: none !important;
}

/* Hide any WooCommerce product gallery — we use the custom proof gallery instead.
   WooCommerce sometimes injects .woocommerce-product-gallery inside our proof block. */
.slaps-custom-sticker-product .woocommerce-product-gallery,
.slaps-custom-sticker-product .wp-block-woocommerce-product-image,
.slaps-custom-sticker-product .slaps-proof-gallery-block .woocommerce-product-gallery,
.slaps-custom-sticker-product .slaps-proof-gallery-block section.woocommerce-product-gallery {
	display: none !important;
	height: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
}

.slaps-storefront-chrome {
	background: var(--slaps-page);
	color: var(--slaps-black);
	font-family: "Alumni Sans", Arial, sans-serif;
	text-transform: uppercase;
}

.slaps-promo-strip {
	background: var(--slaps-lime);
	color: #fff;
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	overflow: hidden;
	white-space: nowrap;
}

.slaps-promo-strip__track {
	align-items: center;
	display: flex;
	gap: 28px;
	min-height: 46px;
	width: max-content;
}

.slaps-mascot-dot {
	background: #ff9654;
	border: 2px solid var(--slaps-black);
	border-radius: 50%;
	display: inline-block;
	height: 31px;
	position: relative;
	width: 31px;
}

.slaps-mascot-dot::before {
	background: var(--slaps-black);
	border-radius: 16px 16px 5px 5px;
	content: "";
	height: 14px;
	left: 4px;
	position: absolute;
	top: -6px;
	width: 22px;
}

.slaps-page-nav {
	align-items: center;
	display: grid;
	grid-template-columns: auto 1fr auto;
	min-height: 60px;
	padding: 0 32px;
}

.slaps-page-nav__brand {
	display: inline-flex;
	text-decoration: none;
}

.slaps-page-nav__face {
	background: #ff9654;
	border: 4px solid var(--slaps-black);
	border-radius: 50%;
	display: block;
	height: 88px;
	position: relative;
	width: 88px;
}

.slaps-page-nav__face::before {
	background: var(--slaps-ink);
	border-radius: 46px 46px 12px 12px;
	content: "";
	height: 38px;
	left: 7px;
	position: absolute;
	top: -12px;
	transform: rotate(-9deg);
	width: 74px;
}

.slaps-page-nav__face::after {
	background: var(--slaps-lime);
	border: 2px solid var(--slaps-black);
	border-radius: 50%;
	content: "";
	height: 10px;
	left: 37px;
	position: absolute;
	top: -8px;
	width: 10px;
}

.slaps-page-nav__links {
	align-items: center;
	display: flex;
	gap: 28px;
	padding-left: 44px;
}

.slaps-page-nav__links a {
	color: var(--slaps-black);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.slaps-page-nav__cart {
	align-items: center;
	color: var(--slaps-black);
	display: inline-flex;
	text-decoration: none;
}

.slaps-page-nav__cart svg {
	display: block;
	height: 28px;
	width: 28px;
}

/* Hamburger button — hidden on desktop, shown on mobile */
.slaps-page-nav__hamburger {
	background: none;
	border: 0;
	cursor: pointer;
	display: none;
	flex-direction: column;
	gap: 5px;
	justify-content: center;
	outline: none;
	padding: 4px;
}

.slaps-page-nav__hamburger:focus-visible {
	outline: 2px solid var(--slaps-lime);
	outline-offset: 2px;
}

.slaps-page-nav__hamburger span {
	background: var(--slaps-black);
	border-radius: 2px;
	display: block;
	height: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
	width: 22px;
}

/* Animate to an X when the menu is open (7px = gap 5px + line 2px) */
.slaps-page-nav.is-menu-open .slaps-page-nav__hamburger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.slaps-page-nav.is-menu-open .slaps-page-nav__hamburger span:nth-child(2) {
	opacity: 0;
}

.slaps-page-nav.is-menu-open .slaps-page-nav__hamburger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.slaps-custom-sticker-product .woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 480px;
	gap: 16px;
	align-items: start;
	margin: 0;
	padding: 0 0 32px;
	width: 100%;
	box-sizing: border-box;
}

.slaps-custom-sticker-product .woocommerce div.product::before,
.slaps-custom-sticker-product .woocommerce div.product::after {
	content: none;
}

.slaps-custom-sticker-product .woocommerce div.product > .woocommerce-product-gallery,
.slaps-custom-sticker-product .woocommerce div.product > .summary {
	float: none;
	margin: 0;
	max-width: none;
	width: 100%;
}

.slaps-custom-sticker-product .woocommerce div.product > .woocommerce-product-gallery {
	align-self: start;
	background: var(--slaps-preview);
	border-radius: 32px;
	height: calc(100vh - 36px);
	min-height: 680px;
	overflow: hidden;
	position: sticky;
	top: 36px;
}

.slaps-custom-sticker-product .woocommerce div.product > .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.slaps-custom-sticker-product .woocommerce div.product > .woocommerce-product-gallery .woocommerce-product-gallery__image,
.slaps-custom-sticker-product .woocommerce div.product > .woocommerce-product-gallery .woocommerce-product-gallery__image a {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	margin: 0;
	min-height: inherit;
	width: 100%;
}

.slaps-custom-sticker-product .woocommerce div.product > .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	opacity: 0;
	position: absolute;
}

.slaps-custom-sticker-product .woocommerce div.product > .woocommerce-product-gallery::after {
	background: var(--slaps-black);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 80% 100%, 50% 72%, 20% 100%, 32% 56%, 2% 35%, 39% 35%);
	content: "";
	filter: blur(3px);
	height: min(78vw, 850px);
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -48%);
	width: min(88vw, 1150px);
}

.slaps-custom-sticker-product .woocommerce div.product > .slaps-proof-gallery::after {
	content: none;
}

.slaps-proof-gallery {
	background-color: var(--slaps-preview);
	background-position: center;
	background-repeat: no-repeat;
	background-size: min(62%, 520px) auto;
	border-radius: 32px;
	box-sizing: border-box;
	height: calc(100vh - 36px);
	isolation: isolate;
	min-height: 680px;
	overflow: hidden;
	position: relative;
	width: 100%;
}


.slaps-proof-gallery.is-proof-has-artwork::before {
	content: none;
}

.slaps-proof-gallery.is-proof-has-artwork {
	background-size: min(72%, 760px) auto;
}

.slaps-proof-gallery-block {
	background-color: var(--slaps-preview);
	background-position: center;
	background-repeat: no-repeat;
	background-size: min(62%, 520px) auto;
	border-radius: 32px;
	height: 100%;
	min-height: 680px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.slaps-proof-gallery-block > .slaps-proof-gallery {
	height: 100%;
	inset: 0;
	min-height: inherit;
	position: absolute;
	width: 100%;
}

.slaps-proof-gallery-block.is-proof-has-artwork {
	background-size: min(72%, 760px) auto;
}

.slaps-proof-gallery-block.is-proof-three-ready.is-proof-has-artwork {
	background-image: none !important;
}

.slaps-proof-gallery.is-proof-three-ready .slaps-proof-preview__content,
.slaps-proof-gallery-block.is-proof-three-ready .slaps-proof-preview__content {
	opacity: 0;
}

.slaps-proof-gallery-block > .slaps-proof-three-smoke-canvas {
	display: block;
	height: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 3;
}

.slaps-proof-gallery > .slaps-proof-three-smoke-canvas {
	display: block;
	height: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 3;
}

@media screen and (min-width: 601px) {
	/* Mobile-only elements — hidden on desktop */
	.slaps-finish-buttons,
	.slaps-size-btn-grid,
	.slaps-qty-list { display: none !important; }

	/* Instant error feedback — matches mobile behaviour */
	#slaps-size-help.is-error,
	#slaps-quantity-help.is-error {
		color: #ff2b2b !important;
	}

	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) {
		align-items: start;
		display: grid;
		gap: 16px;
		grid-template-columns: minmax(0, 1fr) 480px;
		margin: 0;
		max-width: none;
		padding: 0 0 8px;
		width: 100%;
	}

	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column {
		min-width: 0;
	}

	/* Left column: normal-flow spacer; JS (initStickyRenderer) sets position/height. */
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:first-child {
		align-self: stretch;
		display: block;
		flex-basis: auto !important;
		min-height: 680px;
		position: relative;
		top: 0 !important;
		width: 100%;
	}

	/* Gallery block: position:fixed set by JS — this is the CSS-only fallback. */
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:first-child .slaps-proof-gallery-block {
		position: relative !important;
		top: auto !important;
	}

	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:first-child > .slaps-proof-gallery-block {
		margin-left: auto !important;
		margin-right: auto !important;
		width: 100% !important;
	}

	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:last-child {
		border: 2.5px solid var(--slaps-lime);
		border-radius: 24px;
		box-sizing: border-box;
		flex-basis: auto !important;
		max-width: 480px;
		padding: 24px 28px 28px;
		padding-bottom: 28px !important;
		width: 480px;
	}
}

.slaps-proof-gallery-block > .slaps-proof-three-smoke-canvas.is-hidden {
	display: none;
}

.slaps-proof-preview {
	inset: 0;
	isolation: isolate;
	min-height: inherit;
	overflow: hidden;
	position: absolute;
	width: 100%;
}

.slaps-proof-preview canvas {
	display: none !important;
	height: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.slaps-proof-preview canvas.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.slaps-proof-three-canvas {
	z-index: 2;
}

/* Drop shadow cast from sticker opaque pixels — CSS respects transparency,
   so it perfectly follows any contour/circle/square shape.
   position:absolute + width/height:100% is CRITICAL: without it, the canvas
   renders at its attribute size (width × devicePixelRatio), which is 2× the
   container on high-DPR screens — the sticker then appears in the bottom-right
   quadrant because only the top-left quarter of the canvas is visible. */
.slaps-proof-canvas {
	display: block;
	filter: drop-shadow(0px 12px 18px rgba(0, 0, 0, 0.52));
	height: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 2;
}

/* Clear / transparent sticker: add a thin dark die-cut outline at the sticker
   perimeter by chaining a second drop-shadow with 0 offset and a 1.5 px spread.
   This mimics the hairline cut line visible on real clear stickers. */
.is-proof-clear .slaps-proof-canvas {
	filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.52)) drop-shadow(0px 12px 18px rgba(0, 0, 0, 0.48));
}

.slaps-proof-simple-canvas {
	pointer-events: none;
	z-index: 3;
}

.slaps-proof-preview__content {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	pointer-events: none;
	position: absolute;
	z-index: 20;
}

.slaps-proof-preview__image {
	filter: drop-shadow(16px 22px 22px rgba(0, 0, 0, 0.24));
	height: auto;
	max-height: 72%;
	max-width: 72%;
	object-fit: contain;
	position: relative;
	width: auto;
	z-index: 21;
}

.slaps-proof-preview__fallback {
	color: rgba(0, 0, 0, 0.42);
	font-size: 38px;
	font-weight: 900;
	line-height: 1;
	margin: 0;
	position: relative;
	text-transform: uppercase;
	z-index: 21;
}

.slaps-proof-no-preview {
	align-items: center;
	background: var(--slaps-tab);
	bottom: 0;
	color: rgba(0, 0, 0, 0.55);
	display: flex;
	font-size: 15px;
	font-weight: 600;
	justify-content: center;
	left: 0;
	margin: 0;
	padding: 16px;
	position: absolute;
	right: 0;
	text-align: center;
	top: 36px;
	z-index: 30;
}

.slaps-proof-no-preview.slaps-hidden {
	display: none;
}

.slaps-proof-gallery-block::before,
.slaps-proof-gallery::before {
	color: var(--slaps-muted);
	content: "STICKER STUDIO";
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 52px;
	font-weight: 750;
	left: 50%;
	letter-spacing: 0.02em;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	text-transform: uppercase;
	top: var(--slaps-label-top, 50%);
	transform: translate(-50%, -50%);
	white-space: nowrap;
	z-index: 3;
}

.slaps-proof-gallery-block.is-proof-has-artwork::before,
.slaps-proof-gallery.is-proof-has-artwork::before {
	content: none;
}

.slaps-proof-preview__note {
	bottom: 22px;
	color: rgba(0, 0, 0, 0.42);
	font-size: 18px;
	font-weight: 900;
	left: 24px;
	letter-spacing: 0.02em;
	line-height: 1;
	margin: 0;
	position: absolute;
	text-transform: uppercase;
	z-index: 8;
}

.slaps-custom-sticker-product .woocommerce div.product > .summary {
	border: 2.5px solid var(--slaps-lime);
	border-radius: 24px;
	box-sizing: border-box;
	min-width: 480px;
	padding: 24px 28px 28px;
}


.slaps-custom-sticker-product .woocommerce div.product > .summary > .product_title {
	color: var(--slaps-black);
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 64px;
	font-weight: 800;
	line-height: 0.9;
	margin: 0;
}

.slaps-custom-sticker-product .woocommerce div.product > .summary > .price,
.slaps-custom-sticker-product .woocommerce div.product > .summary > .product_meta,
.slaps-custom-sticker-product .woocommerce div.product > .summary > .woocommerce-product-rating {
	display: none;
}

.slaps-custom-sticker-product .woocommerce-breadcrumb {
	display: none !important;
}

.slaps-custom-sticker-product .wp-block-woocommerce-product-details {
	display: none !important;
}

.slaps-custom-sticker-product .woocommerce div.product > .summary > .woocommerce-product-details__short-description {
	color: var(--slaps-black);
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	margin: 14px 0 0;
	text-transform: uppercase;
}

#slaps-custom-configurator {
	margin: 0;
	width: 100%;
}

#slaps-configurator-heading {
	font-size: 32px;
	font-weight: 900;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.slaps-option {
	margin-bottom: 0;
}

.slaps-label {
	color: var(--slaps-black);
	display: block;
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 0;
	padding-top: 20px;
	text-transform: uppercase;
}

.slaps-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.slaps-button-group button {
	background: transparent;
	border: 2px solid var(--slaps-border);
	border-radius: 16px;
	color: var(--slaps-black);
	cursor: pointer;
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 16px;
	font-weight: 800;
	min-width: 90px;
	padding: 12px 14px 0;
	text-transform: none;
}

.slaps-button-group button span {
	display: block;
	margin-top: 4px;
}

.slaps-option-icon {
	display: block;
	height: 22px;
	margin: 0 auto;
	position: relative;
	width: 28px;
}

.slaps-option-icon--custom::before {
	background: currentColor;
	clip-path: polygon(50% 0, 62% 34%, 98% 35%, 68% 56%, 80% 100%, 50% 72%, 20% 100%, 32% 56%, 2% 35%, 38% 34%);
	content: "";
	display: block;
	height: 24px;
	width: 28px;
}

.slaps-option-icon--round::before,
.slaps-option-icon--square::before,
.slaps-option-icon--vinyl::before,
.slaps-option-icon--holographic::before,
.slaps-option-icon--transparent::before {
	border: 2px solid currentColor;
	content: "";
	display: block;
	height: 22px;
	width: 22px;
}

.slaps-option-icon--round::before {
	border-radius: 999px;
}

.slaps-option-icon--holographic::before {
	background: linear-gradient(135deg, #fff, #d7fbff 28%, #f7ffd8 52%, #ffe2fa 76%, #fff);
}

.slaps-option-icon--transparent::before {
	background: rgba(255, 255, 255, 0.28);
}

.slaps-button-group button.is-selected {
	background: var(--slaps-lime);
	border-color: var(--slaps-lime-dark);
	color: var(--slaps-black);
}

.slaps-button-group button:focus,
.slaps-button-group button:focus-visible {
	outline: none;
}

/* ── Material cards (StickerApp-style horizontal scroll row) ────────────── */

.slaps-material-cards {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 0;
	width: 100%;
}

/* Material selector: horizontal slider — 4 cards visible, 5th scrolls in */
.slaps-material-cards[data-field="material"] {
	-ms-overflow-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.slaps-material-cards[data-field="material"]::-webkit-scrollbar {
	display: none;
}

.slaps-material-cards[data-field="material"] .slaps-material-card {
	flex: 0 0 calc(25% - 6px);
	scroll-snap-align: start;
}

.slaps-material-card {
	align-items: center;
	background: transparent;
	border: 2px solid var(--slaps-border);
	border-radius: 16px;
	color: var(--slaps-black);
	cursor: pointer;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	gap: 8px;
	min-width: 0;
	padding: 10px 4px 12px;
	text-transform: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.slaps-material-card.is-selected {
	background: var(--slaps-lime);
	border-color: var(--slaps-lime-dark);
	color: var(--slaps-black);
}

.slaps-material-card:focus,
.slaps-material-card:focus-visible {
	outline: none;
}

.slaps-material-card.is-selected .slaps-material-card__label {
	color: var(--slaps-black);
	font-weight: 800;
}

.slaps-material-card__swatch {
	border-radius: 50%;
	display: block;
	height: clamp(40px, 8vw, 56px);
	overflow: hidden;
	position: relative;
	width: clamp(40px, 8vw, 56px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.14);
	flex-shrink: 0;
}

.slaps-material-card.is-selected .slaps-material-card__swatch {
	box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

.slaps-material-card__label {
	color: var(--slaps-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.1;
	text-align: center;
	text-transform: none;
}

/* ── Material slider scroll bar ────────────────────────────────────────── */

.slaps-material-scrollbar {
	background: var(--slaps-border);
	border-radius: 99px;
	height: 4px;
	margin-top: 8px;
	overflow: hidden;
	width: 100%;
}

.slaps-material-scrollbar__thumb {
	background: var(--slaps-muted);
	border-radius: 99px;
	height: 100%;
	transform: translateX(0);
	transition: transform 0.1s ease;
	width: 80%; /* 4 of 5 cards visible */
}

/* ── Material card tooltip ─────────────────────────────────────────────── */

.slaps-material-card[data-tooltip] {
	position: relative;
}

.slaps-material-card[data-tooltip]::after {
	background: #222;
	border-radius: 8px;
	bottom: calc(100% + 8px);
	color: #fff;
	content: attr(data-tooltip);
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	left: 50%;
	letter-spacing: 0;
	line-height: 1.3;
	opacity: 0;
	padding: 6px 10px;
	pointer-events: none;
	position: absolute;
	text-align: center;
	text-transform: none;
	transform: translateX(-50%) translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
	z-index: 100;
}

.slaps-material-card[data-tooltip]:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ── Per-material swatches ─────────────────────────────────────────────── */

/* Vinyl: clean white */
.slaps-material-swatch--vinyl {
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--slaps-border), 0 2px 8px rgba(0,0,0,0.14);
}

/* Holographic: vivid conic/rainbow gradient */
.slaps-material-swatch--holographic {
	background: conic-gradient(
		from 0deg,
		#ff6ec7, #ffb347, #fffb6e, #6effb3,
		#6ec4ff, #c86eff, #ff6ec7
	);
	opacity: 0.92;
}

/* Transparent: classic grey checkerboard */
.slaps-material-swatch--transparent {
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #ccc 25%, transparent 25%),
		linear-gradient(-45deg, #ccc 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #ccc 75%),
		linear-gradient(-45deg, transparent 75%, #ccc 75%);
	background-size: 14px 14px;
	background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

/* Glitter: silver base + multicolor shimmer + sparkle pseudo-element */
.slaps-material-swatch--glitter {
	background:
		radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.9) 0%, transparent 55%),
		radial-gradient(ellipse at 70% 70%, rgba(180,100,255,0.35) 0%, transparent 55%),
		radial-gradient(ellipse at 60% 20%, rgba(100,200,255,0.35) 0%, transparent 50%),
		linear-gradient(135deg, #c0c0c0 0%, var(--slaps-panel) 40%, #a8a8a8 60%, var(--slaps-border) 100%);
}

.slaps-material-swatch--glitter::after {
	background-image:
		radial-gradient(circle 1.5px at 20% 30%, rgba(255,255,255,0.95) 0%, transparent 100%),
		radial-gradient(circle 1px   at 55% 15%, rgba(255,255,255,0.9)  0%, transparent 100%),
		radial-gradient(circle 1.5px at 80% 50%, rgba(255,255,255,0.95) 0%, transparent 100%),
		radial-gradient(circle 1px   at 40% 70%, rgba(255,200,100,0.85)  0%, transparent 100%),
		radial-gradient(circle 1px   at 75% 80%, rgba(150,180,255,0.85)  0%, transparent 100%),
		radial-gradient(circle 1px   at 15% 75%, rgba(255,150,200,0.85)  0%, transparent 100%),
		radial-gradient(circle 1.5px at 60% 60%, rgba(255,255,255,0.9)  0%, transparent 100%);
	content: "";
	inset: 0;
	position: absolute;
}

/* Mirror: clean chrome radial — bright centre, dark edge */
.slaps-material-swatch--mirror {
	background: radial-gradient(
		ellipse at 38% 36%,
		#ffffff 0%,
		var(--slaps-panel) 18%,
		#b0b0b0 42%,
		var(--slaps-muted) 65%,
		var(--slaps-muted) 100%
	);
}

.slaps-material-swatch--mirror::after {
	/* Subtle specular streak */
	background: linear-gradient(
		135deg,
		rgba(255,255,255,0.55) 0%,
		rgba(255,255,255,0.0)  45%
	);
	border-radius: 50%;
	content: "";
	inset: 0;
	position: absolute;
}

/* ── Shape swatches ────────────────────────────────────────────────────── */
/* All shape swatches: light grey disc background, dark shape drawn inside  */

[class*="slaps-shape-swatch--"] {
	background: var(--slaps-tab);
}

[class*="slaps-shape-swatch--"]::before {
	background: var(--slaps-ink);
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Custom — contour/star */
.slaps-shape-swatch--custom::before {
	clip-path: polygon(50% 0%, 62% 34%, 98% 35%, 68% 57%, 80% 100%, 50% 73%, 20% 100%, 32% 57%, 2% 35%, 38% 34%);
	height: 30px;
	width: 30px;
}

/* Round — circle */
.slaps-shape-swatch--round::before {
	border-radius: 50%;
	height: 30px;
	width: 30px;
}

/* Square — sharp corners */
.slaps-shape-swatch--square::before {
	border-radius: 2px;
	height: 28px;
	width: 28px;
}

/* Rounded Corners */
.slaps-shape-swatch--roundedcorners::before {
	border-radius: 8px;
	height: 28px;
	width: 28px;
}


#slaps-custom-configurator select,
#slaps-custom-configurator option,
#slaps-custom-configurator input[type="text"],
#slaps-custom-configurator input[type="number"],
#slaps-custom-configurator textarea {
	background-color: var(--slaps-field);
	border: 2px solid var(--slaps-border);
	border-radius: 14px;
	box-sizing: border-box;
	color: var(--slaps-black);
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	padding: 14px;
	width: 100%;
}

#slaps-custom-configurator input[type="number"] {
	font-weight: 650;
}

#slaps-custom-configurator select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23cccccc' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: calc(100% - 16px) center;
	background-repeat: no-repeat;
	background-size: 14px 8px;
	padding-right: 64px;
}

#slaps-custom-configurator select.is-selected {
	background-color: var(--slaps-lime);
	border-color: var(--slaps-lime);
	color: var(--slaps-black);
}

#slaps-custom-configurator select:not(.is-selected) {
	color: var(--slaps-border) !important;
	font-weight: 500 !important;
}

#slaps-custom-configurator textarea {
	background: var(--slaps-field);
	min-height: 90px;
	resize: vertical;
}

#slaps-custom-configurator textarea#slaps-comment::placeholder {
	color: var(--slaps-border) !important;
	font-size: 20px;
	font-weight: 500 !important;
	opacity: 1 !important;
}

#slaps-comment:focus,
#slaps-comment:focus-visible,
#slaps-comment:active,
#slaps-lamination:focus,
#slaps-size:focus,
#slaps-quantity:focus,
#slaps-width:focus,
#slaps-height:focus,
#slaps-custom-quantity:focus {
	border-color: var(--slaps-border);
	box-shadow: none;
	outline: none;
}

/* ── Border width slider ─────────────────────────────────────────────────── */

.slaps-border-option .slaps-label {
	margin-bottom: 14px;
}

.slaps-border-slider-wrap {
	padding: 0 4px;
	position: relative;
	user-select: none;
}

/* Track */
.slaps-border-slider {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	display: block;
	height: 28px;
	outline: none;
	position: relative;
	width: 100%;
	z-index: 2;
}

/* Track — WebKit: fills lime from left to thumb, grey from thumb to right */
.slaps-border-slider::-webkit-slider-runnable-track {
	background: linear-gradient(
		to right,
		var(--slaps-lime) 0%,
		var(--slaps-lime) var(--slaps-fill, 33%),
		var(--slaps-border) var(--slaps-fill, 33%),
		var(--slaps-border) 100%
	);
	border-radius: 999px;
	height: 4px;
}

/* Track — Firefox */
.slaps-border-slider::-moz-range-track {
	background: linear-gradient(
		to right,
		var(--slaps-lime) 0%,
		var(--slaps-lime) var(--slaps-fill, 33%),
		var(--slaps-border) var(--slaps-fill, 33%),
		var(--slaps-border) 100%
	);
	border-radius: 999px;
	height: 4px;
}

/* Firefox also provides a native filled-track element — hide it */
.slaps-border-slider::-moz-range-progress {
	display: none;
}

/* Thumb — WebKit: always lime */
.slaps-border-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: var(--slaps-lime);
	border: none;
	border-radius: 50%;
	height: 22px;
	margin-top: -9px;
	transition: transform 0.12s ease;
	width: 22px;
}

.slaps-border-slider:active::-webkit-slider-thumb,
.slaps-border-slider:focus-visible::-webkit-slider-thumb {
	transform: scale(1.18);
}

/* Thumb — Firefox: always lime */
.slaps-border-slider::-moz-range-thumb {
	background: var(--slaps-lime);
	border: none;
	border-radius: 50%;
	height: 22px;
	transition: transform 0.12s ease;
	width: 22px;
}

.slaps-border-slider:active::-moz-range-thumb,
.slaps-border-slider:focus-visible::-moz-range-thumb {
	transform: scale(1.18);
}

/* Focus ring */
.slaps-border-slider:focus-visible {
	outline: 2px solid var(--slaps-lime);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Tick labels */
.slaps-border-ticks {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	padding: 0 2px;
}

.slaps-border-ticks span {
	color: var(--slaps-border);
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	min-width: 16px;
	text-align: center;
	text-transform: none;
	transition: color 0.14s ease;
}

.slaps-border-ticks span::after {
	content: attr(data-mm);
	display: none;
}

.slaps-border-ticks span.is-active {
	color: var(--slaps-black);
	font-weight: 800;
}

.slaps-border-help {
	margin-top: 8px;
}

.slaps-border-help [data-slaps-border-label] {
	font-weight: 800;
}

/* ── Upload formats helper ───────────────────────────────────────────────── */

.slaps-upload-formats {
	color: var(--slaps-muted);
	font-weight: 400;
	transition: color 0.15s ease;
}

.slaps-upload-formats b {
	font-weight: 750;
}

.slaps-upload-formats.is-error,
.slaps-label.is-error {
	color: #ff2b2b !important;
}

/* ── Upload label ────────────────────────────────────────────────────────── */

.slaps-upload-label {
	align-items: center;
	background: var(--slaps-field, var(--slaps-white));
	border: 2px dashed var(--slaps-lime);
	color: var(--slaps-lime);
	margin: 0 !important;
	border-radius: 14px;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	font-size: 24px;
	font-weight: 900;
	gap: 10px;
	justify-content: center;
	margin-top: 0;
	min-height: 90px;
	overflow: hidden;
	padding: 18px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

/* Empty state: icon + text */
.slaps-upload-empty {
	align-items: center;
	display: flex;
	font-weight: 700;
	gap: 10px;
	justify-content: center;
}

/* Preview image sits inside the dashed area */
.slaps-upload-preview {
	border-radius: 8px;
	display: block;
	height: auto;
	max-height: 160px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* When preview is visible, hide the empty-state text */
.slaps-upload-label:has(.slaps-upload-preview:not(.slaps-hidden)) .slaps-upload-empty {
	display: none;
}

.slaps-upload-label__icon {
	display: inline-flex;
	height: 24px;
	width: 24px;
}

.slaps-upload-label__icon svg {
	height: 100%;
	width: 100%;
}

.slaps-upload-label__icon path {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.4;
}

.slaps-upload-label.is-dragover {
	background: var(--slaps-lime);
	border-color: var(--slaps-lime);
	color: var(--slaps-black);
}

#slaps-artwork {
	display: none;
}

.slaps-upload-card {
	align-items: center;
	background: var(--slaps-field);
	border: 2px solid var(--slaps-border);
	border-radius: 14px;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-top: 0;
	padding: 8px 12px;
}

.slaps-file-kind {
	align-items: center;
	background: var(--slaps-black);
	border-radius: 10px;
	color: #fff;
	display: inline-flex;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: 900;
	height: 44px;
	justify-content: center;
	letter-spacing: 0;
	min-width: 58px;
	padding: 0 10px;
}

.slaps-upload-error {
	color: #ff2b2b;
	font-weight: 700;
}

#slaps-artwork-preview {
	display: block;
}

#slaps-file-name {
	color: var(--slaps-black);
	font-family: Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	min-width: 0;
	overflow-wrap: anywhere;
	text-transform: none;
}

.slaps-upload-remove {
	align-items: center;
	background: transparent;
	border: 2px solid var(--slaps-border);
	border-radius: 999px;
	color: var(--slaps-black);
	cursor: pointer;
	display: inline-flex;
	height: 36px;
	justify-content: center;
	padding: 0;
	width: 36px;
}

.slaps-upload-remove__icon {
	display: block;
	height: 18px;
	width: 18px;
}

.slaps-upload-remove__icon path {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
}

.slaps-upload-remove:hover,
.slaps-upload-remove:focus-visible {
	background: var(--slaps-lime);
	border-color: var(--slaps-lime);
	outline: none;
}


.slaps-hidden {
	display: none !important;
}

.slaps-upload-status {
	margin: 0;
}

.slaps-help {
	color: var(--slaps-muted);
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.25;
	margin: 6px 0 0;
	text-transform: none;
}

.slaps-size-grid {
	align-items: start;
	column-gap: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 10px;
	row-gap: 0;
}

.slaps-size-grid label {
	display: block;
	line-height: 1;
	margin: 0;
}

.slaps-size-grid label > span,
.slaps-quantity-grid label > span {
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.slaps-size-grid .slaps-input-wrap {
	display: block;
	margin: 0;
	position: relative;
	text-transform: none;
}

.slaps-size-grid .slaps-input-wrap input {
	padding-right: 72px;
}

.slaps-size-grid .slaps-input-unit {
	color: var(--slaps-border);
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	margin: 0;
	pointer-events: none;
	position: absolute;
	right: 42px;
	text-transform: lowercase;
	top: 50%;
	transform: translateY(-50%);
}

#slaps-width::placeholder,
#slaps-height::placeholder,
#slaps-custom-quantity::placeholder {
	color: var(--slaps-border) !important;
	font-weight: 500 !important;
	opacity: 1 !important;
}

.slaps-quantity-grid {
	margin-top: 10px;
}

.slaps-size-x {
	color: var(--slaps-muted);
	display: none;
	font-size: 24px;
	font-weight: 900;
	padding-bottom: 15px;
}

#slaps-width::-webkit-inner-spin-button,
#slaps-height::-webkit-inner-spin-button,
#slaps-custom-quantity::-webkit-inner-spin-button {
	opacity: 0.2 !important;
}

#slaps-price-row {
	border-top: 2px solid var(--slaps-border);
	font-size: 20px;
	font-weight: 900;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.slaps-price-main {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.slaps-price-main span,
.slaps-price-main strong {
	font-size: 32px !important;
}

.slaps-price-meta {
	display: flex;
	font-size: 18px;
	gap: 12px;
	justify-content: space-between;
	line-height: 1.1;
	margin-top: 0;
	padding-bottom: 20px;
}

.slaps-price-meta span {
	font-size: 18px !important;
}

/* Save badge — green pill */
.slaps-save-badge {
	background: var(--slaps-lime);
	border-radius: 999px;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 900;
	letter-spacing: 0.02em;
	padding: 2px 10px;
	text-transform: uppercase;
}

/* Tier-upgrade hint */
.slaps-price-tier-hint {
	background: #f0fadb;
	border: 1.5px solid var(--slaps-lime);
	border-radius: 10px;
	color: #3a5a00;
	font-size: 13px;
	font-weight: 700;
	margin: 6px 0 0;
	padding: 7px 12px;
	text-transform: none;
}

/* Material premium note */
.slaps-price-material-note {
	color: var(--slaps-muted);
	font-size: 13px;
	font-weight: 600;
	margin: 4px 0 0;
	text-transform: none;
}

#slaps-error,
.slaps-label-error {
	color: #ff2b2b !important;
}

.slaps-field-error {
	border-color: #ff2b2b !important;
	box-shadow: 0 0 0 3px rgba(255, 43, 43, 0.12) !important;
}

.slaps-field-error .slaps-upload-label {
	border-color: #ff2b2b !important;
}

/* Classic layout */
.slaps-custom-sticker-product .woocommerce div.product > .summary form.cart {
	margin-top: 0;
}

.slaps-custom-sticker-product .woocommerce div.product > .summary form.cart .quantity {
	display: none;
}

/* WC Blocks layout — form renders as display:grid with qty cell; flatten it */
.slaps-custom-sticker-product .wc-block-add-to-cart-form form.cart,
.slaps-custom-sticker-product .wp-block-add-to-cart-form form.cart {
	display: block !important;
	margin-top: 0;
	padding-bottom: 0;
}

.slaps-custom-sticker-product .wc-block-add-to-cart-form .wc-block-components-quantity-selector,
.slaps-custom-sticker-product .wc-block-add-to-cart-form form.cart .quantity,
.slaps-custom-sticker-product .wp-block-add-to-cart-form form.cart .quantity {
	display: none !important;
}

/* Shared pill button — classic + blocks */
.slaps-custom-sticker-product .woocommerce div.product > .summary form.cart button.single_add_to_cart_button,
.slaps-custom-sticker-product .wc-block-add-to-cart-form form.cart button.single_add_to_cart_button,
.slaps-custom-sticker-product .wp-block-add-to-cart-form form.cart button.single_add_to_cart_button {
	background: var(--slaps-lime) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	display: block !important;
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 42px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	min-height: 67px !important;
	padding: 12px 24px 16px !important;
	text-transform: none !important;
	width: 100% !important;
}

.slaps-custom-sticker-product .woocommerce div.product > .woocommerce-tabs,
.slaps-custom-sticker-product .woocommerce div.product > .related,
.slaps-custom-sticker-product .woocommerce div.product > .upsells {
	grid-column: 1 / -1;
}

@media screen and (max-width: 600px) {
	/* Mobile nav — slaps.cc layout: hamburger (left) · logo (center) · cart (right).
	   1fr auto 1fr keeps the logo at the exact horizontal center regardless of the
	   hamburger/cart widths. */
	.slaps-page-nav {
		grid-template-columns: 1fr auto 1fr;
		min-height: 0;
		padding: 6px 10px;
		position: relative;
	}

	.slaps-page-nav__hamburger {
		display: flex;
		grid-column: 1;
		justify-self: start;
	}

	.slaps-page-nav__brand {
		grid-column: 2;
		justify-self: center;
		line-height: 0;
	}

	.slaps-page-nav__brand img {
		display: block;
		height: 24px;
		width: auto;
	}

	/* Scale the CSS-drawn face logo down for mobile nav */
	.slaps-page-nav__face {
		width: 38px;
		height: 38px;
		border-width: 2px;
	}
	.slaps-page-nav__face::before {
		width: 30px;
	}

	/* Cart SVG — same 22px width as the hamburger span lines */
	.slaps-page-nav__cart {
		grid-column: 3;
		justify-self: end;
	}

	.slaps-page-nav__cart:focus,
	.slaps-page-nav__cart:focus-visible { outline: none !important; box-shadow: none !important; }

	.slaps-page-nav__cart svg {
		height: 22px;
		overflow: visible;
		width: 22px;
	}

	/* Hide the cart when the fullscreen menu is open — only the X should show */
	.slaps-page-nav.is-menu-open .slaps-page-nav__cart {
		display: none;
	}

	/* When open, the nav bar itself becomes the fixed top strip of the fullscreen menu.
	   z-index 600 puts it above the overlay (500) so the X button is always visible. */
	.slaps-page-nav.is-menu-open {
		background: var(--slaps-page);
		left: 0;
		position: fixed;
		right: 0;
		top: 36px;
		z-index: 600;
	}

	/* Fullscreen overlay — starts right below the nav bar (top: 36px = 6px padding + 24px icons + 6px padding).
	   Covers everything from the nav bottom to the very bottom of the viewport.
	   padding: 0 overrides the desktop padding-left: 44px so links stay truly centered. */
	.slaps-page-nav__links {
		align-items: center;
		background: var(--slaps-page);
		bottom: 0;
		display: none;
		flex-direction: column;
		justify-content: center;
		left: 0;
		padding: 0;
		position: fixed;
		right: 0;
		top: 36px;
		z-index: 500;
	}

	.slaps-page-nav.is-menu-open .slaps-page-nav__links {
		display: flex;
	}

	.slaps-page-nav__links a {
		color: var(--slaps-black);
		font-size: 48px;
		font-weight: 700;
		padding: 18px 40px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	}

	.slaps-page-nav__links a:active {
		opacity: 0.5;
	}

	.slaps-custom-sticker-product .woocommerce div.product {
		display: block;
		padding: 0 0 32px;
	}

	.slaps-custom-sticker-product .woocommerce div.product > .woocommerce-product-gallery {
		height: auto;
		margin-bottom: 24px;
		min-height: 360px;
		position: relative;
		top: auto;
	}

	/* ── Square gallery ────────────────────────────────────────────────────────
	   CSS layer: aspect-ratio:1/1 makes height = own width (pure CSS square,
	   no JS timing dependency).  height:auto lets aspect-ratio drive the height.
	   overflow:hidden MUST stay on — filter drop-shadows on the canvas would
	   bleed outside the rounded container otherwise. ───────────────────────── */
	.slaps-proof-gallery-block {
		aspect-ratio: 4 / 3 !important;
		border-radius: 32px !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		padding-bottom: 0 !important;
		position: relative !important;
		top: 0 !important;
		width: 100% !important;
	}

	/* The inner gallery fills the padded area via absolute positioning */
	.slaps-proof-gallery,
	.slaps-proof-gallery-block > .slaps-proof-gallery {
		bottom: 0 !important;
		height: 100% !important;
		left: 0 !important;
		min-height: 0 !important;
		position: absolute !important;
		right: 0 !important;
		top: 0 !important;
		width: 100% !important;
	}

	/* Round canvas corners to match block — avoids needing overflow:hidden which breaks WebGL rendering */
	.slaps-proof-gallery-block .slaps-proof-three-canvas,
	.slaps-proof-gallery-block .slaps-proof-canvas,
	.slaps-proof-gallery-block .slaps-proof-simple-canvas {
		border-radius: inherit !important;
	}

	/* Gutenberg sets flex-basis:512px on this column and the flex algorithm shrinks
	   it, then overflow:hidden clips the renderer. min-height wins over flex-shrink
	   so the column can't go below the block's square size. JS sets the exact px
	   value; this fallback uses aspect-ratio math (100vw * 4/5 * width%). */
	.wp-block-column:has(> .slaps-proof-gallery-block) {
		overflow: visible !important;
	}

	/* Configurator card — no border on mobile (replaced by tab/sheet UI) */
	.slaps-custom-sticker-product .woocommerce div.product > .summary,
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:last-child {
		border: none !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
		min-width: 0;
		padding: 0 !important;
		width: 100% !important;
	}

	/* Renderer column — sticky so it stays visible while user taps tabs */
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:first-child {
		background: var(--slaps-page);
		margin-bottom: 0;
		position: sticky;
		top: 36px;
		z-index: 10;
	}

	/* Upload overlay replaces both placeholder texts on mobile */
	.slaps-proof-preview__fallback { display: none !important; }
	.slaps-proof-gallery-block::before,
	.slaps-proof-gallery::before { content: none !important; }

	/* Un-hide the gallery section on mobile — desktop hides it to suppress WooCommerce
	   gallery but on mobile it hosts the upload overlay + pill toggle.
	   pointer-events:none lets the 3D canvas below receive touch events; the overlay
	   and pill restore their own pointer-events individually. */
	.slaps-custom-sticker-product .slaps-proof-gallery-block .woocommerce-product-gallery,
	.slaps-custom-sticker-product .slaps-proof-gallery-block section.woocommerce-product-gallery {
		border: none !important;
		display: block !important;
		height: 100% !important;
		outline: none !important;
		overflow: visible !important;
		pointer-events: none !important;
		visibility: visible !important;
	}
	.slaps-proof-upload-overlay { pointer-events: auto !important; }

	/* Material card labels — prevent wrapping on small cards */
	.slaps-material-card__label {
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}

	.slaps-material-card.is-selected .slaps-material-card__label {
		font-weight: 800 !important;
	}

	.slaps-button-group button {
		min-width: 84px;
	}

	.slaps-label {
		padding-top: 16px;
	}

	#slaps-configurator-heading {
		font-size: 28px;
	}

	.slaps-price-main span,
	.slaps-price-main strong {
		font-size: 30px !important;
	}
}

@media screen and (max-width: 767px) {
	.slaps-promo-strip__track {
		min-height: 38px;
	}

	.slaps-custom-sticker-product .woocommerce div.product > .summary > .product_title {
		font-size: 46px;
	}

	#slaps-configurator-heading {
		font-size: 26px;
		margin: 0 0 16px;
	}

	.slaps-size-grid {
		grid-template-columns: 1fr 1fr;
	}

	.slaps-button-group button,
	#slaps-custom-configurator select,
	#slaps-custom-configurator input[type="number"],
	#slaps-custom-configurator textarea,
	.slaps-upload-label,
	.slaps-custom-sticker-product .woocommerce div.product > .summary form.cart button.single_add_to_cart_button,
	.slaps-custom-sticker-product .wc-block-add-to-cart-form form.cart button.single_add_to_cart_button,
	.slaps-custom-sticker-product .wp-block-add-to-cart-form form.cart button.single_add_to_cart_button {
		min-height: 56px !important;
	}

	.slaps-custom-sticker-product .woocommerce div.product > .summary form.cart,
	.slaps-custom-sticker-product .wc-block-add-to-cart-form form.cart {
		padding-bottom: 4px;
	}
}

/* ── Upload overlay (inside proof gallery, mobile only) ──────────────────── */

.slaps-proof-upload-overlay {
	display: none; /* desktop: hidden */
}

.slaps-type-row { display: none; } /* desktop: hidden */
#slaps-type { display: none; }
.slaps-proof-close-btn { display: none; } /* desktop: hidden; mobile shows via is-proof-has-artwork */

/* ── Tab bar ─────────────────────────────────────────────────────────────── */

.slaps-tab-bar { display: none; } /* hidden on desktop */

/* ── Sheet elements — hidden on desktop ─────────────────────────────────── */

.slaps-sheet-handle-bar,
.slaps-sheet-header,
.slaps-sheet-done,
.slaps-sheet-backdrop { display: none; }

/* ── Border inline label (inside shape panel) ────────────────────────────── */

.slaps-border-inline-label { padding-top: 20px; }

/* ── Mobile inline-tab one-screen layout ────────────────────────────────── */

@media screen and (max-width: 600px) {

	/* ── Tab bar: folder-tab style, equal-width full row ─────────────────── */
	.slaps-tab-bar {
		align-items: flex-end;
		border-bottom: 2px solid var(--slaps-border);
		display: flex;
		flex: 0 0 auto;
		gap: 3px;
	}

	[data-slaps-tab="notes"] { display: none !important; }

	.slaps-tab {
		align-items: center;
		background: var(--slaps-tab);
		border: 2px solid var(--slaps-border);
		border-bottom: none;
		border-radius: 8px 8px 0 0;
		color: var(--slaps-muted);
		cursor: pointer;
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		font-family: "Alumni Sans", Arial, sans-serif;
		gap: 1px;
		min-width: 0;
		outline: none;
		overflow: hidden;
		padding: 3px 4px 4px;
		position: relative;
	}

	.slaps-tab:focus,
	.slaps-tab:focus-visible { outline: none !important; box-shadow: none !important; }

	.slaps-tab.has-value { color: var(--slaps-black); }

	.slaps-tab__name {
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.03em;
		line-height: 1;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
		width: 100%;
	}

	/* Active tab: slightly off-white, open bottom merges with panel. */
	.slaps-tab.is-active {
		background: var(--slaps-panel) !important;
		border-color: var(--slaps-border) !important;
		border-bottom: none !important;
		border-radius: 8px 8px 0 0 !important;
		color: var(--slaps-black) !important;
		margin-bottom: -2px !important;
		overflow: hidden !important;
		padding-bottom: 6px !important;
		z-index: 1 !important;
	}

	.slaps-tab.is-active .slaps-tab__name { font-weight: 800; color: var(--slaps-black); }

	.slaps-tab__value {
		color: #999;
		font-size: 10px;
		font-weight: 500;
		line-height: 1;
		padding-top: 3px;
		overflow: hidden;
		text-overflow: ellipsis;
		text-transform: none;
		white-space: nowrap;
		width: 100%;
		text-align: center;
	}

	.slaps-tab.has-value .slaps-tab__value { color: inherit; }

	/* ── Sheet container: inline content panel below tabs ────────────────── */
	.slaps-sheet-container {
		-ms-overflow-style: none !important;
		background: var(--slaps-panel) !important;
		border: 2px solid var(--slaps-border) !important;
		border-top: none !important;
		border-radius: 0 0 8px 8px !important;
		bottom: auto !important;
		box-shadow: none !important;
		flex: 1 1 0 !important;
		left: auto !important;
		max-height: none !important;
		min-height: 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		padding: 4px 8px !important;
		position: static !important;
		right: auto !important;
		scrollbar-width: none !important;
		transform: none !important;
		transition: none !important;
		z-index: auto !important;
	}

	.slaps-sheet-container::-webkit-scrollbar { display: none; }

	.slaps-sheet-container.is-open { transform: none !important; }

	/* Panels: hidden by default, show when active */
	.slaps-sheet-panel { display: none !important; }
	.slaps-sheet-panel.is-active { display: flex !important; flex-direction: column !important; }


	/* Panel labels: hidden (tab name already explains the context) */
	.slaps-sheet-panel > .slaps-label { display: none !important; }

	/* Border width label — overrides the panel label hide rule, styled as section title */
	.slaps-sheet-panel .slaps-border-inline-label {
		color: var(--slaps-black) !important;
		display: block !important;
		font-size: 16px !important;
		font-weight: 800 !important;
		letter-spacing: 0.06em !important;
		margin: 8px 0 0 !important;
		padding: 0 !important;
		text-transform: uppercase !important;
	}

	/* ── Finish panel: hide select, show stacked buttons ───────────────── */
	.slaps-sheet-panel[data-slaps-panel="lamination"] select { display: none !important; }

	.slaps-finish-buttons {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.slaps-finish-btn.is-selected { background: var(--slaps-lime) !important; }

	.slaps-finish-btn {
		align-items: center !important;
		background: var(--slaps-tab) !important;
		border-radius: 8px !important;
		flex: 0 0 auto !important;
		flex-direction: row !important;
		height: 57px !important;
		justify-content: center !important;
		overflow: hidden !important;
		padding: 0 16px !important;
		position: relative !important;
		text-align: center !important;
		width: 100% !important;
	}

	.slaps-finish-btn__label {
		color: var(--slaps-black);
		display: block;
		font-size: 22px;
		font-weight: 800;
		letter-spacing: 0.06em;
		line-height: 1;
		position: relative;
		text-transform: uppercase;
		z-index: 1;
	}

	.slaps-finish-btn__desc {
		color: var(--slaps-muted);
		display: block;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.02em;
		margin-top: 3px;
		position: relative;
		z-index: 1;
	}

	/* Gloss shine — animated light sweep */
	@keyframes slaps-gloss-sweep {
		0%   { transform: translateX(-120%); }
		40%  { transform: translateX(120%); }
		100% { transform: translateX(120%); }
	}

	.slaps-finish-btn--gloss::after {
		animation: slaps-gloss-sweep 3s ease-in-out infinite;
		background: linear-gradient(
			105deg,
			rgba(255,255,255,0) 30%,
			rgba(255,255,255,0.7) 50%,
			rgba(255,255,255,0) 70%
		);
		border-radius: inherit;
		content: '';
		inset: 0;
		overflow: hidden;
		pointer-events: none;
		position: absolute;
	}

	/* Selected state for finish buttons */
	.slaps-finish-btn.is-selected .slaps-finish-btn__label { color: var(--slaps-black); }
	.slaps-finish-btn.is-selected .slaps-finish-btn__desc { color: var(--slaps-ink); }

	/* ── Size panel: hide select, show 3-col grid + custom button ───────── */
	.slaps-sheet-panel[data-slaps-panel="size"] select { display: none !important; }

	/* ── Quantity list ───────────────────────────────────────────────────── */
	.slaps-sheet-panel[data-slaps-panel="quantity"] select { display: none !important; }

	/* Quantity panel fills the sheet container */
	.slaps-sheet-panel[data-slaps-panel="quantity"].is-active {
		height: 100% !important;
	}

	.slaps-qty-wrap {
		display: flex !important;
		flex-direction: row !important;
		gap: 6px !important;
		margin-top: 6px !important;
		max-height: calc(100% - 45px) !important;
		overflow: hidden !important;
	}

	.slaps-qty-list {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 0 !important;
		gap: 6px !important;
		min-width: 0 !important;
		overflow-y: auto !important;
		scrollbar-width: none !important;
		width: 100% !important;
	}

	.slaps-qty-list::-webkit-scrollbar { display: none !important; }

	.slaps-qty-scrollbar {
		align-self: flex-start;
		background: var(--slaps-border);
		border-radius: 99px;
		flex: 0 0 4px !important;
		overflow: hidden;
		position: relative;
		width: 4px !important;
	}

	.slaps-qty-scrollbar__thumb {
		background: #999;
		border-radius: 99px;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

	.slaps-qty-row:focus,
	.slaps-qty-row:focus-visible { outline: none !important; box-shadow: none !important; }

	.slaps-qty-header {
		background: var(--slaps-panel);
		color: #999;
		display: grid !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		grid-template-columns: 1fr 62px 50px 58px !important;
		letter-spacing: 0.06em !important;
		padding: 0 12px 6px !important;
		position: sticky !important;
		text-transform: uppercase !important;
		top: 0 !important;
		z-index: 1 !important;
	}

	.slaps-qty-header span { text-align: right; }
	.slaps-qty-header span:first-child { text-align: left; }

	.slaps-qty-row {
		align-items: center !important;
		background: var(--slaps-tab) !important;
		border: 2px solid var(--slaps-border) !important;
		border-radius: 8px !important;
		cursor: pointer !important;
		display: grid !important;
		flex-shrink: 0 !important;
		grid-template-columns: 1fr 62px 50px 58px !important;
		height: 57px !important;
		padding: 0 12px !important;
		transition: background 0.15s ease, border-color 0.15s ease !important;
		width: 100% !important;
	}

	.slaps-qty-row.is-selected {
		background: var(--slaps-lime) !important;
		border-color: var(--slaps-lime-dark) !important;
	}

	.slaps-qty-row__qty {
		color: var(--slaps-black);
		font-size: 20px;
		font-weight: 600;
		text-align: left;
	}

	.slaps-qty-row.is-selected .slaps-qty-row__qty { font-weight: 800; }

	.slaps-qty-row__price {
		color: var(--slaps-black);
		font-size: 20px;
		font-weight: 600;
		text-align: right;
	}

	.slaps-qty-row__right {
		align-items: center;
		display: flex;
		gap: 6px;
		justify-content: flex-end;
		min-width: 80px;
	}

	.slaps-qty-row__badge {
		background: var(--slaps-black);
		border-radius: 4px;
		color: var(--slaps-lime);
		font-size: 13px;
		font-weight: 800;
		justify-self: end;
		padding: 2px 5px;
	}

	.slaps-qty-row__badge:empty {
		background: none !important;
		padding: 0 !important;
	}

	.slaps-qty-row.is-selected .slaps-qty-row__badge {
		background: var(--slaps-black);
		color: var(--slaps-lime);
	}

	.slaps-qty-row__unit {
		color: #666;
		font-size: 13px;
		text-align: right;
	}

	.slaps-qty-row__right { display: none !important; }

	.slaps-qty-row--custom { grid-template-columns: 1fr !important; }
	.slaps-qty-row--custom .slaps-qty-row__qty { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.slaps-qty-row--custom.is-selected .slaps-qty-row__qty { font-weight: 800; }


	.slaps-size-btn-grid {
		display: grid !important;
		flex-direction: unset !important;
		flex-wrap: unset !important;
		gap: 8px !important;
		grid-template-columns: repeat(3, 1fr) !important;
		margin-top: 6px !important;
		overflow: visible !important;
		width: 100% !important;
	}

	.slaps-size-btn.is-selected { background: var(--slaps-lime) !important; }

	.slaps-size-btn {
		align-items: center !important;
		background: var(--slaps-tab) !important;
		border-radius: 8px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 1px !important;
		height: 57px !important;
		justify-content: center !important;
		padding: 0 4px !important;
		text-align: center !important;
		width: 100% !important;
	}

	.slaps-size-btn__dims {
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0.02em;
		line-height: 1;
	}

	.slaps-size-btn.is-selected .slaps-size-btn__dims {
		font-weight: 800;
	}

	.slaps-size-btn__unit {
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.04em;
		line-height: 1;
		opacity: 0.6;
		text-transform: lowercase;
	}

	.slaps-size-btn--custom {
		font-size: 20px !important;
		font-weight: 500 !important;
		height: 57px !important;
	}

	.slaps-size-btn--custom.is-selected {
		font-weight: 800 !important;
	}

	/* Hide size help text until Custom is selected */
	.slaps-sheet-panel[data-slaps-panel="size"] #slaps-size-help {
		display: none !important;
	}

	.slaps-sheet-panel[data-slaps-panel="size"].is-custom-active #slaps-size-help {
		display: block !important;
	}

	#slaps-size-help.is-error,
	#slaps-quantity-help.is-error {
		color: #ff2b2b !important;
	}

	/* Hide custom qty input + help text until Custom quantity is selected */
	.slaps-qty-list #slaps-custom-quantity-wrap,
	.slaps-qty-list #slaps-quantity-help {
		display: none !important;
	}

	.slaps-sheet-panel[data-slaps-panel="quantity"].is-custom-active .slaps-qty-list #slaps-custom-quantity-wrap,
	.slaps-sheet-panel[data-slaps-panel="quantity"].is-custom-active .slaps-qty-list #slaps-quantity-help {
		display: block !important;
	}


	/* Align slider edges with the cards above */
	.slaps-border-slider-wrap { padding: 0 !important; }
	.slaps-border-slider { margin: 0 !important; width: 100% !important; }
	.slaps-border-ticks { padding: 0 !important; }

	/* Card rows: horizontal scroll single line */
	.slaps-material-cards {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		overflow-x: auto !important;
		-ms-overflow-style: none !important;
		padding: 6px 0 !important;
		scrollbar-width: none !important;
	}
	.slaps-material-cards::-webkit-scrollbar { display: none; }

	/* Shape: 4 cards fill the width exactly — no scroll. */
	.slaps-sheet-panel[data-slaps-panel="shape"] .slaps-material-cards {
		scroll-snap-type: none !important;
	}

	.slaps-sheet-panel[data-slaps-panel="shape"] .slaps-material-card {
		box-sizing: border-box !important;
		flex: 0 0 calc(25% - 6px) !important;
		scroll-snap-align: none !important;
	}

	/* Material: 5 cards, 4 visible, Mirror scrolls into view.
	   JS (mobile-tabs.js) clips the ghost space Chrome adds at max scroll. */
	.slaps-sheet-panel[data-slaps-panel="material"] .slaps-material-cards {
		gap: 0 !important;
		scroll-behavior: smooth !important;
		scroll-snap-type: none !important;
	}

	.slaps-sheet-panel[data-slaps-panel="material"] .slaps-material-card {
		box-sizing: border-box !important;
		flex: 0 0 calc(25% - 6px) !important;
		margin-right: 8px !important;
		scroll-snap-align: none !important;
	}

	.slaps-sheet-panel[data-slaps-panel="material"] .slaps-material-cards .slaps-material-card:last-child {
		margin-right: 0 !important;
	}

	/* Other panels: auto-sized cards */
	.slaps-material-card { flex: 0 0 auto !important; }

	/* Selects inside panels */
	.slaps-sheet-panel select {
		margin-top: 6px !important;
		width: 100% !important;
	}

	/* Textarea (notes) */
	.slaps-sheet-panel textarea {
		flex: 1 1 0 !important;
		margin-top: 6px !important;
		min-height: 0 !important;
		resize: none !important;
		width: 100% !important;
	}

	/* Border-width slider: compact */
	.slaps-border-slider-wrap { margin-top: 6px !important; }
	.slaps-border-help { margin-top: 2px !important; }

	/* Hide all sheet popup chrome */
	.slaps-sheet-backdrop,
	.slaps-sheet-handle-bar,
	.slaps-sheet-header,
	.slaps-sheet-done { display: none !important; }

	/* ── ONE-SCREEN LAYOUT ────────────────────────────────────────────────── */

	/* 1. Nav: fixed */
	.slaps-page-nav {
		background: var(--slaps-page) !important;
		left: 0 !important;
		position: fixed !important;
		right: 0 !important;
		top: 0 !important;
		z-index: 600 !important;
	}

	/* 2. Promo strip: hidden */
	.slaps-storefront-chrome .slaps-promo-strip { display: none !important; }

	/* 3. Neutralise block-theme global padding so fixed positioning works */
	.slaps-custom-sticker-product .has-global-padding,
	.slaps-custom-sticker-product .wp-block-post-content,
	.slaps-custom-sticker-product .entry-content,
	.slaps-custom-sticker-product .woocommerce {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* 4. Columns wrapper: fixed to viewport below nav, flex column */
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) {
		background: var(--slaps-page) !important;
		bottom: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		left: 0 !important;
		margin: 0 !important;
		max-width: none !important;
		overflow: hidden !important;
		padding: 0 10px 0 !important;
		position: fixed !important;
		right: 0 !important;
		top: 36px !important;
		width: auto !important;
		z-index: 100 !important;
	}

	/* 5. Both columns: no extra padding or margin (wrapper handles it) */
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column {
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* 6. Proof column: height locked to 4:3 renderer. */
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:first-child {
		border-radius: 0 !important;
		flex: 0 0 calc((100vw - 20px) * 3 / 4) !important;
		height: calc((100vw - 20px) * 3 / 4) !important;
		margin: 0 !important;
		max-height: calc((100vw - 20px) * 3 / 4) !important;
		min-height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: static !important;
		width: 100% !important;
	}

	/* Kill WC/WP default margin on the gallery block wrapper and all its children */
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:first-child .wp-block-woocommerce-product-image-gallery {
		margin: 0 !important;
		padding: 0 !important;
	}

	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:first-child .wp-block-woocommerce-product-image-gallery > * {
		margin-bottom: 0 !important;
		margin-top: 0 !important;
	}

	/* 7. Proof block: 4:3, padded edges align with nav icons */
	.wp-block-woocommerce-product-image-gallery,
	.slaps-proof-gallery-block {
		aspect-ratio: 4 / 3 !important;
		border-radius: 8px !important;
		height: auto !important;
		overflow: hidden !important;
		width: 100% !important;
	}

	/* Suppress the "UPLOAD ARTWORK" SVG watermark — the row + overlay handle it */
	.slaps-proof-gallery-block:not(.is-proof-has-artwork) {
		background-image: none !important;
	}

	.slaps-proof-gallery,
	.slaps-proof-gallery-block > .slaps-proof-gallery {
		border-radius: 0 !important;
	}

	/* Upload overlay inside proof (tap to upload affordance) */
	.slaps-proof-upload-overlay {
		align-items: center;
		background: transparent;
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
		bottom: 0;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		gap: 8px;
		justify-content: center;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		-webkit-tap-highlight-color: transparent;
		z-index: 25;
	}

	.slaps-proof-upload-overlay__icon {
		align-items: center;
		background: var(--slaps-lime);
		border-radius: 50%;
		display: flex;
		height: 52px;
		justify-content: center;
		width: 52px;
	}

	.slaps-proof-upload-overlay__icon svg {
		display: block;
		height: 26px;
		stroke: var(--slaps-ink);
		width: 26px;
	}

	.slaps-proof-upload-overlay__text {
		color: var(--slaps-ink);
		font-family: "Alumni Sans", Arial, sans-serif;
		font-size: 20px;
		font-weight: 800;
		letter-spacing: 0.04em;
		line-height: 1;
		text-transform: uppercase;
	}

	.slaps-proof-upload-overlay__hint {
		color: var(--slaps-muted);
		font-family: "Alumni Sans", Arial, sans-serif;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.03em;
		line-height: 1;
	}

	.slaps-proof-gallery-block.is-proof-has-artwork .slaps-proof-upload-overlay {
		display: none !important;
	}

	.slaps-proof-upload-overlay.slaps-label-error {
		color: var(--slaps-error) !important;
	}

	/* ── Type row (below renderer, replaces upload field row) ────────────── */
	.slaps-proof-preview__note { display: none !important; }

	.slaps-type-row {
		display: grid;
		gap: 6px;
		grid-template-columns: 1fr 1fr;
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.slaps-type-btn {
		align-items: center;
		background: var(--slaps-tab);
		border: 2px solid var(--slaps-border);
		border-radius: 8px;
		color: var(--slaps-ink);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		font-family: "Alumni Sans", Arial, sans-serif;
		gap: 2px;
		padding: 10px 8px;
		text-align: center;
		-webkit-tap-highlight-color: transparent;
		width: 100%;
	}

	.slaps-type-btn.is-active {
		background: var(--slaps-lime);
		border-color: var(--slaps-lime-dark);
	}

	.slaps-type-btn__label {
		font-size: 17px;
		font-weight: 500;
		letter-spacing: 0.04em;
		line-height: 1;
		text-transform: uppercase;
	}

	.slaps-type-btn.is-active .slaps-type-btn__label {
		font-weight: 800;
	}

	.slaps-type-btn__desc {
		font-size: 12px;
		font-weight: 500;
		line-height: 1;
		opacity: 0.6;
	}

	.slaps-type-btn.is-active .slaps-type-btn__desc {
		opacity: 1;
	}

	/* Error state — both buttons get a red border, row gets a label below */
	.slaps-type-row.is-error .slaps-type-btn {
		border-color: var(--slaps-error) !important;
	}


	.slaps-type-btn:focus { outline: none; }
	.slaps-type-btn:focus-visible { outline: 2px solid var(--slaps-lime-dark); outline-offset: -3px; }

	/* ── Close button (top-right of renderer, visible after artwork loads) ── */
	.slaps-proof-close-btn {
		align-items: center;
		background: none;
		border: none;
		border-radius: 0;
		color: #999;
		cursor: pointer;
		display: none;
		height: 30px;
		justify-content: center;
		pointer-events: auto !important;
		position: absolute;
		right: 8px;
		top: 8px;
		width: 30px;
		-webkit-tap-highlight-color: transparent;
		z-index: 30;
	}

	.slaps-proof-close-btn svg { display: block; }

	.slaps-proof-gallery-block.is-proof-has-artwork .slaps-proof-close-btn {
		display: flex;
	}

	/* ── Upload overlay states ────────────────────────────────────────────── */

	/* Suppress ALL field-error visuals on the hidden upload option container */
	.slaps-option:has(#slaps-artwork).slaps-field-error,
	.slaps-option:has(#slaps-artwork).slaps-field-error * {
		border-color: transparent !important;
		box-shadow: none !important;
		outline: none !important;
	}

	.slaps-proof-upload-overlay__hint {
		color: var(--slaps-muted);
		font-family: "Alumni Sans", Arial, sans-serif;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.4;
		text-align: center;
		padding: 0 16px;
	}

	.slaps-proof-upload-overlay__hint b { font-weight: 750; }

	/* Progress bar */
	.slaps-proof-upload-overlay__progress {
		background: rgba(17, 17, 17, 0.1);
		border-radius: 3px;
		height: 4px;
		overflow: hidden;
		width: 72%;
	}

	.slaps-proof-upload-overlay__progress-bar {
		animation: slaps-progress 1.4s ease-in-out infinite;
		background: var(--slaps-lime);
		border-radius: 3px;
		height: 100%;
		width: 40%;
	}

	@keyframes slaps-progress {
		0%   { transform: translateX(-150%); }
		100% { transform: translateX(350%); }
	}

	/* Status text */
	.slaps-proof-upload-overlay__status {
		color: var(--slaps-muted);
		font-family: "Alumni Sans", Arial, sans-serif;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.04em;
		line-height: 1;
		text-transform: uppercase;
	}

	.slaps-proof-upload-overlay__status.is-error {
		color: var(--slaps-error);
	}

	/* ── Hide upload row — renderer overlay handles it on mobile ──────────── */
	.slaps-option:has(#slaps-artwork) {
		padding: 0 !important;
	}
	.slaps-option:has(#slaps-artwork) .slaps-label,
	.slaps-option:has(#slaps-artwork) .slaps-upload-label,
	.slaps-option:has(#slaps-artwork) .slaps-upload-formats,
	.slaps-option:has(#slaps-artwork) .slaps-upload-card,
	.slaps-option:has(#slaps-artwork) .slaps-upload-error,
	.slaps-option:has(#slaps-artwork) .slaps-upload-status { display: none !important; }

	/* 8. Configurator column: flex column filling remaining space */
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column:last-child {
		border: none !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex: 1 1 0 !important;
		flex-direction: column !important;
		min-height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		width: 100% !important;
	}

	/* WC tabs (.wc-tabs) sit at top:0 by default and are covered by the fixed nav.
	   Make them invisible so they don't bleed under the nav bar. */
	.slaps-custom-sticker-product .wc-tabs {
		visibility: hidden !important;
	}

	/* 9. WC summary wrapper: propagate flex */
	.slaps-custom-sticker-product .woocommerce div.product > .summary {
		border: none !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex: 1 1 0 !important;
		flex-direction: column !important;
		min-height: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}

	/* 10. WC add-to-cart block wrapper: propagate flex */
	.slaps-custom-sticker-product .wc-block-add-to-cart-form {
		display: flex !important;
		flex: 1 1 0 !important;
		flex-direction: column !important;
		margin: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
	}

	/* 11. form.cart: flex column */
	.slaps-custom-sticker-product .wc-block-add-to-cart-form form.cart,
	.slaps-custom-sticker-product form.cart {
		display: flex !important;
		flex: 1 1 0 !important;
		flex-direction: column !important;
		gap: 0 !important;
		margin: 0 !important;
		min-height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
	}

	/* 12. Configurator section: flex column fills form.cart */
	#slaps-custom-configurator {
		display: flex !important;
		flex: 1 1 0 !important;
		flex-direction: column !important;
		min-height: 0 !important;
		overflow: hidden !important;
	}

	/* 13. Upload row: compact, equal top/bottom breathing room */
	.slaps-option:not(.slaps-sheet-panel) {
		display: block !important;
		flex: 0 0 auto !important;
		padding: 4px 0 !important;
	}

	.slaps-label[for="slaps-artwork"] { display: none !important; }
	.slaps-upload-status { font-size: 11px !important; }
	.slaps-upload-preview { display: none !important; }

	/* Upload option wrapper: relative so formats text can be positioned inside.
	   Remove top padding — those 3px are reclaimed for the larger upload field. */
	.slaps-option:has(.slaps-upload-label) {
		position: relative !important;
	}

	.slaps-upload-label {
		align-items: center !important;
		background-color: var(--slaps-field, var(--slaps-white)) !important;
		/* SVG dashed border: stroke-width 4 clips at the edge to a crisp 2px
		   line. pathLength='200' + dasharray '3 1' fits exactly 50 dash/gap
		   periods around the whole border with no leftover, so the dashes
		   stay even and symmetric at every corner (3x dash-to-gap ratio).
		   Plain CSS `border: dashed` can control none of this. */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' rx='8' ry='8' fill='none' stroke='%2396d700' stroke-width='4' pathLength='200' stroke-dasharray='3 1'/%3E%3C/svg%3E") !important;
		border: none !important;
		color: var(--slaps-lime) !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
		cursor: pointer !important;
		display: flex !important;
		gap: 8px !important;
		margin: 0 !important;
		min-height: 50px !important;
		padding: 0 12px !important;
		width: 100% !important;
	}

	/* Keep the error state visible now that the border is an SVG background. */
	.slaps-field-error .slaps-upload-label {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' rx='8' ry='8' fill='none' stroke='%23ff2b2b' stroke-width='4' pathLength='200' stroke-dasharray='3 1'/%3E%3C/svg%3E") !important;
	}

	.slaps-upload-label .slaps-upload-empty {
		align-items: center !important;
		display: flex !important;
		gap: 8px !important;
	}

	.slaps-upload-label__icon {
		display: flex !important;
		flex: 0 0 auto !important;
	}

	.slaps-upload-label__icon svg {
		height: 18px !important;
		width: 18px !important;
	}

	.slaps-upload-label .slaps-upload-empty > span:last-child {
		font-size: 20px !important;
		font-weight: 600 !important;
	}

	/* Accepted formats — overlaid at the bottom of the upload label */
	.slaps-upload-formats {
		bottom: 8px !important;
		font-size: 10px !important;
		font-weight: 400 !important;
		left: 12px !important;
		line-height: 1 !important;
		pointer-events: none !important;
		position: absolute !important;
		right: 12px !important;
	}

	/* Hide formats once a file card is showing */
	.slaps-option:has(.slaps-upload-card:not(.slaps-hidden)) .slaps-upload-formats {
		display: none !important;
	}

	/* When file is selected, hide the Choose File label — card takes its place */
	.slaps-option:has(.slaps-upload-card:not(.slaps-hidden)) .slaps-upload-label { display: none !important; }

	.slaps-upload-card {
		align-items: center !important;
		background: var(--slaps-field, var(--slaps-white)) !important;
		border: 1.5px dashed #ccc !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
		display: flex !important;
		gap: 8px !important;
		margin: 0 !important;
		min-height: 50px !important;
		padding: 0 10px !important;
		width: 100% !important;
	}

	.slaps-upload-card.slaps-hidden { display: none !important; }

	.slaps-file-kind { display: none !important; }

	#slaps-file-name {
		flex: 1 1 0 !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	.slaps-upload-remove {
		border: none !important;
		border-radius: 999px !important;
		flex: 0 0 auto !important;
		height: 22px !important;
		padding: 0 !important;
		width: 22px !important;
	}

	.slaps-upload-remove__icon {
		height: 14px !important;
		width: 14px !important;
	}

	/* 15. Price row: compact single line above button */
	#slaps-price-row {
		border-top: none !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.slaps-price-main {
		align-items: baseline !important;
		flex-direction: row !important;
		justify-content: space-between !important;
	}

	.slaps-price-main > span:first-child {
		display: block !important;
		font-size: 16px !important;
		font-weight: 900 !important;
	}

	.slaps-price-main strong {
		font-size: 20px !important;
		line-height: 1 !important;
	}

	.slaps-price-meta { display: none !important; }

	.slaps-save-badge,
	.slaps-price-tier-hint,
	.slaps-price-material-note { display: none !important; }

	/* 16. Order Now button: full width */
	.slaps-custom-sticker-product .wc-block-add-to-cart-form form.cart button.single_add_to_cart_button,
	.slaps-custom-sticker-product .wp-block-add-to-cart-form form.cart button.single_add_to_cart_button,
	.slaps-custom-sticker-product form.cart button.single_add_to_cart_button {
		flex: 0 0 auto !important;
		border-radius: 8px !important;
		color: var(--slaps-black) !important;
		text-transform: uppercase !important;
		font-weight: 800 !important;
		font-size: 24px !important;
		margin-top: 4px !important;
		margin-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
		min-height: 46px !important;
		outline: none !important;
		padding: 6px 16px 8px !important;
		width: 100% !important;
	}

	.slaps-custom-sticker-product .wc-block-add-to-cart-form form.cart button.single_add_to_cart_button:focus,
	.slaps-custom-sticker-product .wc-block-add-to-cart-form form.cart button.single_add_to_cart_button:focus-visible,
	.slaps-custom-sticker-product .wp-block-add-to-cart-form form.cart button.single_add_to_cart_button:focus,
	.slaps-custom-sticker-product .wp-block-add-to-cart-form form.cart button.single_add_to_cart_button:focus-visible,
	.slaps-custom-sticker-product form.cart button.single_add_to_cart_button:focus,
	.slaps-custom-sticker-product form.cart button.single_add_to_cart_button:focus-visible {
		box-shadow: none !important;
		outline: none !important;
	}

	/* 17. Hidden elements */
	.wc-block-components-quantity-selector,
	form.cart .quantity { display: none !important; }

	#slaps-error { display: none !important; }

	.slaps-custom-sticker-product #slaps-configurator-heading,
	.slaps-custom-sticker-product .wp-block-post-excerpt,
	.slaps-custom-sticker-product .woocommerce-product-details__short-description {
		display: none !important;
	}

	.slaps-custom-sticker-product .wp-block-breadcrumbs,
	.slaps-custom-sticker-product .woocommerce-breadcrumb { display: none !important; }

	/* Product title and WC price block sit above the form in the second column —
	   they're not needed on mobile (price shown in our custom row instead) */
	.slaps-custom-sticker-product .wp-block-post-title,
	.slaps-custom-sticker-product .wp-block-woocommerce-product-price { display: none !important; }

	/* WP layout-flow adds margin-block-start to every child of the column —
	   zero it out so nothing pushes the add-to-cart form down */
	.slaps-custom-sticker-product .wp-block-columns:has(.slaps-proof-gallery-block) > .wp-block-column > * {
		margin-block-start: 0 !important;
		margin-block-end: 0 !important;
	}

	.slaps-mobile-title { display: none !important; }

	/* ── Mobile tab error / complete states ──────────────────────────────── */

	/* Red label on incomplete required tab */
	.slaps-tab.is-error .slaps-tab__name {
		color: #ff2b2b !important;
	}

	/* Asterisk — sits in the sub-value slot (below the tab name) on error. */
	.slaps-tab__dot {
		display: none;
		font-size: 10px;
		line-height: 1;
		pointer-events: none;
	}

	.slaps-tab.is-error .slaps-tab__value {
		visibility: hidden;
	}

	.slaps-tab.is-error .slaps-tab__dot {
		color: #ff2b2b;
		display: block;
		font-size: 14px;
		font-weight: 550;
		left: 0;
		position: absolute;
		text-align: center;
		top: 19px;
		width: 100%;
	}

	/* In-panel hint — removed */
	.slaps-mobile-hint { display: none !important; }

	/* Notes panel: textarea fills the full available panel height */
	[data-slaps-panel="notes"] {
		height: 100% !important;
	}

	[data-slaps-panel="notes"] textarea {
		box-sizing: border-box !important;
		flex: 1 1 0 !important;
		font-family: inherit !important;
		font-size: 14px !important;
		min-height: 0 !important;
		padding: 10px !important;
		resize: none !important;
		width: 100% !important;
	}

	/* Panel title injected by mobile-tabs.js above each panel's content */
	.slaps-panel-title {
		background: var(--slaps-panel);
		color: var(--slaps-black);
		font-size: 16px;
		font-weight: 800;
		letter-spacing: 0.06em;
		margin: -4px -8px 0;
		padding: 4px 8px 8px;
		position: sticky;
		text-align: left;
		text-transform: uppercase;
		top: -4px;
		z-index: 5;
	}
}




/* =========================================================================
   SLAPS Cart Page — WooCommerce Block Cart
   ========================================================================= */

/* ── Reset theme layout constraints ─────────────────────────────────────── */
.slaps-cart-page header.wp-block-template-part,
.slaps-cart-page footer.wp-block-template-part,
.slaps-cart-page h1.wp-block-post-title,
.slaps-cart-page .wc-block-store-notices,
.slaps-cart-page .wc-block-components-notices {
	display: none !important;
}

.slaps-cart-page .wp-site-blocks,
.slaps-cart-page main,
.slaps-cart-page .wp-block-post-content,
.slaps-cart-page .entry-content,
.slaps-cart-page .wp-block-group,
.slaps-cart-page .wp-block-group.has-global-padding,
.slaps-cart-page .is-layout-constrained {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* ── Page base ───────────────────────────────────────────────────────────── */
.slaps-cart-page {
	--slaps-black:    #000;
	--slaps-lime:     #96d700;
	--slaps-lime-dark:#78ac00;
	--slaps-page:     #e9e9e9;
	--slaps-field:    #f3f3f3;
	--slaps-border:   #ccc;
	background: var(--slaps-page) !important;
	font-family: "Alumni Sans", Arial, sans-serif !important;
}

.slaps-cart-page .wp-block-woocommerce-cart {
	background: var(--slaps-page) !important;
}

/* Outer cart wrapper — constrain width */
.slaps-cart-page .wp-block-woocommerce-cart.alignwide {
	max-width: 1320px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 32px 24px 64px !important;
	box-sizing: border-box !important;
}

/* Page title injected via ::before */
.slaps-cart-page .wp-block-woocommerce-cart.alignwide::before {
	content: "YOUR ORDER";
	display: block;
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 40px;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 24px;
	color: var(--slaps-black);
}

/* Remove all focus outlines on cart page */
.slaps-cart-page *:focus,
.slaps-cart-page *:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* ── Two-column layout ───────────────────────────────────────────────────── */
.slaps-cart-page .wc-block-components-sidebar-layout.wc-block-cart {
	display: grid !important;
	grid-template-columns: 1fr 340px !important;
	gap: 24px !important;
	align-items: start !important;
	background: transparent !important;
}

.slaps-cart-page .wc-block-components-main.wc-block-cart__main {
	width: auto !important;
	padding: 0 !important;
	margin-top: 0 !important;
	min-width: 0 !important;
}

.slaps-cart-page .wc-block-components-sidebar.wc-block-cart__sidebar {
	width: auto !important;
	padding: 0 !important;
	margin-top: 0 !important;
	position: sticky;
	top: 24px;
}

/* ── Cart items table ────────────────────────────────────────────────────── */
.slaps-cart-page table.wc-block-cart-items {
	background: transparent !important;
	border-radius: 0 !important;
	overflow: visible !important;
	width: 100% !important;
	border-collapse: collapse !important;
	display: table !important;
	margin-top: 0 !important;
}

.slaps-cart-page table.wc-block-cart-items thead {
	display: none !important;
}

.slaps-cart-page tbody.wc-block-cart-items__contents {
	display: table-row-group !important;
}

/* Each row — individual card with gap */
.slaps-cart-page tr.wc-block-cart-items__row {
	display: flex !important;
	align-items: stretch !important;
	gap: 16px !important;
	padding: 20px !important;
	border: none !important;
	border-radius: 16px !important;
	background: #fff !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Disable clicks on product name/image links in cart.
   The product-name element IS the <a> in the Blocks cart, so we must
   target the element itself — not just a nested `a` — plus any nested
   links/images for the cases where the markup wraps an inner anchor. */
html body .slaps-cart-page tr.wc-block-cart-items__row .wc-block-components-product-name,
html body .slaps-cart-page tr.wc-block-cart-items__row .wc-block-components-product-name *,
html body .slaps-cart-page tr.wc-block-cart-items__row .wc-block-components-product-image,
html body .slaps-cart-page tr.wc-block-cart-items__row .wc-block-components-product-image *,
html body .slaps-cart-page tr.wc-block-cart-items__row td.wc-block-cart-item__image,
html body .slaps-cart-page tr.wc-block-cart-items__row td.wc-block-cart-item__image * {
	pointer-events: none !important;
	cursor: default !important;
}

/* Remove WC block's default hover highlight on rows */
.slaps-cart-page tr.wc-block-cart-items__row:hover,
.slaps-cart-page tr.wc-block-cart-items__row:focus {
	background: #fff !important;
	outline: none !important;
}

/* Thumbnail cell */
.slaps-cart-page td.wc-block-cart-item__image {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	flex: 0 0 auto !important;
	padding: 10px !important;
}

.slaps-cart-page td.wc-block-cart-item__image a {
	display: flex !important;
	align-items: center !important;
}

.slaps-cart-page td.wc-block-cart-item__image img {
	border-radius: 10px !important;
	width: 120px !important;
	height: 120px !important;
	object-fit: contain !important;
	display: block !important;
	background: var(--slaps-page) !important;
}

/* Product cell */
.slaps-cart-page td.wc-block-cart-item__product {
	display: block !important;
	flex: 1 !important;
	padding: 0 !important;
	min-width: 0 !important;
	vertical-align: top !important;
}

.slaps-cart-page .wc-block-components-product-name {
	font-family: "Alumni Sans", Arial, sans-serif !important;
	/* font-size:0 collapses the element's own product-name text node
	   ("Sticker Studio"), which we can't remove without breaking React.
	   Our injected .slaps-cart-item-name span restores its own size. */
	font-size: 0 !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	color: var(--slaps-black) !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	display: block !important;
	margin-bottom: 6px !important;
}

/* The title we inject in renameCartItems — inherits family/weight/transform
   from the container; only the size needs restoring from the 0 above. */
.slaps-cart-page .slaps-cart-item-name {
	font-size: 20px !important;
	line-height: 1.15 !important;
}

.slaps-cart-page .wc-block-components-product-name:hover,
.slaps-cart-page .wc-block-components-product-name:focus,
.slaps-cart-page .slaps-cart-item-name:hover {
	/* Title is not interactive — keep it black, no green hover state. */
	color: var(--slaps-black) !important;
	text-decoration: none !important;
}

/* Hide per-unit price and quantity stepper but keep the remove link */
.slaps-cart-page .wc-block-cart-item__prices {
	display: none !important;
}

.slaps-cart-page .wc-block-components-quantity {
	display: none !important;
}

/* Order item meta (sticker specs) */
.slaps-cart-page .wc-block-components-product-metadata {
	margin: 0 !important;
}

.slaps-cart-page .wc-block-components-product-metadata p,
.slaps-cart-page .wc-block-components-product-metadata span {
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 13px !important;
	color: #666 !important;
	margin: 0 !important;
}

/* Hide product short description (first p inside metadata — the "Upload your artwork..." text) */
.slaps-cart-page .wc-block-components-product-metadata__description,
.slaps-cart-page .wc-block-components-product-metadata > p:first-child {
	display: none !important;
}

/* Total cell */
.slaps-cart-page td.wc-block-cart-item__total {
	display: block !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	vertical-align: top !important;
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 18px !important;
	font-weight: 750 !important;
	color: var(--slaps-black) !important;
	white-space: nowrap !important;
}

/* Remove item link */
.slaps-cart-page .wc-block-cart-item__remove-link {
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 12px !important;
	color: #aaa !important;
	text-decoration: underline !important;
	margin-top: 8px !important;
	display: inline-block !important;
	transition: color 0.15s !important;
}

.slaps-cart-page .wc-block-cart-item__remove-link:hover {
	color: #ff2b2b !important;
}

/* ── Order summary sidebar ───────────────────────────────────────────────── */
.slaps-cart-page .wp-block-woocommerce-cart-order-summary-block {
	background: #fff !important;
	border-radius: 16px !important;
	padding: 24px !important;
	box-sizing: border-box !important;
	margin-bottom: 16px !important;
}

.slaps-cart-page .wc-block-cart__totals-title {
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--slaps-black) !important;
	border: none !important;
}

/* Totals line items */
.slaps-cart-page .wc-block-components-totals-item {
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 16px !important;
	padding: 8px 0 !important;
	border: none !important;
	border-bottom: 1px solid var(--slaps-border) !important;
}

.slaps-cart-page .wc-block-components-totals-item__label {
	font-weight: 700 !important;
	color: #666 !important;
}

.slaps-cart-page .wc-block-components-totals-item__value {
	font-weight: 700 !important;
	color: var(--slaps-black) !important;
}

/* Grand total */
.slaps-cart-page .wc-block-components-totals-footer-item {
	font-size: 24px !important;
	font-weight: 800 !important;
	border-bottom: none !important;
	padding-top: 16px !important;
}

.slaps-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.slaps-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--slaps-black) !important;
	font-weight: 800 !important;
}

/* ── Coupon panel ────────────────────────────────────────────────────────── */
.slaps-cart-page .wc-block-components-panel {
	border-top: 1px solid var(--slaps-border) !important;
	margin-top: 8px !important;
}

.slaps-cart-page .wc-block-components-panel__button {
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--slaps-black) !important;
	background: transparent !important;
	border: none !important;
	padding: 12px 0 !important;
	width: 100% !important;
	text-align: left !important;
	cursor: pointer !important;
}

.slaps-cart-page .wc-block-components-panel__button:hover {
	color: var(--slaps-lime) !important;
}

/* Hide WC separator lines inside cart totals */
.slaps-cart-page .wc-block-cart__totals-wrapper hr,
.slaps-cart-page .wp-block-woocommerce-cart-totals-block hr,
.slaps-cart-page .wc-block-components-totals-wrapper hr {
	display: none !important;
}
.slaps-cart-page .wc-block-components-totals-wrapper {
	border-top: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.slaps-cart-page .wp-block-woocommerce-cart-order-summary-block {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

/* Coupon input + apply button */
.slaps-cart-page .wc-block-components-totals-coupon__form {
	display: flex !important;
	gap: 8px !important;
	margin-top: 4px !important;
}

.slaps-cart-page .wc-block-components-totals-coupon__input input,
.slaps-cart-page .wc-block-components-text-input input {
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	background: var(--slaps-field, #f3f3f3) !important;
	border: 2px solid var(--slaps-border) !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	color: var(--slaps-black) !important;
	outline: none !important;
	transition: border-color 0.15s !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Hide WC Blocks floating label only when input is active (focused) or has a value */
.slaps-cart-page .wc-block-components-totals-coupon__input.is-active label,
.slaps-cart-page .wc-block-components-totals-coupon__input.has-value label {
	opacity: 0 !important;
	visibility: hidden !important;
}

.slaps-cart-page .wc-block-components-totals-coupon__input input::placeholder,
.slaps-cart-page .wc-block-components-text-input input::placeholder {
	color: #aaa !important;
	font-weight: 600 !important;
	font-family: "Alumni Sans", Arial, sans-serif !important;
	letter-spacing: 0.02em !important;
}

.slaps-cart-page .wc-block-components-totals-coupon__input input:focus,
.slaps-cart-page .wc-block-components-text-input input:focus {
	border-color: var(--slaps-lime) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Force full opacity on entire coupon block — WC Blocks disables the button via aria-disabled */
.slaps-cart-page .wc-block-components-totals-coupon,
.slaps-cart-page .wc-block-components-totals-coupon *,
.slaps-cart-page .wc-block-components-totals-coupon *:before,
.slaps-cart-page .wc-block-components-totals-coupon *:after {
	opacity: 1 !important;
}

.slaps-cart-page .wc-block-components-totals-coupon .wc-block-components-button {
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 20px !important;
	font-weight: 900 !important;
	background: #000 !important;
	color: var(--slaps-lime) !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 10px 20px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: background 0.15s !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

.slaps-cart-page .wc-block-components-totals-coupon .wc-block-components-button *,
.slaps-cart-page .wc-block-components-totals-coupon .wc-block-components-button .wc-block-components-button__text,
.slaps-cart-page .wc-block-components-totals-coupon button *,
.slaps-cart-page .wc-block-components-totals-coupon button .wc-block-components-button__text {
	color: var(--slaps-lime) !important;
	-webkit-text-fill-color: var(--slaps-lime) !important;
}

.slaps-cart-page .wc-block-components-totals-coupon .wc-block-components-button:hover {
	background: #222 !important;
}

/* ── Checkout button ─────────────────────────────────────────────────────── */
.slaps-cart-page .wc-block-cart__submit-container {
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.slaps-cart-page a.wc-block-cart__submit-button,
.slaps-cart-page .wc-block-cart__submit-button {
	display: block !important;
	width: 100% !important;
	background: var(--slaps-lime) !important;
	color: var(--slaps-black) !important;
	border: none !important;
	border-radius: 100px !important;
	font-family: "Alumni Sans", Arial, sans-serif !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	padding: 16px 24px !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background 0.15s !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	outline: none !important;
}

.slaps-cart-page a.wc-block-cart__submit-button:hover,
.slaps-cart-page .wc-block-cart__submit-button:hover {
	background: var(--slaps-lime) !important;
	color: var(--slaps-black) !important;
}

.slaps-cart-page a.wc-block-cart__submit-button:focus,
.slaps-cart-page .wc-block-cart__submit-button:focus {
	outline: 3px solid var(--slaps-lime) !important;
	outline-offset: 3px !important;
	box-shadow: none !important;
}

/* Back to Sticker Studio — real anchor injected via PHP */
.slaps-cart-page .slaps-back-to-studio {
	display: block;
	text-align: center;
	margin-top: 14px;
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #999;
	text-decoration: none;
	transition: color 0.15s;
}

.slaps-cart-page .slaps-back-to-studio:hover {
	color: var(--slaps-black);
}

/* ── Empty cart state ────────────────────────────────────────────────────── */
.slaps-cart-page .wp-block-woocommerce-cart-cross-sells-block,
.slaps-cart-page .wc-block-cart-cross-sells {
	display: none !important;
}

.slaps-cart-page .slaps-empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 64px 24px;
	text-align: center;
}

.slaps-cart-page .slaps-empty-cart__icon {
	font-size: 64px;
	margin-bottom: 24px;
	line-height: 1;
}

.slaps-cart-page .slaps-empty-cart__title {
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 40px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--slaps-black);
	margin: 0 0 12px;
	padding: 0;
}

.slaps-cart-page .slaps-empty-cart__sub {
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: #777;
	margin: 0 0 32px;
	line-height: 1.5;
}

.slaps-cart-page .slaps-empty-cart__btn {
	display: inline-block;
	background: var(--slaps-lime);
	color: var(--slaps-black);
	border: none;
	border-radius: 100px;
	font-family: "Alumni Sans", Arial, sans-serif;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 16px 48px;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s;
}

.slaps-cart-page .slaps-empty-cart__btn:hover {
	opacity: 0.9;
	color: var(--slaps-black);
	text-decoration: none;
}

/* Payment express options — hide */
.slaps-cart-page .wc-block-cart__payment-options {
	display: none !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
	.slaps-cart-page .wp-block-woocommerce-cart.alignwide {
		padding: 16px 16px 48px !important;
	}

	.slaps-cart-page .wp-block-woocommerce-cart.alignwide::before {
		font-size: 28px !important;
		margin-bottom: 16px !important;
	}

	.slaps-cart-page .wc-block-components-sidebar-layout.wc-block-cart {
		grid-template-columns: 1fr !important;
	}

	.slaps-cart-page .wc-block-components-sidebar.wc-block-cart__sidebar {
		position: static !important;
	}

	.slaps-cart-page td.wc-block-cart-item__image {
		padding: 8px !important;
		flex: 0 0 auto !important;
		align-self: flex-start !important;
	}

	/* Fixed square thumbnail — mirrors the desktop 120x120 approach, scaled
	   for phone. height:100% blew the image up because no ancestor sets a
	   fixed height on a flex row. */
	.slaps-cart-page td.wc-block-cart-item__image img {
		width: 88px !important;
		height: 88px !important;
		min-height: 0 !important;
		object-fit: contain !important;
		border-radius: 10px !important;
		background: var(--slaps-page) !important;
		display: block !important;
	}

	/* Smaller title so it doesn't wrap to 6 lines in the narrow column */
	.slaps-cart-page .slaps-cart-item-name {
		font-size: 16px !important;
		line-height: 1.1 !important;
	}

	/* Tighten the meta detail line on phone */
	.slaps-cart-page .wc-block-components-product-details span,
	.slaps-cart-page .wc-block-components-product-metadata span {
		font-size: 13px !important;
		line-height: 1.3 !important;
	}
}

/* ── Mobile: price lives in the CTA button, so hide the standalone price row.
   The element stays in the DOM (display:none) because the bundle writes the
   live price into it — that value is mirrored into the Order Now button. ── */
@media screen and (max-width: 600px) {
	#slaps-price-row { display: none !important; }
}

/* ── Mobile: custom size/quantity number inputs match the 8px frame.
   (Override only on mobile — the base 14px still styles desktop selects.) ── */
@media screen and (max-width: 600px) {
	#slaps-custom-configurator input[type="number"] {
		border-radius: 8px !important;
	}
}

/* ── Remove the mobile tap-highlight flash (translucent blue/grey overlay on
   tap) so it never muddies brand colours. Inherited, so the container covers
   every button/card/tab/link beneath it. ── */
.slaps-custom-sticker-product,
.slaps-cart-page {
	-webkit-tap-highlight-color: transparent;
}