/* Cmsmart B2B Store, UXF4 storefront templates: home by role, category tiles, product cards, archive, product layout, apply, login, 404.
   Colours and shadows come from the theme.json presets (Cmsmart blue system). Loaded on every storefront page except cart and checkout. */

/* ---------- shared bits ---------- */
/* Designed fallback of a category without any picture (UX Major 5: never a grey box): brand navy with the initial in
   an orange-ruled navy square, as the logo's icon tiles. */
.cmb2b-monogram {
	display: grid;
	place-items: center;
	align-content: center;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--orange);
	font: 700 3rem/1 var(--wp--preset--font-family--heading);
}

.cmb2b-monogram::after {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-top: 12px;
	border-radius: 2px;
	background: currentColor;
}

.cmb2b-section-head {
	gap: 8px 24px;
	margin-bottom: 20px;
}

.cmb2b-section-head h2,
.cmb2b-tiles-section h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.cmb2b-section-head__link {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.ps-home--b2b > .cs-b2b-section {
	margin-top: 56px;
	margin-bottom: 0;
}

/* ---------- home: welcome row (members and applicants) ---------- */
.cmb2b-welcome {
	margin-top: 32px;
	margin-bottom: 24px;
	gap: 16px 32px;
}

.cmb2b-welcome__title {
	margin: 4px 0 0;
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	line-height: 1.15;
}

.cmb2b-welcome__lead {
	max-width: 58ch;
	margin: 8px 0 0;
	color: var(--wp--preset--color--muted);
}

.cmb2b-status-home {
	margin-bottom: 8px;
}

.cmb2b-status-home .cmb2b-appstatus {
	margin: 0;
}

.cmb2b-role-member .cmb2b-strip,
.cmb2b-role-member .cmb2b-welcome + .cmb2b-strip {
	margin-bottom: 8px;
}

/* ---------- category tiles ---------- */
.cmb2b-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 20px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.cmb2b-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.cmb2b-tile__img {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--tint);
}

.cmb2b-tile__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cmb2b-tile__name {
	padding: 12px 16px 0;
	font: 600 15px/1.3 var(--wp--preset--font-family--heading);
}

.cmb2b-tile__count {
	padding: 2px 16px 14px;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

.cmb2b-tile:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

.cmb2b-tile:focus-visible,
.cmb2b-accordion summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

/* ---------- product cards: one component for shop, category, search, related and home ---------- */
.cmb2b-collection ul.cmb2b-grid.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmb2b-collection ul.cmb2b-grid.wc-block-product-template > li.cmb2b-product-card {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0 0 16px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	text-align: left;
	transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.cmb2b-collection li.cmb2b-product-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--card);
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .wc-block-components-product-image {
	margin: 0;
	background: var(--wp--preset--color--surface);
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	opacity: 1;
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__title {
	margin: 0;
	padding: 14px 16px 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__title a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price {
	margin: 0;
	padding: 6px 16px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--body-text);
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price .wc-block-components-product-price {
	font-size: 14px;
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price .amount {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price del,
.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price del .amount {
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price .cmb2b-qty-note {
	margin: 4px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price a {
	font-size: 14px;
	font-weight: 600;
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__cta {
	margin: auto 0 0;
	padding: 12px 16px 0;
	border: 0;
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__cta .wp-block-button__link,
.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__cta .wc-block-components-product-button__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--primary-dark);
	border-radius: var(--wp--custom--radius--button);
	background: transparent;
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__cta .wp-block-button__link:hover,
.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__cta .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/* ---------- archive: hero, chips, toolbar, pagination ---------- */
.cmb2b-archive .cmb2b-hero {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px 40px;
	align-items: center;
	padding: 28px 40px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--tertiary);
}

.cmb2b-hero.has-photo {
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
}

.cmb2b-hero .woocommerce-breadcrumb {
	margin: 0 0 12px;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

.cmb2b-hero .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--link);
}

.cmb2b-hero__title {
	margin: 0;
	font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
	line-height: 1.15;
}

.cmb2b-hero__desc {
	max-width: 56ch;
	margin: 10px 0 0;
	font-size: 17px;
}

.cmb2b-hero__count {
	margin: 10px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	font-weight: 600;
}

.cmb2b-hero__photo {
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.cmb2b-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 2.1.0 catalogue (pattern shop-catalogue): filter panel on the left from 1024 px (the add-on's grid), toolbar,
   order pad and product grid on the right. List view shows the order pad: the cards go, the pagination stays (the pad lists
   the current page only). ---------- */
body.cmb2b-view-list .cs-b2b-shop .cmb2b-collection .wc-block-product-template,
body.cmb2b-view-list .cs-b2b-shop .wp-block-woocommerce-product-collection-no-results {
	display: none;
}

/* The store is 1140 px wide: the order pad's seven columns fit the results column with a 248 px panel, tighter cells,
   a narrower stepper and a pack column wide enough for "Sold in packs of 250 · min 250" on two lines. */
@media (min-width: 1024px) {
	.cmb2b-shop.cs-b2b-shop {
		grid-template-columns: 248px minmax(0, 1fr);
		gap: 28px;
	}
}

@media (min-width: 768px) {
	.cs-b2b-shop .cmb2b-pad__table th,
	.cs-b2b-shop .cmb2b-pad__table td {
		padding: 10px 8px;
	}

	.cs-b2b-shop .cmb2b-pad__table td[data-label] {
		min-width: 60px;
	}

	.cs-b2b-shop .cmb2b-pad__table td.cmb2b-pad__c-product {
		min-width: 180px;
	}

	.cs-b2b-shop .cmb2b-pad__table td:nth-child(2) {
		white-space: nowrap;
	}

	.cs-b2b-shop .cmb2b-pad__table td:nth-child(3) {
		min-width: 120px;
		font-size: 13px;
		line-height: 1.4;
	}

	.cs-b2b-shop .cmb2b-pad__stepper .cmb2b-stepper__input {
		width: 56px;
	}

	/* The add-on's pills never wrap: "Made to order · 14 days" and "Ordered before · <date> · <qty>" pushed the table
	   about 100 px past the 864 px results column (Add outside the store width at 1440). */
	.cs-b2b-shop .cmb2b-pad__table .cmb2b-pill {
		white-space: normal;
	}

	.cs-b2b-shop .cmb2b-pad__table td[data-label="Availability"] {
		width: 116px;
	}

	.cs-b2b-shop .cmb2b-pad__table .cmb2b-ordered .cmb2b-pill {
		font-size: 12px;
	}

	.cs-b2b-shop .cmb2b-pad__stepper .cmb2b-stepper__btn {
		width: 36px;
		min-width: 36px;
	}
}

/* A results column under 800 px (1024-1179 px screens, the panel beside it) cannot hold the table: the order pad uses the
   add-on's own card rows there, as it does below 768 px (same rules, keyed to the column instead of the screen). */
.cs-b2b-shop .cmb2b-shop__main {
	container-type: inline-size;
}

@container (max-width: 799px) {
	.cs-b2b-shop .cmb2b-pad__table,
	.cs-b2b-shop .cmb2b-pad__table tbody,
	.cs-b2b-shop .cmb2b-pad__table tr,
	.cs-b2b-shop .cmb2b-pad__table td {
		display: block;
	}

	.cs-b2b-shop .cmb2b-pad__table {
		border: 0;
		background: transparent;
	}

	.cs-b2b-shop .cmb2b-pad__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.cs-b2b-shop .cmb2b-pad__table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 2px 12px;
		margin-bottom: 12px;
		padding: 12px;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--card, 12px);
		background: var(--wp--preset--color--base);
	}

	.cs-b2b-shop .cmb2b-pad__table td,
	.cs-b2b-shop .cmb2b-pad__table td[data-label],
	.cs-b2b-shop .cmb2b-pad__table td:nth-child(3) {
		min-width: 0;
		padding: 2px 0;
		border: 0;
	}

	/* Every labelled cell takes the card's width (a long pack rule in the "auto" column squeezed the first one to 0);
	   quantity and Add share the last row. */
	.cs-b2b-shop .cmb2b-pad__table td.cmb2b-pad__c-product,
	.cs-b2b-shop .cmb2b-pad__table td[data-label]:not(.cmb2b-pad__c-qty) {
		grid-column: 1 / -1;
	}

	.cs-b2b-shop .cmb2b-pad__table td.cmb2b-pad__c-product {
		padding-bottom: 8px;
	}

	.cs-b2b-shop .cmb2b-pad__table td[data-label]:not(.cmb2b-pad__c-qty)::before {
		content: attr(data-label) ": ";
		color: var(--wp--preset--color--muted);
		font-size: 12px;
	}

	.cs-b2b-shop .cmb2b-pad__table td[data-label=""]::before {
		content: none;
	}

	.cs-b2b-shop .cmb2b-pad__table td[data-label]:empty {
		display: none;
	}

	.cs-b2b-shop .cmb2b-pad__table td.cmb2b-pad__c-qty {
		grid-column: 1 / 2;
		padding-top: 8px;
	}

	.cs-b2b-shop .cmb2b-pad__table td.cmb2b-pad__c-add {
		grid-column: 2 / 3;
		align-self: end;
		padding-top: 8px;
	}

	.cs-b2b-shop .cmb2b-pad__table td.cmb2b-pad__c-qty[colspan] {
		grid-column: 1 / -1;
	}
}

/* Shop without the 2.1.0 add-on: WooCommerce's sort above the grid (the add-on's toolbar replaces it otherwise). */
.cs-b2b-shop-sort .wc-block-catalog-sorting {
	margin: 0;
}

.cs-b2b-shop-sort select {
	min-height: 44px;
	padding: 0 40px 0 16px;
	border: 1px solid var(--wp--preset--color--border-field);
	border-radius: var(--wp--custom--radius--field);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 14px;
}

.cmb2b-pagination {
	margin-top: 40px;
	gap: 8px;
}

.cmb2b-pagination .page-numbers,
.cmb2b-pagination .wp-block-query-pagination-previous,
.cmb2b-pagination .wp-block-query-pagination-next {
	display: inline-grid;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	place-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--strong);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.cmb2b-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/* ---------- product page ---------- */
.cmb2b-product .woocommerce-breadcrumb {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

.cmb2b-product-top {
	gap: 48px;
	align-items: flex-start;
}

.cmb2b-product-title {
	margin: 0 0 8px;
	font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.25rem);
	line-height: 1.15;
}

.cmb2b-product-gallery .wc-block-components-product-image img,
.cmb2b-product-gallery .wc-block-product-gallery-large-image img {
	border-radius: 12px;
}

.cmb2b-product .wc-block-product-gallery-thumbnails img {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}

.cmb2b-accordion {
	border-top: 1px solid var(--wp--preset--color--border);
}

.cmb2b-accordion__item {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cmb2b-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	color: var(--wp--preset--color--contrast);
	font: 600 18px/1.3 var(--wp--preset--font-family--heading);
	list-style: none;
	cursor: pointer;
}

.cmb2b-accordion summary::-webkit-details-marker {
	display: none;
}

.cmb2b-accordion summary::after {
	content: "+";
	font-size: 24px;
	font-weight: 400;
	color: var(--wp--preset--color--primary-dark);
}

.cmb2b-accordion details[open] summary::after {
	content: "\2212";
}

.cmb2b-accordion__body {
	max-width: 78ch;
	padding: 0 0 24px;
}

.cmb2b-accordion__body table {
	width: 100%;
	border-collapse: collapse;
}

.cmb2b-accordion__body th,
.cmb2b-accordion__body td {
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

.cmb2b-accordion__body th {
	width: 30%;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.cmb2b-accordion__body p {
	margin: 0;
}

.single-product .cs-sticky-atc {
	display: none;
}

.cmb2b-related h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

/* The header cart and Quick order are for roles that can place orders (spec 74 F-12.3). */
.cmb2b-no-buy .wp-block-woocommerce-mini-cart,
.cmb2b-no-buy .ps-cart-link,
.cmb2b-no-buy .ps-main-nav li:has(> a[href*="quick-order"]),
.cmb2b-no-buy .ps-main-nav li:has(> .wp-block-navigation-item__content[href*="quick-order"]) {
	display: none;
}

/* ---------- apply ---------- */
.cmb2b-apply-cols {
	gap: 48px;
	align-items: flex-start;
}

.cmb2b-apply-title {
	margin: 0 0 12px;
	font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
	line-height: 1.15;
}

.cmb2b-apply-main .entry-content > p {
	margin-top: 0;
}

.cmb2b-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 20px 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: cmb2b-sec;
}

.cmb2b-progress li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--strong);
	font-size: 14px;
	font-weight: 600;
	counter-increment: cmb2b-sec;
}

.cmb2b-progress li::before {
	display: grid;
	flex: none;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary-dark);
	font-size: 13px;
	font-weight: 700;
	content: counter(cmb2b-sec);
}

.cmb2b-apply-main .cmb2b-apply__form {
	display: grid;
	gap: 20px;
	max-width: none;
}

.cmb2b-apply-main .cmb2b-apply__form .cmb2b-apply__group {
	width: auto;
	min-width: 0;
	margin: 0;
}

.cmb2b-apply-main .cmb2b-apply__form select {
	text-overflow: ellipsis;
}

.cmb2b-aside {
	box-sizing: border-box;
	position: sticky;
	top: 24px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--tertiary);
}

.cmb2b-aside__title {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--large);
}

.cmb2b-aside__list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmb2b-aside__list li {
	display: grid;
	gap: 2px;
	padding-left: 16px;
	border-left: 3px solid var(--wp--preset--color--primary);
}

.cmb2b-aside__list strong {
	color: var(--wp--preset--color--contrast);
	font-size: 15px;
}

.cmb2b-aside__list span,
.cmb2b-aside__note {
	color: var(--wp--preset--color--body-text);
	font-size: 14px;
}

.cmb2b-aside__note {
	margin: 16px 0 0;
	font-weight: 600;
}

/* ---------- login: the card and the apply card side by side, same width and height, same button size (spec 74 F-5.2) ---------- */
body.woocommerce-account:not(.logged-in) main .woocommerce {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "notices notices" "title title" "form teaser";
	grid-template-rows: auto auto 1fr;
	gap: 16px 32px;
	align-items: stretch;
	max-width: 960px;
	margin-inline: auto;
}

body.woocommerce-account:not(.logged-in) main .woocommerce > h2 {
	margin: 0;
}

body.woocommerce-account:not(.logged-in) main .woocommerce > form.woocommerce-form-login {
	max-width: none;
	margin: 0;
}

body.woocommerce-account:not(.logged-in) main .woocommerce .cs-b2b-login-teaser {
	align-self: stretch;
	margin: 0;
}

.woocommerce-form-login__submit,
.cs-b2b-login-teaser .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- 404 ---------- */
.cmb2b-404 {
	text-align: center;
}

.cmb2b-404 .wp-block-search {
	max-width: 520px;
	margin: 24px auto 0;
}

.cmb2b-404__contact {
	margin-top: 32px;
}

/* ---------- 1023 and below ---------- */
@media (max-width: 1023px) {
	.cmb2b-collection ul.cmb2b-grid.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cmb2b-product-top,
	.cmb2b-apply-cols {
		gap: 32px;
	}
}

/* ---------- 781 and below (tablet portrait, phone) ---------- */
@media (max-width: 781px) {
	.ps-home--b2b > .cs-b2b-section {
		margin-top: 40px;
	}

	.cmb2b-tiles {
		gap: 12px;
	}

	.cmb2b-collection ul.cmb2b-grid.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__title,
	.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price,
	.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__cta {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Related products: a swipeable row of cards at least 160 px wide. */
	.cmb2b-related ul.cmb2b-grid.wc-block-product-template {
		display: flex;
		flex-flow: row nowrap;
		gap: 12px;
		padding-bottom: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.cmb2b-related ul.cmb2b-grid.wc-block-product-template > li.cmb2b-product-card {
		flex: 0 0 min(62%, 220px);
		scroll-snap-align: start;
	}

	.cmb2b-archive .cmb2b-hero,
	.cmb2b-archive .cmb2b-hero.has-photo {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px;
	}

	.cmb2b-hero__photo {
		order: -1;
		aspect-ratio: 16 / 9;
	}

	.cs-b2b-shop-sort,
	.cs-b2b-shop-sort .wc-block-catalog-sorting,
	.cs-b2b-shop-sort select {
		width: 100%;
	}

	.cmb2b-product-top,
	.cmb2b-apply-cols {
		gap: 24px;
	}

	.cmb2b-aside {
		position: static;
	}

	body.woocommerce-account:not(.logged-in) main .woocommerce {
		display: block;
	}

	body.woocommerce-account:not(.logged-in) main .woocommerce .cs-b2b-login-teaser {
		margin-top: 24px;
	}
}

/* ---------- 1024 and above ---------- */
@media (min-width: 1024px) {
	.cmb2b-buybox-col,
	.cmb2b-apply-side {
		position: sticky;
		top: 24px;
		align-self: flex-start;
	}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.cmb2b-tile,
	.cmb2b-product-card,
	.cmb2b-card__cta .wp-block-button__link {
		transition-duration: 0s;
	}

	.cmb2b-tile:hover {
		transform: none;
	}
}

/* Vertical rhythm of the template mains (the parent resets the layout gap on .ps-main children). */
.wp-site-blocks main.cmb2b-archive > * + *,
.wp-site-blocks main.cmb2b-product > * + * {
	margin-block-start: 24px;
}

.cmb2b-archive > .cs-b2b-guest-note:empty {
	display: none;
}

/* 2.1.0 product page slots (functions.php, cmsmart_b2b_store_pdp_slot_html()). */
.cmb2b-buybox-col > .cs-b2b-pdp-facts:empty,
.cmb2b-buybox-col > .cs-b2b-pdp-ordered:empty {
	display: none;
}

.wp-site-blocks main.cmb2b-product .cmb2b-buybox-col > .cs-b2b-pdp-facts,
.wp-site-blocks main.cmb2b-product .cmb2b-buybox-col > .cs-b2b-pdp-ordered {
	margin-block-start: 8px;
}

.cs-b2b-facts {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--success);
}

.cs-b2b-facts svg {
	flex: none;
	width: 16px;
	height: 16px;
}

.cs-b2b-facts--info {
	color: var(--wp--preset--color--primary-dark);
}

.cs-b2b-facts--bad {
	color: var(--wp--preset--color--danger);
}

/* Apply form: the three sections stack, the short fields inside a section sit two to a row (one column at 390). */
.cmb2b-apply-main .cmb2b-apply__form {
	grid-template-columns: minmax(0, 1fr);
}

.cmb2b-apply-main .cmb2b-apply__form .cmb2b-apply__group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
	align-content: start;
	align-items: start;
}

.cmb2b-apply-main .cmb2b-apply__group > legend,
.cmb2b-apply-main .cmb2b-apply__group > .cmb2b-field:has(textarea),
.cmb2b-apply-main .cmb2b-apply__group > .cmb2b-field:has(input[type="file"]),
.cmb2b-apply-main .cmb2b-apply__group > :not(.cmb2b-field) {
	grid-column: 1 / -1;
}

@media (max-width: 781px) {
	.cmb2b-apply-main .cmb2b-apply__form .cmb2b-apply__group {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cmb2b-collection {
	display: block;
	width: 100%;
}

.cmb2b-collection > ul.cmb2b-grid {
	width: 100%;
}

/* Filled call-to-action buttons on the navy hero and CTA cards: the orange accent with ink text (7.5:1), like the logo's badge
   on its navy box. */
.cs-b2b-btn--apply .wp-block-button__link {
	border-color: var(--wp--preset--color--orange);
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--contrast);
}

.cs-b2b-btn--apply .wp-block-button__link:hover,
.cs-b2b-btn--apply .wp-block-button__link:focus-visible {
	border-color: var(--wp--custom--orange--400);
	background: var(--wp--custom--orange--400);
	color: var(--wp--preset--color--contrast);
}

/* Woo's show-password toggle is a 24 px target at best (WCAG 2.5.8). */
.woocommerce form .show-password-input {
	min-width: 44px;
	min-height: 44px;
}

/* On the product page the shorter of the two columns stays in view while the taller one scrolls. */
@media (min-width: 1024px) {
	.cmb2b-product-gallery {
		position: sticky;
		top: 24px;
		align-self: flex-start;
	}
}

/* WCAG 2.5.8: a card title is a link on its own, so each line is at least 24 px tall. */
.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__title a {
	display: block;
	min-height: 24px;
	line-height: 1.6;
}

/* The country select holds a long first option ("Detect from the tax ID prefix ..."): it gets the full row so the text is not cut. */
.cmb2b-apply-main .cmb2b-apply__group > .cmb2b-field:has(#cmb2b_country) {
	grid-column: 1 / -1;
}

/* ---------- b2b-rel-7 (UX Major 9): account sections in the burger menu, one menu at every width ---------- */
.wp-block-navigation .cs-acct-nav {
	display: none;
}

.ps-main-nav .wp-block-navigation__responsive-container.is-menu-open .cs-acct-nav {
	display: flex;
}

/* Group label rows ("Buy", "Track", ...): small muted caps, like the shell's sidebar headings. */
.ps-main-nav .wp-block-navigation__responsive-container.is-menu-open .cs-acct-nav__label {
	margin-top: 16px;
	text-indent: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ps-main-nav .cs-acct-nav [aria-current="page"] {
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

/* The shell's sidebar is hidden up to 1023 px, so on those pages the header keeps the burger up to the same width. */
@media (min-width: 960px) and (max-width: 1023px) {
	body.cs-has-acct-nav header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	body.cs-has-acct-nav header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Request a quote page (spec 90 R-J2): how quotes work, with sign-in and apply buttons, until the add-on's form fills it. */
.cs-b2b-rfq {
	padding: 32px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
}

/* The parent resets the layout gap on main's children (.wp-site-blocks main.wp-block-group > *). */
.wp-site-blocks main.cs-b2b-page--quote > .cs-b2b-rfq {
	margin-block-start: 24px;
}

.cs-b2b-rfq__title {
	margin: 0 0 12px;
	font-size: 1.5rem;
}

.cs-b2b-rfq__text {
	margin: 0 0 24px;
}

.cs-b2b-rfq__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cs-b2b-rfq .wp-block-button__link {
	display: inline-block;
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--button);
}

.cs-b2b-rfq .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
}

.cs-b2b-rfq .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
}

/* The 2.1.0 add-on's quote form reuses .cmb2b-apply__form, which this theme draws as a two-column card for the apply page:
   inside the page card that left a 53 px product field. One column, no second card. */
.cs-b2b-rfq .cmb2b-rfq__form {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.cs-b2b-rfq .cmb2b-rfq__lead {
	margin-bottom: 24px;
}

/* A single item line hides its Remove button (visibility): on phones that still left an empty grid row. */
@media (max-width: 720px) {
	.cs-b2b-rfq .cmb2b-rfq__line:only-child .cmb2b-rfq__remove {
		display: none;
	}
}

@media (max-width: 600px) {
	.cs-b2b-rfq {
		padding: 24px 20px;
	}

	.cs-b2b-rfq__buttons .wp-block-button,
	.cs-b2b-rfq__buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}