/* ============================================================
   Member Signage Order — Full Checkout Flow
   Figma: 81vVbVOT8D78L5i6OoKK79 / node 1066:51838
   States: locked | unlocked | selecting | cart | shipping | billing | placed
   ============================================================ */
:is(body, .is-preview) {

	/* ── Wrapper & Section ─────────────────────────────────── */
	.member-signage .container {
		max-width: var(--container-max-width);
		margin: 0 auto;
		padding: 0 var(--container-padding);
	}
	.member-signage__wrapper {
		position: relative;
		background-color: var(--color-white);
		border-radius: 12px;
		overflow: hidden;
	}
	.member-signage__inner {
		position: relative;
	}

	/* ── State-driven Visibility ───────────────────────────── */
	/* Default: hide panels that aren't used in unlocked/selecting */
	.member-signage__grid-wrap,
	.member-signage__cart-overlay,
	.member-signage__checkout-wrap,
	.member-signage__order-modal,
	.member-signage__tnc-modal { display: none; }

	/* locked: show grid as greyed backdrop behind login overlay */
	.member-signage__wrapper[data-state="locked"] .member-signage__grid-wrap { display: block; }

	/* unlocked / selecting: show grid, unlocked bar */
	.member-signage__wrapper[data-state="unlocked"] .member-signage__grid-wrap,
	.member-signage__wrapper[data-state="selecting"] .member-signage__grid-wrap { display: block; }
	.member-signage__wrapper[data-state="unlocked"] .member-signage__bar-state--unlocked { display: flex; }
	.member-signage__wrapper[data-state="selecting"] .member-signage__bar-state--selecting {
		display: flex;

		@media screen and (max-width: 500px) {
			display: block;
			text-align: center;
		}
	}

	/* cart: grid still visible (dimmed), overlay on top */
	.member-signage__wrapper[data-state="cart"] .member-signage__grid-wrap { display: block; }
	.member-signage__wrapper[data-state="cart"] .member-signage__cart-overlay { display: flex; }
	.member-signage__wrapper[data-state="cart"] .member-signage__bar-state--selecting {
		display: flex;

		@media screen and (max-width: 500px) {
			display: block;
			text-align: center;
		}
	}

	/* shipping */
	.member-signage__wrapper[data-state="shipping"] .member-signage__checkout-wrap { display: flex; }
	.member-signage__wrapper[data-state="shipping"] .member-signage__bar-state--shipping { display: flex; }
	.member-signage__wrapper[data-state="shipping"] #signage-form-shipping { display: block; }
	.member-signage__wrapper[data-state="shipping"] #signage-form-billing { display: none; }

	/* billing */
	.member-signage__wrapper[data-state="billing"] .member-signage__checkout-wrap { display: flex; }
	.member-signage__wrapper[data-state="billing"] .member-signage__bar-state--billing { display: flex; }
	.member-signage__wrapper[data-state="billing"] #signage-form-billing { display: block; }
	.member-signage__wrapper[data-state="billing"] #signage-form-shipping { display: none; }

	/* placed: billing panel + order modal */
	.member-signage__wrapper[data-state="placed"] .member-signage__checkout-wrap { display: flex; }
	.member-signage__wrapper[data-state="placed"] .member-signage__bar-state--billing { display: flex; }
	.member-signage__wrapper[data-state="placed"] #signage-form-billing { display: block; }
	.member-signage__wrapper[data-state="placed"] #signage-form-shipping { display: none; }
	.member-signage__wrapper[data-state="placed"] .member-signage__order-modal { display: flex; }

	/* tnc: same as billing but show T&C modal */
	.member-signage__wrapper[data-state="tnc"] .member-signage__checkout-wrap { display: flex; }
	.member-signage__wrapper[data-state="tnc"] .member-signage__bar-state--billing { display: flex; }
	.member-signage__wrapper[data-state="tnc"] #signage-form-billing { display: block; }
	.member-signage__wrapper[data-state="tnc"] #signage-form-shipping { display: none; }
	.member-signage__wrapper[data-state="tnc"] .member-signage__tnc-modal { display: flex; }

	/* Form panels hidden by default; individual states show one */
	#signage-form-shipping,
	#signage-form-billing { display: none; }
	/* Billing diff fields hidden until radio selects "different" */
	.member-signage__billing-diff-fields { display: none; }
	.member-signage__billing-diff-fields.is-visible { display: block; }

	/* ── Header ────────────────────────────────────────────── */
	.member-signage__header {
		display: flex;
		flex-direction: column;
		gap: 16px;
		background: #DBEFD2;
		border-radius: 12px 12px 0 0;
		padding: 24px 20px;
	}
	.member-signage__header-text {
		display: flex;
		flex-direction: column;
		gap: 10px;
		flex: 1;
	}
	.member-signage__title {
		font-family: var(--font-primary);
		font-weight: 450;
		color: #244517;
		font-size: 28px;
		line-height: normal;
		letter-spacing: 2.8px;
		text-transform: uppercase;
		margin: 0;
	}
	.member-signage__description {
		font-family: var(--font-secondary);
		font-size: 16px;
		font-weight: 390;
		color: #3C4559;
		letter-spacing: 0.12px;
		line-height: normal;
		margin: 0;
	}
	.member-signage__actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		background: #F5F3ED;
		border-radius: 12px;
		box-shadow: 0 1px 6px rgba(0,0,0,0.10);
		padding: 14px;
		flex-shrink: 0;
	}
	.member-signage__check-icon { flex-shrink: 0; }
	.member-signage__check-icon img { width: 22px; height: 22px; display: block; }
	.member-signage__check-inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.member-signage__check-label {
		font-family: var(--font-primary);
		font-size: 16px;
		font-weight: 500;
		color: #3C4559;
		line-height: 1.33;
		text-align: center;
	}
	.member-signage__download-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background-color: #3C4559;
		color: #fff;
		border: none;
		border-radius: 6px;
		padding: 10px 14px;
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 450;
		text-transform: uppercase;
		letter-spacing: 0.7px;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.2s;
		white-space: nowrap;
	}
	.member-signage__download-btn:hover { background-color: #244517; color: #fff; }
	.member-signage__download-btn svg { display: inline-block; flex-shrink: 0; }

	/* ── Product Grid ──────────────────────────────────────── */
	.member-signage__grid-wrap { position: relative; }
	.member-signage__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px 20px;
	}
	.member-signage__card {
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 1px 6px rgba(0,0,0,0.10);
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 16px;
		transition: box-shadow 0.2s;
	}
	.member-signage__card.is-added { box-shadow: 0 1px 6px rgba(0,0,0,0.10); }
	.member-signage__card-image {
		width: 100%;
		height: 180px;
		border-radius: 8px;
		overflow: hidden;
		background: #F5F3ED;
		flex-shrink: 0;
	}
	.member-signage__card-image img {
		width: 100%; height: 100%;
		object-fit: cover; display: block;
	}
	.member-signage__card-placeholder { width: 100%; height: 100%; background: #F5F3ED; }

	/* ── Product Image Carousel ─────────────────────────────── */
	.member-signage__carousel {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 8px;
	}
	.member-signage__carousel-track {
		display: flex;
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
	}
	.member-signage__carousel-slide {
		min-width: 100%;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.member-signage__carousel-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: none;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 6px rgba(66, 66, 66, 0.15);
		cursor: pointer;
		padding: 0;
		z-index: 2;
		transition: background-color 0.15s;
	}
	.member-signage__carousel-arrow:hover {
		background: rgba(255, 255, 255, 1);
	}
	.member-signage__carousel-arrow--prev { left: 8px; }
	.member-signage__carousel-arrow--prev svg { margin-left: -1px; }
	.member-signage__carousel-arrow--next { right: 8px; }
	.member-signage__carousel-arrow--next svg { margin-right: -1px; }
	.member-signage__carousel-dots {
		position: absolute;
		bottom: 8px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 4px;
		z-index: 2;
	}
	.member-signage__carousel-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.5);
		transition: background-color 0.2s;
	}
	.member-signage__carousel-dot.is-active {
		background: #fff;
	}
	.member-signage__card-info {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.member-signage__card-name-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
	}
	.member-signage__card-name {
		font-family: var(--font-primary);
		font-size: 18px;
		font-weight: 500;
		color: #3C4559;
		margin: 0;
		line-height: normal;
		letter-spacing: 0.135px;
		flex: 1;
	}
	.member-signage__card-price-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #DBEFD2;
		color: #244517;
		font-family: var(--font-primary);
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0.135px;
		border-radius: 50px;
		padding: 8px 10px;
		white-space: nowrap;
		flex-shrink: 0;
		min-width: 48px;
		text-align: center;
	}
	.member-signage__card-specs {
		font-family: var(--font-secondary);
		font-size: 14px;
		font-weight: 390;
		color: #3C4559;
		margin: 0;
		letter-spacing: 0.105px;
		line-height: normal;
	}
	.member-signage__card-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: auto;
	}
	/* Quantity controls */
	.member-signage__quantity {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}
	.member-signage__quantity-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px; height: 24px;
		background: #F5F3ED;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.15s;
		padding: 0;
		flex-shrink: 0;
	}
	.member-signage__quantity-btn:hover { background: #e8e4dc; }
	.member-signage__quantity-display {
		font-family: var(--font-secondary);
		font-size: 16px;
		font-weight: 450;
		color: #000;
		width: 24px;
		text-align: center;
		line-height: normal;
	}
	/* Add to Cart button */
	.member-signage__add-to-cart {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: transparent;
		border: none;
		border-radius: 30px;
		padding: 6px 10px;
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 450;
		color: #3C4559;
		text-transform: uppercase;
		letter-spacing: 0.7px;
		cursor: pointer;
		transition: background-color 0.15s;
		white-space: nowrap;
	}
	.member-signage__add-to-cart:hover { background: #F5F3ED; }
	.member-signage__login-to-add {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: #F5F3ED;
		border: 1px solid #DEDEDE;
		border-radius: 30px;
		padding: 8px 16px;
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 450;
		color: #3C4559;
		text-transform: uppercase;
		letter-spacing: 0.7px;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.15s, color 0.15s;
		white-space: nowrap;
		margin-left: auto;
	}
	.member-signage__login-to-add:hover {
		background: #DBEFD2;
		color: #244517;
	}
	.member-signage__login-to-add svg { flex-shrink: 0; }
	.member-signage__btn-label--added { display: none; }
	.member-signage__btn-label--added svg { flex-shrink: 0; }
	.member-signage__add-to-cart.is-added {
		background: #DBEFD2;
	}
	.member-signage__add-to-cart.is-added .member-signage__btn-label--default,
	.member-signage__add-to-cart.is-added .member-signage__btn-icon--cart { display: none; }
	.member-signage__add-to-cart.is-added .member-signage__btn-label--added { display: inline-flex; align-items: center; gap: 5px; }

	/* ── Bottom Action Bar ─────────────────────────────────── */
	.member-signage__bottom-bar {
		border-top: 2px solid #DEDEDE;
		height: 80px;
		display: flex;
		align-items: center;
		padding: 0 20px;
	}
	.member-signage__wrapper[data-state="selecting"], .member-signage__wrapper[data-state="cart"] {
		.member-signage__bottom-bar {
			@media screen and (max-width: 500px) {
				height: 120px;
			}
		}
	}
	.member-signage__bar-state { display: none; width: 100%; }
	/* Unlocked: centered cart hint */
	.member-signage__bar-state--unlocked {
		align-items: center;
		justify-content: center;
		gap: 8px;
		color: #3C4559;
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 450;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		opacity: 0.5;
	}
	/* Selecting: pill centered, proceed flush right */
	.member-signage__bar-state--selecting {
		position: relative;
		align-items: center;
		justify-content: flex-end;
		gap: 12px;
	}
	.member-signage__bar-placeholder { display: none; }
	.member-signage__view-cart-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #DBEFD2;
		border: none;
		border-radius: 30px;
		padding: 8px 20px;
		font-family: var(--font-primary);
		font-size: 14px;
		font-weight: 450;
		color: #244517;
		letter-spacing: 0.105px;
		cursor: pointer;
		transition: background 0.15s;
		white-space: nowrap;

		@media screen and (max-width: 767px) {
			left: 0;
			transform: translateY(-50%);
		}
		@media screen and (max-width: 500px) {
			position: relative;
			top: auto;
			left: auto;
			transform: none;
			margin-bottom: 5px;
		}
	}
	.member-signage__view-cart-btn:hover { background: #c2e3b0; }
	.member-signage__bar-proceed-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: none;
		border: none;
		font-family: var(--font-primary);
		font-size: 14px;
		font-weight: 450;
		color: #3C4559;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		cursor: pointer;
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.member-signage__bar-proceed-btn:hover { opacity: 0.75; }
	/* Shipping / Billing bars: back + forward */
	.member-signage__bar-state--shipping,
	.member-signage__bar-state--billing {
		align-items: center;
		justify-content: space-between;
	}
	.member-signage__bar-back-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: none;
		border: none;
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 450;
		color: #3C4559;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		cursor: pointer;
	}
	.member-signage__bar-back-btn:hover { opacity: 0.75; }
	.member-signage__bar-continue-btn,
	.member-signage__bar-place-order-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: #3C4559;
		border: none;
		border-radius: 8px;
		padding: 12px 16px;
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 450;
		color: #fff;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		cursor: pointer;
		transition: background-color 0.15s;
	}
	.member-signage__bar-continue-btn:hover,
	.member-signage__bar-place-order-btn:hover { background: #244517; }
	.member-signage__bar-place-order-btn.is-loading { opacity: 0.7; pointer-events: none; }

	/* ── Cart Overlay Modal ────────────────────────────────── */
	.member-signage__cart-overlay {
		position: absolute;
		inset: 0;
		z-index: 20;
		align-items: center;
		justify-content: center;
		padding: 20px;
		background: rgba(100, 100, 100, 0.55);
		border-radius: 12px;
	}
	.member-signage__cart-modal {
		position: relative;
		z-index: 1;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 0 12px rgba(0,0,0,0.25);
		width: 100%;
		max-width: 600px;
		max-height: 88vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.member-signage__cart-modal-top {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 40px 40px 24px;
		overflow-y: auto;

		@media screen and (max-width: 576px) {
			padding: 30px 20px 24px;
		}
	}
	.member-signage__cart-modal-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
	}
	.member-signage__cart-modal-title {
		font-family: var(--font-display);
		font-size: 24px;
		font-weight: 700;
		color: #244517;
		margin: 0;
		line-height: 1.2;
		letter-spacing: 0.18px;
	}
	.member-signage__modal-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 29px; height: 29px;
		background: #7D7D7D;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.15s;
		flex-shrink: 0;
		position: relative;
	}
	.member-signage__modal-close svg { display: none; }
	.member-signage__modal-close::before,
	.member-signage__modal-close::after {
		content: '';
		position: absolute;
		width: 12px;
		height: 2px;
		background: #fff;
		border-radius: 1px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.member-signage__modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
	.member-signage__modal-close:hover { background: #6a6a6a; }
	.member-signage__cart-items {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	/* Shared line-item card (cart modal + checkout summary) */
	.member-signage__line-item {
		display: flex;
		gap: 12px;
		align-items: stretch;
		padding: 16px;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 1px 6px rgba(0,0,0,0.10);

		@media screen and (max-width: 576px) {
			display: block;
		}
	}
	.member-signage__line-item-img {
		width: 140px;
		align-self: stretch;
		min-height: 150px;
		border-radius: 8px;
		object-fit: cover;
		background: #F5F3ED;
		flex-shrink: 0;

		@media screen and (max-width: 576px) {
			width: 100%;
			margin-bottom: 15px;
		}
	}
	.member-signage__line-item-body {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;

		@media screen and (max-width: 576px) {
			width: 100%;
		}
	}
	.member-signage__line-item-head {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.member-signage__line-item-name-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
	}
	.member-signage__line-item-name {
		font-family: var(--font-primary);
		font-size: 20px;
		font-weight: 500;
		color: #3C4559;
		margin: 0;
		line-height: normal;
		letter-spacing: 0.15px;
	}
	.member-signage__line-item-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #DBEFD2;
		color: #244517;
		font-family: var(--font-primary);
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0.15px;
		border-radius: 50px;
		padding: 10px;
		white-space: nowrap;
		flex-shrink: 0;

		@media screen and (max-width: 576px) {
			font-size: 16px;
			padding: 5px 10px;
		}
	}
	.member-signage__line-item-specs {
		font-family: var(--font-secondary);
		font-size: 14px;
		font-weight: 390;
		color: #3C4559;
		margin: 0;
		letter-spacing: 0.105px;
		line-height: normal;
	}
	.member-signage__line-item-controls {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: auto;
	}
	.member-signage__line-item-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.member-signage__line-item-added {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		background: #DBEFD2;
		border-radius: 30px;
		padding: 6px 10px;
		font-family: var(--font-primary);
		font-size: 14px;
		font-weight: 450;
		color: #3C4559;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.member-signage__line-item-added svg { flex-shrink: 0; }
	.member-signage__cart-item-remove {
		background: none; border: none;
		font-family: var(--font-secondary);
		font-size: 14px;
		color: #C44C47;
		text-decoration: underline;
		cursor: pointer;
		padding: 0;
		white-space: nowrap;
	}
	.member-signage__cart-meta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.member-signage__cart-subtotal {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.member-signage__subtotal-label {
		font-family: var(--font-primary);
		font-size: 16px;
		font-weight: 450;
		color: #000;
		letter-spacing: 0.8px;
		text-transform: uppercase;
	}
	.member-signage__subtotal-amount {
		font-family: var(--font-primary);
		font-size: 20px;
		font-weight: 500;
		color: #3C4559;
		letter-spacing: 0.15px;
	}
	.member-signage__continue-shopping {
		background: none; border: none;
		font-family: var(--font-primary);
		font-size: 16px;
		font-weight: 450;
		color: #7D7D7D;
		letter-spacing: 0.8px;
		text-transform: uppercase;
		cursor: pointer;
	}
	.member-signage__continue-shopping:hover { color: #244517; }
	.member-signage__cart-checkout-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		background: #3C4559;
		border: none;
		border-radius: 0 0 12px 12px;
		padding: 20px;
		font-family: var(--font-primary);
		font-size: 14px;
		font-weight: 450;
		color: #fff;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		cursor: pointer;
		transition: background 0.15s;
	}
	.member-signage__cart-checkout-btn:hover { background: #244517; }

	/* ── Checkout Wrap (shipping + billing) ───────────────── */
	.member-signage__checkout-wrap {
		display: none; /* overridden per state */
		flex-direction: column;
		gap: 24px;
		padding: 24px 20px;
	}
	.member-signage__checkout-form-col { flex: 1; min-width: 0; }
	.member-signage__checkout-summary-col { flex-shrink: 0; }

	/* ── Form Panels ───────────────────────────────────────── */
	.member-signage__form-panel { display: none; }
	.member-signage__form-title {
		font-family: var(--font-display);
		font-size: 24px;
		font-weight: 700;
		color: #244517;
		margin: 0 0 4px;
		line-height: 1.3;
		letter-spacing: 0.18px;
	}
	.member-signage__form-subtitle {
		font-family: var(--font-secondary);
		font-size: 18px;
		font-weight: 450;
		color: #3C4559;
		margin: 0 0 20px;
		letter-spacing: 0.135px;
	}
	.member-signage__form-subtitle strong { font-weight: 450; }
	.member-signage__validation-error {
		background-color: #fef2f2;
		border-left: 4px solid #dc2626;
		color: #991b1b;
		padding: 12px 16px;
		margin: 0 0 20px;
		font-family: var(--font-secondary);
		font-size: 16px;
		font-weight: 500;
		line-height: 1.5;
		border-radius: 4px;
	}
	.member-signage__form-fields {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-bottom: 20px;
	}
	.member-signage__field-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
	.member-signage__field-group {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	.member-signage__field-label {
		font-family: var(--font-secondary);
		font-size: 13px;
		font-weight: 390;
		color: #3C4559;
		letter-spacing: 0.0975px;
	}
	.member-signage__field-input {
		background: #FCF7F3;
		border: 1px solid #DEDEDE;
		border-radius: 6px;
		padding: 12px 14px;
		font-family: var(--font-secondary);
		font-size: 15px;
		font-weight: 390;
		color: #3C4559;
		box-shadow: inset 0 2px 2px rgba(74,74,104,0.10);
		width: 100%;
		outline: none;
		transition: border-color 0.15s, box-shadow 0.15s;
		box-sizing: border-box;
	}
	.member-signage__field-input:focus {
		border-color: #70BF4A;
		box-shadow: inset 0 2px 2px rgba(74,74,104,0.10), 0 0 0 2px rgba(112,191,74,0.20);
	}
	.member-signage__field-input.is-error { border-color: #C44C47; }
	.member-signage__clover-element {
		background: #FCF7F3;
		border: 1px solid #DEDEDE;
		border-radius: 6px;
		padding: 12px 14px;
		box-shadow: inset 0 2px 2px rgba(74,74,104,0.10);
		width: 100%;
		max-height: 46px;
		overflow: hidden;
		box-sizing: border-box;
		transition: border-color 0.15s;
	}
	.member-signage__clover-element.is-error {
		border-color: #C44C47;
	}
	.member-signage__clover-error {
		color: #C44C47;
		font-size: 12px;
		margin-top: 4px;
		min-height: 0;
	}
	.member-signage__select-wrap { position: relative; }
	.member-signage__field-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
	.member-signage__select-chevron {
		position: absolute;
		right: 14px; top: 50%;
		transform: translateY(-50%);
		pointer-events: none;
	}
	.member-signage__form-divider {
		border: none;
		border-top: 1px solid #DEDEDE;
		margin: 20px 0;
	}

	/* Payment method radio display */
	.member-signage__payment-radio-row {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 16px;
	}
	.member-signage__radio-selected-dot {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px; height: 20px;
		background: #70BF4A;
		border-radius: 50%;
		flex-shrink: 0;
	}
	.member-signage__radio-selected-dot::after {
		content: '';
		width: 8px; height: 8px;
		background: #fff;
		border-radius: 50%;
		box-shadow: 0 5.5px 5px -3px rgba(14,14,44,0.20), inset 0 -1px rgba(14,14,44,0.40);
	}
	.member-signage__payment-radio-label {
		font-family: var(--font-secondary);
		font-size: 16px;
		font-weight: 450;
		color: #3C4559;
	}
	.member-signage__payment-note {
		font-weight: 390;
		color: #3C4559;
	}

	/* Billing address radio group */
	.member-signage__billing-radio-group {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 16px;
	}
	.member-signage__radio-option {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
		font-family: var(--font-secondary);
		font-size: 16px;
		font-weight: 390;
		color: #7D7D7D;
	}
	.member-signage__radio-option:has(input:checked) { color: #3C4559; font-weight: 450; }
	.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
	.member-signage__radio-indicator {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px; height: 20px;
		border: 1px solid #898989;
		border-radius: 50%;
		flex-shrink: 0;
		transition: background 0.15s, border-color 0.15s;
	}
	.member-signage__radio-option:has(input:checked) .member-signage__radio-indicator {
		background: #70BF4A;
		border-color: #70BF4A;
	}
	.member-signage__radio-option:has(input:checked) .member-signage__radio-indicator::after {
		content: '';
		width: 8px; height: 8px;
		background: #fff;
		border-radius: 50%;
	}

	/* ── Summary Sidebar ───────────────────────────────────── */
	.member-signage__summary {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.member-signage__summary-header {
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 450;
		color: #3C4559;
		letter-spacing: 0.7px;
		text-transform: uppercase;
	}
	.member-signage__summary-tnc {
		font-family: var(--font-secondary);
		font-size: 14px;
		font-weight: 390;
		color: #3C4559;
		margin: 0;
		line-height: 1.5;
	}
	.member-signage__tnc-trigger {
		color: #3C4559;
		text-decoration: underline;
		cursor: pointer;
	}
	.member-signage__tnc-trigger:hover { color: #244517; }
	.member-signage__summary-items {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.member-signage__summary-total {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.member-signage__summary-total-label {
		font-family: var(--font-primary);
		font-size: 16px;
		font-weight: 450;
		color: #000;
		letter-spacing: 0.8px;
		text-transform: uppercase;
	}
	.member-signage__summary-amount {
		font-family: var(--font-primary);
		font-size: 20px;
		font-weight: 500;
		color: #70BF4A;
		letter-spacing: 0.15px;
	}

	/* ── Login Overlay ─────────────────────────────────────── */
	.member-signage__overlay {
		position: absolute;
		inset: 0;
		border-radius: 12px;
		z-index: 30;
		background: rgba(100, 100, 100, 0.55);
	}
	.member-signage__overlay-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 100%;
	}
	.member-signage__overlay-box {
		position: relative;
		background: #fff;
		border-radius: 12px;
		padding: 40px 32px;
		max-width: 480px;
		width: 90%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		box-shadow: 0 0 18px rgba(0,0,0,0.50);
	}
	.member-signage__overlay-title {
		font-family: var(--font-primary);
		font-weight: 450;
		color: #244517;
		font-size: 28px;
		line-height: normal;
		letter-spacing: 2.8px;
		text-transform: uppercase;
		margin: 0;
	}
	.member-signage__overlay-text {
		font-family: var(--font-secondary);
		font-size: 17px;
		color: #3C4559;
		margin: 0;
		font-weight: 390;
		line-height: normal;
		letter-spacing: 0.128px;
	}
	.member-signage__wrapper--locked .member-signage__inner {
		pointer-events: none;
		user-select: none;
	}

	/* ── Order Placed Modal ────────────────────────────────── */
	.member-signage__order-modal {
		position: fixed;
		inset: 0;
		z-index: 9999;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}
	.member-signage__order-modal-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(100, 100, 100, 0.55);
	}
	.member-signage__order-modal-box {
		position: relative;
		z-index: 1;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 0 18px rgba(0,0,0,0.50);
		width: 100%;
		max-width: 600px;
	}
	.member-signage__order-modal-close-row {
		display: flex;
		justify-content: flex-end;
		padding: 30px 30px 0;
	}
	.member-signage__order-modal-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 0 60px 60px;
		text-align: center;
	}
	.member-signage__order-icon svg { display: block; }
	.member-signage__order-title {
		font-family: var(--font-primary);
		font-weight: 450;
		color: #244517;
		font-size: 32px;
		letter-spacing: 3.2px;
		text-transform: uppercase;
		margin: 0;
		line-height: normal;
	}
	.member-signage__order-desc {
		font-family: var(--font-secondary);
		font-size: 16px;
		font-weight: 390;
		color: #3C4559;
		margin: 0;
		letter-spacing: 0.12px;
		line-height: 1.5;
	}
	.member-signage__order-close-btn {
		background: #3C4559;
		border: none;
		border-radius: 8px;
		padding: 12px 20px;
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 450;
		color: #fff;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		cursor: pointer;
		transition: background 0.15s;
		margin-top: 8px;
	}
	.member-signage__order-close-btn:hover { background: #244517; }

	/* ── Terms & Conditions Modal ──────────────────────────── */
	.member-signage__tnc-modal {
		position: fixed;
		inset: 0;
		z-index: 9999;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}
	.member-signage__tnc-modal.is-visible {
		display: flex;
	}
	.member-signage__tnc-modal-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(100, 100, 100, 0.55);
	}
	.member-signage__tnc-box {
		position: relative;
		z-index: 1;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 0 18px rgba(0,0,0,0.50);
		width: 100%;
		max-width: 600px;
		display: flex;
		flex-direction: column;
		max-height: 85vh;
	}
	.member-signage__tnc-close-row {
		display: flex;
		justify-content: flex-end;
		padding: 30px 30px 0;
		flex-shrink: 0;
	}
	.member-signage__tnc-content {
		padding: 0 24px 16px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		flex: 1;
		min-height: 0;
		overflow: hidden;
	}
	.member-signage__tnc-title {
		font-family: var(--font-primary);
		font-size: 18px;
		font-weight: 500;
		color: #3C4559;
		margin: 0;
		letter-spacing: 0.135px;
		flex-shrink: 0;
	}
	.member-signage__tnc-scroll {
		flex: 1;
		overflow-y: auto;
		padding-right: 8px;
	}
	.member-signage__tnc-scroll::-webkit-scrollbar { width: 8px; }
	.member-signage__tnc-scroll::-webkit-scrollbar-track { background: #D0D4D8; border-radius: 30px; }
	.member-signage__tnc-scroll::-webkit-scrollbar-thumb { background: #7C7E77; border-radius: 30px; }
	.member-signage__tnc-scroll p {
		font-family: var(--font-secondary);
		font-size: 16px;
		font-weight: 390;
		color: #3C4559;
		line-height: 1.6;
		letter-spacing: 0.12px;
		margin: 0;
	}
	.member-signage__tnc-footer {
		padding: 16px 24px 24px;
		display: flex;
		justify-content: center;
		flex-shrink: 0;
	}
	.member-signage__tnc-place-order-btn {
		background: #3C4559;
		border: none;
		border-radius: 8px;
		padding: 12px 20px;
		font-family: var(--font-primary);
		font-size: 13px;
		font-weight: 450;
		color: #fff;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		cursor: pointer;
		transition: background 0.15s;
	}
	.member-signage__tnc-place-order-btn:hover { background: #244517; }
	
	/* Show/hide buttons based on state */
	.member-signage__tnc-close-btn { display: block; }
	.member-signage__tnc-submit-btn { display: none; }
	.member-signage__wrapper[data-state="tnc"] .member-signage__tnc-close-btn { display: none; }
	.member-signage__wrapper[data-state="tnc"] .member-signage__tnc-submit-btn { display: block; }

	/* ── Responsive: Tablet ─────────────────────────────────── */
	@media (min-width: 768px) {
		.member-signage__header {
			flex-direction: row;
			align-items: center;
			gap: 50px;
			padding: 30px 34px;
		}
		.member-signage__check-inner { align-items: center; }
		.member-signage__actions { flex-direction: column; align-items: center; flex: 0 0 200px; }
		.member-signage__check-label { font-size: 16px; }
		.member-signage__grid { grid-template-columns: repeat(2, 1fr); padding: 24px 34px; }
		.member-signage__bottom-bar { height: 100px; padding: 0 30px; }
		.member-signage__title { font-size: 32px; }
	}

	/* ── Responsive: Desktop ────────────────────────────────── */
	@media (min-width: 1024px) {
		.member-signage { padding: var(--gap-4xl) 0; }
		.member-signage__header { gap: 100px; }
		.member-signage__title { font-size: 36px; letter-spacing: 3.6px; }
		.member-signage__description { font-size: 18px; letter-spacing: 0.135px; }
		.member-signage__grid { grid-template-columns: repeat(3, 1fr); }
		.member-signage__card-image { height: 200px; }
		.member-signage__checkout-wrap {
			flex-direction: row;
			align-items: flex-start;
			gap: 30px;
			padding: 36px 34px;
		}
		.member-signage__checkout-form-col { flex: 1; }
		.member-signage__checkout-summary-col { width: 420px; position: sticky; top: 20px; }
		.member-signage__form-panel {
			max-width: 580px;
		}
		.member-signage__billing-radio-group { flex-direction: row; gap: 30px; }
	}
}