/*
Theme Name: Cmsmart B2B Store
Theme URI: https://www.cmsmart.net/
Author: Cmsmart
Author URI: https://www.cmsmart.net/
Description: Business-to-business print and merchandise store for Cmsmart Product Designer and the Cmsmart B2B add-on: catalogue-first home, sign-in and apply landing, company price display, quick order and reorder entry points, shop and product pages.
Template: cmsmart-stores
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 2.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cmsmart-b2b-store
Tags: e-commerce, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, translation-ready
*/

/* Cmsmart B2B Store storefront. Tokens live in theme.json; this file only holds what theme.json cannot express. */

/* ---------- shared bits ---------- */
:root {
	--ps-accent: var(--wp--preset--color--primary);
	--ps-red: var(--wp--preset--color--primary-dark);
	--ps-icon-thumbs-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v12H2zM8 10l4-8c1.7 0 3 1.3 3 3v4h5.5a2 2 0 0 1 2 2.4l-1.5 8A2 2 0 0 1 19 22H8z'/%3E%3C/svg%3E");
	--ps-icon-paper-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 11 22 2l-4 20-6-5-4 4v-6l9-9-11 7z'/%3E%3C/svg%3E");
	--ps-icon-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C9 3 3 9 3 16c0 1.4.3 2.7.8 3.5L2 21.3 3.2 22.5l1.8-1.8c.8.5 2 .8 3 .8 7 0 13-6 13-18.5z'/%3E%3C/svg%3E");
	--ps-icon-money: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6h20v12H2zm10 2.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z' fill-rule='evenodd'/%3E%3C/svg%3E");
	--ps-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.250.2 2.450.57 3.570a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

.ps-headline {
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 14px;
}

.ps-section {
	padding-top: 60px;
	padding-bottom: 60px;
	margin-block: 0;
}

.ps-section > .wp-block-group,
.wp-site-blocks main.wp-block-group > * {
	margin-block-start: 0;
}

/* ---------- inner pages ---------- */
.ps-page-title {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.ps-page-title h1,
.ps-page-title .wp-block-post-title {
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.ps-page-title .wc-block-breadcrumbs,
.ps-page-title .woocommerce-breadcrumb {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

/* ---------- footer ---------- */
.ps-footer {
	padding: 60px 0 30px;
}

.ps-footer .ps-footer__columns {
	max-width: 1140px;
	margin: 0 auto;
	gap: 30px;
}

.ps-footer__title {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 10px;
	border-bottom: 1px solid #333;
	color: var(--ps-accent);
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
}

.ps-footer__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 28px;
	height: 1px;
	background: var(--ps-accent);
}

.ps-footer p,
.ps-footer li {
	font-size: 12px;
	line-height: 1.9;
}

.ps-footer a {
	text-decoration: none;
}

.ps-footer a:hover,
.ps-footer a:focus {
	color: #fff;
	text-decoration: underline;
}

.ps-footer__contact {
	list-style: none;
	margin: 12px 0;
	padding: 0;
}

.ps-footer__social {
	gap: 8px;
}

.ps-footer__nav .wp-block-navigation__container {
	gap: 0;
	align-items: flex-start;
}

.ps-footer__nav .wp-block-navigation-item__content {
	font-size: 12px;
	line-height: 2;
	padding: 0;
}

.ps-footer__bottom {
	background: #111 !important;
	padding: 20px 0;
	font-size: 12px;
}

.ps-footer__bottom p {
	max-width: 1140px;
	margin: 0 auto;
	font-size: 12px;
}

.ps-footer__bottom a {
	color: #fff;
}

/* ---------- page title bar, blog, contact ---------- */
.ps-page-title {
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.ps-page-title .wp-block-post-title,
.ps-page-title__site {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

.ps-blog-banner {
	margin-top: 0;
}

.ps-blog-banner h1 {
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	color: #fff;
}

.ps-post-meta {
	gap: 20px;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

.ps-post-meta a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ps-widget-box {
	border: 2px solid var(--wp--preset--color--border);
	padding: 30px 20px;
	margin-bottom: 40px;
}

/* 2.1.0: the shop sidebar classes are cs-b2b-*; the ps-* names stay styled for one release (templates customised in
   the Site Editor before 2.1.0 still print them). */
.ps-widget-title,
.cs-b2b-widget-title {
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 0 20px;
}

.ps-categories {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ps-categories li {
	display: flex;
	justify-content: space-between;
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-transform: uppercase;
	font-size: 14px;
}

.ps-categories a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ps-cf {
	display: grid;
	grid-template-columns: 2fr 1.3fr;
	gap: 30px;
}

.ps-cf p {
	margin: 0;
}

.ps-cf__side > p,
.ps-cf__side > .wpcf7-form-control-wrap {
	margin: 0 0 16px;
	display: block;
}

.ps-contact .wpcf7-form input[type="text"],
.ps-contact .wpcf7-form input[type="email"],
.ps-contact .wpcf7-form textarea {
	width: 100%;
	border: 1px solid #ddd;
	padding: 10px;
	font: inherit;
	box-sizing: border-box;
	margin-bottom: 16px;
}

.ps-contact .wpcf7-form textarea {
	min-height: 215px;
	margin: 0;
}

@media (max-width: 781px) {
	.ps-cf {
		grid-template-columns: 1fr;
	}
}

.ps-contact .wpcf7-submit {
	width: 100%;
}

.ps-contact__address,
.ps-contact__phone,
.ps-contact__fax,
.ps-contact__web {
	position: relative;
	padding-left: 30px;
	font-size: 12px;
	line-height: 2.2;
}

.ps-contact__address::before,
.ps-contact__phone::before,
.ps-contact__fax::before,
.ps-contact__web::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--contrast);
	-webkit-mask: var(--ps-fi) center / contain no-repeat;
	mask: var(--ps-fi) center / contain no-repeat;
}

.ps-contact__address { --ps-fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h5v-6h4v6h5v-9h3z'/%3E%3C/svg%3E"); }
.ps-contact__phone { --ps-fi: var(--ps-icon-phone); }
.ps-contact__fax { --ps-fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h10l4 4v3h2v10H3V10h2zm2 2v5h10V8h-3V5z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ps-contact__web { --ps-fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 2.1V8H8.2A8 8 0 0 1 11 4.100zM4.300 13H8c.1 1.200.3 2.300.7 3.300A8 8 0 0 1 4.300 13z'/%3E%3C/svg%3E"); }

.ps-contact .wpcf7-submit {
	background: var(--wp--preset--color--accent-orange);
	color: var(--wp--preset--color--contrast);
	border: 0;
	padding: 10px 24px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

/* ---------- fixes after first comparison ---------- */
header.wp-block-template-part > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.ps-header .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 4px;
}

.ps-header .wc-block-mini-cart__button {
	padding: 4px;
}

/* ---------- second pass ---------- */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.ps-products .wc-block-product-template__responsive {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

@media (max-width: 781px) {
	.ps-products .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

.ps-products .wp-block-woocommerce-product-image,
.ps-products .wc-block-components-product-image {
	margin-bottom: 12px;
}

.ps-footer__contact li {
	position: relative;
	padding-left: 22px;
}

.ps-footer__contact li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--ps-fi) center / contain no-repeat;
	mask: var(--ps-fi) center / contain no-repeat;
}

.ps-footer__address { --ps-fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h5v-6h4v6h5v-9h3z'/%3E%3C/svg%3E"); }
.ps-footer__phone { --ps-fi: var(--ps-icon-phone); }
.ps-footer__mail { --ps-fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zm2 2v.5l8 5.5 8-5.5V7zm16 3-8 5.500L4 10v7h16z' fill-rule='evenodd'/%3E%3C/svg%3E"); }

.ps-footer .wp-block-navigation + .ps-footer__title {
	margin-top: 30px;
}

.ps-footer__social .wp-social-link {
	border-radius: 50%;
}

/* ---------- shop ---------- */
.ps-breadcrumbs {
	gap: 6px;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

.ps-breadcrumbs p,
.ps-breadcrumbs .woocommerce-breadcrumb,
.ps-breadcrumbs a {
	margin: 0;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ps-shop-columns {
	gap: 40px;
}

.ps-mini-product,
.cs-b2b-mini-product {
	gap: 14px;
	margin-bottom: 18px;
}

.ps-mini-product img,
.cs-b2b-mini-product img {
	border: 1px solid var(--wp--preset--color--border);
}

.ps-mini-product .wp-block-post-title,
.cs-b2b-mini-product .wp-block-post-title {
	margin: 0 0 4px;
	font-weight: 700;
}

.ps-shop-toolbar {
	margin-bottom: 20px;
}

.ps-shop-toolbar .woocommerce-result-count {
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.ps-products--shop .wp-block-woocommerce-product-button {
	margin-bottom: 0;
}

/* product cards (shop, related products): a framed card, a cart bar under the picture, centred name and red price */
.ps-main li.wc-block-product {
	padding: 0 0 15px;
	border: 1px solid #d7d7d7;
	text-align: center;
}

.ps-main li.wc-block-product .wc-block-components-product-image {
	margin: 0;
}

.ps-main li.wc-block-product .wp-block-post-title {
	margin: 0;
	padding: 7px 8px 0;
	font-size: 14px;
	font-weight: 700;
	text-transform: capitalize;
}

.ps-main li.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ps-main li.wc-block-product .wp-block-woocommerce-product-price {
	margin-top: 4px;
	font-size: 21px;
	font-weight: 400;
	color: var(--wp--preset--color--primary-dark);
}

.ps-main li.wc-block-product .wp-block-woocommerce-product-price {
	font-weight: 700;
}

.ps-main li.wc-block-product .wc-block-components-product-price {
	font-size: inherit;
}

.ps-main li.wc-block-product .wp-block-woocommerce-product-price del {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

.ps-card-bar,
.ps-main li.wc-block-product .wp-block-woocommerce-product-button {
	margin: 0;
	border-top: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
}

.ps-main li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
.ps-main li.wc-block-product .wp-block-woocommerce-product-button .wc-block-components-product-button__button {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 12px 0 34px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #515151;
	font-size: 12px;
	font-weight: 700;
	line-height: 36px;
	text-align: left;
	text-transform: uppercase;
}

.ps-main li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 11px;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2v2h2l3.6 7.6L5.2 14c-.1.3-.2.6-.2 1 0 1.1.9 2 2 2h12v-2H7.4a.25.25 0 0 1-.2-.4l.9-1.6h7.5c.8 0 1.4-.4 1.7-1l3.6-6.5A1 1 0 0 0 20 4H5.2l-.9-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2v2h2l3.6 7.6L5.2 14c-.1.3-.2.6-.2 1 0 1.1.9 2 2 2h12v-2H7.4a.25.25 0 0 1-.2-.4l.9-1.6h7.5c.8 0 1.4-.4 1.7-1l3.6-6.5A1 1 0 0 0 20 4H5.2l-.9-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ps-main li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover {
	color: var(--wp--preset--color--primary-dark);
}

.ps-main .wc-block-components-product-sale-badge {
	border-radius: 0;
	border: 0;
	background: var(--wp--preset--color--accent-orange);
	color: var(--wp--preset--color--footer);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.ps-mini-product .wp-block-post-title a,
.cs-b2b-mini-product .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ps-mini-product .wp-block-woocommerce-product-price,
.cs-b2b-mini-product .wp-block-woocommerce-product-price {
	font-size: 12px;
	color: var(--wp--preset--color--primary-dark);
}

/* The parent's compact sidebar lists (polish.css, .ps-mini-products) for the 2.1.0 class names. The title and picture
   rules carry the inner group so they also beat the parent's related-products rule, which skips only .ps-mini-products. */
.cs-b2b-mini-products .wp-block-woocommerce-product-template,
.cs-b2b-mini-products ul.wc-block-product-template {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-b2b-mini-products li.wc-block-product {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
}

.cs-b2b-mini-products li.wc-block-product + li.wc-block-product .cs-b2b-mini-product {
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--border, #e0e0e0);
}

.cs-b2b-mini-products .cs-b2b-mini-product {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin: 0 0 12px;
	text-align: left;
}

.cs-b2b-mini-products .cs-b2b-mini-product .wc-block-components-product-image {
	flex: 0 0 68px;
	width: 68px;
	height: 68px;
	margin: 0;
}

body .wp-block-woocommerce-product-collection.cs-b2b-mini-products .cs-b2b-mini-product .wc-block-components-product-image img {
	display: block;
	width: 68px !important;
	height: 68px !important;
	max-width: none;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--cs-r-xs);
}

.cs-b2b-mini-products .cs-b2b-mini-product > .wp-block-group {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	text-align: left;
}

body .wp-block-woocommerce-product-collection.cs-b2b-mini-products .cs-b2b-mini-product > .wp-block-group .wp-block-post-title {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-height: 2.7em;
	overflow: hidden;
	margin: 0 0 4px;
	padding: 0;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	text-overflow: ellipsis;
}

.cs-b2b-mini-products .cs-b2b-mini-product .wp-block-woocommerce-product-price,
.cs-b2b-mini-products .cs-b2b-mini-product .wc-block-components-product-price {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	justify-content: flex-start;
}

.cs-b2b-mini-products .cs-b2b-mini-product .wc-block-components-product-price del {
	margin-right: 6px;
	font-weight: 400;
	opacity: 0.65;
}

.cs-b2b-mini-products .cs-b2b-mini-product .wc-block-components-product-price ins {
	font-weight: 700;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	display: inline-block;
	min-width: 30px;
	margin: 0 2px;
	padding: 5px 8px;
	background: #e9e9e9;
	color: var(--wp--preset--color--contrast);
	text-align: center;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--accent-orange);
	color: var(--wp--preset--color--footer);
}

.ps-products--shop .wc-block-product-template__responsive {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 781px) {
	.ps-products--shop .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ps-main .wp-block-query .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ps-cart-link {
	margin: 0;
}

.ps-cart-link a {
	display: block;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2v2h2l3.600 7.600L5.200 14c-.1.300-.2.600-.2 1 0 1.100.9 2 2 2h12v-2H7.400a.250.250 0 0 1-.2-.4l.9-1.600h7.500c.8 0 1.400-.4 1.700-1l3.600-6.500A1 1 0 0 0 20 4H5.200l-.9-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2v2h2l3.600 7.600L5.200 14c-.1.300-.2.600-.2 1 0 1.100.9 2 2 2h12v-2H7.400a.250.250 0 0 1-.2-.4l.9-1.600h7.500c.8 0 1.400-.4 1.700-1l3.600-6.500A1 1 0 0 0 20 4H5.200l-.9-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- product ---------- */
.ps-page-title__plain {
	margin: 0;
	font-size: 16px;
	color: var(--wp--preset--color--muted);
}

.ps-product-top {
	gap: 30px;
}

.ps-product-top .wp-block-post-title {
	font-weight: 500;
}

.ps-product-top .wp-block-woocommerce-product-price {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.ps-main .wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--accent-orange);
	color: var(--wp--preset--color--contrast);
}

/* ---------- p7b: carousels, product tabs, mega panel ---------- */
.wp-block-cmsmart-carousel {
	--cmsmart-carousel-accent: var(--wp--preset--color--primary);
	--cmsmart-carousel-arrow-bg: #8a8a8a;
	--cmsmart-carousel-arrow-size: 26px;
	--cmsmart-carousel-arrow-radius: 0;
}

/* main menu: About mega panel (text + banner) */
.ps-header .has-cmsmart-mega > .wp-block-navigation__submenu-container {
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border: 0;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.ps-header .cmsmart-mega-menu h4 {
	text-transform: uppercase;
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
}

.ps-header .cmsmart-mega-menu p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
}

.ps-banner,
.cs-b2b-banner {
	margin: 24px 0;
}

.ps-banner a,
.cs-b2b-banner a {
	display: block;
}

/* product gallery: large image, thumbnail strip below */
.ps-product-top .wc-block-product-gallery {
	gap: 10px;
}

.ps-product-top .wc-block-product-gallery-thumbnails {
	gap: 8px;
}

/* the mega panel is as wide as it needs to be, aligned to the right edge of the header row */
@media (min-width: 600px) {
	.ps-header {
		position: relative;
	}

	.ps-header .wp-block-group,
	.ps-header .wp-block-navigation,
	.ps-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
	.ps-header .wp-block-navigation__responsive-dialog,
	.ps-header .wp-block-navigation__responsive-container-content,
	.ps-header .wp-block-navigation__container,
	.ps-header .has-cmsmart-mega {
		position: static;
	}

	.ps-header .wp-block-navigation .has-cmsmart-mega > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		left: auto;
		right: max(0px, calc((100% - 1140px) / 2));
		top: 100%;
	}
}

.ps-header .cmsmart-mega-menu p {
	margin: 0 0 12px;
}

/* ---------- p8b: performance and contrast ---------- */
/* WooCommerce dims the inactive product tabs with opacity .65 (3.69:1); a solid grey keeps the look and passes 4.5:1. */
html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li:not(.active, :hover, :focus-within) {
	opacity: 1;
	color: #666;
}

/* Sections below the first screen are laid out and painted only when they come near the viewport
   (cuts the initial style/layout work of the long home page); the browser remembers the real height once rendered. */
.ps-section {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}

/* ---------- Cmsmart B2B Store: page frame (top bar, banner, header) ---------- */
header.wp-block-template-part {
	position: relative;
	z-index: 20;
}

header.wp-block-template-part > *,
.wp-site-blocks > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.ps-header {
	min-height: 90px;
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}

.ps-header .wp-block-site-logo img {
	display: block;
	width: 239px;
	height: auto;
}

/* logo-b2b-official: the logo is a filled navy box, shown as is (no frame or padding). The box is 40 px tall in the 90 px
   header (239 x 40), 34 px from 481 to 1199 px, 24 px on phones (22 px below 375); the nav and tools give way first. */
.ps-header .wp-block-site-logo,
.ps-header .ps-header__logo {
	flex: none;
	margin: 0 clamp(12px, 2vw, 28px) 0 0;
	padding: 0;
	background: none;
	line-height: 0;
}
.ps-header .wp-block-site-logo a,
.ps-header .ps-header__logo a {
	border-radius: 5px;
}
@media (max-width: 1199px) {
	.ps-header .wp-block-site-logo img,
	.ps-header .ps-header__logo img {
		width: 203px !important;
		height: auto !important;
	}
}
@media (max-width: 480px) {
	.ps-header .wp-block-site-logo img,
	.ps-header .ps-header__logo img {
		width: 143px !important;
		height: auto !important;
	}
}
@media (max-width: 400px) {
	.ps-header .wp-block-site-logo,
	.ps-header .ps-header__logo {
		margin-right: 8px;
	}
	html body .ps-header .ps-header__tools {
		gap: 4px;
	}
}
/* Cart and checkout: the header uses the plain cart link, but WooCommerce still hooks its own mini-cart in after the
   navigation. That one renders as an empty 44 px box there and pushed the 390 px row 19 px wide. */
.ps-header:has(.ps-cart-link) .wc-block-mini-cart {
	display: none;
}
/* Phones: the logo no longer shrinks (flex:none), so the cart count sits on the icon's corner instead of beside it; inline it
   widened the row by 33 px at 390 once the cart had items. */
@media (max-width: 480px) {
	html body .ps-header .wc-block-mini-cart__button {
		position: relative;
		gap: 0;
		padding: 4px 10px;
	}
	html body .ps-header .wc-block-mini-cart__badge {
		position: absolute;
		top: 2px;
		right: 0;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		font-size: 11px;
		line-height: 18px;
	}
}
/* 360 px phones: 131 x 22 keeps the row inside the screen and stays above the 120 px minimum width. */
@media (max-width: 374px) {
	.ps-header .wp-block-site-logo img,
	.ps-header .ps-header__logo img {
		width: 131px !important;
	}
}

.ps-main-nav {
	flex: 1 1 auto;
	justify-content: center;
}

.ps-main-nav .wp-block-navigation__container {
	gap: 0;
}

.ps-header .ps-main-nav .wp-block-navigation-item__content {
	padding: 0 clamp(8px, 1vw, 12px); /* 0.4.1: was 20px; a 6-item menu plus the header tools must stay on one row */
	line-height: 40px;
	font-size: 14px;
	text-transform: none;
	text-decoration: none;
}

.ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
}

.ps-main-nav .wp-block-navigation__submenu-container {
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	min-width: 220px;
}

.ps-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 6px 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

.ps-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.ps-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

/* Shopping: the old mega grid. A top-level submenu whose children have children of their own lists them in two columns,
   with the grandchildren always shown under their column heading (they open and close with the panel). */
@media (min-width: 600px) {
	.ps-main-nav .wp-block-navigation__container > .wp-block-navigation-submenu:has(.wp-block-navigation-submenu) > .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(200px, 1fr));
		align-items: start;
		min-width: 460px;
		padding: 12px 8px;
	}

	.ps-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		position: static;
		visibility: inherit;
		opacity: 1;
		height: auto;
		width: auto;
		min-width: 0;
		overflow: visible;
		border: 0;
		padding: 0;
		background: transparent;
	}

	.ps-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		font-weight: 700;
		text-transform: uppercase;
		font-size: 13px;
	}

	.ps-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle {
		display: none;
	}
}

.ps-header__tools {
	gap: 18px;
	flex-wrap: nowrap;
}

.ps-header__tools .wc-block-mini-cart__button,
.ps-header__tools .wp-block-search__button {
	color: #fff;
	background: transparent;
	border: 0;
	padding: 4px;
}

.ps-header__tools .wp-block-search__button svg,
.ps-header__tools .wc-block-mini-cart__icon {
	fill: #fff;
	color: #fff;
}

.ps-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent-red-dark);
	color: #fff;
}

.ps-header .wp-block-navigation__responsive-container-open svg {
	fill: #fff;
}

.ps-cart-link {
	margin: 0;
}

.ps-cart-link a {
	display: block;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2v2h2l3.6 7.6L5.2 14c-.1.3-.2.6-.2 1 0 1.1.9 2 2 2h12v-2H7.4a.25.25 0 0 1-.2-.4l.9-1.6h7.5c.8 0 1.4-.4 1.7-1l3.6-6.5A1 1 0 0 0 20 4H5.2l-.9-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2v2h2l3.6 7.6L5.2 14c-.1.3-.2.6-.2 1 0 1.1.9 2 2 2h12v-2H7.4a.25.25 0 0 1-.2-.4l.9-1.6h7.5c.8 0 1.4-.4 1.7-1l3.6-6.5A1 1 0 0 0 20 4H5.2l-.9-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Cmsmart B2B Store: home (boxed 9) ---------- */
.ps-home > .ps-section {
	margin-block: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* search row */
.ps-home > .ps-searchrow {
	padding-top: 12px;
	padding-bottom: 12px;
}

.ps-searchrow > .wp-block-group {
	gap: 0;
	align-items: stretch;
}

.ps-searchform {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	border: 1px solid var(--wp--preset--color--border);
}

.ps-searchform select {
	flex: 0 0 185px;
	max-width: 30%;
	height: 100%;
	padding: 0 10px;
	border: 0;
	background: #222;
	color: #fff;
	font: inherit;
	font-size: 12px;
}

.ps-searchform input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 14px;
	border: 0;
	font: inherit;
	font-size: 12px;
	color: var(--wp--preset--color--contrast);
}

.ps-searchform button {
	flex: 0 0 46px;
	border: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2.4'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
	cursor: pointer;
}

.ps-searchcart {
	flex: 0 0 25%;
	max-width: 285px;
	margin-left: 0;
	background: var(--wp--preset--color--accent-red-dark);
}

.ps-searchcart .wc-block-mini-cart__button {
	width: 100%;
	height: 46px;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.ps-searchcart .wc-block-mini-cart__icon {
	color: #fff;
	fill: #fff;
}

.ps-vmenu__title {
	position: relative;
	margin: 0;
	height: 48px;
	padding: 0 16px 0 52px;
	line-height: 48px;
	background: var(--wp--preset--color--accent-red-dark);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.ps-vmenu__title::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 18px;
	width: 14px;
	height: 2px;
	background: #fff;
	box-shadow: 0 5px #fff, 0 10px #fff;
}

.ps-main .ps-mini-products li.wc-block-product .wp-block-woocommerce-product-price,
.ps-main .cs-b2b-mini-products li.wc-block-product .wp-block-woocommerce-product-price {
	margin: 0;
	font-size: 12px;
}

/* related products: four, as on the old page (the pattern renders without a wrapper class) */
.single-product .ps-main .wc-block-product-template.columns-5 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.single-product .ps-main .wc-block-product-template.columns-5 > li.wc-block-product {
	width: auto;
	margin: 0;
}

.single-product .ps-main .wc-block-product-template.columns-5 > li.wc-block-product:nth-child(n + 5) {
	display: none;
}

/* Never draw an image larger than its own pixels: a small original (260 px product shot, 750 px post image) keeps its natural
   size, centred in the slot, instead of being upscaled and soft. Large images still fill the slot (max-width: 100%). */
.ps-products--thumbs .wp-block-woocommerce-product-image img,
.cmsmart-ptabs__media img,
.wc-block-woocommerce-product-gallery-large-image__image,
.single-post .wp-block-post-featured-image img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	margin-inline: auto;
	display: block;
}

/* ---------- Cmsmart B2B Store: white header (no top bar, no banner) ---------- */
.ps-header {
	border-bottom: 0;
}

.ps-header .ps-main-nav .wp-block-navigation-item__content {
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 14px;
}

.ps-header__tools .wc-block-mini-cart__button,
.ps-header__tools .wp-block-search__button {
	color: var(--wp--preset--color--contrast);
}

.ps-header__tools .wp-block-search__button svg,
.ps-header__tools .wc-block-mini-cart__icon,
.ps-header .wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

/* ---------- home: dark search row with the red categories title ---------- */
.ps-home > .ps-searchrow {
	background: var(--wp--preset--color--topbar);
	padding: 0;
}

.ps-searchrow > .ps-searchrow__inner {
	max-width: 1140px;
	margin-inline: auto;
	gap: 23px;
	align-items: center;
	height: 75px;
}

.ps-searchrow .ps-vmenu__title {
	position: relative;
	flex: 0 0 262px;
	box-sizing: border-box;
	height: 75px;
	margin: 0;
	padding: 0 16px 0 45px;
	line-height: 75px;
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.ps-searchrow .ps-vmenu__title::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 31px;
	width: 17px;
	height: 3px;
	background: #fff;
	box-shadow: 0 6px #fff, 0 12px #fff;
}

.ps-searchrow .ps-searchform {
	flex: 1 1 auto;
	height: 45px;
	border: 1px solid #555;
	background: #43464b;
}

.ps-searchrow .ps-searchform select {
	flex: 0 0 137px;
	max-width: none;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-right: 1px solid #555;
	font-size: 14px;
}

.ps-searchrow .ps-searchform input[type="search"] {
	background: transparent;
	color: #fff;
	font-size: 14px;
}

.ps-searchrow .ps-searchform input[type="search"]::placeholder {
	color: #bbb;
	opacity: 1;
}

.ps-searchrow .ps-searchform button {
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E");
}

.ps-searchrow .ps-searchcart {
	flex: 0 0 180px;
	max-width: 180px;
	height: 45px;
	background: var(--wp--preset--color--accent-orange);
}

.ps-searchrow .ps-searchcart .wc-block-mini-cart__button {
	height: 45px;
	color: var(--wp--preset--color--contrast);
}

.ps-searchrow .ps-searchcart .wc-block-mini-cart__icon {
	color: var(--wp--preset--color--contrast);
	fill: var(--wp--preset--color--contrast);
}

/* ---------- footer: bottom bar (the icon band was removed in UXF2) ---------- */
.ps-footer__bottom {
	display: flex;
	align-items: center;
}

.ps-footer__bottom.is-layout-constrained > * {
	max-width: none;
}

.ps-footer__bottom {
	gap: 14px;
	justify-content: flex-start;
	padding-left: max(24px, calc(50% - 570px));
	padding-right: 24px;
}

.ps-footer__bottom p {
	margin: 0;
}

/* ---------- small screens ---------- */
@media (max-width: 781px) {
	.ps-searchrow > .ps-searchrow__inner {
		height: auto;
		padding: 15px;
	}

	.ps-searchrow .ps-vmenu__title,
	.ps-searchrow .ps-searchcart {
		display: none;
	}

	

	

	
	

	

	

	

	

	

	
	

	

	

	

	

	.ps-footer__bottom {
		flex-wrap: wrap;
		padding-left: 24px;
	}
}

/* ---------- fidelity pass 1 ---------- */
.ps-searchrow .ps-searchform select {
	width: 137px;
	min-width: 0;
	flex: 0 0 137px;
}

.ps-searchrow .ps-searchcart {
	margin-left: -23px;
}

.ps-header > .wp-block-group {
	width: 100%;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

.ps-footer__bottom .wp-block-paragraph,
.ps-footer__bottom p {
	max-width: none;
	margin: 0;
}

.ps-footer p {
	font-size: 14px;
}

.ps-footer li,
.ps-footer .wp-block-navigation-item__content {
	font-size: 13px;
}

/* ---------- Cmsmart B2B Store: palette, home sections, notes ---------- */
:root {
	/* Official Cmsmart B2B logo system (logo-b2b-official): every value is a theme.json token. The --cs-b2b-gold / -ivory
	   names are kept because the parent stylesheet (b2b.css) reads them: gold = navy-600 (decorative), gold-dark = brand navy
	   (AA text), ivory = cool surface. */
	--cs-b2b-navy: var(--wp--preset--color--navy);
	--cs-b2b-navy-soft: var(--wp--preset--color--navy-2);
	--cs-b2b-gold: var(--wp--preset--color--primary);
	--cs-b2b-gold-dark: var(--wp--preset--color--primary-dark);
	--cs-b2b-ivory: var(--wp--preset--color--tertiary);
	--cs-b2b-line: var(--wp--preset--color--border);
	--cs-b2b-text-on-dark: var(--wp--preset--color--footer-text);
	--cs-b2b-action: var(--wp--preset--color--primary-dark);
	--cs-b2b-action-hover: var(--wp--preset--color--primary-deep);
	--ps-accent: var(--wp--preset--color--primary);
}
.ps-home--b2b > .alignwide,
.ps-home--b2b > .ps-section {
	margin-left: auto;
	margin-right: auto;
}

.ps-home--b2b .ps-headline {
	font-weight: 600;
	letter-spacing: 0.04em;
}

.cs-b2b-sidecta {
	padding: 20px;
	border: 1px solid var(--cs-b2b-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--cs-b2b-ivory);
}
.cs-b2b-sidecta .wp-block-button__link {
	border-radius: var(--wp--custom--radius--button);
}

/* Core quote button (printed by the quote slot on product pages): secondary ghost button. */
.cs-b2b-quote .nbdq-add-a-quote-button {
	padding: 12px 26px;
	border: 1px solid var(--cs-b2b-action);
	border-radius: var(--wp--custom--radius--button);
	background: transparent;
	color: var(--cs-b2b-action);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.cs-b2b-quote .nbdq-add-a-quote-button:hover {
	background: var(--cs-b2b-action);
	color: #fff;
}

/* Cmsmart B2B add-on account shell: the add-on's tokens (assets/css/account.css) mapped to the Cmsmart blue system.
   The add-on's own tokens.css reads the theme.json presets (UXF1); this block only carries what the add-on still
   hard-codes (legacy names, info ink, on-navy text). Remove it once the add-on stops reading these names (follow-up for UXF1). */
html .cmb2b {
	--cmb2b-primary: var(--cs-b2b-action);
	--cmb2b-primary-hover: var(--cs-b2b-action-hover);
	--cmb2b-primary-soft: var(--wp--preset--color--tint);
	--cmb2b-on-primary: var(--wp--preset--color--base);
	--cmb2b-text: var(--wp--preset--color--contrast);
	--cmb2b-bg-soft: var(--cs-b2b-ivory);
	--cmb2b-bg-canvas: var(--wp--preset--color--tertiary);
	--cmb2b-border: var(--wp--preset--color--border);
	--cmb2b-border-strong: var(--wp--preset--color--border-field);
	--cmb2b-radius-xl: var(--wp--custom--radius--card);
	--cmb2b-info-ink: var(--wp--preset--color--primary-dark);
	--cmb2b-on-navy: var(--wp--preset--color--footer-text);
	--cmb2b-neutral: var(--wp--preset--color--body-text);
	--cmb2b-neutral-soft: var(--wp--preset--color--surface);
}
/* Account UX v2 (job b2b-account-ux): the business account area is an app screen (sidebar + page hero + tables), so logged-in account
   pages get a wider column than the 1140px reading width; the header and footer keep theirs. */
body.cmb2b-account.logged-in .ps-main,
body.cmb2b-account.logged-in main#wp--skip-link--target {
	--wp--style--global--content-size: 1320px;
	--wp--style--global--wide-size: 1320px;
}
.cmb2b-nav__link.is-current,
.cmb2b-chip--brand,
.cmb2b-status--processing {
	color: var(--cs-b2b-navy);
}

/* R2 audit fixes (reports/b2b-r2-audit.md, T1-T6). */
/* T1: Woo's block-theme CSS caps the logged-in account area at 1000px; use the content width so the shell lines up with the header. */
body.woocommerce-account.logged-in main .woocommerce {
	max-width: none;
}
/* T2: the page-title band is constrained to the wide size (1260px) while content uses 1140px; align it. Member screens print
   their own title, so the band is empty there: hide it. */
.cmsmart-page-title > .wp-block-group {
	max-width: var(--wp--style--global--content-size, 1140px);
}
.cmsmart-page-title:not(:has(.wp-block-post-title, .wp-block-query-title, h1, h2)) {
	display: none;
}
/* T3: the core plugin's account tokens on the plain Woo account of non-members: map them to the Cmsmart blue system. */
body.woocommerce-account .woocommerce-account,
body.woocommerce-account {
	--nbd-primary: var(--cs-b2b-action);
	--nbd-primary-hover: var(--cs-b2b-action-hover);
	--nbd-primary-soft: var(--wp--preset--color--tint);
	--nbd-primary-tint: var(--cs-b2b-ivory);
	--nbd-color-info: var(--cs-b2b-action);
	--nbd-color-info-soft: var(--wp--preset--color--tint);
	--nbd-ring: 0 0 0 3px rgba(38, 80, 140, .45);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
	padding: 0;
}
/* T4: Woo wraps order number, date and status in <mark> (bright yellow by default). */
.woocommerce-MyAccount-content mark,
.cmb2b mark,
.woocommerce-order mark {
	background: transparent;
	color: inherit;
	font-weight: 600;
}
/* T5: Apply form: long select options pushed the page 18px wider than 390px. */
.cmb2b-apply input,
.cmb2b-apply select,
.cmb2b-apply textarea {
	max-width: 100%;
}
/* T6: open mobile menu: the hovered / focused item turned champagne on white (2.2:1). */
.ps-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus, :focus-visible) {
	color: var(--cs-b2b-gold-dark);
}

/* R2 batch 5 (reports/b2b-r2-fix-store.md). */
/* R2-020: no search band; the feature cards sit under the hero with a gap. */
.ps-home--b2b > .cs-b2b-hero,
.ps-home--b2b > .wp-block-group:first-child {
	margin-bottom: 24px;
}
.ps-home--b2b .cs-b2b-hero + * {
	margin-top: 24px;
}

/* R2-042: "Sign in to see your price" is a quiet link, not a headline (it repeats on every card). */
.cmb2b-signin-price {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.single-product .summary .cmb2b-signin-price,
.single-product .ps-product-top .cmb2b-signin-price {
	font-size: 16px;
}
.cs-price-unit {
	display: inline;
	font-size: .65em;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
/* Product title band: the category as a plain label. */
.ps-page-title__cat,
.ps-page-title__cat a {
	margin: 0;
	color: var(--cs-b2b-navy);
	text-decoration: none;
}
@media (max-width: 600px) {
	.ps-breadcrumbs {
		flex-wrap: wrap;
		gap: 0 .4em;
	}
	.ps-breadcrumbs > p {
		flex: 0 0 auto;
		white-space: nowrap;
		margin: 0;
	}
}
/* Sticky add-to-cart bars show the current price only. */
[class*="sticky-atc"] del,
[class*="sticky-add"] del {
	display: none;
}

/* R2-018: the cart badge keeps clear of the icon, the total and the neighbouring account icon. */
.ps-header .wc-block-mini-cart__button {
	gap: 8px;
	padding: 4px 8px;
}
.ps-header .wc-block-mini-cart__badge {
	position: static;
	transform: none;
	margin: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--wp--custom--radius--badge);
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--contrast);
	font-size: 11px;
	line-height: 20px;
	text-align: center;
}
.ps-header__tools {
	gap: 20px;
}

/* R2-043: sign-in page: login card and the apply teaser side by side. */
body.woocommerce-account:not(.logged-in) main .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	grid-template-areas: "notices notices" "title teaser" "form teaser";
	grid-template-rows: auto auto 1fr;
	column-gap: 40px;
	align-items: start;
	max-width: none;
}
body.woocommerce-account:not(.logged-in) main .woocommerce > .woocommerce-notices-wrapper {
	grid-area: notices;
}
body.woocommerce-account:not(.logged-in) main .woocommerce > h2 {
	grid-area: title;
}
body.woocommerce-account:not(.logged-in) main .woocommerce > form.woocommerce-form-login {
	grid-area: form;
	max-width: 560px;
}
.cs-b2b-login-teaser {
	grid-area: teaser;
	align-self: start;
	margin-top: 8px;
	padding: 28px;
	border: 1px solid var(--cs-b2b-line);
	border-top: 4px solid var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--card);
	background: var(--cs-b2b-ivory);
}
.cs-b2b-login-teaser h2 {
	margin: 4px 0 12px;
	font-size: 24px;
}
.cs-b2b-login-teaser .wp-element-button {
	display: inline-block;
	padding: 12px 22px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--cs-b2b-action);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}
@media (max-width: 860px) {
	body.woocommerce-account:not(.logged-in) main .woocommerce {
		display: block;
	}
	.cs-b2b-login-teaser {
		margin-top: 24px;
	}
}

/* R2-017: apply form: one card, stacked labels, two columns for the short fields. */
.cmb2b-apply__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	max-width: 860px;
	margin: 0 auto;
	padding: 32px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
}
.cmb2b-apply__form > p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}
.cmb2b-apply__form > p:has(textarea),
.cmb2b-apply__form > p:has(input[type="file"]),
.cmb2b-apply__form > p:has(button[type="submit"]),
.cmb2b-apply__form > p:has(#cmb2b_company_name) {
	grid-column: 1 / -1;
}
.cmb2b-apply__form label {
	font-size: 14px;
	font-weight: 600;
	color: var(--cs-b2b-navy);
}
.cmb2b-apply__form input:not([type="file"]):not([type="checkbox"]),
.cmb2b-apply__form select,
.cmb2b-apply__form textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--border-field);
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--base);
	font: inherit;
}
.cmb2b-apply__form textarea {
	min-height: 110px;
}
.cmb2b-apply__form input[type="file"] {
	padding: 10px;
	border: 1px dashed var(--wp--preset--color--border-field);
	border-radius: var(--wp--custom--radius--field);
	background: var(--cs-b2b-ivory);
	font: inherit;
}
.cmb2b-apply__form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background: var(--cs-b2b-action);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.cmb2b-apply__form button[type="submit"],
.cmb2b-apply .button {
	padding: 14px 28px;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--cs-b2b-action);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.cmb2b-apply__form button[type="submit"]:hover,
.cmb2b-apply .button:hover {
	background: var(--cs-b2b-action-hover);
}
.cmb2b-apply__form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 1px;
}
@media (max-width: 700px) {
	.cmb2b-apply__form {
		grid-template-columns: 1fr;
		padding: 20px;
	}
}
.cs-b2b-page--apply .cs-b2b-benefits {
	margin-bottom: 32px;
}

/* Non-member Woo account navigation: compact rows (core and the parent polish layer both set a tall minimum). */
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	line-height: 1.3;
}

/* ---------- UXF2: chrome (spec 74 §6.1) on the Cmsmart blue system ---------- */
/* F-1.5 / D-F2 (palette change 2026-10-11): no full-width dark element. Top bar = cool utility strip, header = white and
   not sticky, footer = inset navy card on a cool band. Navy is used only inside that card. */
html body header.wp-block-template-part {
	position: relative;
	top: auto;
}
html body.cs-scrolled header.wp-block-template-part .cmsmart-header {
	box-shadow: none;
}
html body.cs-scrolled header.wp-block-template-part .wp-block-site-logo img {
	transform: none;
}

/* F-1.1 top bar */
.cs-b2b-bar {
	background: var(--wp--preset--color--tertiary, #f5f8fc);
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e8f0);
}
.cs-b2b-bar__row {
	min-height: 36px;
	gap: 0 24px;
}
.cs-b2b-bar__chip::before {
	background: var(--wp--preset--color--orange);
}
.cs-b2b-bar:not(:has(.cs-b2b-bar__chip--guest)) .cs-b2b-bar__chip {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--navy--200);
	border-radius: var(--wp--custom--radius--badge);
	padding: 2px 12px;
	color: var(--wp--preset--color--contrast);
}
.cs-b2b-bar__link {
	padding: 6px 10px;
	color: var(--wp--preset--color--contrast);
}
.cs-b2b-bar__link:hover,
.cs-b2b-bar__link:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}
/* 2.1.0: up to five shortcuts (Buy again, Request a quote): one row that scrolls sideways on phones instead of wrapping. */
@media (max-width: 781px) {
	.cs-b2b-bar__nav {
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.cs-b2b-bar__nav::-webkit-scrollbar {
		display: none;
	}
	.cs-b2b-bar .cs-b2b-bar__nav ul {
		flex-wrap: nowrap;
	}
	.cs-b2b-bar__link {
		white-space: nowrap;
	}
}

.ps-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* F-1.2 header: sentence-case nav with a blue underline on hover and current page (200 ms) */
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--contrast);
}
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: clamp(8px, 1vw, 12px);
	right: clamp(8px, 1vw, 12px);
	bottom: 2px;
	height: 3px;
	border-radius: var(--wp--custom--radius--badge);
	background: var(--wp--preset--color--orange); /* decorative: the current item also turns brand navy */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--preset--color--primary-dark);
}
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current]::after {
	transform: scaleX(1);
}
.ps-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	font-weight: 700;
}
/* Six category items in the header (spec F-1.2); Quick order lives in the top bar, so the menu item only stays in the mobile overlay. */
@media (min-width: 782px) {
	.ps-main-nav:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:has(> a[href*="quick-order"]) {
		display: none;
	}
}

/* F-1.3 footer: inset navy card on a cool band, copyright line below it */
.cs-b2b-footer {
	padding: 48px 24px 24px;
	margin: 0;
}
.cs-b2b-footer > .ps-footer {
	max-width: 1140px;
	margin: 0 auto;
	padding: 48px 40px 40px;
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--footer);
	box-shadow: none;
}
.cs-b2b-footer .ps-footer .ps-footer__columns {
	max-width: none;
	gap: 32px;
}
.cs-b2b-footer .ps-footer__title {
	margin: 0 0 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
}
.cs-b2b-footer .ps-footer__title::after {
	background: var(--wp--preset--color--orange);
	height: 3px;
	width: 32px;
	bottom: -2px;
	border-radius: var(--wp--custom--radius--badge);
}
.cs-b2b-footer .ps-footer p,
.cs-b2b-footer .ps-footer li,
.cs-b2b-footer .ps-footer .wp-block-navigation-item__content {
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--footer-text);
}
.cs-b2b-footer .ps-footer a {
	color: var(--wp--preset--color--base);
}
.cs-b2b-footer .ps-footer a:hover,
.cs-b2b-footer .ps-footer a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--orange);
	text-underline-offset: 3px;
}
.cs-b2b-footer .ps-footer :is(a, button, input):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus-on-dark);
	outline-offset: 2px;
}
.cs-b2b-footer .ps-footer__nav .wp-block-navigation-item__content {
	display: inline-block;
	padding: 2px 0;
}
.cs-b2b-footer .ps-footer__social {
	gap: 8px;
}
.cs-b2b-footer .ps-footer__social .wp-social-link {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cs-b2b-footer .ps-footer__social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}
.cs-b2b-footer .ps-footer__social .wp-social-link svg {
	width: 20px;
	height: 20px;
}
.cs-b2b-footer .ps-footer__social .wp-social-link a:hover {
	text-decoration: none;
}
.cs-b2b-footer .ps-footer__bottom {
	background: transparent !important;
	max-width: 1140px;
	margin: 0 auto;
	padding: 20px 0 0;
	justify-content: flex-start;
	font-size: 14px;
}
.cs-b2b-footer .ps-footer__bottom p {
	max-width: none;
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}
@media (max-width: 781px) {
	.cs-b2b-footer {
		padding: 32px 16px 20px;
	}
	.cs-b2b-footer > .ps-footer {
		padding: 32px 20px 28px;
		border-radius: var(--wp--custom--radius--card);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ps-header .ps-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
	.cs-b2b-quote .nbdq-add-a-quote-button,
	.cmb2b-apply__form button[type="submit"] {
		transition: none;
	}
}

/* ---------- logo-b2b-official: the official Cmsmart B2B logo style (David, 2026-10-12) ----------
   Brand navy #0b3a7e surfaces and buttons, Cmsmart orange #f29a21 as the accent (badges, price tags, small CTAs; never text on
   white), cool greys from the navy, rounded rectangles like the logo (12 px cards, 10 px buttons and fields, pill badges like
   its "B2B" badge), solid fills, Poppins headings and Inter body. Tokens live in theme.json (palette, settings.custom navy /
   orange ramps, radius, tracking); this block maps the parent's and the add-on's own tokens to them and styles the shared
   components. Contrast of every pair: stores/cmsmart-b2b-store/brand/v3-official/tokens.json. */
:root {
	--cs-b2b-radius: var(--wp--custom--radius--card);
}
html:root,
html .cmb2b {
	--cmb2b-r-md: var(--wp--custom--radius--card);
	--cmb2b-r-lg: var(--wp--custom--radius--card);
	--cmb2b-info-ink: var(--wp--preset--color--primary-dark);
	--cmb2b-neutral: var(--wp--preset--color--body-text);
	--cmb2b-neutral-soft: var(--wp--preset--color--surface);
	--cmb2b-on-navy: var(--wp--preset--color--footer-text);
	--cmb2b-shadow-1: 0 1px 2px rgba(11, 58, 126, .07);
	--cmb2b-shadow-2: 0 1px 2px rgba(11, 58, 126, .05), 0 8px 24px rgba(11, 58, 126, .07);
	--cmb2b-shadow-3: 0 2px 4px rgba(11, 58, 126, .06), 0 16px 40px rgba(11, 58, 126, .12);
	--cmb2b-scrim: rgba(15, 30, 54, .45);
	--cmb2b-focus: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 4px var(--wp--preset--color--focus);
}

/* Headings: Poppins with tight tracking (theme.json); eyebrows are small Poppins caps in brand navy on light, orange on navy. */
.cs-b2b-eyebrow,
.cmb2b-eyebrow--gold,
.cs-b2b-step__no {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	color: var(--wp--preset--color--primary-dark);
}
.cs-b2b-hero .cs-b2b-eyebrow,
.cs-b2b-welcome .cs-b2b-eyebrow,
.cs-b2b-cta .cs-b2b-eyebrow,
.cmb2b-brand .cmb2b-eyebrow {
	color: var(--wp--preset--color--orange);
}
.cs-b2b-hero__title,
.cs-b2b-cta__title,
.cmb2b-welcome__title,
.cmb2b-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--display);
}

/* Navy cards (hero, welcome, CTA, the add-on's navy card): solid brand navy, the card radius, no gradient. */
.cs-b2b-hero,
.cs-b2b-welcome,
.cs-b2b-cta,
.cmb2b-card--navy {
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--navy);
}
.cmb2b-card--navy {
	background: var(--wp--preset--color--navy);
}
.cmb2b-card--navy::after {
	background: var(--wp--preset--color--orange);
}
.cs-b2b-btn--signin .wp-block-button__link,
.cs-b2b-welcome .is-style-outline .wp-block-button__link,
.cs-b2b-cta .is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--button);
	background: transparent;
	color: var(--wp--preset--color--base);
}
.cs-b2b-btn--signin .wp-block-button__link:hover,
.cs-b2b-btn--signin .wp-block-button__link:focus-visible,
.cs-b2b-welcome .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
}
.cs-b2b-btn--apply .wp-block-button__link,
.cs-b2b-welcome .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--contrast);
}
.cs-b2b-hero :is(a, button):focus-visible,
.cs-b2b-welcome :is(a, button):focus-visible,
.cs-b2b-cta :is(a, button):focus-visible,
.cmb2b-brand :is(a, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus-on-dark);
	outline-offset: 3px;
}

/* Light cards and feature tiles. The icon tiles echo the logo: an orange glyph on a navy rounded square. */
.cs-b2b-card,
.cs-b2b-prop,
.cs-b2b-quick {
	border-color: var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: none;
}
.cs-b2b-prop p,
.cs-b2b-card p,
.cs-b2b-step p {
	color: var(--wp--preset--color--body-text);
}
.cs-b2b-icon {
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--navy);
}
.cs-b2b-icon::after {
	background-color: var(--wp--preset--color--orange);
}
.cs-b2b-step {
	border-top: 3px solid var(--wp--preset--color--navy);
}
.cs-b2b-quick .wp-block-button__link {
	border-radius: var(--wp--custom--radius--button);
}

/* Buttons: brand navy, 10 px, Poppins 600, sentence case (WooCommerce classic and block buttons, the add-on's buttons). */
:where(body) :is(.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .wc-block-components-button:not(.is-link), .wp-element-button, .cmb2b-btn) {
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
/* The add-on's buy box (0,3,1; .cmb2b-buybox-on sits on <body>) and the parent's designer button (0,3,2, uppercase) set their
   own pill / case. */
html body.cmb2b-buybox-on form.cart .cmb2b-btn,
html body .cmb2b-buybox-on form.cart .cmb2b-btn,
html body form.cart a.nbdesign-button.button.alt,
html body form.cart .single_add_to_cart_button {
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: 0;
	text-transform: none;
}
/* The buy box keeps exactly one primary: its "Add to cart" next to the designer button is .alt but a secondary (outline). */
html body.cmb2b-buybox-on form.cart .single_add_to_cart_button.cmb2b-btn--secondary {
	align-self: flex-start;
}
.woocommerce :is(a.button.alt, button.button.alt, .button.alt):not(.cmb2b-btn--secondary),
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}
.woocommerce :is(a.button.alt, button.button.alt, .button.alt):not(.cmb2b-btn--secondary):hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
	background: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--base);
}

/* Badges in the logo's "B2B" badge style: company price and contract price in orange with ink text, MOQ / pack rules and
   tier hints as soft orange badges. */
.cmb2b-price__label,
.is-b2b .cmb2b-price__label,
.cmb2b-price-block .cmb2b-pill--info {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	margin-right: 6px;
	padding: 2px 10px;
	border-radius: var(--wp--custom--radius--badge);
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--contrast);
	font: 600 12px/1.3 var(--wp--preset--font-family--heading);
	letter-spacing: 0.02em;
	text-transform: none;
	vertical-align: middle;
}
.cmb2b-price-block .cmb2b-pill--info::before {
	background: var(--wp--preset--color--contrast);
}
.cmb2b-qty-note,
.cmb2b-buybox__rule,
.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price .cmb2b-qty-note {
	display: inline-block !important;
	width: auto;
	padding: 3px 10px;
	border: 1px solid var(--wp--custom--orange--200);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--orange-soft);
	color: var(--wp--preset--color--orange-ink) !important;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1.4;
}
.cmb2b-buybox__rule {
	margin: 10px 0 0;
}
.cmb2b-tiers__tier.is-current,
.cmb2b-buybox label.cmb2b-tiers__tier:has(input:checked) {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--tint);
	box-shadow: inset 0 3px 0 var(--wp--preset--color--orange), 0 0 0 1px var(--wp--preset--color--primary-dark);
}
.cmb2b-tiers__tier,
.cmb2b-stepper,
.cmb2b-seg,
.cs-b2b-shop-sort select {
	border-radius: var(--wp--custom--radius--field);
}
.cmb2b-seg__opt span {
	border-radius: var(--wp--custom--radius--small);
}
.ps-main .wc-block-components-product-sale-badge,
.wc-block-components-sale-badge,
.woocommerce span.onsale {
	border: 0;
	border-radius: var(--wp--custom--radius--badge);
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
}
.cmb2b-collection ul.cmb2b-grid .cmb2b-product-card .cmb2b-card__price .amount,
.cmb2b-price-block__now,
.cmb2b-buybar__price {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--contrast);
}

/* Account menu: current nav item with the orange bar, brand chip in navy on the tint. */
.cmb2b-nav__link.is-current::before {
	background: var(--wp--preset--color--orange);
}
.cmb2b-nav__link.is-current .cmb2b-icon {
	color: var(--wp--preset--color--primary-dark);
}
.cmb2b-chip--brand {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary-dark);
}

/* Forms: 10 px fields with the 3:1 field border, a navy focus ring. */
.woocommerce form :is(.input-text, select, textarea),
.woocommerce-page form :is(.input-text, select, textarea),
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.cmb2b-input {
	border-color: var(--wp--preset--color--border-field);
	border-radius: var(--wp--custom--radius--field);
}
.woocommerce form :is(.input-text, select, textarea):focus,
.wc-block-components-text-input input:focus,
.cmb2b-input:focus {
	border-color: var(--wp--preset--color--focus);
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 0;
	box-shadow: none;
}
:where(a, button, summary, input[type="checkbox"], input[type="radio"], [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

/* Notices and empty states: card radius, a navy (info), green, orange (warning) or red rule on the left. */
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.wc-block-components-notice-banner,
.cmb2b-notice {
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--primary-dark);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--contrast);
}
.woocommerce .woocommerce-message,
.wc-block-components-notice-banner.is-success,
.cmb2b-notice--success {
	border-left-color: var(--wp--preset--color--success);
	background: var(--wp--preset--color--success-soft);
}
.wc-block-components-notice-banner.is-warning,
.cmb2b-notice--warning {
	border-left-color: var(--wp--preset--color--orange);
	background: var(--wp--preset--color--warning-soft);
	color: var(--wp--preset--color--warning);
}
.woocommerce .woocommerce-error,
.wc-block-components-notice-banner.is-error,
.cmb2b-notice--error {
	border-left-color: var(--wp--preset--color--danger);
	background: var(--wp--preset--color--danger-soft);
}
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	color: inherit;
}
.cmb2b-empty,
.cmb2b-empty--state {
	border-radius: var(--wp--custom--radius--card);
}
.cmb2b-cart-empty-icon {
	color: var(--wp--preset--color--primary-dark);
}

/* Tables: Poppins header row on the cool surface, line rules, tabular figures. */
.woocommerce table.shop_table,
.cmb2b-data,
.cmb2b-table {
	border-color: var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	font-variant-numeric: tabular-nums;
}
.woocommerce table.shop_table th,
.cmb2b-data thead th,
.cmb2b-table thead th {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}
.cmb2b-data thead th:first-child,
.cmb2b-table thead th:first-child {
	border-top-left-radius: var(--wp--custom--radius--small);
}
.cmb2b-data thead th:last-child,
.cmb2b-table thead th:last-child {
	border-top-right-radius: var(--wp--custom--radius--small);
}

/* Main nav, mega menu and submenus: Poppins items, a white card with the card radius and a lift shadow. */
.ps-header .ps-main-nav .wp-block-navigation-item__content {
	padding: 0 clamp(6px, 0.7vw, 10px);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: 0;
}
/* Poppins is wider than the old UI font: between 1024 and 1199 px the six items and the 203 px logo share the row. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.ps-header .ps-main-nav .wp-block-navigation-item__content {
		padding: 0 6px;
		font-size: 13px;
	}
	.ps-header__tools {
		gap: 12px;
	}
}
.ps-header .has-cmsmart-mega > .wp-block-navigation__submenu-container,
.ps-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--lift);
}
.ps-header .cmsmart-mega-menu h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
}
.ps-header .cmsmart-mega-menu p {
	color: var(--wp--preset--color--body-text);
}

/* Footer logo: the navy box shown as is on the navy card. */
.cs-b2b-footer .ps-footer__logo {
	margin: 0 0 16px;
	line-height: 0;
}
.cs-b2b-footer .ps-footer__logo img {
	width: 191px;
	height: auto;
}

/* Product page details tabs: the muted grey of the navy greys. */
html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li:not(.active, :hover, :focus-within) {
	color: var(--wp--preset--color--muted);
}

/* ---------- 2.1.0: header with the Cmsmart B2B instant search (spec 90 U-F5) ----------
   From 1024 px two rows: logo, search field, cart / the main menu under a hairline. Below 1024 px the field hides behind a
   search icon and opens as a full-width overlay at the top of the screen (assets/js/header-search.js). */
.cs-b2b-hsearch__open,
.cs-b2b-hsearch__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--field, 10px);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.cs-b2b-hsearch__open:hover,
.cs-b2b-hsearch__close:hover {
	background: var(--wp--preset--color--tint);
}

.cs-b2b-hsearch__open:focus-visible,
.cs-b2b-hsearch__close:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

.cs-b2b-hsearch .cmb2b-search {
	max-width: none;
}

.ps-header .cs-b2b-hsearch > * {
	margin-block: 0;
}

@media (min-width: 1024px) {
	.ps-header:has(.cs-b2b-hsearch) {
		min-height: 0;
		padding-top: 16px;
	}

	.ps-header .cs-b2b-header-row:has(> .cs-b2b-hsearch) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "logo search tools" "nav nav nav";
		align-items: center;
		gap: 12px 32px;
		width: 100%;
	}

	.cs-b2b-header-row > .ps-header__logo,
	.cs-b2b-header-row > .wp-block-site-logo {
		grid-area: logo;
	}

	.cs-b2b-header-row > .cs-b2b-hsearch {
		grid-area: search;
		width: 100%;
		max-width: 620px;
	}

	.cs-b2b-header-row > .ps-header__tools {
		grid-area: tools;
	}

	.ps-header .cs-b2b-header-row > .ps-main-nav {
		grid-area: nav;
		justify-content: flex-start;
		min-height: 52px;
		margin: 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.cs-b2b-header-row:has(> .cs-b2b-hsearch) > .ps-main-nav .wp-block-navigation__container {
		justify-content: flex-start;
	}

	.cs-b2b-hsearch__open,
	.cs-b2b-hsearch__close {
		display: none;
	}
}

@media (max-width: 1023px) {
	.cs-b2b-hsearch {
		display: none;
	}

	.cs-b2b-hsearch.is-open {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 100001;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 12px 16px;
		background: var(--wp--preset--color--base);
		box-shadow: 0 8px 24px rgba(11, 58, 126, 0.18);
	}

	.admin-bar .cs-b2b-hsearch.is-open {
		top: 46px;
	}

	.cs-b2b-hsearch.is-open .cmb2b-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The add-on's phone rule (fixed, top: auto) centres the list on the field inside its flex form; in the overlay the
	   list hangs under the field instead. */
	.cs-b2b-hsearch.is-open .cmb2b-search__pop {
		position: absolute;
		top: calc(100% + 8px);
		right: -52px;
		left: 0;
		max-height: calc(100vh - 120px);
	}

	.cs-b2b-hsearch__scrim {
		position: fixed;
		inset: 0;
		z-index: 100000; /* below the lifted header (100001), above the page */
		background: rgba(13, 47, 99, 0.45);
	}

	html.cs-b2b-hsearch-open {
		overflow: hidden;
	}

	/* The parent's frosted header (backdrop-filter) would be the overlay's containing block, and its z-index 20 would keep
	   the overlay under the scrim: both are lifted while the overlay is open. */
	html.cs-b2b-hsearch-open body .ps-header.has-header-background-color {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	html.cs-b2b-hsearch-open header.wp-block-template-part {
		z-index: 100001;
	}
}

@media (min-width: 783px) and (max-width: 1023px) {
	.admin-bar .cs-b2b-hsearch.is-open {
		top: 32px;
	}
}