/* Shop — matches Hyperspace theme (#312450 palette) */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5em;
	margin-top: 2em;
}

.product-card {
	padding: 1.25em;
	display: flex;
	flex-direction: column;
}

.product-card h3 {
	margin: 0.75em 0 0.35em;
	color: #ffffff;
}

.product-card .image.fit {
	margin: 0 0 0.5em;
}

.product-price {
	font-size: 1.15em;
	color: #ffffff;
	margin-bottom: 0;
}

.product-unit {
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.45);
	font-weight: normal;
}

.product-actions {
	margin-top: auto;
	padding-top: 1em;
}

.product-qty-row {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 1em;
}

.product-qty-row label {
	margin: 0;
	flex-shrink: 0;
	font-size: 0.8em;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.product-qty {
	width: 4.5em;
	height: 2.75em;
	padding: 0 0.75em;
	background: rgba(255, 255, 255, 0.05);
	border: solid 1px rgba(255, 255, 255, 0.15);
	border-radius: 0.25em;
	color: #ffffff;
	flex-shrink: 0;
}

.product-actions .actions {
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-actions .actions.fit {
	width: 100%;
	margin-left: 0;
}

.product-actions .actions.fit li {
	padding: 0;
	margin: 0;
}

.product-actions .actions .button {
	width: 100%;
	margin: 0;
	white-space: normal;
	line-height: 1.4;
	height: auto;
	min-height: calc(4.75em + 2px);
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cart-unit {
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.45);
}

.cart-qty-input {
	width: 4.5em;
	height: 2.75em;
	padding: 0 0.5em;
	background: rgba(255, 255, 255, 0.05);
	border: solid 1px rgba(255, 255, 255, 0.15);
	border-radius: 0.25em;
	color: #ffffff;
	text-align: center;
}

.cart-summary {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: solid 1px rgba(255, 255, 255, 0.15);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.cart-summary .cart-total-label {
	font-size: 1.25em;
	color: #ffffff;
}

.cart-summary .cart-total-label strong {
	margin-left: 0.35em;
}

#cart-empty {
	text-align: center;
	padding: 3em 1em;
}

#cart-empty p {
	margin-bottom: 1.5em;
}

.nav-cart-badge {
	display: none;
	margin-left: 0.35em;
	padding: 0.1em 0.45em;
	font-size: 0.75em;
	line-height: 1.4;
	border-radius: 0.25em;
	background: #5e42a6;
	color: #ffffff;
	vertical-align: middle;
}

#cart-toast {
	position: fixed;
	bottom: 2em;
	right: 2em;
	padding: 1em 1.5em;
	background: #5e42a6;
	color: #ffffff;
	border-radius: 0.25em;
	opacity: 0;
	transform: translateY(1em);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
	z-index: 10001;
}

#cart-toast.visible {
	opacity: 1;
	transform: translateY(0);
}

.shop-intro {
	margin-bottom: 0.5em;
}

/* Checkout */

.checkout-split {
	margin-top: 1.5em;
}

.checkout-split h2 {
	color: #ffffff;
	font-size: 1.1em;
	margin-bottom: 0.75em;
}

.checkout-note {
	margin-bottom: 1.5em;
	color: rgba(255, 255, 255, 0.55);
}

.checkout-form .checkout-fields {
	width: 100%;
	margin-left: 0;
	margin-bottom: 1.5em;
}

.checkout-form .checkout-fields .field {
	width: 100%;
	padding-left: 0;
}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"] {
	height: 2.75em;
	line-height: 2.75em;
	box-sizing: border-box;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

.checkout-order {
	padding: 1.5em;
}

.checkout-order-id {
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 1em;
}

.checkout-order-id span {
	color: #ffffff;
	font-weight: bold;
}

.checkout-order-table {
	margin-bottom: 1em;
}

.checkout-total {
	font-size: 1.25em;
	color: #ffffff;
	margin: 0;
}

.checkout-total strong {
	margin-left: 0.35em;
}

.checkout-payment-status {
	margin-top: 1em;
	padding: 1em 1.25em;
	border-radius: 0.25em;
	border: solid 1px rgba(94, 66, 166, 0.6);
	background: rgba(94, 66, 166, 0.2);
	color: rgba(255, 255, 255, 0.85);
	display: none;
}

.checkout-payment-status.visible {
	display: block;
}

.checkout-payment-status.error {
	border-color: rgba(220, 80, 80, 0.6);
	background: rgba(220, 80, 80, 0.15);
}

.payment-result {
	text-align: center;
	max-width: 36em;
	margin: 0 auto;
}

.payment-result .actions {
	justify-content: center;
	margin-top: 2em;
}

#checkout-empty {
	text-align: center;
	padding: 3em 1em;
}

#checkout-empty p {
	margin-bottom: 1.5em;
}

.cart-summary .actions {
	flex-wrap: wrap;
}

@media screen and (max-width: 736px) {
	.product-grid {
		grid-template-columns: 1fr;
	}

	#cart-toast {
		left: 1em;
		right: 1em;
		bottom: 1em;
	}

	.checkout-split > section {
		margin-bottom: 2em;
	}
}
