/* ============================================================
   Acquiro Wholesale Catalogue — WooCommerce layer
   Uses the existing site design tokens (Acquiro catalogue palette).
   ============================================================ */

.acq-woo-container {
	width: min(1180px, calc(100% - 48px));
	margin-inline: auto;
}

/* ---------- Hero ---------- */
.acq-woo-hero {
	background: linear-gradient(125deg, #000c20, #173a62);
	color: #fff;
	padding: 56px 0 46px;
}
.acq-woo-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: 13px;
}
.acq-woo-breadcrumb li + li::before {
	content: '/';
	margin-right: 8px;
	color: rgba(255, 255, 255, .45);
}
.acq-woo-breadcrumb a {
	color: #b8dafa;
	text-decoration: none;
}
.acq-woo-breadcrumb a:hover {
	color: #fff;
	text-decoration: underline;
}
.acq-woo-kicker {
	display: block;
	margin-bottom: 10px;
	color: #b8dafa;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.acq-woo-hero-title {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
}
.acq-woo-hero-text {
	max-width: 760px;
	margin: 0;
	color: #d6e4f5;
	font-size: 16px;
}

/* ---------- Category nav + search ---------- */
.acq-woo-nav {
	background: #fff;
	border-bottom: 1px solid #e4e8ef;
	padding: 20px 0;
}
.acq-woo-nav .acq-woo-container {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}
.acq-woo-catnav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.acq-woo-catnav-item {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 9px 18px;
	border: 1px solid #e4e8ef;
	border-radius: 4px;
	background: #fff;
	color: #2c234d;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.acq-woo-catnav-item:hover {
	border-color: #107fe8;
	background: #107fe8;
	color: #fff;
}
.acq-woo-catnav-all {
	background: #000c20;
	border-color: #000c20;
	color: #fff;
}
.acq-woo-catnav-all:hover {
	background: #ff5f13;
	border-color: #ff5f13;
}
.acq-woo-search {
	display: flex;
	gap: 8px;
	flex: 1 1 320px;
	max-width: 520px;
}
.acq-woo-search input[type="search"] {
	flex: 1 1 auto;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid #e4e8ef;
	border-radius: 4px;
	background: #fff;
	color: #3a3a3a;
	font-size: 14px;
}
.acq-woo-search input[type="search"]:focus {
	outline: 3px solid rgba(89, 177, 238, .5);
	outline-offset: 1px;
	border-color: #107fe8;
}

/* ---------- Notice ---------- */
.acq-woo-notice-wrap {
	padding-top: 26px;
}
.acq-woo-notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid #f3d3a8;
	border-left: 4px solid #ff5f13;
	border-radius: 4px;
	background: #fff8f1;
	color: #5a4632;
	font-size: 14px;
	line-height: 1.6;
}
.acq-woo-notice-inline {
	margin: 0 0 18px;
}
.acq-woo-notice-link {
	display: inline-block;
	margin-left: 6px;
	color: #107fe8;
	font-weight: 600;
	text-decoration: underline;
}
.acq-woo-notice-link:hover {
	color: #ff5f13;
}

/* ---------- Grid + card ---------- */
.acq-woo-grid {
	display: grid;
	grid-template-columns: repeat(var(--acq-woo-cols, 3), minmax(0, 1fr));
	gap: 24px;
}
.acq-woo-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid #e4e8ef;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(0, 12, 32, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}
.acq-woo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 12, 32, .14);
}
.acq-woo-card-media {
	position: relative;
	display: block;
	background: #f7f9fc;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.acq-woo-card-media img,
.acq-woo-card-image {
	display: block;
	width: 100%;
	height: 100%;
	/* The complete product stays visible - no cropping of the pack shot. */
	object-fit: contain;
}
.acq-woo-card-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 20px;
	color: #626a75;
	font-size: 13px;
	text-align: center;
}
.acq-woo-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 9px;
	border-radius: 3px;
	background: #107fe8;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.acq-woo-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 20px 22px;
}
.acq-woo-card-cat {
	display: block;
	margin-bottom: 7px;
	color: #107fe8;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.acq-woo-card-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	/* Two lines of space so the price row and buttons align across a row
	   whether the title wraps or not. */
	min-height: 2.7em;
}
.acq-woo-card-title a {
	color: #2c234d;
	text-decoration: none;
}
.acq-woo-card-title a:hover {
	color: #107fe8;
}
.acq-woo-card-pack {
	margin: 0 0 12px;
	color: #3a3a3a;
	font-size: 14px;
	/* Two lines of space so prices stay level across a row. */
	min-height: 3em;
}
.acq-woo-card-pack span {
	color: #626a75;
}
.acq-woo-card-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.acq-woo-card-price .woocommerce-Price-amount {
	color: #2c234d;
	font-size: 20px;
	font-weight: 700;
}
.acq-woo-card-unit {
	color: #626a75;
	font-size: 13px;
}
.acq-woo-card-demo {
	margin: 2px 0 0;
	color: #b4690e;
	font-size: 12px;
	font-weight: 600;
}
.acq-woo-card-stock {
	margin: 8px 0 16px;
	color: #626a75;
	font-size: 13px;
}
.acq-woo-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
}
.acq-woo-card-actions .acq-woo-btn {
	flex: 0 1 auto;
	text-align: center;
}
.acq-woo-btn {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid #107fe8;
	border-radius: 4px;
	background: #107fe8;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.acq-woo-btn:hover {
	border-color: #ff5f13;
	background: #ff5f13;
	color: #fff;
}
.acq-woo-btn:focus-visible {
	outline: 3px solid #59b1ee;
	outline-offset: 3px;
}
.acq-woo-btn-ghost {
	border-color: #e4e8ef;
	background: #fff;
	color: #2c234d;
}
.acq-woo-btn-ghost:hover {
	border-color: #107fe8;
	background: #107fe8;
	color: #fff;
}
.acq-woo-btn-wide {
	width: 100%;
	margin-top: 14px;
}
.acq-woo-empty {
	padding: 30px;
	border: 1px dashed #e4e8ef;
	border-radius: 6px;
	background: #f7f9fc;
	color: #626a75;
	text-align: center;
}

/* ---------- WooCommerce native loop (shop archive) ---------- */
/* The theme renders the shop full-bleed; the catalogue is kept to the same
   content width as the rest of the site so the cards stay well proportioned. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 auto 8px;
	padding: 0;
	list-style: none;
	/* Same container width as the rest of the catalogue, including the gutter. */
	width: min(1180px, calc(100% - 48px));
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	width: min(1180px, calc(100% - 48px));
	margin-left: auto;
	margin-right: auto;
}
.woocommerce ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
}
/* WooCommerce still ships a float-era clearfix on the product list
   (ul.products::before / ::after). In a grid layout those pseudo elements
   become real grid items: the ::before occupies the first cell and pushes
   the first product into column two, leaving a gap in the first row. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}
/* Legacy float rules for product items are still present in the theme and
   WooCommerce's block styles - they must be cleared for the responsive grid
   to lay out correctly. */
body.woocommerce ul.products li.product,
body.woocommerce ul.products li.product.product_cat,
body.woocommerce ul.products li.product .product_type {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
.woocommerce ul.products li.product .acq-woo-card {
	height: 100%;
}

/* ============================================================
   Responsive - WooCommerce's own .columns-N rules are more
   specific than a bare element selector, so each column count
   is overridden explicitly at every breakpoint.
   ============================================================ */
@media (max-width: 1100px) {
	body.woocommerce ul.products.columns-1,
	body.woocommerce ul.products.columns-2,
	body.woocommerce ul.products.columns-3,
	body.woocommerce ul.products.columns-4,
	body.woocommerce ul.products.columns-5,
	body.woocommerce ul.products.columns-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.acq-woo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	body.woocommerce ul.products.columns-1,
	body.woocommerce ul.products.columns-2,
	body.woocommerce ul.products.columns-3,
	body.woocommerce ul.products.columns-4,
	body.woocommerce ul.products.columns-5,
	body.woocommerce ul.products.columns-6 {
		grid-template-columns: 1fr;
	}
	.acq-woo-grid {
		grid-template-columns: 1fr;
	}
	.acq-woo-card-actions .acq-woo-btn {
		flex: 1 1 100%;
	}
	.acq-woo-card-media {
		aspect-ratio: 4 / 3;
		align-self: flex-start;
		width: 100%;
	}
}
/* ...but the related-products grid lives inside the product container, so it
   fills that container rather than being sized separately. */
.woocommerce div.product section.related.products ul.products {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* ---------- WooCommerce block pages (cart / checkout / my account) ---------- */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-cart.is-loading,
.woocommerce-cart-page .alignwide,
.woocommerce-checkout-page .alignwide {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}
.woocommerce-cart-page .wc-block-cart,
.woocommerce-checkout-page .wc-block-checkout {
	max-width: 100%;
}
.wc-block-cart__totals,
.wc-block-components-sidebar-layout {
	min-width: 0;
}
.wc-block-grid__products {
	max-width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}
.wc-block-grid__products > li {
	min-width: 0;
}
@media (max-width: 700px) {
	.wc-block-grid__products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
	.wc-block-grid__products > li {
		grid-column: auto !important;
		width: auto !important;
		min-width: 0;
	}
	.wc-block-grid__product-image img {
		max-height: 120px;
	}
	.wc-block-components-button {
		min-height: 44px;
	}
	.wc-block-components-text-input,
	.wc-block-components-form .wc-blocks-components-textarea {
		min-height: 44px;
	}
}

/* ---------- Elementor progress bars ---------- */
/* The bar width is applied from data-max by the small script in the plugin
   (Elementor's own front-end script is not running). The label must stay
   readable, so it is never truncated with an ellipsis. */
.elementor-progress-bar {
	overflow: visible;
}
.elementor-progress-text {
	white-space: nowrap;
	text-overflow: clip;
	overflow: visible;
}
@media (max-width: 700px) {
	.elementor-progress-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.elementor-progress-text {
		width: auto !important;
		max-width: 100%;
		text-align: left;
		font-size: 15px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
	.elementor-progress-bar {
		width: 100% !important;
	}
}

/* ============================================================
   Catalogue layout consistency
   The single product page had no content container at all, so
   the gallery, tabs and description text ran edge to edge while
   the related-products grid was capped at 1180px. The category
   pages had the same problem in reverse: their grid was full
   width (455px cards) while the shop page used 1180px (377px
   cards). One container, one card size, everywhere.
   ============================================================ */
.woocommerce div.product,
.woocommerce div.woocommerce-tabs,
.woocommerce section.related.products,
.woocommerce div.up-sells,
.woocommerce div.cross-sells {
	width: min(1180px, calc(100% - 48px));
	margin-inline: auto;
}
.acq-woo-grid {
	width: min(1180px, calc(100% - 48px));
	margin-inline: auto;
}

/* Section rhythm on the product page */
.woocommerce div.product {
	margin-bottom: 48px;
}
.woocommerce div.woocommerce-tabs {
	margin-bottom: 48px;
}
/* WooCommerce insets the related-products block with its own side margins
   and a 96% width, which pushed the cards out of line with the product
   image above them. Reset both so the section shares the page container. */
.woocommerce div.product section.related.products {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}
.woocommerce section.related.products > h2,
.woocommerce div.up-sells > h2 {
	margin-bottom: 24px;
}

/* Readable measure for the long-form description and the summary copy */
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .summary .woocommerce-product-details__short-description p {
	max-width: 72ch;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description {
	margin-bottom: 4px;
}

/* ============================================================   Product page actions
   ============================================================ */
   The add-to-basket button and the enquiry button share one row with an even
   gap and identical proportions, so nothing looks stretched or joined. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 18px 0 0;
}
.woocommerce div.product form.cart .quantity {
	margin: 0;
	display: inline-flex;
}
.woocommerce div.product form.cart .quantity .qty {
	min-height: 44px;
	min-width: 66px;
	padding: 10px 12px;
	border: 1px solid #e4e8ef;
	border-radius: 4px;
	background: #fff;
	color: #2c234d;
	font-size: 14px;
	text-align: center;
}
.woocommerce div.product form.cart button.button,
.woocommerce div.product form.cart a.button,
.woocommerce div.product form.cart .acq-woo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 11px 18px;
	border: 1px solid #107fe8;
	border-radius: 4px;
	background: #107fe8;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.woocommerce div.product form.cart .acq-woo-btn-enquiry {
	border-color: #e4e8ef;
	background: #fff;
	color: #2c234d;
}
.woocommerce div.product form.cart button.button:hover,
.woocommerce div.product form.cart a.button:hover {
	border-color: #ff5f13;
	background: #ff5f13;
	color: #fff;
}
.woocommerce div.product form.cart .acq-woo-btn-enquiry:hover {
	border-color: #107fe8;
	background: #107fe8;
	color: #fff;
}
.acq-woo-single-extras {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #e4e8ef;
}
.acq-woo-single-pack {
	margin: 0 0 6px;
	color: #3a3a3a;
	font-size: 15px;
}
.acq-woo-single-pack span {
	color: #626a75;
}
.acq-woo-single-pack em {
	color: #626a75;
	font-style: normal;
	font-size: 13px;
}
.acq-woo-single-avail {
	margin: 0;
	color: #626a75;
	font-size: 14px;
}

/* ---------- Shop pagination (page numbers were 1px apart) ---------- */
.woocommerce .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce .woocommerce-pagination ul.page-numbers li {
	margin: 0;
}
.woocommerce .woocommerce-pagination ul.page-numbers li a,
.woocommerce .woocommerce-pagination ul.page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #e4e8ef;
	border-radius: 4px;
	background: #fff;
	color: #2c234d;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.woocommerce .woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce .woocommerce-pagination ul.page-numbers li span.current {
	border-color: #107fe8;
	background: #107fe8;
	color: #fff;
}

/* ---------- WooCommerce core alignment ---------- */
.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 20px;
	color: #626a75;
	font-size: 13px;
}
.woocommerce .woocommerce-breadcrumb a {
	color: #107fe8;
	text-decoration: none;
}
.woocommerce div.product p.price,
.woocommerce span.onsale {
	color: #2c234d;
}
.woocommerce span.onsale {
	background: #ff5f13;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.woocommerce .quantity .qty {
	border-color: #e4e8ef;
}
.woocommerce button.button,
.woocommerce a.button,
.woocommerce button.button.alt {
	border-radius: 4px;
	background: #107fe8;
	color: #fff;
	font-weight: 600;
	transition: background-color .2s ease, border-color .2s ease;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover {
	background: #ff5f13;
	border-color: #ff5f13;
	color: #fff;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: #107fe8;
	background: #f2f8fe;
}
.woocommerce table.shop_table {
	border-color: #e4e8ef;
}
.woocommerce table.shop_table th {
	color: #2c234d;
}
.woocommerce .woocommerce-order,
.woocommerce .woocommerce-customer-details {
	border-color: #e4e8ef;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
	/* Safety net: third-party widgets (e.g. the reCAPTCHA badge) can add a
	   few stray pixels of width. `clip` removes the horizontal scrollbar
	   without creating a scroll container, so sticky positioning still works. */
	html,
	body {
		overflow-x: clip;
	}
	.acq-woo-container {
		width: min(1180px, calc(100% - 32px));
	}
	.acq-woo-search {
		max-width: none;
	}
	.acq-woo-hero {
		padding: 40px 0 34px;
	}
	.acq-woo-hero-title {
		font-size: 28px;
	}
	.acq-woo-catnav {
		width: 100%;
	}
	.acq-woo-catnav-item {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
	}
	.acq-woo-search input[type="search"] {
		min-width: 0;
	}
	.acq-woo-card-body {
		padding: 18px 16px 20px;
	}
	.acq-woo-card-title {
		font-size: 16px;
	}
}

/* ---------- Touch targets for the site footer on small screens ---------- */
@media (max-width: 700px) {
	.acq-site-footer .acq-footer-column li a {
		display: inline-block;
		padding: 7px 0;
		min-height: 40px;
	}
	.acq-site-footer .acq-footer-column li a,
	.acq-site-footer .acq-footer-email {
		font-size: 15px;
	}
	.acq-site-footer .acq-footer-bottom a {
		display: inline-block;
		padding: 6px 0;
	}
}