/**
 * Wholesale Quote — Deepak Sales.
 *
 * Mobile-first. Depends on tokens.css + base.css + page.css. The Customer
 * Information form deliberately reuses the Contact section's own classes
 * (`.ds-contact__*`, styled in contact.css, already loaded on every page)
 * rather than duplicating form styles here — this file only adds the
 * page-specific layout and the cart-summary card, which have no existing
 * equivalent elsewhere in the theme. Card/spacing/shadow recipe matches the
 * Cart/Checkout order-summary card already established in cart-checkout.css
 * so this page reads as part of the same system.
 */

/* ==========================================================================
   1. Page header
   ========================================================================== */
.ds-wholesale-quote__head {
	max-width: 44rem;
	margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem);
}

.ds-wholesale-quote__eyebrow {
	margin-bottom: var(--ds-space-sm);
	font-family: var(--ds-font-mono);
	font-size: var(--ds-fs-eyebrow);
	font-weight: var(--ds-fw-label);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
	color: var(--ds-oxblood);
}

.ds-wholesale-quote__title {
	margin-bottom: var(--ds-space-sm);
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-h1);
	font-weight: var(--ds-fw-heading);
	line-height: var(--ds-lh-tight);
	color: var(--ds-heading);
}

.ds-wholesale-quote__lead {
	font-size: var(--ds-fs-lead);
	line-height: var(--ds-lh-body);
	color: var(--ds-muted);
}

/* ==========================================================================
   2. Layout — form + cart summary
   ========================================================================== */
.ds-wholesale-quote__layout {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-xl);
	padding-block: clamp(1rem, 0.5rem + 2vw, 2rem) clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.ds-wholesale-quote__form-card,
.ds-wholesale-quote__summary {
	flex: 1;
	min-width: 0;
}

/* 62em (992px) -- the theme's formal desktop tier (see header.css/hero.css), replacing the previous 64em guess. */
@media (min-width: 62em) {
	.ds-wholesale-quote__layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.ds-wholesale-quote__summary {
		width: 22rem;
		flex: none;
		position: sticky;
		top: calc(var(--ds-header-h) + var(--ds-space-md));
	}
}

/* ==========================================================================
   3. Form card (form itself reuses .ds-contact__* from contact.css)
   ========================================================================== */
.ds-wholesale-quote__form-card {
	padding: var(--ds-space-lg);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-lg);
	background-color: var(--ds-surface);
	box-shadow: var(--ds-shadow-sm);
}

.ds-wholesale-quote__submit {
	width: 100%;
	margin-top: var(--ds-space-md);
}

/* ==========================================================================
   4. Success state (hidden by default — shown by assets/js/wholesale-quote.js)
   ========================================================================== */
.ds-wholesale-quote__success {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ds-space-sm);
}

.ds-wholesale-quote__success-title {
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-h3);
	font-weight: var(--ds-fw-section);
	color: var(--ds-heading);
}

.ds-wholesale-quote__success-text {
	color: var(--ds-muted);
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-body);
}

/* ==========================================================================
   5. Cart summary card
   ========================================================================== */
.ds-wholesale-quote__summary {
	padding: var(--ds-space-lg);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-lg);
	background-color: var(--ds-surface);
}

.ds-wholesale-quote__summary-title {
	margin-bottom: var(--ds-space-md);
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-h3);
	font-weight: var(--ds-fw-section);
	color: var(--ds-heading);
}

.ds-wholesale-quote__items {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-md);
	margin-bottom: var(--ds-space-md);
	max-height: 26rem;
	overflow-y: auto;
}

.ds-wholesale-quote__item {
	display: grid;
	grid-template-columns: 3.5rem 1fr auto;
	gap: var(--ds-space-sm);
	align-items: center;
	padding-bottom: var(--ds-space-md);
	border-bottom: 1px solid var(--ds-line);
}

.ds-wholesale-quote__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.ds-wholesale-quote__item-img {
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	border-radius: var(--ds-radius-sm);
	background-color: var(--ds-paper-2);
}

.ds-wholesale-quote__item-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.ds-wholesale-quote__item-name {
	font-weight: 600;
	color: var(--ds-ink);
	font-size: var(--ds-fs-small);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ds-wholesale-quote__item-sku,
.ds-wholesale-quote__item-qty {
	font-family: var(--ds-font-mono);
	font-size: var(--ds-fs-eyebrow);
	color: var(--ds-muted);
}

.ds-wholesale-quote__item-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15rem;
	text-align: right;
	white-space: nowrap;
}

.ds-wholesale-quote__item-unit {
	font-size: var(--ds-fs-eyebrow);
	color: var(--ds-muted);
}

.ds-wholesale-quote__item-total {
	font-weight: 600;
	color: var(--ds-oxblood);
	font-size: var(--ds-fs-small);
}

.ds-wholesale-quote__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: var(--ds-space-md);
	border-top: 1px solid var(--ds-line);
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-h3);
	font-weight: 600;
	color: var(--ds-heading);
}

/* ==========================================================================
   6. Empty-cart state
   ========================================================================== */
.ds-wholesale-quote__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ds-space-sm);
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	text-align: center;
}

.ds-wholesale-quote__empty-title {
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-h2);
	font-weight: var(--ds-fw-section);
	color: var(--ds-heading);
}

.ds-wholesale-quote__empty-text {
	max-width: 26rem;
	margin-bottom: var(--ds-space-sm);
	color: var(--ds-muted);
	line-height: var(--ds-lh-body);
}