/* ==============================================
   Workwear Logo Customiser - Public CSS
   Version: 1.0.0
   ============================================== */

/* CSS Variables for Theme Compatibility */
:root {
	/* Primary Colors - Override to match your theme */
	--wlc-primary-color: #173F3F;
	--wlc-primary-dark: #102d2d;
	--wlc-primary-light: #2f5f5f;
	
	/* Secondary Colors */
	--wlc-secondary-color: #FFFFFF;
	--wlc-accent-color: #E48C1D;
	
	/* Neutral Colors */
	--wlc-bg-light: #f8fbfb;
	--wlc-bg-lighter: #ffffff;
	--wlc-border-color: #d9e2e2;
	--wlc-text-dark: #173F3F;
	--wlc-text-light: #5f6f6f;
	--wlc-text-lighter: #7d8c8c;
	
	/* Sizes */
	--wlc-border-radius: 8px;
	--wlc-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--wlc-box-shadow-strong: 0 5px 40px rgba(0, 0, 0, 0.16);
}

/* Tier Pricing Table */
.wlc-tier-pricing {
	margin: 15px 0;
	padding: 15px;
	background: linear-gradient(180deg, #ffffff 0%, #f6fafa 100%);
	border: 1px solid var(--wlc-border-color);
	border-radius: 6px;
	box-shadow: var(--wlc-box-shadow);
}

.wlc-tier-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 10px;
}

.wlc-tier-price {
	font-size: 22px;
	font-weight: bold;
	color: var(--wlc-primary-color);
}

.wlc-tier-badges {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-end;
}

.wlc-badge {
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
}

.wlc-badge-guaranteed {
	background: var(--wlc-primary-color);
	color: #fff;
}

.wlc-badge-social {
	background: var(--wlc-accent-color);
	color: #fff;
}

.wlc-tier-table {
	width: 100%;
	border-collapse: collapse;
}

.wlc-tier-row {
	border-top: 1px solid var(--wlc-border-color);
	font-size: 12px;
}

.wlc-tier-row:nth-child(even) {
	background: var(--wlc-bg-lighter);
}

.wlc-tier-row.wlc-tier-active {
	border-left: 3px solid var(--wlc-accent-color);
	background: rgba(228, 140, 29, 0.10) !important;
}

.wlc-tier-save {
	padding: 8px;
}

.wlc-save-badge {
	background: var(--wlc-accent-color);
	color: #fff;
	padding: 3px 6px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: bold;
}

.wlc-tier-qty {
	text-align: right;
	padding: 8px;
	color: #666;
	font-size: 11px;
}

@media (min-width: 768px) {
	.wlc-tier-pricing {
		margin: 20px 0;
		padding: 20px;
		border-radius: 8px;
	}

	.wlc-tier-header {
		margin-bottom: 15px;
	}

	.wlc-tier-price {
		font-size: 30px;
	}

	.wlc-badge {
		padding: 5px 10px;
		font-size: 12px;
	}

	.wlc-tier-row {
		font-size: 14px;
	}

	.wlc-tier-save {
		padding: 10px;
	}

	.wlc-save-badge {
		padding: 4px 8px;
		font-size: 11px;
	}

	.wlc-tier-qty {
		padding: 10px;
		font-size: 12px;
	}
}

/* Colour Swatches */
.wlc-colour-swatches {
	margin: 15px 0;
}

.wlc-swatches-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wlc-swatch {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--wlc-border-color);
	background: #f5f7f7;
	cursor: pointer;
	position: relative;
	transition: all 0.2s;
}

.wlc-swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.wlc-swatch:hover {
	transform: scale(1.1);
}

.wlc-swatch:hover::before {
	content: attr(data-color-name);
	position: absolute;
	left: 50%;
	top: -30px;
	transform: translateX(-50%);
	background: var(--wlc-primary-color);
	color: #fff;
	padding: 3px 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	z-index: 12;
	box-shadow: 0 4px 10px rgba(23, 63, 63, 0.2);
}

.wlc-swatch.wlc-swatch-selected {
	border: 3px solid var(--wlc-primary-color);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wlc-accent-color);
}

.wlc-swatch.wlc-swatch-out-of-stock {
	opacity: 0.5;
	cursor: not-allowed;
	position: relative;
}

.wlc-swatch.wlc-swatch-out-of-stock::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: #b32d2e;
	transform: rotate(-45deg);
}

@media (min-width: 768px) {
	.wlc-swatches-grid {
		gap: 10px;
	}

	.wlc-swatch {
		width: 40px;
		height: 40px;
	}

	.wlc-swatch:hover::before {
		top: -34px;
		padding: 4px 8px;
		font-size: 12px;
		box-shadow: 0 6px 14px rgba(23, 63, 63, 0.2);
	}
}

/* Size Grid */
.wlc-size-grid {
	margin: 15px 0;
	padding: 15px;
	background: #fff;
	border: 1px solid var(--wlc-border-color);
	border-radius: 10px;
	box-shadow: var(--wlc-box-shadow);
	overflow: hidden;
	box-sizing: border-box;
}

.wlc-size-grid-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 10px;
}

.wlc-delivery-badge {
	background: #fff3e0;
	color: var(--wlc-primary-color);
	padding: 8px;
	border-radius: 8px;
	margin-bottom: 12px;
	font-weight: 600;
	font-size: 13px;
}

@media (min-width: 768px) {
	.wlc-size-grid {
		margin: 20px 0;
		padding: 20px;
		border-radius: 14px;
	}

	.wlc-size-grid-header {
		margin-bottom: 15px;
	}

	.wlc-delivery-badge {
		padding: 10px;
		border-radius: 10px;
		margin-bottom: 15px;
		font-size: 14px;
	}
}

.wlc-size-grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 20px;
	width: 100%;
	box-sizing: border-box;
}

.wlc-size-cell {
	border: 1px solid var(--wlc-border-color);
	border-radius: 12px;
	padding: 12px;
	text-align: center;
	background: linear-gradient(180deg, #fff 0%, #fbfdfd 100%);
	box-sizing: border-box;
	overflow: hidden;
	word-wrap: break-word;
}

.wlc-size-cell.wlc-size-out-of-stock {
	background:#f5f5f5;
	opacity: 0.6;
}

.wlc-size-label {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 8px;
	color: var(--wlc-primary-color);
}

.wlc-lightning {
	color: var(--wlc-accent-color);
	font-size: 14px;
}

.wlc-qty-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 0;
	width: 100%;
	max-width: 140px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 480px) {
	.wlc-size-grid-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media (min-width: 768px) {
	.wlc-size-grid-container {
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}
	
	.wlc-size-cell {
		padding: 15px;
	}
	
	.wlc-size-label {
		font-size: 18px;
		margin-bottom: 10px;
	}
}

/* PLUS / MINUS BUTTONS */
.wlc-qty-minus,
.wlc-qty-plus {
	width: 36px;
	height: 28px;
	border: none;
	background: var(--wlc-primary-color);
	color: #fff;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;
	margin: 0;
	font-size: 20px;
	line-height: 1;

	border-radius: 50%;
	box-sizing: border-box;
	box-shadow: 0 4px 10px rgba(23, 63, 63, 0.15);

	transition: transform 0.15s ease,
	            background 0.15s ease,
	            box-shadow 0.15s ease;
}

.wlc-qty-minus:hover,
.wlc-qty-plus:hover {
	background: var(--wlc-accent-color);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(228, 140, 29, 0.2);
}

.wlc-qty-minus:disabled,
.wlc-qty-plus:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* INPUT */
.wlc-qty-input {
	width: 52px;
	height: 34px;

	padding: 0;
	margin: 0;

	text-align: center;

	border: 1px solid var(--wlc-border-color);
	border-radius: 8px;

	font-weight: 700;
	color: var(--wlc-primary-color);
	background: #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	-moz-appearance: textfield;
	font-size: 14px;
}

/* Remove spinner arrows */
.wlc-qty-input::-webkit-outer-spin-button,
.wlc-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

@media (min-width: 768px) {
	.wlc-qty-minus,
	.wlc-qty-plus {
		width: 40px;
		height: 30px;
		font-size: 24px;
		box-shadow: 0 6px 14px rgba(23, 63, 63, 0.18);
	}

	.wlc-qty-minus:hover,
	.wlc-qty-plus:hover {
		box-shadow: 0 8px 18px rgba(228, 140, 29, 0.24);
	}

	.wlc-qty-input {
		width: 56px;
		height: 38px;
		border-radius: 10px;
		font-size: 16px;
	}
}

.wlc-stock-status {
	margin: 4px 0;
	font-size: 12px;
	font-weight: 600;
}

.wlc-in-stock {
	color: var(--wlc-primary-color);
}

.wlc-out-of-stock {
	color: #b32d2e;
}

.wlc-stock-qty {
	font-size: 11px;
	color: #666;
}

@media (min-width: 768px) {
	.wlc-stock-status {
		margin: 5px 0;
		font-size: 13px;
	}

	.wlc-stock-qty {
		font-size: 12px;
	}
}

/* Checkout review enhancements */
.woocommerce-checkout-review-order-table .wlc-checkout-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.woocommerce-checkout-review-order-table .wlc-checkout-product-media {
	flex: 0 0 auto;
}

.woocommerce-checkout-review-order-table .wlc-checkout-product-image {
	display: block;
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--wlc-border-color);
	background: #fff;
}

.woocommerce-checkout-review-order-table .wlc-checkout-product-content {
	min-width: 0;
	flex: 1;
	width: 100%;
}

.woocommerce-checkout-review-order-table .wlc-checkout-product-title {
	font-weight: 700;
	color: var(--wlc-text-dark);
	font-size: 13px;
}

.woocommerce-checkout-review-order-table .wlc-checkout-product-details {
	margin-top: 8px;
	padding: 8px;
	background: var(--wlc-bg-light);
	border: 1px solid var(--wlc-border-color);
	border-left: 3px solid var(--wlc-accent-color);
	border-radius: 6px;
}

.woocommerce-checkout-review-order-table .wlc-checkout-detail-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	line-height: 1.4;
	padding: 3px 0;
}

.woocommerce-checkout-review-order-table .wlc-checkout-detail-label {
	font-weight: 700;
	color: var(--wlc-primary-color);
}

.woocommerce-checkout-review-order-table .wlc-checkout-detail-value {
	text-align: center;
	color: var(--wlc-text-dark);
	font-size: 11px;
}

@media (min-width: 480px) {
	.woocommerce-checkout-review-order-table .wlc-checkout-product {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-product-image {
		width: 56px;
		height: 56px;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-product-title {
		font-size: 14px;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-product-details {
		padding: 9px;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-detail-row {
		font-size: 13px;
		padding: 2px 0;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-detail-value {
		text-align: left;
		font-size: 12px;
	}
}

@media (min-width: 768px) {
	.woocommerce-checkout-review-order-table .wlc-checkout-product {
		gap: 12px;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-product-media {
		flex: 0 0 64px;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-product-image {
		width: 64px;
		height: 64px;
		border-radius: 8px;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-product-title {
		font-size: 15px;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-product-details {
		margin-top: 8px;
		padding: 10px 12px;
		border-radius: 8px;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-detail-row {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		gap: 12px;
		font-size: 13px;
		padding: 2px 0;
	}

	.woocommerce-checkout-review-order-table .wlc-checkout-detail-value {
		text-align: right;
	}
}

#wlc-add-to-cart-btn {
	width: 100%;
	padding: 15px;
	font-size: 16px;
	font-weight: bold;
	background: var(--wlc-accent-color);
	color: #fff;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(228, 140, 29, 0.24);
}

#wlc-add-to-cart-btn:hover:not(:disabled) {
	background: var(--wlc-primary-color);
}

#wlc-add-to-cart-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hide default WooCommerce purchase controls on all single product pages — custom size grid replaces them */
.single-product.wlc-logo-enabled form.cart,
.single-product.wlc-logo-enabled form.variations_form,
.single-product.wlc-logo-enabled .variations_form,
.single-product.wlc-logo-enabled .single_variation_wrap,
.single-product.wlc-logo-enabled .woocommerce-variation,
.single-product.wlc-logo-enabled .variations,
.single-product.wlc-logo-enabled .reset_variations,
.single-product.wlc-logo-enabled .single_variation,
.single-product.wlc-logo-enabled .woocommerce-variation-price,
.single-product.wlc-logo-enabled .woocommerce-variation-availability,
.single-product.wlc-logo-enabled .woo-variation-swatches,
.single-product.wlc-logo-enabled .variable-items-wrapper,
.single-product.wlc-logo-enabled .swatchly-product-variation,
.single-product.wlc-logo-enabled .tawcvs-swatches,
.single-product.wlc-logo-enabled .cfvsw-swatches-container {
	display: none !important;
}

.single-product.wlc-logo-enabled form.cart .quantity,
.single-product.wlc-logo-enabled form.cart .single_add_to_cart_button,
.single-product.wlc-logo-enabled form.cart button[name="add-to-cart"],
.single-product.wlc-logo-enabled form.cart .variations_button .quantity,
.single-product.wlc-logo-enabled form.cart .woocommerce-variation-add-to-cart,
.single-product.wlc-logo-enabled .woocommerce-variation-add-to-cart .quantity,
.single-product.wlc-logo-enabled .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	display: none !important;
}

.single-product.wlc-logo-enabled form.cart {
	margin-bottom: 0;
}

.single-product.wlc-logo-enabled form.cart .wlc-size-grid {
	margin-top: 18px;
}

/* Logo Modal */
.wlc-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
}

.wlc-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
}

.wlc-modal-content {
	position: relative;
	max-width: 800px;
	margin: 50px auto;
	background: #fff;
	border-radius: 8px;
	padding: 30px;
	max-height: 80vh;
	overflow-y: auto;
}

.wlc-modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: none;
	border: none;
	font-size: 30px;
	cursor: pointer;
	color: #999;
}

.wlc-step-footer {
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
}

/* Responsive */
@media (min-width: 480px) {
	.wlc-step-footer {
		margin-top: 20px;
		gap: 10px;
	}
}


/* Added to Cart Modal */
.wlc-added-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: 10px;
}

.wlc-added-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: -1;
}

.wlc-added-content {
	position: relative;
	max-width: 600px;
	width: 100%;
	background: #fff;
	border-radius: 6px;
	padding: 25px;
	text-align: center;
	box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
	margin: auto;
}

.wlc-added-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #999;
	line-height: 1;
	padding: 5px;
	width: 30px;
	height: 30px;
}

.wlc-added-icon {
	margin: 0 auto 15px;
	width: 50px;
	height: 50px;
}

.wlc-added-content h2 {
	font-size: 20px;
	margin: 0 0 20px;
	color: #333;
}

.wlc-added-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	margin-bottom: 15px;
	text-align: center;
}

.wlc-added-product-image {
	flex-shrink: 0;
}

.wlc-added-product-image img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
}

.wlc-added-product-details h3 {
	margin: 0 0 4px;
	font-size: 14px;
}

.wlc-added-product-details p {
	margin: 2px 0;
	font-size: 12px;
	color: #666;
}

.wlc-added-pricing {
	margin: 15px 0;
	padding: 12px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.wlc-added-price-row {
	display: flex;
	justify-content: space-between;
	margin: 6px 0;
	font-size: 14px;
}

.wlc-added-price-row.wlc-added-total {
	font-weight: bold;
	font-size: 16px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #ddd;
}

.wlc-added-vat {
	text-align: right;
	font-size: 12px;
	color: #666;
	margin: 4px 0 0;
}

.wlc-added-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 15px 0 10px;
}

.wlc-btn-add-logo {
	background: #e65100 !important;
	color: #fff !important;
	padding: 12px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 4px;
	text-decoration: none;
	display: block;
}

.wlc-btn-add-logo:hover {
	background: #d84315 !important;
}

.wlc-btn-view-basket {
	background: #fff !important;
	color: #333 !important;
	border: 2px solid #ddd !important;
	padding: 10px !important;
	font-size: 14px !important;
	text-decoration: none;
	display: block;
}

.wlc-continue-shopping {
	color: #666;
	text-decoration: underline;
	font-size: 12px;
	margin-top: 10px;
	display: inline-block;
}

@media (min-width: 480px) {
	.wlc-added-content {
		padding: 30px;
	}

	.wlc-added-icon {
		width: 60px;
		height: 60px;
		margin: 0 auto 20px;
	}

	.wlc-added-content h2 {
		font-size: 24px;
		margin: 0 0 25px;
	}

	.wlc-added-product {
		flex-direction: row;
		text-align: left;
		gap: 15px;
	}

	.wlc-added-product-image img {
		width: 70px;
		height: 70px;
	}

	.wlc-added-product-details h3 {
		font-size: 15px;
	}

	.wlc-added-product-details p {
		font-size: 13px;
	}

	.wlc-added-pricing {
		padding: 15px;
	}

	.wlc-added-price-row {
		font-size: 15px;
	}

	.wlc-added-price-row.wlc-added-total {
		font-size: 17px;
	}

	.wlc-added-actions {
		gap: 10px;
		margin: 20px 0;
	}

	.wlc-btn-add-logo {
		padding: 14px !important;
		font-size: 15px !important;
	}

	.wlc-btn-view-basket {
		padding: 12px !important;
		font-size: 15px !important;
	}
}

@media (min-width: 768px) {
	.wlc-added-content {
		padding: 40px;
		border-radius: 8px;
	}

	.wlc-added-icon {
		width: 70px;
		height: 70px;
	}

	.wlc-added-content h2 {
		font-size: 28px;
		margin: 0 0 30px;
	}

	.wlc-added-product {
		padding: 20px;
		border-radius: 8px;
	}

	.wlc-added-product-image img {
		width: 80px;
		height: 80px;
	}

	.wlc-added-product-details h3 {
		margin: 0 0 5px;
		font-size: 16px;
	}

	.wlc-added-product-details p {
		margin: 3px 0;
		font-size: 14px;
	}

	.wlc-added-pricing {
		margin: 20px 0;
		padding: 15px;
	}

	.wlc-added-price-row {
		font-size: 16px;
		margin: 8px 0;
	}

	.wlc-added-price-row.wlc-added-total {
		font-size: 18px;
		margin-top: 15px;
		padding-top: 15px;
	}

	.wlc-added-actions {
		gap: 10px;
		margin: 20px 0;
	}

	.wlc-btn-add-logo {
		padding: 15px !important;
		font-size: 16px !important;
	}

	.wlc-btn-view-basket {
		padding: 13px !important;
		font-size: 16px !important;
	}

	.wlc-continue-shopping {
		font-size: 14px;
		margin-top: 15px;
	}
}

/* Logo Customizer Full Page */
.wlc-customizer-page {
	background: #f8f9fa;
	min-height: 100vh;
	width: 100%;
}

/* Force full-width content area for customizer regardless of theme sidebars/layout wrappers. */
body.wlc-customizer-page-body .site,
body.wlc-customizer-page-body #page,
body.wlc-customizer-page-body #primary,
body.wlc-customizer-page-body #main,
body.wlc-customizer-page-body .content-area,
body.wlc-customizer-page-body .site-main {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

body.wlc-customizer-page-body .widget-area,
body.wlc-customizer-page-body aside,
body.wlc-customizer-page-body #secondary {
	display: none !important;
}

/* Astra desktop layout sets .site-content .ast-container to flex.
   Keep this page isolated and centered without changing other pages. */
body.wlc-customizer-page-body .site-content .ast-container {
	display: block !important;
	max-width: none !important;
	padding: 0 !important;
}

@media (min-width: 922px) {
	body.wlc-customizer-page-body .site-content .ast-container {
		display: block !important;
	}
}

.wlc-customizer-header {
	background: #fff;
	padding: 12px 0;
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
}

.wlc-customizer-container {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}

.wlc-back-link {
	color: #666;
	text-decoration: none;
	font-size: 13px;
	margin-bottom: 8px;
	display: inline-block;
}

.wlc-back-link:hover {
	color: #333;
}

.wlc-customizer-header h1 {
	margin: 8px 0 0;
	font-size: 24px;
}

@media (min-width: 768px) {
	.wlc-customizer-header {
		padding: 20px 0;
		margin-bottom: 30px;
	}
	
	.wlc-customizer-container {
		padding: 0 24px;
	}
	
	.wlc-back-link {
		font-size: 14px;
		margin-bottom: 10px;
	}
	
	.wlc-customizer-header h1 {
		margin: 10px 0 0;
		font-size: 32px;
	}
}

/* Match customizer controls/buttons to site style while keeping scope local. */
body.wlc-customizer-page-body .wlc-customizer-page .button,
body.wlc-customizer-page-body .wlc-customizer-page button,
body.wlc-customizer-page-body .wlc-customizer-page input[type="submit"],
body.wlc-customizer-page-body .wlc-customizer-page input[type="button"] {
	background: var(--wlc-primary-color);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 16px 28px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
}

body.wlc-customizer-page-body .wlc-customizer-page .button:hover,
body.wlc-customizer-page-body .wlc-customizer-page button:hover,
body.wlc-customizer-page-body .wlc-customizer-page input[type="submit"]:hover,
body.wlc-customizer-page-body .wlc-customizer-page input[type="button"]:hover {
	background: var(--wlc-primary-dark);
}

body.wlc-customizer-page-body .wlc-customizer-page button:disabled,
body.wlc-customizer-page-body .wlc-customizer-page .button:disabled,
body.wlc-customizer-page-body .wlc-customizer-page button[disabled],
body.wlc-customizer-page-body .wlc-customizer-page .button[disabled],
body.wlc-customizer-page-body .wlc-customizer-page .button.disabled,
body.wlc-customizer-page-body .wlc-customizer-page input[type="submit"][disabled],
body.wlc-customizer-page-body .wlc-customizer-page input[type="button"][disabled] {
	background: var(--wlc-primary-color) !important;
	color: #fff !important;
	border-radius: 0 !important;
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
	pointer-events: none;
}

body.wlc-customizer-page-body .wlc-customizer-page button:disabled:hover,
body.wlc-customizer-page-body .wlc-customizer-page .button:disabled:hover,
body.wlc-customizer-page-body .wlc-customizer-page button[disabled]:hover,
body.wlc-customizer-page-body .wlc-customizer-page .button[disabled]:hover,
body.wlc-customizer-page-body .wlc-customizer-page .button.disabled:hover {
	background: var(--wlc-primary-color) !important;
}

body.wlc-customizer-page-body .wlc-position-counter strong,
body.wlc-customizer-page-body .wlc-selected-info,
body.wlc-customizer-page-body .wlc-sidebar-badge .dashicons,
body.wlc-customizer-page-body .wlc-confidence-box .dashicons {
	color: var(--wlc-primary-color);
}

body.wlc-customizer-page-body .wlc-position-card:hover,
body.wlc-customizer-page-body .wlc-method-option:hover {
	border-color: var(--wlc-primary-color);
}

body.wlc-customizer-page-body .wlc-position-card.wlc-selected,
body.wlc-customizer-page-body .wlc-method-option.wlc-selected {
	border-color: var(--wlc-primary-color);
	background: rgba(23, 63, 63, 0.08);
}

body.wlc-customizer-page-body .wlc-upload-hint,
body.wlc-customizer-page-body .wlc-lightning {
	color: var(--wlc-accent-color);
}

.wlc-customizer-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

.wlc-customizer-main {
	min-width: 0;
	background: #fff;
	padding: 16px;
	border-radius: 6px;
}

.wlc-customizer-step h2 {
	font-size: 20px;
	margin: 0 0 16px;
}

@media (min-width: 480px) {
	.wlc-customizer-main {
		padding: 24px;
	}

	.wlc-customizer-step h2 {
		font-size: 22px;
		margin: 0 0 18px;
	}
}

@media (min-width: 768px) {
	.wlc-customizer-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 30px;
	}

	.wlc-customizer-main {
		padding: 40px;
		border-radius: 8px;
	}
	
	.wlc-customizer-step h2 {
		font-size: 28px;
		margin: 0 0 30px;
	}
}

@media (min-width: 1200px) {
	.wlc-customizer-layout {
		grid-template-columns: minmax(0, 1fr) 350px;
	}
}

.wlc-position-counter {
	background: #f8f9fa;
	padding: 10px;
	border-radius: 4px;
	margin-bottom: 12px;
	font-size: 13px;
}

.wlc-position-counter strong {
	color: #4CAF50;
	font-size: 15px;
}

.wlc-positions-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 15px;
}

.wlc-position-card {
	border: 2px solid #ddd;
	border-radius: 6px;
	padding: 12px;
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
	background: #fff;
}

.wlc-position-card:hover {
	border-color: #4CAF50;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wlc-position-card.wlc-selected {
	border-color: #4CAF50;
	border-width: 3px;
	background: #e8f5e9;
}

.wlc-position-card-inner img {
	width: 100%;
	height: 80px;
	object-fit: contain;
	margin-bottom: 8px;
}

.wlc-position-placeholder {
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	margin-bottom: 8px;
	border-radius: 4px;
}

.wlc-position-placeholder .dashicons {
	font-size: 32px;
	color: #ccc;
}

.wlc-position-card-inner h3 {
	margin: 0 0 6px;
	font-size: 14px;
}

@media (min-width: 480px) {
	.wlc-position-counter {
		padding: 11px;
		margin-bottom: 13px;
		font-size: 13px;
	}

	.wlc-positions-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 11px;
		margin-bottom: 16px;
	}

	.wlc-position-card {
		padding: 13px;
		border-radius: 7px;
	}

	.wlc-position-card-inner img {
		height: 90px;
		margin-bottom: 9px;
	}

	.wlc-position-placeholder {
		height: 90px;
		margin-bottom: 9px;
	}

	.wlc-position-placeholder .dashicons {
		font-size: 36px;
	}

	.wlc-position-card-inner h3 {
		margin: 0 0 7px;
		font-size: 15px;
	}
}

@media (min-width: 768px) {
	.wlc-position-counter {
		padding: 15px;
		margin-bottom: 20px;
		font-size: 16px;
	}

	.wlc-position-counter strong {
		font-size: 20px;
	}

	.wlc-positions-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		margin-bottom: 30px;
	}

	.wlc-position-card {
		padding: 20px;
		border-radius: 8px;
	}

	.wlc-position-card:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	}

	.wlc-position-card-inner img {
		height: 150px;
		margin-bottom: 15px;
	}

	.wlc-position-placeholder {
		height: 150px;
		margin-bottom: 15px;
	}

	.wlc-position-placeholder .dashicons {
		font-size: 60px;
	}

	.wlc-position-card-inner h3 {
		margin: 0 0 10px;
		font-size: 18px;
	}
}

.wlc-position-methods {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wlc-method-badge {
	font-size: 10px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 4px;
}

.wlc-method-badge .dashicons {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

@media (min-width: 480px) {
	.wlc-position-methods {
		gap: 4px;
	}

	.wlc-method-badge {
		font-size: 11px;
		gap: 4px;
	}

	.wlc-method-badge .dashicons {
		font-size: 13px;
		width: 13px;
		height: 13px;
	}
}

@media (min-width: 768px) {
	.wlc-position-methods {
		gap: 5px;
	}

	.wlc-method-badge {
		font-size: 12px;
		gap: 5px;
	}

	.wlc-method-badge .dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}
}

.wlc-position-checkmark {
	position: absolute;
	top: 6px;
	right: 6px;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 18px;
}

.wlc-position-card.wlc-selected .wlc-position-checkmark {
	opacity: 1;
}

@media (min-width: 768px) {
	.wlc-position-checkmark {
		top: 10px;
		right: 10px;
	}
}

.wlc-step-actions {
	margin-top: 16px;
}

.wlc-error-message {
	color: #d32f2f;
	font-weight: 600;
	margin-bottom: 12px;
	font-size: 13px;
}

.wlc-action-buttons {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	gap: 10px;
}

.wlc-selected-info {
	font-size: 13px;
	color: #4CAF50;
	font-weight: 600;
}

.wlc-selected-info span {
	font-size: 15px;
}

@media (min-width: 480px) {
	.wlc-step-actions {
		margin-top: 18px;
	}

	.wlc-error-message {
		margin-bottom: 13px;
		font-size: 14px;
	}

	.wlc-action-buttons {
		gap: 11px;
	}

	.wlc-selected-info {
		font-size: 14px;
	}

	.wlc-selected-info span {
		font-size: 16px;
	}
}

@media (min-width: 768px) {
	.wlc-step-actions {
		margin-top: 30px;
	}

	.wlc-error-message {
		margin-bottom: 15px;
		font-size: 15px;
	}

	.wlc-action-buttons {
		flex-direction: row;
		gap: 15px;
	}

	.wlc-selected-info {
		font-size: 16px;
	}

	.wlc-selected-info span {
		font-size: 20px;
	}
}

/* Method Selection */
.wlc-method-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 15px;
}

.wlc-method-option {
	border: 2px solid #ddd;
	border-radius: 6px;
	padding: 20px 12px;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	position: relative;
	background: #fff;
}

.wlc-method-option:hover {
	border-color: #4CAF50;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wlc-method-option.wlc-selected {
	border-color: #4CAF50;
	border-width: 3px;
	background: #e8f5e9;
}

.wlc-method-icon {
	margin-bottom: 10px;
}

.wlc-method-icon .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: #666;
}

.wlc-method-option h3 {
	margin: 0 0 6px;
	font-size: 16px;
}

.wlc-method-option p {
	color: #666;
	margin: 0;
	font-size: 12px;
}

@media (min-width: 480px) {
	.wlc-method-options {
		grid-template-columns: repeat(2, 1fr);
		gap: 11px;
		margin-bottom: 16px;
	}

	.wlc-method-option {
		padding: 25px 12px;
		border-radius: 7px;
	}

	.wlc-method-icon {
		margin-bottom: 11px;
	}

	.wlc-method-icon .dashicons {
		font-size: 36px;
		width: 36px;
		height: 36px;
	}

	.wlc-method-option h3 {
		margin: 0 0 7px;
		font-size: 18px;
	}

	.wlc-method-option p {
		font-size: 13px;
	}
}

@media (min-width: 768px) {
	.wlc-method-options {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-bottom: 30px;
	}

	.wlc-method-option {
		padding: 40px 20px;
		border-radius: 8px;
	}

	.wlc-method-option:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	}

	.wlc-method-icon {
		margin-bottom: 20px;
	}

	.wlc-method-icon .dashicons {
		font-size: 60px;
		width: 60px;
		height: 60px;
	}

	.wlc-method-option h3 {
		margin: 0 0 10px;
		font-size: 24px;
	}

	.wlc-method-option p {
		font-size: 14px;
	}
}

.wlc-method-checkmark {
	position: absolute;
	top: 8px;
	right: 8px;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 20px;
}

.wlc-method-option.wlc-selected .wlc-method-checkmark {
	opacity: 1;
}

@media (min-width: 768px) {
		.wlc-method-checkmark {
			top: 15px;
			right: 15px;
			font-size: 24px;
	}
}

/* Step 2: Print or Embroidery cards */
.wlc-app-method-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 15px;
}

.wlc-app-method-option {
	border: 2px solid #ddd;
	border-radius: 6px;
	padding: 12px;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	position: relative;
	background: #fff;
}

.wlc-app-method-option:hover {
	border-color: #4CAF50;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wlc-app-method-option.wlc-selected {
	border-color: #4CAF50;
	border-width: 3px;
	background: #e8f5e9;
}

.wlc-app-method-option img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 10px;
	display: block;
}

.wlc-app-method-option h3 {
	margin: 0 0 6px;
	font-size: 16px;
}

.wlc-app-method-option p {
	color: #666;
	margin: 0;
	font-size: 12px;
}

.wlc-app-method-checkmark {
	position: absolute;
	top: 8px;
	right: 8px;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 20px;
}

.wlc-app-method-option.wlc-selected .wlc-app-method-checkmark {
	opacity: 1;
}

@media (min-width: 480px) {
	.wlc-app-method-options {
		grid-template-columns: repeat(2, 1fr);
		gap: 11px;
		margin-bottom: 16px;
	}
}

@media (min-width: 768px) {
	.wlc-app-method-options {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-bottom: 30px;
	}

	.wlc-app-method-option {
		padding: 20px;
		border-radius: 8px;
	}

	.wlc-app-method-option h3 {
		margin: 0 0 10px;
		font-size: 24px;
	}

	.wlc-app-method-option p {
		font-size: 14px;
	}

	.wlc-app-method-checkmark {
		top: 15px;
		right: 15px;
		font-size: 24px;
	}
}

/* Upload Section */
.wlc-upload-area {
	border: 2px dashed #ddd;
	border-radius: 6px;
	padding: 24px 12px;
	text-align: center;
	margin-bottom: 16px;
	background: #fafafa;
}

.wlc-upload-icon {
	margin-bottom: 10px;
}

.wlc-upload-icon .dashicons {
	font-size: 32px;
	color: #666;
}

#wlc-upload-btn {
	background: #4CAF50 !important;
	color: #fff !important;
	padding: 11px 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

#wlc-upload-btn .dashicons {
	margin-right: 5px;
}

.wlc-upload-hint {
	color: #4CAF50;
	font-weight: 600;
	margin: 10px 0 6px;
	font-size: 12px;
}

.wlc-upload-info {
	color: #666;
	font-size: 11px;
	max-width: 600px;
	margin: 0 auto;
}

#wlc-upload-preview {
	text-align: center;
}

#wlc-preview-image {
	max-width: 100%;
	max-height: 180px;
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-bottom: 10px;
}

.wlc-text-input {
	width: 100%;
	padding: 11px;
	border: 2px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	margin-top: 8px;
	box-sizing: border-box;
}

@media (min-width: 480px) {
	.wlc-upload-area {
		padding: 30px 16px;
		margin-bottom: 18px;
	}

	.wlc-upload-icon .dashicons {
		font-size: 36px;
	}

	#wlc-upload-btn {
		padding: 12px 20px !important;
		font-size: 14px !important;
	}

	.wlc-upload-hint {
		margin: 12px 0 7px;
		font-size: 13px;
	}

	.wlc-upload-info {
		font-size: 12px;
	}

	#wlc-preview-image {
		max-height: 220px;
		margin-bottom: 12px;
	}

	.wlc-text-input {
		padding: 12px;
		font-size: 15px;
		margin-top: 9px;
	}
}

@media (min-width: 768px) {
	.wlc-upload-area {
		border: 3px dashed #ddd;
		padding: 60px 40px;
		margin-bottom: 30px;
		border-radius: 8px;
	}

	.wlc-upload-icon .dashicons {
		font-size: 60px;
	}

	#wlc-upload-btn {
		padding: 15px 30px !important;
		font-size: 16px !important;
	}

	#wlc-upload-btn .dashicons {
		margin-right: 8px;
	}

	.wlc-upload-hint {
		margin: 15px 0 10px;
		font-size: 14px;
	}

	.wlc-upload-info {
		font-size: 14px;
	}

	#wlc-preview-image {
		max-height: 300px;
		margin-bottom: 15px;
	}

	.wlc-text-input {
		padding: 15px;
		font-size: 16px;
		margin-top: 10px;
	}
}

	#wlc-upload-btn {
		padding: 15px 30px !important;
		font-size: 16px !important;
	}

	#wlc-upload-btn .dashicons {
		margin-right: 8px;
	}

	.wlc-upload-hint {
		margin: 15px 0 10px;
		font-size: 14px;
	}

	.wlc-upload-info {
		font-size: 14px;
	}

	#wlc-preview-image {
		max-height: 300px;
		margin-bottom: 15px;
	}

	.wlc-text-input {
		padding: 15px;
		margin-top: 10px;
	}
}

.wlc-confidence-box {
	background: #e8f5e9;
	border: 1px solid #4CAF50;
	border-radius: 6px;
	padding: 12px;
	margin-top: 16px;
}

.wlc-confidence-box h4 {
	margin: 0 0 8px;
	font-size: 14px;
	color: #2e7d32;
	display: flex;
	align-items: center;
	gap: 6px;
}

.wlc-confidence-box .dashicons {
	color: #4CAF50;
	font-size: 16px;
}

.wlc-confidence-box p {
	margin: 6px 0;
	color: #333;
	font-size: 12px;
}

@media (min-width: 480px) {
	.wlc-confidence-box {
		padding: 14px;
		margin-top: 18px;
	}

	.wlc-confidence-box h4 {
		margin: 0 0 9px;
		font-size: 15px;
		gap: 7px;
	}

	.wlc-confidence-box .dashicons {
		font-size: 18px;
	}

	.wlc-confidence-box p {
		margin: 7px 0;
		font-size: 13px;
	}
}

@media (min-width: 768px) {
	.wlc-confidence-box {
		border-radius: 8px;
		padding: 20px;
		margin-top: 30px;
	}

	.wlc-confidence-box h4 {
		margin: 0 0 15px;
		font-size: 18px;
		gap: 8px;
	}

	.wlc-confidence-box .dashicons {
		font-size: 24px;
	}

	.wlc-confidence-box p {
		margin: 10px 0;
		font-size: 14px;
	}
}

/* Sidebar */
.wlc-customizer-sidebar {
	width: 100%;
	order: -1;
}

.wlc-batch-variation-list {
	max-height: 100px;
	overflow: auto;
	padding-right: 4px;
}

.wlc-batch-variation-list p {
	margin: 3px 0;
	font-size: 12px;
	line-height: 1.3;
	color: #4a5a5a;
}

@media (min-width: 480px) {
	.wlc-customizer-sidebar {
		order: 0;
	}

	.wlc-batch-variation-list {
		max-height: 120px;
	}

	.wlc-batch-variation-list p {
		font-size: 12px;
		line-height: 1.35;
	}
}

@media (min-width: 768px) {
	.wlc-customizer-sidebar {
		width: 320px;
	}
	
	.wlc-batch-variation-list {
		max-height: 140px;
	}

	.wlc-batch-variation-list p {
		font-size: 13px;
	}
}

@media (min-width: 1200px) {
	.wlc-customizer-sidebar {
		width: 350px;
	}
}

@media (min-width: 1200px) {
	.wlc-customizer-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

.wlc-sidebar-box {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 12px;
}

.wlc-sidebar-box h3 {
	margin: 0 0 10px;
	font-size: 14px;
}

.wlc-sidebar-product {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.wlc-sidebar-product img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.wlc-sidebar-product-info h4 {
	margin: 0 0 2px;
	font-size: 12px;
}

.wlc-sidebar-product-info p {
	margin: 1px 0;
	font-size: 11px;
	color: #666;
}

.wlc-sidebar-note {
	color: #666;
	font-size: 11px;
	font-style: italic;
	padding-top: 10px;
	border-top: 1px solid #ddd;
}

.wlc-sidebar-badges {
	background: #f8f9fa;
}

.wlc-sidebar-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	border-bottom: 1px solid #ddd;
	font-size: 11px;
}

.wlc-sidebar-badge:last-child {
	border-bottom: none;
}

.wlc-sidebar-badge .dashicons {
	color: #4CAF50;
	font-size: 14px;
	flex-shrink: 0;
}

@media (min-width: 480px) {
	.wlc-sidebar-box {
		padding: 13px;
		margin-bottom: 13px;
	}

	.wlc-sidebar-box h3 {
		margin: 0 0 11px;
		font-size: 15px;
	}

	.wlc-sidebar-product {
		gap: 10px;
		margin-bottom: 11px;
	}

	.wlc-sidebar-product img {
		width: 55px;
		height: 55px;
	}

	.wlc-sidebar-product-info h4 {
		margin: 0 0 3px;
		font-size: 13px;
	}

	.wlc-sidebar-product-info p {
		margin: 2px 0;
		font-size: 12px;
	}

	.wlc-sidebar-note {
		font-size: 12px;
		padding-top: 11px;
	}

	.wlc-sidebar-badge {
		gap: 7px;
		padding: 7px 0;
		font-size: 12px;
	}

	.wlc-sidebar-badge .dashicons {
		font-size: 16px;
	}
}

@media (min-width: 768px) {
	.wlc-sidebar-box {
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 20px;
	}

	.wlc-sidebar-box h3 {
		margin: 0 0 20px;
		font-size: 18px;
	}

	.wlc-sidebar-product {
		gap: 15px;
		margin-bottom: 15px;
	}

	.wlc-sidebar-product img {
		width: 80px;
		height: 80px;
	}

	.wlc-sidebar-product-info h4 {
		margin: 0 0 5px;
		font-size: 16px;
	}

	.wlc-sidebar-product-info p {
		margin: 3px 0;
		font-size: 14px;
	}

	.wlc-sidebar-note {
		font-size: 14px;
		padding-top: 15px;
	}

	.wlc-sidebar-badge {
		gap: 10px;
		padding: 12px 0;
		font-size: 14px;
	}

	.wlc-sidebar-badge .dashicons {
		font-size: 20px;
	}
}

.wlc-empty-message {
	text-align: center;
	padding: 40px;
	color: #666;
	font-size: 16px;
}

/* Logo Badge — dark badge on product images */
/* Ensure product image containers have relative positioning for badge */
.woocommerce-product__image,
ul.products li.product a,
.woocommerce-product__image-start-link,
.products .wc-block-grid__product-image,
.single-product div.product div.wc-product-image {
	position: relative !important;
}

.wlc-logo-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 56px;
	height: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px dashed var(--wlc-primary-color);
	border-radius: 50%;
	z-index: 10;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	text-align: center;
	line-height: 1.15;
}

.wlc-logo-badge-line1 {
	font-size: 7px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--wlc-text-light, #5f6f6f);
}

.wlc-logo-badge-line2 {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--wlc-primary-color);
}

/* On archive pages — smaller circle */
ul.products li.product a.wlc-logo-badge,
ul.products li.product .wlc-logo-badge {
	top: 6px;
	left: 6px;
	width: 44px;
	height: 44px;
}

ul.products li.product .wlc-logo-badge-line1 {
	font-size: 6px;
}

ul.products li.product .wlc-logo-badge-line2 {
	font-size: 9px;
}

@media (min-width: 768px) {
	.wlc-logo-badge {
		top: 10px;
		left: 10px;
		width: 68px;
		height: 68px;
	}

	.wlc-logo-badge-line1 {
		font-size: 8px;
	}

	.wlc-logo-badge-line2 {
		font-size: 13px;
	}

	ul.products li.product .wlc-logo-badge {
		top: 8px;
		left: 8px;
		width: 56px;
		height: 56px;
	}

	ul.products li.product .wlc-logo-badge-line1 {
		font-size: 7px;
	}

	ul.products li.product .wlc-logo-badge-line2 {
		font-size: 11px;
	}
}

/* Step 3 Upload Dropzone */
.wlc-upload-dropzone {
	margin-bottom: 20px;
}

.wlc-upload-dropzone-icon {
	color: var(--wlc-primary-color);
	margin-bottom: 12px;
	line-height: 0;
}

.wlc-upload-dropzone-icon svg {
	width: 48px;
	height: 48px;
}

.wlc-upload-dropzone h3 {
	margin: 0 0 6px;
	font-size: 18px;
	color: var(--wlc-text-dark);
}

.wlc-upload-dropzone p {
	margin: 0;
	font-size: 13px;
	color: var(--wlc-text-light);
}

.wlc-upload-formats {
	font-size: 11px !important;
	color: var(--wlc-text-lighter) !important;
	margin-top: 4px !important;
}

/* Upload area — cleaner design */
.wlc-upload-area {
	border: 2px dashed var(--wlc-border-color);
	border-radius: var(--wlc-border-radius);
	padding: 30px 20px;
	text-align: center;
	margin-bottom: 20px;
	background: var(--wlc-bg-light);
}

/* Upload button — use brand color */
#wlc-upload-btn {
	background: var(--wlc-primary-color) !important;
	color: #fff !important;
	padding: 12px 30px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: 'Lato', sans-serif;
}

#wlc-upload-btn:hover {
	background: var(--wlc-primary-dark) !important;
}

/* Upload hint — use accent color */
.wlc-upload-hint {
	color: var(--wlc-accent-color);
	font-weight: 600;
	margin: 10px 0 6px;
	font-size: 12px;
}

/* Upload note */
.wlc-upload-note {
	background: var(--wlc-bg-light);
	border-radius: var(--wlc-border-radius);
	padding: 12px 16px;
	margin-top: 20px;
}

.wlc-upload-note p {
	margin: 0;
	font-size: 12px;
	color: var(--wlc-text-light);
}

/* Preview card */
.wlc-preview-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px;
	background: var(--wlc-bg-light);
	border: 1px solid var(--wlc-border-color);
	border-radius: var(--wlc-border-radius);
	margin-bottom: 12px;
}

.wlc-preview-card img {
	max-width: 100%;
	max-height: 180px;
	object-fit: contain;
}

.wlc-preview-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.wlc-preview-filename {
	font-size: 13px;
	font-weight: 600;
	color: var(--wlc-text-dark);
}

.wlc-preview-status {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--wlc-primary-color);
	font-weight: 600;
}

.wlc-preview-check {
	color: var(--wlc-primary-color);
}

.wlc-preview-actions {
	text-align: center;
}

/* Confidence box — use brand colors */
.wlc-confidence-box {
	background: rgba(23, 63, 63, 0.06);
	border: 1px solid var(--wlc-primary-light);
	border-radius: var(--wlc-border-radius);
	padding: 16px;
	margin-top: 20px;
}

.wlc-confidence-box h4 {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--wlc-primary-color);
	display: flex;
	align-items: center;
	gap: 6px;
}

.wlc-confidence-box .dashicons {
	color: var(--wlc-primary-color);
	font-size: 18px;
}

.wlc-confidence-box p {
	margin: 6px 0;
	color: var(--wlc-text-dark);
	font-size: 12px;
	line-height: 1.5;
}

/* Step 1 checkmarks — use brand color */
.wlc-position-checkmark svg {
	fill: var(--wlc-primary-color);
}

.wlc-position-card.wlc-selected .wlc-position-checkmark {
	opacity: 1;
}

/* Step 2 checkmarks — use brand color */
.wlc-method-checkmark svg {
	fill: var(--wlc-primary-color);
}

/* Step 1 selected state — brand color */
.wlc-position-card.wlc-selected {
	border-color: var(--wlc-primary-color);
	border-width: 3px;
	background: rgba(23, 63, 63, 0.06);
}

.wlc-position-card:hover {
	border-color: var(--wlc-primary-color);
}

/* Step 2 selected state — brand color */
.wlc-method-option.wlc-selected {
	border-color: var(--wlc-primary-color);
	border-width: 3px;
	background: rgba(23, 63, 63, 0.06);
}

.wlc-method-option:hover {
	border-color: var(--wlc-primary-color);
}

/* Position counter — brand color */
.wlc-position-counter strong {
	color: var(--wlc-primary-color);
}

.wlc-selected-info {
	color: var(--wlc-primary-color);
}

/* Sidebar badges — brand color */
.wlc-sidebar-badge .dashicons {
	color: var(--wlc-primary-color);
}

/* Added to cart modal — brand color for logo button */
.wlc-btn-add-logo {
	background: var(--wlc-accent-color) !important;
	color: #fff !important;
	padding: 12px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	border-radius: 0 !important;
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: 'Lato', sans-serif;
}

.wlc-btn-add-logo:hover {
	background: var(--wlc-primary-color) !important;
}

@media (min-width: 480px) {
	.wlc-upload-area {
		padding: 35px 25px;
	}

	.wlc-upload-dropzone-icon svg {
		width: 56px;
		height: 56px;
	}

	.wlc-upload-dropzone h3 {
		font-size: 20px;
	}

	.wlc-upload-dropzone p {
		font-size: 14px;
	}

	.wlc-upload-note p {
		font-size: 13px;
	}

	.wlc-preview-card {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
		padding: 25px;
	}

	.wlc-preview-card img {
		max-height: 220px;
	}

	.wlc-preview-filename {
		font-size: 14px;
	}

	.wlc-confidence-box {
		padding: 18px;
	}

	.wlc-confidence-box h4 {
		font-size: 16px;
	}

	.wlc-confidence-box p {
		font-size: 13px;
	}

	#wlc-upload-btn {
		padding: 14px 35px !important;
		font-size: 14px !important;
	}

	.wlc-btn-add-logo {
		padding: 14px !important;
		font-size: 15px !important;
	}
}

@media (min-width: 768px) {
	.wlc-upload-area {
		padding: 50px 40px;
	}

	.wlc-upload-dropzone-icon svg {
		width: 64px;
		height: 64px;
	}

	.wlc-upload-dropzone h3 {
		font-size: 24px;
	}

	.wlc-upload-dropzone p {
		font-size: 15px;
	}

	.wlc-upload-note p {
		font-size: 14px;
	}

	.wlc-preview-card {
		max-width: 450px;
		padding: 30px;
	}

	.wlc-preview-card img {
		max-height: 300px;
	}

	.wlc-preview-filename {
		font-size: 15px;
	}

	.wlc-confidence-box {
		padding: 20px;
		margin-top: 30px;
	}

	.wlc-confidence-box h4 {
		font-size: 18px;
	}

	.wlc-confidence-box p {
		font-size: 14px;
	}

	#wlc-upload-btn {
		padding: 16px 40px !important;
		font-size: 16px !important;
	}

	.wlc-btn-add-logo {
		padding: 15px !important;
		font-size: 16px !important;
	}
}

/* ==============================================
   Pricing Table Shortcode
   ============================================== */

.wlc-pricing-table {
	margin: 20px 0;
	font-family: "Lato", sans-serif;
}

/* ---------- Column layout ---------- */

.wlc-pricing-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.wlc-pricing-column {
	background: transparent;
	border: none;
	box-shadow: none;
}

.wlc-pricing-header {
	padding: 0 0 14px;
	text-align: left;
}

.wlc-pricing-header h3 {
	margin: 0;
	color: var(--wlc-accent-color, #e07b39);
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}

/* ---------- Rows ---------- */

.wlc-pricing-row {
	display: flex;
	align-items: center;
	border-bottom: none;
}

.wlc-pricing-row:nth-child(odd) {
	background: var(--wlc-bg-light, #ececec);
}

.wlc-pricing-row:nth-child(even) {
	background: transparent;
}

.wlc-pricing-cell {
	padding: 10px 16px;
	font-size: 14px;
	color: var(--wlc-text-dark, #1a1a2e);
	flex: 1 1 50%;
}

.wlc-pricing-cell.wlc-pricing-qty {
	font-weight: 400;
	color: var(--wlc-link-color, #3b6ea5);
	text-align: left;
}

.wlc-pricing-cell.wlc-pricing-price {
	font-weight: 400;
	color: var(--wlc-text-dark, #1a1a2e);
	text-align: left;
}

/* ---------- Setup Charges ---------- */

.wlc-setup-charges {
	margin-top: 40px;
	/* max-width: 700px; */
}

.wlc-setup-charges h3 {
	margin: 0 0 14px;
	color: var(--wlc-accent-color, #e07b39);
	font-size: 18px;
	font-weight: 700;
}

.wlc-setup-charges-grid {
	display: flex;
	flex-direction: column;
	max-width: 700px;
}

.wlc-setup-charge-item {
	display: flex;
	align-items: center;
	padding: 10px 16px;
}

.wlc-setup-charge-item:nth-child(odd) {
	background: var(--wlc-bg-light, #ececec);
}

.wlc-setup-charge-item:nth-child(even) {
	background: transparent;
}

.wlc-setup-charge-label {
	flex: 1 1 50%;
	font-size: 14px;
	font-weight: 400;
	color: var(--wlc-link-color, #3b6ea5);
}

.wlc-setup-charge-price {
	flex: 1 1 50%;
	font-size: 14px;
	font-weight: 400;
	color: var(--wlc-text-dark, #1a1a2e);
}

/* ---------- Notes ---------- */

.wlc-pricing-notes {
	margin-top: 20px;
	padding: 0;
	background: transparent;
	border-top: none;
}

.wlc-pricing-notes ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlc-pricing-notes li {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wlc-text-dark, #1a1a2e);
}

.wlc-pricing-notes li:last-child {
	margin-bottom: 0;
}

/* Setup charge in cart price breakdown (checkout, not this template) */
.wlc-cart-setup-charge {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-top: 1px dashed var(--wlc-border-color);
	font-size: 14px;
	color: var(--wlc-text-dark);
}

.wlc-cart-setup-charge .wlc-setup-label {
	font-weight: 600;
	color: var(--wlc-accent-color);
}

.wlc-cart-setup-charge .wlc-setup-amount {
	font-weight: 700;
	color: var(--wlc-primary-color);
}

.wlc-pricing-row-head {
	background: transparent !important;
	font-weight: 700;
}

.wlc-pricing-row-head .wlc-pricing-cell {
	font-weight: 700;
	color: var(--wlc-text-dark, #1a1a2e);
}

.wlc-setup-intro {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wlc-text-dark, #1a1a2e);
}
/* ---------- Responsive ---------- */

@media (min-width: 480px) {
	.wlc-pricing-header h3 {
		font-size: 19px;
	}

	.wlc-pricing-cell,
	.wlc-setup-charge-label,
	.wlc-setup-charge-price {
		padding: 12px 18px;
		font-size: 15px;
	}
}

@media (min-width: 768px) {
	.wlc-pricing-columns {
		grid-template-columns: 1.3fr 1.3fr 1fr;
		gap: 40px;
	}
}
/* ==============================================
   Position Price Labels
   ============================================== */

.wlc-position-prices {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.wlc-price-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.wlc-price-tag .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.wlc-print-price {
	background: rgba(23, 63, 63, 0.10);
	color: #173F3F;
}

.wlc-embroid-price {
	background: rgba(228, 140, 29, 0.12);
	color: #E48C1D;
}

@media (min-width: 768px) {
	.wlc-price-tag {
		font-size: 14px;
		padding: 5px 12px;
	}

	.wlc-price-tag .dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}
}

/* ==============================================
   Step 0: Previous Customizations
   ============================================== */

.wlc-login-prompt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--wlc-bg-light);
	border: 1px solid var(--wlc-border-color);
	border-radius: var(--wlc-border-radius);
	padding: 20px;
	margin: 20px 0;
}

.wlc-login-prompt p {
	margin: 0;
}

.wlc-login-prompt .wlc-login-btn {
	white-space: nowrap;
}

.wlc-guest-email-form {
	background: var(--wlc-bg-light);
	border: 1px solid var(--wlc-border-color);
	border-radius: var(--wlc-border-radius);
	padding: 20px;
	margin: 20px 0;
}

.wlc-guest-email-form p {
	margin-bottom: 12px;
}

.wlc-guest-email-form input[type="email"] {
	width: 100%;
	max-width: 350px;
	padding: 10px 12px;
	border: 1px solid var(--wlc-border-color);
	border-radius: 4px;
	font-size: 14px;
	margin-right: 10px;
}

.wlc-saved-intro {
	color: var(--wlc-text-light);
	margin: 15px 0;
}

.wlc-saved-customizations-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 20px 0;
}

.wlc-saved-card {
	display: flex;
	border: 1px solid var(--wlc-border-color);
	border-radius: var(--wlc-border-radius);
	padding: 16px;
	background: var(--wlc-bg-lighter);
	box-shadow: var(--wlc-box-shadow);
	transition: box-shadow 0.2s;
}

.wlc-saved-card:hover {
	box-shadow: var(--wlc-box-shadow-strong);
}

.wlc-saved-card-preview {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	border: 1px solid var(--wlc-border-color);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wlc-bg-light);
	margin-right: 16px;
}

.wlc-saved-card-preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wlc-saved-placeholder {
	color: var(--wlc-text-lighter);
}

.wlc-saved-placeholder .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
}

.wlc-saved-card-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wlc-saved-type strong {
	color: var(--wlc-text-dark);
}

.wlc-saved-text {
	color: var(--wlc-text-light);
	font-style: italic;
	font-size: 13px;
}

.wlc-saved-badge.wlc-big-back-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--wlc-accent-color);
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	width: fit-content;
}

.wlc-big-back-badge .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.wlc-saved-date {
	font-size: 12px;
	color: var(--wlc-text-lighter);
}

.wlc-saved-card-actions {
	margin-top: 6px;
}

.wlc-empty-saved {
	text-align: center;
	padding: 40px 20px;
	color: var(--wlc-text-light);
}

/* Reuse Mode Styles */
.wlc-reuse-banner {
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-left: 4px solid var(--wlc-accent-color);
	border-radius: 4px;
	padding: 14px 18px;
	margin-bottom: 20px;
	color: #5d4037;
}

.wlc-reuse-notice {
	background: #e8f5e9;
	border: 1px solid #a5d6a7;
	border-left: 4px solid #4CAF50;
	border-radius: 4px;
	padding: 14px 18px;
	margin-bottom: 20px;
	color: #2e7d32;
}

.wlc-reuse-hidden {
	display: none !important;
}