/*
 * CCLEE B2B Frontend Styles
 * Phase 1: tier table, login/RFQ prompts, button overrides.
 * Phase 2: registration form, RFQ form, quote cards, status badges.
 */

/* Plugin custom properties -- all reference theme CSS vars, no hardcoded values. */
:root {
	/* Semantic aliases — reference theme presets, themes can override via cascade. */
	--cclee-b2b-color-success:    var(--wp--preset--color--success);
	--cclee-b2b-color-accent:    var(--wp--preset--color--accent);
	--cclee-b2b-color-primary:    var(--wp--preset--color--primary);
	--cclee-b2b-color-secondary:  var(--wp--preset--color--secondary);
	--cclee-b2b-color-base:       var(--wp--preset--color--base);

	/* Button text on primary background */
	--cclee-b2b-btn-on-primary: #ffffff;

	/* Required field marker */
	--cclee-b2b-required: var(--wp--preset--color--accent);

	/* Plugin-level shadows (compound rgba values not representable as single var). */
	--cclee-b2b-shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.15);
	--cclee-b2b-shadow-overlay-hover: 0 6px 20px rgba(0, 0, 0, 0.2);
	--cclee-b2b-shadow-card: var(--wp--preset--shadow--card);
	--cclee-b2b-shadow-elevated: var(--wp--preset--shadow--elevated);
}

/* Tier pricing table. */
.cclee-b2b-tier-table {
	margin: 1.5em 0;
}

.cclee-b2b-tier-table__title {
	font-size: 1em;
	margin-bottom: 0.5em;
}

.cclee-b2b-tier-table__table {
	width: 100%;
	max-width: 400px;
	border-collapse: collapse;
	font-size: 0.9em;
}

.cclee-b2b-tier-table__table th,
.cclee-b2b-tier-table__table td {
	padding: 0.5em 1em;
	border: 1px solid var(--wp--preset--color--neutral-200);
	text-align: left;
}

.cclee-b2b-tier-table__table th {
	background: var(--wp--preset--color--neutral-100);
	font-weight: 600;
}

/* Login prompt (replaces price for guests). */
.cclee-b2b-login-prompt {
	display: inline-block;
	padding: 0.4em 1em;
	background: var(--wp--preset--color--primary);
	color: var(--cclee-b2b-btn-on-primary);
	border-radius: var(--wp--custom--border--radius--md);
	text-decoration: none;
	font-size: 0.9em;
	transition: opacity 0.2s;
}

.cclee-b2b-login-prompt:hover {
	opacity: 0.9;
	color: var(--cclee-b2b-btn-on-primary);
}

/* RFQ prompt (replaces price for pending enterprise). */
.cclee-b2b-rfq-prompt {
	display: inline-block;
	font-style: italic;
	color: var(--wp--preset--color--neutral-500);
}

/* Button overrides for restricted users. */
.cclee-b2b-login-btn,
.cclee-b2b-rfq-btn {
	display: inline-block;
	text-align: center;
}

/* ==========================================================================
   Phase 2: Registration, RFQ, Quotes
   ========================================================================== */

/* Shared form styles. */
.cclee-b2b-field {
	margin-bottom: 1em;
}

.cclee-b2b-field label {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 500;
}

.cclee-b2b-field input,
.cclee-b2b-field select,
.cclee-b2b-field textarea {
	width: 100%;
	max-width: 400px;
	padding: 0.5em 0.75em;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	font-size: 0.95em;
}

.cclee-b2b-field .required {
	color: var(--cclee-b2b-required);
}

/* Submit button -- double-class to override WooCommerce .button specificity. */
.cclee-b2b-submit-btn.cclee-b2b-submit-btn {
	background: var(--wp--preset--color--primary);
	color: var(--cclee-b2b-btn-on-primary);
	border: none;
	padding: 0.6em 1.5em;
	border-radius: var(--wp--custom--border--radius--md);
	cursor: pointer;
	font-size: 0.95em;
	transition: opacity 0.2s;
}

.cclee-b2b-submit-btn:hover {
	opacity: 0.9;
	background: var(--wp--preset--color--secondary);
}

/* Notice messages. */
.cclee-b2b-notice {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--border--radius--md);
	margin: 1em 0;
	border: 1px solid;
}

.cclee-b2b-notice--success {
	background: color-mix(in srgb, var(--wp--preset--color--success) 12%, transparent);
	color: var(--wp--preset--color--success);
	border-color: var(--wp--preset--color--success);
}

.cclee-b2b-notice--info {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.cclee-b2b-notice--error {
	background: color-mix(in srgb, var(--wp--preset--color--neutral-900) 8%, transparent);
	color: var(--wp--preset--color--neutral-900);
	border-color: var(--wp--preset--color--neutral-900);
}

/* Status badges. */
.cclee-b2b-status__badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: var(--wp--custom--border--radius--md);
	font-size: 0.85em;
	font-weight: 600;
}

.cclee-b2b-status__badge--pending {
	background: var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--neutral-700);
}

.cclee-b2b-status__badge--quoted {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.cclee-b2b-status__badge--negotiating {
	background: var(--wp--preset--color--accent);
	color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
}

.cclee-b2b-status__badge--approved,
.cclee-b2b-status__badge--accepted {
	background: var(--wp--preset--color--success);
	color: var(--wp--preset--color--base);
}

.cclee-b2b-status__badge--rejected {
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--base);
}

.cclee-b2b-status__badge--expired {
	background: var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--neutral-500);
}

/* Approval status block. */
.cclee-b2b-status {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--border--radius--md);
	margin: 1em 0;
	border: 1px solid;
}

.cclee-b2b-status--pending {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
	border-color: var(--wp--preset--color--accent);
}

.cclee-b2b-status--approved {
	background: color-mix(in srgb, var(--wp--preset--color--success) 12%, transparent);
	border-color: var(--wp--preset--color--success);
}

.cclee-b2b-status--rejected {
	background: color-mix(in srgb, var(--wp--preset--color--neutral-900) 8%, transparent);
	border-color: var(--wp--preset--color--neutral-900);
}

/* RFQ form. */
.cclee-b2b-rfq-form {
	max-width: 600px;
	margin: 1.5em 0;
}

.cclee-b2b-rfq-form__title {
	margin-bottom: 0.5em;
}

.cclee-b2b-rfq-form__section {
	margin-bottom: 1.5em;
	padding: 1em;
	background: var(--wp--preset--color--neutral-100);
	border-radius: var(--wp--custom--border--radius--md);
}

.cclee-b2b-rfq-form__section h4 {
	margin: 0 0 0.75em;
	font-size: 0.95em;
}

.cclee-b2b-rfq-product-row {
	display: flex;
	gap: 1em;
	align-items: center;
	margin-bottom: 0.5em;
	flex-wrap: wrap;
}

.cclee-b2b-rfq-product-name {
	font-weight: 500;
}

.cclee-b2b-rfq-add-row {
	background: none;
	border: 1px dashed var(--wp--preset--color--neutral-300);
	padding: 0.4em 1em;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	font-size: 0.9em;
	margin-top: 0.5em;
	border-radius: var(--wp--custom--border--radius--md);
}

.cclee-b2b-rfq-add-row:hover {
	background: var(--wp--preset--color--neutral-100);
}

/* Quote cards (My Quotes). */
.cclee-b2b-my-quotes {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: 1.5em 0;
}

.cclee-b2b-quote-card {
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	padding: 1em;
	background: var(--wp--preset--color--base);
}

.cclee-b2b-quote-card__header {
	display: flex;
	gap: 0.75em;
	align-items: center;
	margin-bottom: 0.5em;
	flex-wrap: wrap;
}

.cclee-b2b-quote-card__id {
	font-weight: 600;
}

.cclee-b2b-quote-card__date {
	color: var(--wp--preset--color--neutral-500);
	font-size: 0.9em;
	margin-left: auto;
}

.cclee-b2b-quote-card__products {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	margin-bottom: 0.5em;
}

.cclee-b2b-quote-card__product {
	display: inline-block;
	padding: 0.2em 0.6em;
	background: var(--wp--preset--color--neutral-100);
	border-radius: 3px;
	font-size: 0.85em;
}

.cclee-b2b-quote-card__total {
	margin-bottom: 0.5em;
}

.cclee-b2b-quote-card__actions {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	align-items: center;
	padding-top: 0.5em;
	border-top: 1px solid var(--wp--preset--color--neutral-200);
}

.cclee-b2b-action-form {
	display: inline;
}

/* Action buttons -- nested in .cclee-b2b-quote-card__actions for specificity. */
.cclee-b2b-quote-card__actions .cclee-b2b-action-btn {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-size: 0.85em;
	border-radius: var(--wp--custom--border--radius--md);
	transition: opacity var(--wp--custom--transition--fast);
	cursor: pointer;
	border: 1px solid;
}

.cclee-b2b-quote-card__actions .cclee-b2b-action-btn--accept {
	background: var(--wp--preset--color--success);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--success);
}

.cclee-b2b-quote-card__actions .cclee-b2b-action-btn--reject {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--neutral-900);
	border-color: var(--wp--preset--color--accent);
}

.cclee-b2b-quote-card__actions .cclee-b2b-action-btn--counter {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--neutral-300);
}

.cclee-b2b-counter-form {
	margin-top: 0.5em;
	padding: 0.75em;
	background: var(--wp--preset--color--neutral-100);
	border-radius: var(--wp--custom--border--radius--md);
}

.cclee-b2b-counter-form input {
	max-width: 150px;
	margin-right: 0.5em;
}

.cclee-b2b-max-rounds {
	font-style: italic;
	color: var(--wp--preset--color--neutral-500);
	font-size: 0.9em;
	margin: 0.5em 0 0;
}

/* ==========================================================================
   Phase 3: Bulk Order Form
   ========================================================================== */

.cclee-b2b-bulk-order__title {
	margin-bottom: 0.5em;
}

/* Tabs. */
.cclee-b2b-bulk-order__tabs {
	display: flex;
	gap: 0;
	margin-bottom: 1em;
	border-bottom: 2px solid var(--wp--preset--color--neutral-200);
}

.cclee-b2b-bulk-order__tab {
	background: none;
	border: none;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	cursor: pointer;
	font-size: 0.9em;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: border-color var(--wp--custom--transition--fast);
}

.cclee-b2b-bulk-order__tab--active {
	border-bottom-color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.cclee-b2b-bulk-order__tab:hover {
	border-bottom-color: var(--wp--preset--color--primary);
}

/* Panels. */
.cclee-b2b-bulk-order__panel {
	margin-bottom: 1em;
}

.cclee-b2b-bulk-order__hint {
	font-size: 0.85em;
	color: var(--wp--preset--color--neutral-500);
	margin-bottom: 0.5em;
}

.cclee-b2b-bulk-order__textarea {
	width: 100%;
	max-width: 600px;
	padding: 0.5em 0.75em;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 0.9em;
	resize: vertical;
}

/* Line items. */
.cclee-b2b-bulk-order__line-row {
	display: flex;
	gap: 0.75em;
	align-items: center;
	margin-bottom: 0.5em;
	flex-wrap: wrap;
}

.cclee-b2b-bulk-order__input-sku {
	flex: 2;
	min-width: 200px;
	padding: 0.5em 0.75em;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
}

.cclee-b2b-bulk-order__input-qty {
	flex: 0 0 80px;
	padding: 0.5em 0.75em;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
}

/* File input. */
.cclee-b2b-bulk-order__file-input {
	margin: 0.5em 0;
}

/* Confirmation table. */
.cclee-b2b-bulk-order__confirm {
	margin-top: 1.5em;
}

.cclee-b2b-bulk-order__confirm-title {
	margin-bottom: 0.5em;
}

.cclee-b2b-bulk-order__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

.cclee-b2b-bulk-order__table th,
.cclee-b2b-bulk-order__table td {
	padding: 0.5em 0.75em;
	border: 1px solid var(--wp--preset--color--neutral-200);
	text-align: left;
}

.cclee-b2b-bulk-order__table th {
	background: var(--wp--preset--color--neutral-100);
	font-weight: 600;
}

.cclee-b2b-bulk-order__table tfoot td {
	border-top: 2px solid var(--wp--preset--color--neutral-300);
}

/* Row states. */
.cclee-b2b-bulk-order__row--warning {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}

.cclee-b2b-bulk-order__row--warning small {
	color: var(--wp--preset--color--neutral-700);
	font-style: italic;
}

.cclee-b2b-bulk-order__row--error {
	background: color-mix(in srgb, var(--wp--preset--color--neutral-900) 8%, transparent);
	color: var(--wp--preset--color--neutral-900);
}

/* Remove button. */
.cclee-b2b-bulk-order__remove {
	background: none;
	border: 1px solid var(--wp--preset--color--neutral-300);
	border-radius: var(--wp--custom--border--radius--md);
	cursor: pointer;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	font-size: 0.85em;
	color: var(--wp--preset--color--neutral-500);
	transition: background var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}

.cclee-b2b-bulk-order__remove:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
	color: var(--wp--preset--color--neutral-900);
	border-color: var(--wp--preset--color--accent);
}

/* Loading spinner. */
.cclee-b2b-bulk-order__loading {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40) 0;
}

.cclee-b2b-bulk-order__spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--wp--preset--color--neutral-200);
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	animation: cclee-b2b-spin 0.6s linear infinite;
}

@keyframes cclee-b2b-spin {
	to { transform: rotate(360deg); }
}

/* Responsive: stack on mobile. */
@media (max-width: 600px) {
	.cclee-b2b-bulk-order__tabs {
		flex-wrap: wrap;
		border-bottom: none;
	}

	.cclee-b2b-bulk-order__tab {
		border-bottom: none;
		border: 1px solid var(--wp--preset--color--neutral-200);
		border-radius: var(--wp--custom--border--radius--md);
		margin-bottom: 0.25em;
	}

	.cclee-b2b-bulk-order__line-row {
		flex-direction: column;
		align-items: stretch;
	}

	.cclee-b2b-bulk-order__input-sku {
		min-width: 100%;
	}

	.cclee-b2b-bulk-order__table {
		font-size: 0.8em;
	}

	.cclee-b2b-bulk-order__table th,
	.cclee-b2b-bulk-order__table td {
		padding: 0.4em 0.5em;
	}
}

/* ==========================================================================
   Phase 4: AI Chat
   ========================================================================== */

/* Floating bubble button. */
.cclee-b2b-chat-bubble {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 99999;
	border: none;
	box-shadow: var(--cclee-b2b-shadow-overlay);
	transition: transform var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

.cclee-b2b-chat-bubble:hover {
	transform: scale(1.08);
	box-shadow: var(--cclee-b2b-shadow-overlay-hover);
}

.cclee-b2b-chat-bubble svg {
	display: block;
	color: var(--wp--preset--color--base);
}

/* Chat panel (floating). */
.cclee-b2b-chat-panel {
	position: fixed;
	bottom: 96px;
	right: 24px;
	width: 380px;
	height: 520px;
	border-radius: var(--wp--custom--border--radius--lg);
	background: var(--wp--preset--color--base);
	box-shadow: var(--cclee-b2b-shadow-elevated);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity var(--wp--custom--transition--normal), visibility var(--wp--custom--transition--normal), transform var(--wp--custom--transition--normal);
}

.cclee-b2b-chat-panel--open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Panel header. */
.cclee-b2b-chat-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	font-size: 0.95em;
}

.cclee-b2b-chat-panel__close {
	background: none;
	border: none;
	color: var(--wp--preset--color--base);
	font-size: 1.4em;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	opacity: 0.8;
	transition: opacity var(--wp--custom--transition--fast);
}

.cclee-b2b-chat-panel__close:hover {
	opacity: 1;
}

/* Messages area. */
.cclee-b2b-chat-panel__messages {
	flex: 1;
	overflow-y: auto;
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

/* Input area. */
.cclee-b2b-chat-panel__input {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	background: var(--wp--preset--color--base);
}

.cclee-b2b-chat-panel__input textarea {
	flex: 1;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-size: 0.9em;
	resize: none;
	font-family: var(--wp--preset--font-family--body);
	max-height: 80px;
}

.cclee-b2b-chat-panel__input textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

.cclee-b2b-chat-panel__input button {
	flex-shrink: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--wp--custom--border--radius--md);
	cursor: pointer;
	font-size: 0.9em;
	transition: opacity var(--wp--custom--transition--fast);
}

.cclee-b2b-chat-panel__input button:hover {
	opacity: 0.9;
}

.cclee-b2b-chat-panel__input button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Message bubbles. */
.cclee-b2b-chat-msg {
	max-width: 85%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--border--radius--lg);
	font-size: 0.9em;
	line-height: 1.5;
}

.cclee-b2b-chat-msg__text {
	white-space: pre-wrap;
	word-break: break-word;
}

.cclee-b2b-chat-msg--user {
	align-self: flex-end;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-bottom-right-radius: var(--wp--custom--border--radius--sm);
}

.cclee-b2b-chat-msg--ai {
	align-self: flex-start;
	background: var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--neutral-900);
	border-bottom-left-radius: var(--wp--custom--border--radius--sm);
}

/* Three-dot loading animation. */
.cclee-b2b-chat-loading {
	align-self: flex-start;
	display: flex;
	gap: 4px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--neutral-100);
	border-radius: var(--wp--custom--border--radius--lg);
	border-bottom-left-radius: var(--wp--custom--border--radius--sm);
}

.cclee-b2b-chat-loading span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--neutral-400);
	animation: cclee-b2b-chat-bounce 1.4s infinite ease-in-out both;
}

.cclee-b2b-chat-loading span:nth-child(1) { animation-delay: 0s; }
.cclee-b2b-chat-loading span:nth-child(2) { animation-delay: 0.16s; }
.cclee-b2b-chat-loading span:nth-child(3) { animation-delay: 0.32s; }

@keyframes cclee-b2b-chat-bounce {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
	40% { transform: scale(1); opacity: 1; }
}

/* Inline shortcode mode. */
.cclee-b2b-chat-inline {
	width: 100%;
	max-width: 700px;
	min-height: 400px;
	height: auto;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

.cclee-b2b-chat-inline .cclee-b2b-chat-panel__header {
	border-radius: 0;
}

.cclee-b2b-chat-inline .cclee-b2b-chat-panel__messages {
	min-height: 250px;
}

/* Chat responsive. */
@media (max-width: 480px) {
	.cclee-b2b-chat-panel {
		width: calc(100vw - 16px);
		height: calc(100vh - 120px);
		right: 8px;
		bottom: 80px;
		border-radius: 8px;
	}
}

/* ==========================================================================
   Phase 5: PDF Catalog Download Buttons
   ========================================================================== */

/* Download button – shared ghost style (all contexts). */
.cclee-b2b-pdf-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	font-size: 0.8em;
	line-height: 1.5;
	text-decoration: none;
	transition: background var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}

.cclee-b2b-pdf-btn:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Single product page – extra top margin. */
.cclee-b2b-pdf-btn--single {
	margin-top: 0.75em;
}

/* Shop/category page wrapper. */
.cclee-b2b-pdf-shop-btn,
.cclee-b2b-pdf-category-btn {
	margin-bottom: 0.75em;
}

/* ==========================================================================
   Phase 6: Variation Matrix
   ========================================================================== */

/* Attribute filter bar */
.vmatrix-filters {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
}

.vmatrix-filter-group {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.vmatrix-filter-group label {
	width: 100%;
	font-weight: 600;
	font-size: var(--cclee-font-sm, 0.85rem);
	color: var(--wp--preset--color--secondary);
	margin-bottom: 4px;
}

.vmatrix-filter-btn {
	background: transparent;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	font-size: var(--cclee-font-sm, 0.85rem);
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
	transition: background var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
	line-height: 1.4;
}

.vmatrix-filter-btn:hover {
	background: var(--wp--preset--color--neutral-100);
}

.vmatrix-filter-btn.active {
	background: var(--wp--preset--color--primary);
	color: var(--cclee-b2b-btn-on-primary);
	border-color: var(--wp--preset--color--primary);
}

.cclee-b2b-vm {
	margin-top: var(--wp--preset--spacing--30);
}

/* CTA for guest/pending */
.cclee-b2b-vm__cta {
	text-align: center;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--neutral-50);
	border-radius: var(--wp--custom--border--radius--md);
}

.cclee-b2b-vm__cta-text {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--secondary);
	font-size: var(--cclee-font-md, 0.95rem);
}

/* Table */
.cclee-b2b-vm__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cclee-font-md, 0.95rem);
}

.cclee-b2b-vm__th {
	text-align: left;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	border-bottom: 2px solid var(--wp--preset--color--neutral-200);
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	font-size: var(--cclee-font-sm, 0.85rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--wp--preset--color--base);
}

.cclee-b2b-vm__row {
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	transition: background var(--wp--custom--transition--fast) var(--wp--custom--easing--default);
}

.cclee-b2b-vm__row:hover {
	background: var(--wp--preset--color--neutral-50);
}

.cclee-b2b-vm__row--added {
	background: var(--wp--preset--color--primary);
}

.cclee-b2b-vm__row--error {
	background: var(--wp--preset--color--neutral-50);
}

.cclee-b2b-vm__thumb,
.cclee-b2b-vm__attr,
.cclee-b2b-vm__sku,
.cclee-b2b-vm__price,
.cclee-b2b-vm__qty {
	padding: var(--wp--preset--spacing--20);
	vertical-align: middle;
}

.cclee-b2b-vm__attr {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.cclee-b2b-vm__sku {
	font-family: var(--wp--preset--font-family--monospace);
	font-size: var(--cclee-font-sm, 0.85rem);
	color: var(--wp--preset--color--neutral-400);
}

.cclee-b2b-vm__price {
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.cclee-b2b-vm__tier-hint {
	display: block;
	font-size: var(--cclee-font-xs, 0.75rem);
	color: var(--wp--preset--color--neutral-400);
	margin-top: 2px;
}

/* Qty input */
.cclee-b2b-vm__qty-input {
	width: 72px;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	font-size: var(--cclee-font-md, 0.95rem);
	text-align: center;
	background: var(--wp--preset--color--base);
	transition: border-color var(--wp--custom--transition--fast);
	appearance: textfield;
	-moz-appearance: textfield;
}

.cclee-b2b-vm__qty-input::-webkit-outer-spin-button,
.cclee-b2b-vm__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cclee-b2b-vm__qty-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}

/* Actions bar */
.cclee-b2b-vm__actions {
	margin-top: var(--wp--preset--spacing--30);
	display: flex;
	justify-content: flex-end;
}

.cclee-b2b-vm__submit {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--wp--custom--border--radius--md);
	font-size: var(--cclee-font-md, 0.95rem);
	font-weight: 600;
	cursor: pointer;
	transition: opacity var(--wp--custom--transition--fast);
}

.cclee-b2b-vm__submit:hover {
	opacity: 0.9;
}

.cclee-b2b-vm__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Notice */
.cclee-b2b-vm__notice {
	padding: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--border--radius--md);
	font-size: var(--cclee-font-sm, 0.85rem);
	background: var(--wp--preset--color--neutral-50);
	color: var(--wp--preset--color--secondary);
}

/* Thumbnail column */
.cclee-b2b-vm__thumb {
	width: 56px;
}

.cclee-b2b-vm__thumb-btn {
	background: none;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	padding: 2px;
	cursor: pointer;
	line-height: 0;
	transition: border-color var(--wp--custom--transition--fast);
}

.cclee-b2b-vm__thumb-btn:hover {
	border-color: var(--wp--preset--color--primary);
}

.cclee-b2b-vm__thumb-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: calc(var(--wp--custom--border--radius--md) - 2px);
	display: block;
}

/* Lightbox */
.cclee-b2b-vm__lightbox {
	border: none;
	padding: 0;
	background: transparent;
	max-width: 90vw;
	max-height: 90vh;
	overflow: visible;
}

.cclee-b2b-vm__lightbox::backdrop {
	background: rgba(0, 0, 0, 0.7);
}

.cclee-b2b-vm__lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: cclee-b2b-vm-lightbox-in 0.2s ease-out;
}

@keyframes cclee-b2b-vm-lightbox-in {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.cclee-b2b-vm__lightbox-img {
	max-width: 80vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--wp--custom--border--radius--md);
	display: block;
}

.cclee-b2b-vm__lightbox-close {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--contrast);
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--cclee-b2b-shadow-overlay);
	transition: background var(--wp--custom--transition--fast);
}

.cclee-b2b-vm__lightbox-close:hover {
	background: var(--wp--preset--color--neutral-100);
}

/* Responsive: stack on mobile */
@media (max-width: 600px) {
	.cclee-b2b-vm__th--sku {
		display: none;
	}

	.cclee-b2b-vm__sku {
		display: none;
	}

	.cclee-b2b-vm__thumb-img {
		width: 36px;
		height: 36px;
	}

	.cclee-b2b-vm__thumb {
		width: 44px;
	}

	.cclee-b2b-vm__th--variant,
	.cclee-b2b-vm__attr,
	.cclee-b2b-vm__th--price,
	.cclee-b2b-vm__price,
	.cclee-b2b-vm__th--qty,
	.cclee-b2b-vm__qty {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
	}
}

/* Source ID (Internal Product ID) — align with .product_meta spans */
.cclee-b2b-source-id {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--cclee-font-md, 0.95rem);
	color: var(--wp--preset--color--secondary);
}

/* Tags collapsible */
.cclee-b2b-tags-details {
	margin: 0;
}

.cclee-b2b-tags-details summary {
	display: inline-block;
	font-size: var(--cclee-font-sm, 0.85rem);
	color: var(--wp--preset--color--neutral-400);
	cursor: pointer;
	list-style: none;
	padding: 2px 8px;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}

.cclee-b2b-tags-details summary::-webkit-details-marker {
	display: none;
}

.cclee-b2b-tags-details summary::before {
	content: '+ ';
}

.cclee-b2b-tags-details[open] summary::before {
	content: '- ';
}

.cclee-b2b-tags-details summary:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.cclee-b2b-tags-details a {
	display: inline-block;
	margin: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10) 0 0;
	padding: 2px 8px;
	font-size: var(--cclee-font-xs, 0.75rem);
	color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border--radius--md);
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}

.cclee-b2b-tags-details a:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   B2B Badges
   ========================================================================== */

.cclee-b2b-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}

.cclee-b2b-badge {
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border: 1px solid currentColor;
	border-radius: 3px;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
}

/* Cross-sell accessories section. */
.cclee-accessories {
	margin-top: var(--wp--preset--spacing--50);
}

.cclee-accessories__title {
	font-size: var(--wp--preset--font-size--medium);
	margin-bottom: var(--wp--preset--spacing--30);
}

.cclee-accessories-list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	height: 200px;
}

.cclee-accessories__card {
	flex: 0 0 160px;
	max-width: 160px;
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
}

.cclee-accessories__card:hover {
	opacity: 0.85;
}

.cclee-accessories__image {
	width: 100%;
	height: 120px;
	overflow: hidden;
	border-radius: var(--wp--custom--border--radius--sm, 4px);
	flex-shrink: 0;
}

.cclee-accessories__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cclee-accessories__name {
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: var(--wp--preset--spacing--10) 0 0;
}

.cclee-accessories__price {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}