/*
 * Cmsmart Marketplace Store: cart, checkout, order pages and My Account (buyer account, Following, seller dashboard).
 * Loaded on those pages only (inc/account.php). Tokens: child theme.json. The Designer plugin's account stylesheet reads
 * --nbd-* and the add-on reads --cmkit-*; both are mapped to the store presets here, so every screen follows the logo style
 * (orange 700 for text and white-text fills, logo orange pills with navy text for the main actions, navy greys).
 */
body.cs-marketplace,
body.cs-marketplace .cmkit {
	--nbd-primary: var(--wp--preset--color--primary-dark, #a75e03);
	--nbd-primary-hover: var(--wp--preset--color--primary-deep, #884800);
	--nbd-primary-soft: var(--wp--preset--color--tint, #fef5ec);
	--nbd-primary-tint: var(--wp--preset--color--tertiary, #f5f7f9);
	--nbd-text: var(--wp--preset--color--contrast, #0e1c38);
	--nbd-text-soft: var(--wp--preset--color--muted, #4f5e7a);
	--nbd-text-mute: var(--wp--preset--color--muted, #4f5e7a);
	--nbd-bg: #fff;
	--nbd-bg-soft: var(--wp--preset--color--tertiary, #f5f7f9);
	--nbd-border: var(--wp--custom--navy--500, #6f7c94);
	--nbd-border-light: var(--wp--preset--color--border, #dbe0e8);
	--nbd-border-subtle: var(--wp--preset--color--surface, #eceff3);
	--nbd-color-success: var(--wp--preset--color--success, #2f5d50);
	--nbd-color-success-soft: #e3efe9;
	--nbd-color-warning: #9a3412;
	--nbd-color-warning-soft: #fff1e6;
	--nbd-color-error: #a12626;
	--nbd-color-error-soft: #f8e4e1;
	--nbd-color-info: var(--wp--preset--color--contrast, #0e1c38);
	--nbd-color-info-soft: var(--wp--preset--color--surface, #eceff3);
	--nbd-text-xs: 12px;
	--nbd-text-sm: 13px;
	--nbd-text-base: 15px;
	--nbd-text-md: 15px;
	--nbd-radius-md: 12px;
	--nbd-radius-lg: 14px;
	--nbd-radius-xl: 14px;
	--nbd-ring: 0 0 0 3px rgba(246, 152, 33, 0.4);
	--cmkit-primary-soft: var(--wp--preset--color--tint, #fef5ec);
	--cmkit-on-primary: #fff;
	--cmkit-text-soft: var(--wp--preset--color--muted, #4f5e7a);
	--cmkit-border-strong: var(--wp--custom--navy--500, #6f7c94);
}

/* ---------- cart and checkout ---------- */
.cs-mkt-split-note {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-left: 4px solid var(--wp--preset--color--primary, #f69821);
	background: var(--wp--preset--color--tertiary, #f5f7f9);
	border-radius: 0 12px 12px 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast, #0e1c38);
}

.wp-block-woocommerce-cart .wc-block-components-product-details,
.wp-block-woocommerce-checkout .wc-block-components-product-details {
	margin-top: 4px;
}

.wp-block-woocommerce-cart .wc-block-components-product-details__sold-by,
.wp-block-woocommerce-checkout .wc-block-components-product-details__sold-by {
	font-weight: 600;
}

.wp-block-woocommerce-cart .wc-block-components-product-details a,
.wp-block-woocommerce-checkout .wc-block-components-product-details a {
	color: var(--wp--preset--color--primary-dark, #a75e03);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* one card per package ("Shipped by <Maker>") */
.wc-block-components-shipping-rates-control__package {
	border-radius: 14px;
}

.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option-checked {
	font-weight: 600;
}

.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__label,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__secondary-label {
	color: var(--wp--preset--color--contrast, #0e1c38);
}

.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description {
	color: var(--wp--preset--color--muted, #4f5e7a);
}

/* ---------- order received + order view: shipments ---------- */
.cs-mkt-shipments {
	margin: 32px 0;
}

.cs-mkt-shipments__lead {
	margin: 0 0 16px;
	color: var(--wp--preset--color--muted, #4f5e7a);
}

.cs-mkt-shipments__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.cs-mkt-shipment {
	padding: 16px 20px;
	border: 1px solid var(--wp--preset--color--border, #dbe0e8);
	border-radius: 14px;
	background: #fff;
}

.cs-mkt-shipment__title {
	margin: 0 0 8px;
	font-family: var(--cs-font-heading, inherit);
	font-size: 1.0625rem;
}

.cs-mkt-shipment__status {
	margin: 0 0 6px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.cs-mkt-shipment__chip {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface, #eceff3);
	color: var(--wp--preset--color--contrast, #0e1c38);
	font-size: 0.8125rem;
	font-weight: 600;
}

.cs-mkt-shipment.is-shipped .cs-mkt-shipment__chip {
	background: #e3efe9;
	color: var(--wp--preset--color--success, #2f5d50);
}

.cs-mkt-shipment__status a {
	color: var(--wp--preset--color--primary-dark, #a75e03);
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.cs-mkt-shipment__items {
	margin: 0;
	color: var(--wp--preset--color--muted, #4f5e7a);
	font-size: 0.9375rem;
}

/* ---------- the add-on's seller hub under the order (messages, rating, dispute) ---------- */
.cmmk-hubs {
	margin: 32px 0;
}

.cmmk-hub {
	border-radius: 14px;
}

.cmmk-hub h3 {
	font-family: var(--cs-font-heading, inherit);
}

.cmmk-hub h4 {
	font-size: 0.9375rem;
	font-weight: 700;
}

.cmmk-hub textarea,
.cmmk-hub select,
.cmmk-hub input[type="text"] {
	width: 100%;
	max-width: 560px;
	box-sizing: border-box;
	font-size: 1rem;
	padding: 10px 12px;
	border: 1px solid var(--wp--custom--navy--500, #6f7c94);
	border-radius: 12px;
}

.cmmk-hub input[type="file"] {
	max-width: 100%;
	font-size: 0.9375rem;
}

/* ---------- buttons of the add-on screens (account, hub, dashboard): pills, logo orange with navy text for the main one ---------- */
.cmkit-btn,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.cmkit-btn:not(.cmkit-btn--primary) {
	background: #fff;
	color: var(--wp--preset--color--contrast, #0e1c38);
	border: 2px solid var(--wp--preset--color--contrast, #0e1c38);
}

.cmkit-btn:not(.cmkit-btn--primary):hover {
	background: var(--wp--preset--color--contrast, #0e1c38);
	color: #fff;
}

.cmkit-btn--primary,
.woocommerce-account .woocommerce-MyAccount-content .button.alt {
	background: var(--wp--preset--color--primary, #f69821);
	border: 2px solid var(--wp--preset--color--primary, #f69821);
	color: var(--wp--preset--color--contrast, #0e1c38);
}

.cmkit-btn--primary:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.alt:hover {
	background: var(--wp--custom--orange--600, #d17a02);
	border-color: var(--wp--custom--orange--600, #d17a02);
	color: var(--wp--preset--color--contrast, #0e1c38);
}

/* ---------- My Account ---------- */
.woocommerce-account .entry-content > .woocommerce {
	display: grid;
	width: 100%;
	max-width: none;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 0 40px;
	align-items: start;
}

.woocommerce-account .entry-content > .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* Signed out (login, register, lost password): no menu column, the forms take the row. */
.woocommerce-account .entry-content > .woocommerce > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
	grid-column: 1 / -1;
}

.woocommerce-account .entry-content > .woocommerce > h2,
.woocommerce-account .entry-content > .woocommerce > .woocommerce-form-login,
.woocommerce-account .entry-content > .woocommerce > .woocommerce-ResetPassword {
	width: 100%;
	max-width: 560px;
}

.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	width: 100%;
	max-width: 1000px;
}

.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after {
	content: none;
}

.woocommerce-account .u-columns.col2-set > .u-column1,
.woocommerce-account .u-columns.col2-set > .u-column2 {
	float: none;
	width: auto;
	max-width: none;
}

@media (max-width: 700px) {
	.woocommerce-account .u-columns.col2-set {
		grid-template-columns: minmax(0, 1fr);
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
	grid-row: 1;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
}

.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: 16px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--border, #dbe0e8);
	border-radius: 14px;
	background: var(--wp--preset--color--tertiary, #f5f7f9);
	box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 10px;
	border-left: 4px solid transparent;
	color: var(--wp--preset--color--contrast, #0e1c38);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--surface, #eceff3);
	color: var(--wp--preset--color--contrast, #0e1c38);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a[aria-current="page"] {
	background: #fff;
	border-left-color: var(--wp--preset--color--primary, #f69821);
	color: var(--wp--preset--color--contrast, #0e1c38);
	font-weight: 600;
	box-shadow: var(--cs-shadow-1, 0 1px 2px rgba(14, 28, 56, 0.08));
}

/* the first seller entry starts the seller group (a rule, no extra markup) */
.woocommerce-account .woocommerce-MyAccount-navigation-link--seller-dashboard {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--wp--preset--color--border, #dbe0e8);
}

.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .cmkit-page-title {
	font-family: var(--cs-font-heading, inherit);
	color: var(--wp--preset--color--contrast, #0e1c38);
}

/* the page already has the h1; the add-on's section titles are h2 */
.woocommerce-account .cmkit-page-title {
	font-size: 1.5rem;
	margin: 0 0 16px;
}

.woocommerce-account .woocommerce-MyAccount-content .shop_table {
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content .shop_table td,
.woocommerce-account .woocommerce-MyAccount-content .shop_table th {
	overflow-wrap: anywhere;
}

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	border-radius: 14px;
}

.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button {
	order: 2;
	margin-left: auto;
	float: none;
}

.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before {
	position: static;
}

/* ---------- Following ---------- */
.cmmk-following__list {
	gap: 12px;
}

.cmmk-following__item {
	padding: 16px 20px;
	border-radius: 14px;
	background: #fff;
}

.cmmk-following__logo {
	width: 64px;
	height: 64px;
}

.cmmk-following__body .cmmk-card__title {
	font-family: var(--cs-font-heading, inherit);
	font-size: 1.125rem;
}

.cmmk-following__body .cmmk-card__title a {
	color: var(--wp--preset--color--contrast, #0e1c38);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cmmk-following .cmkit-chip {
	background: var(--wp--preset--color--surface, #eceff3);
	color: var(--wp--preset--color--contrast, #0e1c38);
}

/* a scrolling table must also clip its visually hidden sort labels (they are absolutely positioned) */
.cmmk-table-wrap {
	position: relative;
}

/* ---------- seller dashboard (the add-on draws it; the store sets width, tokens and the few rough spots) ---------- */
.cmmk-dashboard .cmkit-card,
.cmmk-dashboard .cmkit-stat {
	border-radius: 14px;
}

.cmmk-dashboard a:not(.cmkit-btn) {
	color: var(--wp--preset--color--primary-dark, #a75e03);
}

.cmmk-dashboard .cmkit-chip,
.cmmk-dashboard [class*="status"] {
	color: var(--wp--preset--color--contrast, #0e1c38);
}

@media (max-width: 900px) {
	.woocommerce-account .entry-content > .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
		margin-bottom: 24px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 4px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		white-space: nowrap;
		border-left: 0;
		border-bottom: 3px solid transparent;
		border-radius: 10px 10px 0 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
	.woocommerce-account .woocommerce-MyAccount-navigation li a[aria-current="page"] {
		border-bottom-color: var(--wp--preset--color--primary, #f69821);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link--seller-dashboard {
		margin: 0 0 0 8px;
		padding: 0 0 0 8px;
		border-top: 0;
		border-left: 1px solid var(--wp--preset--color--border, #dbe0e8);
	}

	.cmmk-following__item {
		padding: 16px;
	}
}