/* =========================================================================
   Wholesale — Front-end savings display
   ========================================================================= */

/* Savings price format: strikethrough retail + bold wholesale */
.wsp-wholesale-price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.wsp-wholesale-price__retail {
	color: var(--wsp-color-text-muted, #6e6e73);
	font-size: 0.9em;
	text-decoration: line-through;
	opacity: 0.7;
}

.wsp-wholesale-price__yours {
	color: var(--wsp-color-text, #1d1d1f);
	font-weight: 600;
	text-decoration: none;
	background: none;
}

/* =========================================================================
   Re-Order + Quick Order — shared
   ========================================================================= */

.wsp-reorder-btn:hover,
.wsp-qo-submit:hover {
	background: var(--wsp-color-accent, #0071e3) !important;
}

/* Quick Order Form */
.wsp-qo-row:hover {
	background: #eee !important;
}

.wsp-qo-qty:focus {
	outline: none;
	border-color: var(--wsp-color-accent, #0071e3) !important;
}

.wsp-qo-tier-hints {
	font-size: 11px;
	color: var(--wsp-color-text-muted, #6e6e73);
}

/* =========================================================================
   Re-Order + Quick Order — Mobile (≤ 768px)
   ========================================================================= */

@media (max-width: 768px) {

	/* ---- Re-Order table → card layout ---- */

	.wsp-reorder-table thead {
		display: none;
	}

	.wsp-reorder-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		padding: 14px 12px !important;
		margin-bottom: 8px;
		border-radius: 10px !important;
	}

	/* Order # + Date on one line */
	.wsp-reorder-table tbody td:nth-child(1) {
		flex: 0 0 auto;
		border-radius: 0 !important;
		padding: 0 !important;
	}

	.wsp-reorder-table tbody td:nth-child(2) {
		flex: 1;
		text-align: right;
		border-radius: 0 !important;
		padding: 0 !important;
	}

	/* Items summary — full width row */
	.wsp-reorder-table tbody td:nth-child(3) {
		flex: 0 0 100%;
		padding: 6px 0 0 !important;
		font-size: 12px !important;
		border-radius: 0 !important;
	}

	/* Total + button — full width row */
	.wsp-reorder-table tbody td:nth-child(4) {
		flex: 0 0 auto;
		padding: 8px 0 0 !important;
		border-radius: 0 !important;
	}

	.wsp-reorder-table tbody td:nth-child(5) {
		flex: 1;
		text-align: right;
		padding: 8px 0 0 !important;
		border-radius: 0 !important;
	}

	/* ---- Quick Order table → compact layout ---- */

	/* Hide image column on mobile */
	.wsp-qo-table thead th:first-child,
	.wsp-qo-row td:first-child,
	.wsp-qo-parent-header td {
		/* keep parent header full width */
	}

	.wsp-qo-table thead th:first-child {
		display: none;
	}

	.wsp-qo-row td:first-child {
		display: none;
	}

	/* Hide table header on mobile */
	.wsp-qo-table thead {
		display: none;
	}

	/* Each row becomes a compact card */
	.wsp-qo-row {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
		padding: 10px 12px !important;
		margin-bottom: 4px;
		border-radius: 8px !important;
	}

	/* Product name — full width */
	.wsp-qo-row td:nth-child(2) {
		flex: 0 0 100%;
		padding: 0 0 4px !important;
		font-size: 13px;
	}

	/* Price */
	.wsp-qo-row .wsp-qo-unit-price {
		flex: 1;
		text-align: left !important;
		padding: 0 !important;
	}

	/* Qty input */
	.wsp-qo-row td:nth-child(4) {
		flex: 0 0 auto;
		padding: 0 !important;
		text-align: center;
	}

	/* Line total */
	.wsp-qo-row .wsp-qo-line-total {
		flex: 0 0 auto;
		min-width: 60px;
		padding: 0 !important;
	}

	/* Parent header — full width */
	.wsp-qo-parent-header td {
		padding: 10px 12px 4px !important;
	}

	/* Spacer rows */
	.wsp-qo-spacer td {
		height: 12px !important;
	}

	/* Search + category filter — stack vertically */
	.wsp-qo-filters {
		flex-direction: column !important;
	}

	.wsp-qo-filters #wsp-qo-search,
	.wsp-qo-filters #wsp-qo-category {
		min-width: 0 !important;
		width: 100%;
	}

	/* Submit button — full width */
	.wsp-qo-submit {
		width: 100%;
	}

	/* Estimated total row */
	.wsp-qo-table tfoot td {
		padding: 12px 8px !important;
	}
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.wsp-reorder-btn,
	.wsp-qo-submit {
		transition: none !important;
	}
}