:root {
	/* Primary brand colors */
	--henderson-red: #CD1718;
	--henderson-red-hover: #a81314;
	--henderson-price-green: #8db129;

	/* Alert/status colors */
	--henderson-green: #E8F2E7;
	--henderson-green-border: #9AC594;
	--henderson-yellow: #FEDB78;
	--henderson-yellow-border: #FEDB2A;

	/* UI colors */
	--henderson-enquire: #F1B559;
	--henderson-stars: #FA9F8E;
	--henderson-info-bg: #F0F8FE;

	/* Neutral colors */
	--henderson-dark: #343a40;
	--henderson-text-muted: #6c757d;
	--henderson-bg-light: #f8f9fa;
	--henderson-border-light: #eee;
}

.hendersons-red {
	background: var(--henderson-red);
}
.usp-icon {
	width: 36px;
	height: 36px;
	fill: var(--henderson-red);
}
.btn-henderson {
	background: var(--henderson-red);
	border-color: var(--henderson-red);
	color: #fff;
}
.btn-henderson:hover,
.btn-henderson:focus {
	background: var(--henderson-red-hover);
	border-color: var(--henderson-red-hover);
	color: #fff;
}

.hendersons-green {
	background: var(--henderson-green);
	border: 1px solid var(--henderson-green-border);
}

.hendersons-yellow {
	background: var(--henderson-yellow);
	border: 1px solid var(--henderson-yellow-border);
}

/*
 * Over-stock notice — "quantity exceeds our current stock level".
 *
 * Deliberately on-brand amber rather than the red used by
 * .basket-backorder-line-notification (zeus-template.css:1817-1887): this is
 * information, not an error, and the customer is still free to order. Reuses
 * the existing --henderson-yellow pair so it matches the site palette.
 *
 * Shared by the basket line, the product page and the checkout notice, so it
 * lives here rather than being duplicated per surface.
 */
.stock-shortfall-notice {
	background: var(--henderson-yellow);
	border: 1px solid var(--henderson-yellow-border);
	border-radius: 3px;
	padding: 8px 10px;
	margin: 8px 0;
	/* Fixed px, not rem: the theme's root size makes 0.9rem render larger than
	   the basket line's own title and description, which made the notice shout.
	   13px sits just under the product title and just above the description. */
	font-size: 13px;
	line-height: 1.4;
	color: #3a3a3a;
}

/* The three figures are bolded by renderMessageHtml(). */
.stock-shortfall-notice strong {
	font-weight: 700;
}

/* Heading, e.g. "Requested Quantity Issue:" — reads as a label, not a shout. */
.stock-shortfall-notice-title {
	font-weight: 700;
}

/* Product page: hidden until the typed quantity actually exceeds stock. */
.stock-shortfall-notice[hidden] {
	display: none;
}

/*
 * Product page only.
 *
 * `input.qty` is `float: left` (zeus-template.css), so its .qty-override parent
 * collapses to zero height. Without clearing, the notice renders UNDERNEATH the
 * transparent quantity input and the input itself looks amber.
 *
 * The clearing lives on this WRAPPER, not on the notice. CSS clearance is
 * calculated to place the cleared element's top BORDER edge at the float's
 * bottom, which absorbs its top margin entirely — so a cleared notice sat flush
 * against the quantity input however much margin it was given.
 *
 * overflow:hidden establishes a block formatting context so the notice's own top
 * margin cannot collapse out through the wrapper and get absorbed the same way.
 * (flow-root would be tidier but has narrower browser support, and nothing here
 * needs to overflow.)
 *
 * Both are scoped away from the basket and checkout, where the notice sits in a
 * column with no preceding float.
 */
.stock-shortfall-notice-wrap {
	clear: both;
	overflow: hidden;
	/*
	 * Do not let the notice widen its column.
	 *
	 * The quantity/button column is a flex item with `flex-basis: auto`, so it
	 * is sized from its content's max-content width — and both `input.qty` and
	 * `.product-details .btn` are `width: 100%`. A long sentence in here
	 * therefore stretched the input and both buttons from 379px to 593px the
	 * moment the notice appeared.
	 *
	 * `width: 0` contributes nothing to that intrinsic measurement; the
	 * percentage `min-width` is treated as auto while measuring, then resolves
	 * against the column once it has been sized, so the notice still fills the
	 * full width visually.
	 */
	width: 0;
	min-width: 100%;
}

.stock-shortfall-notice--pdp {
	margin-top: 12px;
}

.product-links {
	display: flex;
	padding-left: 0;
}
.product-links li {
	list-style: none;
}
.product-links li a {
	font-size: 20px;
	width: 100%;
	text-align: center;
	margin: 0 5px!important;
	display: inline-block;
	min-width: 50px;
}
.category-cards .card img {
	height: 80px;
	width: 80px;
	object-fit: contain;
}

.grid-view .swiper-slide {
	height: unset!important;
}

.nav-right-icon {
	width: 24px!important;
	height: 22px!important;
	flex-shrink: 0;
}

.swiper-container.clients .swiper-slide {
	height: 110px;
	line-height: 110px;
	text-align: center;
}
.swiper-container.clients .swiper-slide img {
	max-width: 85%;
	max-height: 110px;
	text-align: center;
	vertical-align: middle;
	object-fit: contain;
}
.swiper-container {
	z-index: 1!important;
}
.category-main-wrapper figure {
 max-height: 184px; 
}
.category-main-wrapper figure img {
	width: auto!important;
	max-width: 100%;
	height: auto !important;
	max-height: 184px;
	object-fit: contain;
}

.categorypoints figure img {
 width: 100%;
 max-width: 100%;
 height: auto!important;
 max-height: 134px;
}
.navMenuCard img {
	width: 150px;
	height: 150px;
	object-fit: contain;
	margin: auto;
}
.navMenuCard {
	box-shadow: none!important;
}
.categoryCard img {
	width: 200px;
	height: 200px;
	object-fit: contain;
	margin: auto;
}
.solid-mono.text-primary .fill-primary {
	fill: var(--henderson-red);
}

.search-form-area .form-control {
	padding: 0.3rem 0.4rem!important;
	font-size: 12px;
}

.filter-form .form-select {
	padding: 0.3rem 2rem 0.3rem 0.4rem!important;
	font-size: 12px;
}

.product-price {
	color: var(--henderson-price-green);
	font-weight: 700;
	margin-left: 0;
	margin-bottom: 0;
}
.item-price {
	font-size: 21px!important;
}

.item-short-description {
height: 60px;
overflow: hidden;
border-bottom: 1px solid var(--henderson-border-light);
}
.item-title {
font-size: 14px;
text-transform: uppercase;
padding: 0;
margin: 0;
vertical-align: middle;
}

.stars {
color: var(--henderson-stars);
}

.star-size {
font-size: 8px;
}
.text-right {
text-align: right!important;
}
.numberReviews {
color: var(--henderson-text-muted);
font-weight: 100;
font-size: 11px;
font-style: italic;
padding-left: 8px;
margin-left: 8px;
}
.categoryImages {
	background-size: 100%!important;
	height: 300px!important;
	background-repeat: no-repeat!important;
	border: none!important;
}
.offer-boxes {

}

.shop-product {
	background: var(--henderson-bg-light)!important;
}

/* Product page VAT pricing - Ex VAT (+ VAT) dominant, Inc VAT secondary */
/* Note: Due to prices_include_vat_when_entered=0, .product-price shows Ex VAT */
.product-details .product-price {
	font-size: 28px;
	font-weight: 700;
	color: var(--henderson-red);
}
.product-details .product-price .vatnote {
	font-size: 14px;
	font-weight: 400;
	color: var(--henderson-text-muted);
}

/* Make Inc VAT price secondary/smaller (shown in .product-price-ex-vat-specific when prices exclude VAT) */
.product-price-ex-vat-specific {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 400;
	color: var(--henderson-text-muted);
}
.product-price-ex-vat-specific .vatnote {
	font-size: 12px;
}
#ProductInfoAccordion.accordion-wrapper .card-header button {
	font-size:1.25rem!important;
}
#ProductInfoAccordion.accordion-wrapper .card-header button:before {
	margin-top:-2px!important;
	font-size: 30px;
}

.related-cards img {
	height: 264px;
}
.related-cards .item-title {
	min-height: 48px;
}

.offer-boxes {
	margin-left: -5px;
	margin-right: -5px;
}
.pb40 {
	padding-bottom: 40px!important;
}
.box {
	padding: 20px;
	margin-left: 0;
	margin-right: 0;
}
.box.box-style7b a, .box.box-style8b a {
	float: left;
}
.text-left {
	text-align: left!important;
}
.font-weight-bold {
	font-weight: 700;
}
.mt20 {
	margin-top: 20px;
}
.mb20 {
	margin-bottom: 20px;
}

.product-buttons hr {
	display: none;
}
.product-details label {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
}
.product-details .btn {
	border-radius: 5px;
	width: 100%;
	padding: 20px 0;
}
.product-details .btn span {
	font-size: 12px;
}
.btn-dark.disabled, .btn-dark:disabled {
	color: #fff;
	background-color: var(--henderson-dark);
	border-color: var(--henderson-dark);
}
.quantity {
	overflow: hidden;
	display: block;
}
.product-price {
	font-size: 30px;
	color: var(--henderson-price-green);
	font-weight: 700;
}
input.qty {
	width: 100%;
	margin-top: 0;
	float: right;
	height: initial;
}
input.qty {
	position: relative;
	float: left;
	height: 50px;
	width: 80px;
	line-height: 50px;
	margin: 0;
	padding: 0;
	background: transparent!important;
	box-shadow: none;
	border-radius: 0;
	text-shadow: none;
	border: 2px solid rgba(0,0,0,.06);
	border-width: 2px!important;
	z-index: 1;
	text-align: center;
}
.enquire-button {
	background-color: var(--henderson-enquire)!important;
	color: #fff!important;
	border: none!important;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: initial;
}
.enquire-button span {
	font-size: 12px;
}
.product-vary {
	color: var(--henderson-text-muted);
	font-weight: 100;
	font-size: 14px;
	font-style: italic;
	border-left: 1px solid var(--henderson-text-muted);
	padding-left: 8px;
	margin-left: 8px;
}
.product-details {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}
.card .product-accordion-img img {
	max-width: 100%;
	height: auto!important;
}

/* Keep imported description content (e.g. the Megadyne "Assembles in Seconds" infographic and
   wide spec tables) inside the details column so a large embedded asset doesn't oversize the
   product page or force horizontal scroll. */
.product-details img {
	max-width: 100%;
	height: auto;
}
.product-details table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
}

.fixed-image-spacing > img {
	height: 290px;
}
.product-title {
	font-size: 16px;
	min-height: 81px;
	vertical-align: middle;
}
.megaFixedHeight {
	max-height: 250px;
}
.nav-item {
	width: 100%;
}
.dropdown-mega > p {
	margin-bottom: 0!important;
}

.adr-info-box {
	background-color: var(--henderson-info-bg)!important;
}
.image-wrapper.bg-contain {
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll !important;
}
.mh-84 {
	min-height: 84px;
}
.megamenu.col > p {
	margin-bottom: 0;
}
.htmlBlockTitle {
	font-size: 15px;
}
.nav-link {
	padding: 15px 20px;
	font-size: 15px;
}

@media (max-width: 993px) {
	.megaFixedHeight {
		max-height: 100%;
	}
	.dropdown-menu.bg-white {
		background-color: transparent!important;
	}
}

/* Tiered pricing dynamic elements */
.zeus-price-breakdown,
.zeus-price-calculating {
	padding-bottom: 15px;
}

/* Configurable product option dropdowns (e.g. Bearing Size choosers) */
/* The section wrapper (identified by containing the transient "Updating
   options..." box) gets the separation from the description above, so the
   flash box appears BELOW the rule alongside the dropdowns it belongs to */
.product-details .form-group:has(> .updating-options-please-wait) {
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid #e5e5e5;
}
.product-details .outer-element label {
	font-weight: 600;
	margin-bottom: 6px;
}
/* Core template hard-codes height:80px/line-height:92px inline on the qty label
   (built for a side-by-side layout); on this stacked layout it just creates a
   huge gap between the option dropdown and the quantity input */
.product-details .zeus-qty-label {
	height: auto !important;
	line-height: 1.5 !important;
	display: block !important;
	margin: 0 0 6px !important;
}

/* Faceted filter narrowing: options with no matching products under the
   current selections in other filter groups are hidden entirely */
.filter-option-unavailable {
	display: none !important;
}

/* Grouped product child rows (per-child qty, one Add To Cart) */
.zeus-grouped-products {
	margin: 20px 0 10px;
	padding-top: 15px;
	border-top: 1px solid #e5e5e5;
}
.zeus-grouped-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 10px 0;
	border-bottom: 1px solid #efefef;
}
.zeus-grouped-row:last-child {
	border-bottom: 0;
}
.zeus-grouped-title {
	display: block;
	font-weight: 600;
	color: #212529;
	margin-bottom: 2px;
}
.zeus-grouped-title:hover {
	color: var(--henderson-red);
}
.zeus-grouped-meta {
	font-size: 13px;
	color: var(--henderson-text-muted);
	margin-bottom: 2px;
}
.zeus-grouped-meta .zeus-grouped-stock {
	margin-left: 10px;
}
.zeus-grouped-meta .zeus-grouped-stock.in-stock {
	color: var(--henderson-price-green);
}
.zeus-grouped-meta .zeus-grouped-stock.out-of-stock {
	color: var(--henderson-red);
}
.zeus-grouped-price .zeus-grouped-price-dominant {
	color: var(--henderson-red);
	font-weight: 700;
}
.zeus-grouped-price .vatnote {
	font-size: 12px;
	color: var(--henderson-text-muted);
}
.zeus-grouped-price .zeus-grouped-price-secondary {
	color: var(--henderson-text-muted);
	font-size: 13px;
}
.zeus-grouped-qty {
	flex-shrink: 0;
	text-align: center;
}
.zeus-grouped-qty label {
	display: block;
	font-size: 13px;
	color: var(--henderson-text-muted);
	margin-bottom: 4px;
}
.zeus-grouped-qty input {
	width: 70px;
	text-align: center;
	padding: 8px 5px;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

/* Static tiered pricing table (Magento-style "Buy X for £Y each and save Z%") */
.zeus-tier-pricing-table {
	margin: 18px 0 15px;
}
.zeus-tier-pricing-table .zeus-tier-row {
	margin-bottom: 2px;
	font-size: 15px;
	line-height: 1.6;
	color: #212529;
}
.zeus-tier-pricing-table .zeus-tier-price {
	color: var(--henderson-red);
	font-weight: 700;
}
.zeus-tier-pricing-table .vatnote {
	font-size: 12px;
	font-weight: 400;
	color: var(--henderson-text-muted);
}
.zeus-tier-pricing-table .zeus-tier-alt-price {
	color: var(--henderson-text-muted);
	font-size: 13px;
}
.zeus-tier-pricing-table .zeus-tier-save {
	font-weight: 700;
	color: #212529;
}

/* Prevent tables in descriptions from overflowing their container */
.shortDescription table,
.card-body table,
.product-info-styling table {
	max-width: 100%;
	width: 100%;
	display: block;
	overflow-x: auto;
}

/* Fix dropdown item images being cut off */
.dropdown-menu .dropdown-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	line-height: 30px !important;
	min-height: 46px;
	overflow: visible !important;
}

.dropdown-menu .dropdown-item img {
	flex-shrink: 0;
	width: 30px !important;
	height: 30px !important;
	object-fit: contain !important;
	border-radius: 4px;
	overflow: visible !important;
}

.dropdown-menu .nav-item {
	overflow: visible !important;
}

.dropdown-menu ul {
	overflow: visible !important;
}

/* Basket: "Added via Quote QT-X" sub-label under quote-sourced line titles. */
.product-from-quote-cart {
	font-size: 14px;
	color: #4f555b;
	margin-top: 2px;
	font-weight: 600;
}

/* Product card actions: always-visible Add to Cart / Add to Quote buttons below the tile.
   z-index sits above the tile's .stretched-link (title) so the buttons stay clickable. */
.product-card-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.75rem;
	position: relative;
	z-index: 2;
}
.product-card-actions .pc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 100%;
	padding: 0.55rem 0.75rem;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}
.product-card-actions .pc-btn i {
	font-weight: normal;
}
.product-card-actions .pc-btn-cart {
	background: #cd1718;
	color: #fff;
	border: 1px solid #cd1718;
}
.product-card-actions .pc-btn-cart:hover {
	background: #a81213;
	border-color: #a81213;
	color: #fff;
}
.product-card-actions .pc-btn-quote {
	background: #fff;
	color: #cd1718;
	border: 1px solid #cd1718;
}
.product-card-actions .pc-btn-quote:hover {
	background: #cd1718;
	color: #fff;
}
/* Give each product card its own stacking context so the action buttons' z-index (needed to
   sit above the card's stretched-link) stays contained within the card and doesn't render
   above the fixed nav's dropdown menus.
   Flex column + equal-height columns (Bootstrap row) + margin-top:auto on the actions keeps
   the buttons aligned along the bottom of every card in a row, regardless of title length or
   whether a price is shown. */
.project.item {
	isolation: isolate;
	display: flex;
	flex-direction: column;
}
/* Search results wrap each card in an extra .search-result element; let it and the card fill the
   stretched grid column so the action buttons line up along the bottom of each row (as on category
   pages, where .project.item is the column itself). */
.search-result-product,
.search-result-product > .project.item {
	height: 100%;
}

/* Brand logo overlaid on the top-right of a product card image (Magento "Brand list logo").
   pointer-events:none so it doesn't block the card's click-through link. */
.product-brand-logo {
	position: absolute;
	top: 1.75rem;
	right: 0.85rem;
	max-width: 62px;
	max-height: 44px;
	width: auto;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	z-index: 2;
}

/* Brand logo above the product title on the product page (Magento "Brand page logo"). */
.product-page-brand-logo {
	display: block;
	max-width: 130px;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin-bottom: 0.85rem;
}

/* --------------------------------------------------------------------------
   Kill stray horizontal scroll on desktop.
   The top-level nav dropdowns are rendered display:block (for CSS hover
   transitions) rather than display:none, so the right-hand items (e.g.
   "Lubricants") sit ~20-35px past the viewport even while hidden, which made
   every page scroll sideways ~20px on desktop. overflow-x: clip trims that
   horizontal leak without establishing a scroll container, so position:sticky
   and the (vertical) dropdown display keep working. Tablet/mobile were already
   clean (nav collapses to a hamburger).
   -------------------------------------------------------------------------- */
html {
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
 * Basket line items (pages/basket/simple.blade.php)
 *
 * The basket is laid out by two grid systems at once. zeus-template.css carries
 * a legacy float grid (.product-image 20%, .product-details-cart 60%,
 * .product-line-price 12%), while the blade puts Bootstrap 5 col-* classes on
 * those same divs inside `.product.row`. The Bootstrap columns are the correct
 * ones - 2 + 6 + 2 + 2 = 12 - so clear the floats and let them resolve.
 *
 * Clear the float ONLY. Do not set a width here: Bootstrap's .col-md-* supplies
 * it, and any width in this rule out-specifies that, collapsing each column to
 * its content so the quantity, remove and price land at a different position on
 * every row instead of forming columns.
 *
 * Scoped to children carrying a col class - the promotion rows further down the
 * same template reuse .product-image and .product-line-price WITHOUT column
 * classes and still depend on the float behaviour.
 * -------------------------------------------------------------------------- */
.basketPage .product.row > [class*="col-"] {
	float: none;
}

.basketPage .product.row {
	align-items: center;
}

/* No separator is added here. zeus-template.css:1379 already gives .product a
   border-bottom; adding a border-top between rows drew both and produced a
   double line. */

/* Thumbnails: one fixed square per row, so a portrait product letterboxes
   inside it rather than setting its row's height. Out-specifies
   zeus-template's `.product .product-image img { max-width: 80% }`. */
.basketPage .product.row .product-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.basketPage .product.row .product-image img {
	width: 100%;
	max-width: 6.5rem;
	height: 6.5rem;
	object-fit: contain;
}

.basketPage .product-title-cart {
	line-height: 1.35;
	margin-bottom: .35rem;
}

/* The short description is free text of any length - the Shell Gadus one is a
   full sentence - and ran the width of its column, up against the quantity
   control. Two lines, then ellipsis, with room kept clear on the right. */
.basketPage .product-details-cart {
	padding-right: 2rem;
}

.basketPage .product-description-cart {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
	font-size: .875rem;
	line-height: 1.45;
	color: #6c757d;
}

.basketPage .product.row .product-quantity {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
}

.basketPage .product-removal a,
.basketPage .product-removal button {
	font-size: .75rem;
	letter-spacing: .04em;
	white-space: nowrap;
}

/* Prices right-align to a common edge, with tabular figures so the amounts line
   up column-wise down the basket rather than drifting with glyph width. */
.basketPage .product.row .product-line-price {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-size: 1rem;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	/* Every column in the line item is col-12, so on a phone the thumbnail became
	   a full-width band with the product pushed below the fold. Lay the row out in
	   two lines instead: thumbnail and details side by side, then the controls and
	   price beneath. .product.row is a flex row that already wraps, so giving the
	   first two children the full width of line one pushes the other two onto
	   line two by themselves. */
	.basketPage .product.row {
		align-items: flex-start;
	}

	.basketPage .product.row .product-image {
		flex: 0 0 5rem;
		width: 5rem;
		align-items: flex-start;
	}

	.basketPage .product.row .product-image img {
		max-width: 4.25rem;
		height: 4.25rem;
	}

	.basketPage .product.row .product-details-cart {
		flex: 1 1 0;
		width: auto;
		padding-right: 0;
	}

	/* Controls left, price right, sharing line two. */
	.basketPage .product.row .product-quantity {
		flex: 0 0 auto;
		width: auto;
		justify-content: flex-start;
		margin-top: .875rem;
	}

	.basketPage .product.row .product-line-price {
		flex: 1 1 auto;
		width: auto;
		text-align: right;
		margin-top: .875rem;
	}
}

/* --------------------------------------------------------------------------
 * Basket totals
 *
 * Deliberately styled WITHOUT a wrapper element. The totals sit in a run of
 * @if/@else branches whose div tags do not balance within the region (the
 * source has a net unclosed div across those branches), so a wrapper opened
 * before them and closed after them does not reliably enclose them - it closed
 * early and drew a box around the subtotal alone, cut off from the VAT beneath.
 * Each row aligns itself to the right instead, which needs no container and
 * cannot be broken by the surrounding conditionals.
 * -------------------------------------------------------------------------- */
/* zeus-template.css:1419 also floats the rows themselves
   (`.totals .totals-item { float: right; clear: both; width: 100% }`). Clearing
   that matters: floated rows are what collapsed the height of the summary
   wrapper I tried earlier, so it appeared to box the subtotal alone. Matching
   their selector depth and adding .basketPage takes this to (0,3,0). */
.basketPage .totals .totals-item {
	float: none;
	clear: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	width: 24rem;
	max-width: 100%;
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

/* zeus-template.css:1425 and :1431 float the label and value apart and give
   them widths of 79% and 21%. They are reached through `.totals .totals-item`,
   and the basket does carry that wrapper - `class="totals text-md-end
   text-start"`. Under display:flex the floats are ignored but the widths are
   not: 79 + 21 plus the gap is over 100%, so every row overflowed its own box.
   The grand total showed it worst, being bold, larger and carrying "inc VAT".
   The right-aligned 79% label also held each label in the middle of its row
   rather than at the left edge. Let flex do the sizing. */
/* Specificity matters here and I got it wrong first time round.
   `.totals .totals-item .totals-value` is three classes (0,3,0); a
   `.basketPage .totals-value` override is only two (0,2,0) and loses outright,
   source order never entering into it. Matching their structure and adding
   .basketPage puts these at (0,4,0) and (0,3,1), which also beats the 60%/40%
   pair the same file sets inside its min-width:720px media query. */
.basketPage .totals .totals-item label,
.basketPage .totals .totals-item .totals-value {
	float: none;
	width: auto;
}

.basketPage .totals .totals-item label {
	text-align: left;
}

/* zeus-template.css:1311 gives .totals-item a ::before/::after clearfix pair.
   Under display:flex those pseudo-elements become flex items of their own, so
   space-between distributed the row across four children and pushed the label
   and value into the middle instead of out to the edges. */
.basketPage .totals .totals-item::before,
.basketPage .totals .totals-item::after {
	display: none;
}

.basketPage .totals .totals-item label {
	margin: 0;
	color: #6c757d;
	font-weight: 400;
}

.basketPage .totals .totals-item .totals-value {
	text-align: right;
	white-space: nowrap;
}

/* The grand total is the figure being decided on: give it weight and a rule
   above it. .totals-item-total.mb-3 is unique to Grand Total in this template -
   a credit line can render after it, so :last-child would emphasise the wrong
   row. */
.basketPage .totals .totals-item-total.mb-3 {
	margin-top: .875rem;
	padding-top: .875rem;
	border-top: 1px solid #e6e8ea;
	font-size: 1.0625rem;
	font-weight: 700;
}

.basketPage .totals .totals-item-total.mb-3 label {
	color: inherit;
	font-weight: 700;
}

.basketPage .totals .totals-item-total small {
	display: block;
	font-size: .75rem;
	font-weight: 400;
	color: #6c757d;
}

/* --------------------------------------------------------------------------
 * Basket quantity stepper
 *
 * The native spinner arrows are hidden - the - and + buttons replace them, and
 * keeping both gives two sets of controls for one job.
 *
 * Bootstrap gives input-group children `position: relative; z-index: 2` (5 on
 * focus) so adjacent borders overlap cleanly. That raised paint layer showed
 * through the header's navigation dropdowns, and the overlap needs the
 * positioning rather than the index, so it drops back to auto.
 * -------------------------------------------------------------------------- */
.basketPage .basket-qty-group {
	width: auto;
	max-width: 7.5rem;
	flex-wrap: nowrap;
}

.basketPage .basket-qty-input {
	max-width: 3rem;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.basketPage .basket-qty-input::-webkit-outer-spin-button,
.basketPage .basket-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.basketPage .basket-qty-step {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding-left: 0;
	padding-right: 0;
}

.basketPage .basket-qty-group .btn,
.basketPage .basket-qty-group .form-control {
	z-index: auto;
}

.basketPage .basket-qty-group .btn:focus,
.basketPage .basket-qty-group .form-control:focus {
	z-index: 1;
}

/* --------------------------------------------------------------------------
 * Basket actions
 *
 * The continue-shopping row is `<div class="col text-end save-continue-block
 * d-flex">`. d-flex makes text-end inert - aligning flex children is
 * justify-content's job - so the button sat at the left of a row that had asked
 * to be right-aligned, diagonally opposite the checkout button above it.
 * -------------------------------------------------------------------------- */
.basketPage .save-continue-block {
	justify-content: flex-end;
	gap: .75rem;
}

@media (max-width: 767.98px) {
	.basketPage .totals .totals-item {
		/* 24rem is 384px, wider than a 375px viewport - let the row use the full
		   column width instead. */
		width: auto;
		max-width: none;
	}

	/* The discount code and its button share a .row of two .col children, which
	   stay side by side at every width - on a phone that squeezed the input until
	   its placeholder was cut off mid-word. Stack them. */
	.basketPage .couponBlock .row > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.basketPage .couponBlock .row > .col + .col {
		margin-top: .75rem;
	}

	.basketPage .couponBlock .btn {
		width: 100%;
	}

	/* Checkout sat against the right edge and continue-shopping against the left,
	   so the two actions never lined up with each other or with anything else.
	   Full width and stacked, in the order they are used. */
	.basketPage .col-lg-6.text-end > .btn {
		width: 100%;
	}

	.basketPage .save-continue-block {
		justify-content: flex-start;
	}

	.basketPage .save-continue-block .btn {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
 * reCAPTCHA badge
 *
 * The v3 badge floats over the bottom-right corner of every page, where it sat
 * on top of the basket's Apply Discount button on mobile.
 *
 * Google allows hiding it only if the attribution notice - naming reCAPTCHA and
 * linking both the Privacy Policy and the Terms of Service - is shown in the
 * user flow instead. That notice is in the footer copyright block, gated on the
 * same NOCAPTCHA_SITEKEY check as the api.js include, so the two appear and
 * disappear together.
 *
 * visibility, not display: none. The badge is the iframe's own container and
 * removing it from layout entirely has been known to break token generation in
 * v3; hiding it keeps the element boxed and scoring.
 * -------------------------------------------------------------------------- */
.grecaptcha-badge {
	visibility: hidden;
}