:root {
	--zhc-nav-navy: #274c77;
	--zhc-nav-navy-deep: #1b365d;
	--zhc-nav-lab-blue: #eef6fc;
	--zhc-nav-slate: #667085;
	--zhc-nav-border: #d8e6f1;
	--zhc-nav-white: #ffffff;
}

/*
 * Preserve the theme's contained header and original two-row rhythm. The
 * plugin owns order and utilities, not the width of the entire site header.
 */
@media (min-width: 1025px) {
	body .site-header-bottom-section-center,
	body .site-header-bottom-section-center > .site-header-item,
	body #site-navigation,
	body #site-navigation .primary-menu-container {
		box-sizing: border-box;
		min-width: 0;
		width: 100%;
	}

	/*
	 * Five equal tracks, deliberately. The theme collapses any category that
	 * overflows a single row into a "More" item by moving it out of the menu in
	 * the DOM, which CSS cannot undo; five full-width tracks keep the row
	 * exactly at container width so nothing is ever collapsed. What was wrong
	 * before was inside each cell: the chevron was pushed to the far edge of a
	 * stretched cell, leaving a gap in the middle of every label, and the second
	 * row sat on tracks 2, 3 and 5 with a hole between the last two. The
	 * chevrons are gone, every label centres on its own track, and the second
	 * row's three items sit squarely under tracks 2, 3 and 4.
	 */
	body #site-navigation .primary-menu-container > ul {
		align-content: center;
		align-items: center;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(34px, auto));
		max-width: 100%;
		min-width: 0;
		row-gap: 2px;
		width: 100%;
	}

	body #site-navigation .primary-menu-container > ul > li.zhc-nav-root,
	body #site-navigation .primary-menu-container > ul > li.zhc-menu-utility-research-hub {
		align-items: center;
		align-self: center;
		display: flex;
		inset: auto !important;
		justify-content: center;
		justify-self: stretch;
		left: auto !important;
		margin: 0 !important;
		position: relative;
		right: auto !important;
		top: auto !important;
		width: 100%;
	}

	/*
	 * The dropdown affordance is the hover itself; the chevrons only added
	 * visual noise and forced the label off-centre in its cell.
	 */
	body #site-navigation .primary-menu-container > ul > li.zhc-nav-root--substrates-wafers { grid-column: 1; grid-row: 1; }
	body #site-navigation .primary-menu-container > ul > li.zhc-nav-root--thin-film-deposition { grid-column: 2; grid-row: 1; }
	body #site-navigation .primary-menu-container > ul > li.zhc-nav-root--2d-materials { grid-column: 3; grid-row: 1; }
	body #site-navigation .primary-menu-container > ul > li.zhc-nav-root--battery { grid-column: 4; grid-row: 1; }
	body #site-navigation .primary-menu-container > ul > li.zhc-nav-root--electrochemistry { grid-column: 5; grid-row: 1; }

	/* Three items on row two centre under the five above them. */
	body #site-navigation .primary-menu-container > ul > li.zhc-nav-root--lab-consumables { grid-column: 2; grid-row: 2; }
	body #site-navigation .primary-menu-container > ul > li.zhc-nav-root--lab-equipment { grid-column: 3; grid-row: 2; }
	body #site-navigation .primary-menu-container > ul > li.zhc-menu-utility-research-hub { grid-column: 4; grid-row: 2; }

	body #site-navigation .primary-menu-container > ul > li > a .dropdown-nav-toggle,
	body #site-navigation .primary-menu-container > ul > li > .nav-drop-title-wrap .dropdown-nav-toggle {
		display: none !important;
	}

	/*
	 * The label fills its own track and centres inside it, so an item's box
	 * edges are the track's edges. Centring a content-width anchor instead
	 * would leave each label's edges depending on how long its own text is,
	 * which is what pulled the two rows out of vertical alignment.
	 *
	 * The vertical padding is the larger half of the space between the rows:
	 * the theme's 11px each side plus a 10px row gap left 32px of white
	 * between two 16px lines, twice the line's own height. 9px a side with a
	 * 2px gap brings it to 20px, close enough to the text size to read as one
	 * block of navigation rather than two separate bars.
	 */
	body #site-navigation .primary-menu-container > ul > li.zhc-nav-root > a,
	body #site-navigation .primary-menu-container > ul > li.zhc-menu-utility-research-hub > a {
		display: block;
		left: auto !important;
		margin: 0 !important;
		padding-bottom: 9px !important;
		padding-top: 9px !important;
		right: auto !important;
		text-align: center;
		top: auto !important;
		width: 100%;
	}

	body #site-navigation .primary-menu-container > ul > li:hover,
	body #site-navigation .primary-menu-container > ul > li:focus-within {
		z-index: 100050 !important;
	}

	body #site-navigation .primary-menu-container > ul > li > ul.sub-menu,
	body #site-navigation .primary-menu-container > ul > li > .sub-menu {
		z-index: 100040 !important;
	}
}

body #site-navigation .primary-menu-container > ul > li > a,
body #site-navigation .primary-menu-container > ul > li > .nav-drop-title-wrap,
body #site-navigation li.hiden_menu.zhc-nav-more > a.level-0 {
	color: var(--zhc-nav-navy) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.035em !important;
	line-height: 1.25 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

body #site-navigation .primary-menu-container > ul > li > a:hover,
body #site-navigation .primary-menu-container > ul > li > a:focus-visible,
body #site-navigation li.hiden_menu.zhc-nav-more:hover > a.level-0,
body #site-navigation li.hiden_menu.zhc-nav-more > a.level-0:focus-visible {
	color: var(--zhc-nav-navy-deep) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

body #site-navigation .primary-menu-container > ul > li.zhc-menu-utility-research-hub {
	margin-left: 0 !important;
	padding: 0 !important;
}

body #site-navigation .primary-menu-container > ul > li.zhc-nav-overflow-hidden {
	display: none !important;
}

/* More is only used after two complete desktop rows can no longer fit. */
body #site-navigation li.hiden_menu.zhc-nav-more {
	align-items: center !important;
	display: flex !important;
	position: relative !important;
}

body #site-navigation li.hiden_menu.zhc-nav-more > a.level-0 {
	align-items: center !important;
	display: inline-flex !important;
	height: 100% !important;
	padding-left: 14px !important;
	padding-right: 14px !important;
}

body #site-navigation li.hiden_menu.zhc-nav-more > ul.zhc-nav-more-menu {
	background: var(--zhc-nav-white) !important;
	border: 1px solid var(--zhc-nav-border) !important;
	border-radius: 6px !important;
	box-shadow: 0 14px 34px rgba(27, 54, 93, 0.12) !important;
	display: none !important;
	height: auto !important;
	left: auto !important;
	list-style: none !important;
	margin: 0 !important;
	max-width: 300px !important;
	min-width: 270px !important;
	overflow: hidden !important;
	padding: 6px !important;
	position: absolute !important;
	right: 0 !important;
	top: calc(100% - 1px) !important;
	visibility: visible !important;
	width: 270px !important;
	z-index: 100060 !important;
}

body #site-navigation li.hiden_menu.zhc-nav-more:hover > ul.zhc-nav-more-menu,
body #site-navigation li.hiden_menu.zhc-nav-more:focus-within > ul.zhc-nav-more-menu,
body #site-navigation li.hiden_menu.zhc-nav-more.zhc-nav-more-open > ul.zhc-nav-more-menu {
	display: block !important;
}

body #site-navigation li.hiden_menu.zhc-nav-more > ul.zhc-nav-more-menu > li {
	border: 0 !important;
	display: block !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

body #site-navigation li.hiden_menu.zhc-nav-more > ul.zhc-nav-more-menu > li > a {
	align-items: center !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid #edf3f8 !important;
	box-sizing: border-box !important;
	color: var(--zhc-nav-navy) !important;
	display: flex !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	justify-content: flex-start !important;
	letter-spacing: 0.035em !important;
	line-height: 1.35 !important;
	min-height: 44px !important;
	padding: 11px 14px !important;
	text-align: left !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	white-space: normal !important;
	width: 100% !important;
}

body #site-navigation li.hiden_menu.zhc-nav-more > ul.zhc-nav-more-menu > li:last-child > a {
	border-bottom: 0 !important;
}

body #site-navigation li.hiden_menu.zhc-nav-more > ul.zhc-nav-more-menu > li > a:hover,
body #site-navigation li.hiden_menu.zhc-nav-more > ul.zhc-nav-more-menu > li > a:focus-visible {
	background: var(--zhc-nav-lab-blue) !important;
	color: var(--zhc-nav-navy-deep) !important;
	outline: none !important;
}

/* The homepage keeps the original circular category artwork and card rhythm. */
.woo_categories_grid .cat-outer-block .cat-inner-block .cat-img {
	align-items: center;
	background: #ffffff;
	border: 1px solid #e3edf5;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	margin-inline: auto;
	overflow: hidden;
}

.woo_categories_grid .cat-outer-block .cat-inner-block .cat-img img {
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: contain;
}

/* Category drawer: one aligned navigation system with one row separator. */
#widget-drawer .header-widget2 > .widget,
#widget-drawer .header-widget2 .widget_nav_menu {
	width: 100%;
}

#widget-drawer .header-widget2 ul.menu > li > .drawer-nav-drop-wrap > a,
#widget-drawer .header-widget2 ul.menu > li > a,
#mobile-drawer #mobile-menu > li > .drawer-nav-drop-wrap > a,
#mobile-drawer #mobile-menu > li > a {
	align-items: center !important;
	color: var(--zhc-nav-navy) !important;
	display: flex !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	justify-content: space-between !important;
	letter-spacing: 0.02em !important;
	line-height: 1.35 !important;
	min-height: 56px;
	padding-block: 13px !important;
}

#widget-drawer .header-widget2 ul.menu > li.zhc-menu-utility > a,
#mobile-drawer #mobile-menu > li.zhc-menu-utility > a {
	color: var(--zhc-nav-navy) !important;
	font-weight: 600 !important;
}

#widget-drawer .menu-toggle-close,
#mobile-drawer .menu-toggle-close {
	color: var(--zhc-nav-white) !important;
}

#widget-drawer .menu-toggle-close .toggle-close-bar,
#mobile-drawer .menu-toggle-close .toggle-close-bar {
	background: var(--zhc-nav-white) !important;
	border-color: var(--zhc-nav-white) !important;
}

/* Product archive tree: blue parent categories, gray children. */
.arterary-category-tree > .arterary-tree-root {
	display: flex;
	flex-direction: column;
}

.arterary-category-tree > .arterary-tree-root > .arterary-tree-item > .arterary-tree-item-content > .arterary-tree-link {
	color: var(--zhc-nav-navy) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.015em;
}

.arterary-category-tree > .arterary-tree-root > .arterary-tree-item > .arterary-tree-item-content > .arterary-tree-toggle::before {
	color: var(--zhc-nav-navy) !important;
}

.arterary-category-tree .arterary-tree-children .arterary-tree-link,
.arterary-category-tree .arterary-tree-children .arterary-tree-name {
	color: var(--zhc-nav-slate) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
}

.arterary-category-tree .arterary-tree-count {
	color: #55677a !important;
	font-weight: 400 !important;
}

.arterary-category-tree .arterary-tree-link:hover .arterary-tree-name,
.arterary-category-tree .arterary-tree-link:focus-visible .arterary-tree-name,
.arterary-category-tree .arterary-tree-link.current .arterary-tree-name {
	color: var(--zhc-nav-navy-deep) !important;
}

/* Footer directory links and verified payment methods. */
.site-footer .wp-block-list a,
.site-footer .widget_block ul a {
	color: var(--zhc-nav-navy) !important;
	text-decoration: none;
	text-underline-offset: 3px;
}

/* This pair was written for a light footer: navy at rest, deeper navy on
 * hover. The footer is navy, so the hover state put dark text on a dark
 * plate and the link vanished under the cursor. The resting state already
 * renders white; hover now matches it and keeps the underline as the cue. */
.site-footer .wp-block-list a:hover,
.site-footer .wp-block-list a:focus-visible,
.site-footer .widget_block ul a:hover,
.site-footer .widget_block ul a:focus-visible {
	color: #ffffff !important;
	text-decoration: underline;
}

/*
 * Accepted payments.
 *
 * The words "Accepted payments" are gone and so are the word-filled chips: a
 * row of the same brand marks the checkout itself shows says it faster, and it
 * is what a reader expects to find at the bottom of a shop. The row sits on the
 * copyright's line at the right of it, so the last band of the page is one line
 * rather than a stack. Wire transfer has no mark and keeps its words.
 */
.zhc-footer-payment-panel {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
	padding: 0;
	width: 100%;
}

.zhc-footer-payment-mark {
	background: #fff;
	border-radius: 4px;
	box-sizing: content-box;
	display: block;
	height: 22px;
	padding: 2px 3px;
	width: auto;
}

.zhc-footer-payment-badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.zhc-footer-payment-badge {
	align-items: center;
	background: #fff;
	border: 1px solid var(--zhc-nav-border);
	border-radius: 5px;
	color: var(--zhc-nav-navy-deep);
	display: inline-flex;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.015em;
	line-height: 1;
	min-height: 28px;
	padding: 7px 10px;
	white-space: nowrap;
}

/*
 * Shop by Category directory.
 *
 * The theme shortcode emits a six-per-row grid. With seven categories that
 * strands the seventh alone against the left edge. Lay the directory out as a
 * centred flex row instead, so seven categories read as a balanced 4 + 3, and
 * keep each category name on one line.
 */
.woo_categories_grid .grid-cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 54px 40px;
	margin: 0 auto;
}

.woo_categories_grid .cat-outer-block {
	flex: 0 0 auto;
	float: none;
	margin: 0;
	padding: 0;
	width: auto;
	max-width: none;
}

.woo_categories_grid .cat-inner-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.woo_categories_grid .cat-img-block,
.woo_categories_grid .cat-img,
.woo_categories_grid .cat-img img {
	display: block;
	margin: 0 auto;
}

.woo_categories_grid .cat_description {
	text-align: center;
}

/* One line per category name: "Lab Consumables" must not break in two. */
.woo_categories_grid .cat_name {
	display: inline-block;
	white-space: nowrap;
}

/* The catalogue is browsed by name, not by stock depth. */
.woo_categories_grid .cat-count {
	display: none;
}

@media (max-width: 1024px) {
	.woo_categories_grid .grid-cols {
		gap: 36px 32px;
	}
}

@media (max-width: 767px) {
	.woo_categories_grid .grid-cols {
		gap: 28px 24px;
	}
}
/*
 * Media matrix hold.
 *
 * The icons keep their existing look. Only the pointer affordance changes, and
 * a short note appears when one is activated.
 */
.zhc-media-held {
	cursor: default;
	position: relative;
}

.zhc-media-held::after {
	background: #10233f;
	border-radius: 4px;
	color: #fff;
	content: attr(data-zhc-media-hold);
	font-size: 11px;
	font-weight: 650;
	/* The footer social buttons inherit text-transform: capitalize, which
	   rendered the footer pill as "Coming Soon" against the notice bar's
	   "Coming soon". The two matrices must read identically. */
	text-transform: none;
	font-variant: normal;
	/* On the light footer a flat pill reads as a sticker; a low, soft shadow
	   lets it sit above the surface without drawing attention to itself. */
	box-shadow: 0 4px 10px rgba(16, 35, 63, 0.18);
	left: 50%;
	letter-spacing: 0.02em;
	line-height: 1;
	opacity: 0;
	padding: 6px 9px;
	pointer-events: none;
	position: absolute;
	top: calc(100% + 8px);
	transform: translateX(-50%) translateY(-4px);
	transition: opacity 140ms ease, transform 140ms ease;
	white-space: nowrap;
	z-index: 20;
}

.zhc-media-held.zhc-media-held-open::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/*
 * The footer icons carry the theme's own .social-button, which sets
 * `::after { display: none }` and `position: unset` on footer links. A single
 * class loses to those, so the pill silently never painted and would have
 * anchored to the whole footer section. Match the theme's specificity so both
 * matrices show the identical affordance.
 */
a.zhc-media-held.social-button {
	position: relative;
}

a.zhc-media-held.social-button::after {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.zhc-media-held::after {
		transition: none;
	}
}

/*
 * Official discount presentation.
 *
 * The discount is WooCommerce's native sale price, so the theme already emits
 * <del> for the original and <ins> for the discounted figure. Make that
 * relationship unmistakable: the original recedes, the payable figure leads.
 */
/* The theme's customizer emits an inline style tag declaring
   ".price del { color: <accent> !important }", so specificity alone cannot
   recede the original price into grey - these two colour declarations must
   carry !important as well, at higher specificity, to win among importants.
   Everything else stays unforced. */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount,
.woocommerce ul.products li.product .price del bdi,
.woocommerce div.product p.price del,
.woocommerce div.product p.price del .amount,
.woocommerce div.product p.price del bdi,
.woocommerce ul.products li.product .price del .woocommerce-Price-currencySymbol,
.woocommerce div.product p.price del .woocommerce-Price-currencySymbol,
.woocommerce del .woocommerce-Price-currencySymbol,
.woocommerce del,
.woocommerce del .amount,
.woocommerce del bdi {
	color: #5a6b7d !important;
	font-weight: 500;
	opacity: 1;
	text-decoration: line-through;
	/* The theme forces its accent as the strike colour, which left a cyan line
	   drawn across grey digits. Match the line to the text it strikes. */
	text-decoration-color: #7c8798 !important;
}

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price ins bdi,
.woocommerce div.product p.price ins,
.woocommerce div.product p.price ins .amount,
.woocommerce div.product p.price ins bdi,
.woocommerce ins,
.woocommerce ins .amount,
.woocommerce ins bdi {
	background: none;
	color: var(--zhc-nav-navy-deep, #10233f) !important;
	font-weight: 700;
	text-decoration: none;
}

/*
 * Discount badges ride alongside the price rather than over the product image,
 * so they read as an annotation on the number they modify.
 *
 * Two separate rounded pills in two unrelated fills read as sweets stuck next
 * to a laboratory price. This is one chip with a hairline rule down the middle
 * instead: a single crisp rectangle, drawn only in the store's own navy, whose
 * filled half names the state and whose open half carries the number.
 */
.zhc-badge-group {
	align-items: stretch;
	border: 1px solid #cad8e8;
	border-radius: 4px;
	display: inline-flex;
	gap: 0;
	margin-left: 12px;
	overflow: hidden;
	vertical-align: middle;
}

.zhc-badge {
	align-items: center;
	display: inline-flex;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1;
	padding: 5px 8px;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * Reserved for what the store is actively pushing.
 *
 * The customizer prints an inline `.price, .price *` colour with !important.
 * Now that the chip sits inside the price it inherits that navy on both
 * halves, which leaves the filled half navy text on a navy fill. Matching
 * !important is not enough: `.price *` scores the same as a single class, and
 * the customizer's block is printed after this file, so it wins the tie. The
 * group class carries the selector one step higher to settle it.
 */
.zhc-badge-group .zhc-badge--hot,
.zhc-badge-group .zhc-badge--sale {
	background: #1b365d;
	color: #fff !important;
}

.zhc-badge-group .zhc-badge--amount {
	background: #fff;
	color: #1b365d !important;
}


/*
 * Cart control.
 *
 * The count badge floated clear above the trolley, reading as a stray dot
 * rather than a count belonging to the cart: the child theme pulls it to
 * top/right -3px and then adds margin: -10px 0 0 -3px, all with !important,
 * which lifts it past the button's own top edge. The button is 44px around a
 * 24px icon, so anchoring 4px in from the button's top-right corner tucks the
 * badge onto the icon's corner with roughly a third of it overlapping. Each
 * offset needs !important only because the declarations it must beat carry it.
 */
.site-header .header-cart-button,
a.header-cart-button {
	position: relative;
}

.site-header .header-cart-button .header-cart-total,
a.header-cart-button .header-cart-total {
	align-items: center;
	border: 2px solid #fff;
	border-radius: 999px;
	bottom: auto !important;
	display: inline-flex;
	font-size: 10px;
	font-weight: 700;
	height: 18px;
	justify-content: center;
	left: auto !important;
	line-height: 1;
	margin: 0 !important;
	min-width: 18px;
	padding: 0 4px;
	position: absolute;
	right: 4px !important;
	top: 4px !important;
	transform: none !important;
}

/*
 * Shop by Category.
 *
 * The section was drawn twice: an Elementor section outline in hairline grey
 * around a second, narrower panel inside it. Two frames around one block of
 * content is one frame too many, so the outer outline goes and the panel is
 * the only box. The panel then has to reach the same left and right edges as
 * the hero slider above it, which it did not, because the widget container
 * inset it by 30px a side.
 *
 * The wash is a neutral grey. A blue-tinted one competed with the navy the
 * whole storefront is drawn in; grey lets the circular product images be the
 * only colour in the block.
 */
.elementor-section.elementor-element-7aa4c54 {
	border: 0 !important;
}

.elementor-element-618623b > .elementor-widget-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.woo_categories_grid {
	background: #f4f5f7;
	border-radius: 10px;
	padding: 34px 24px 30px;
}

/*
 * The source photographs carry a wide white margin, so at the circle's natural
 * scale the material itself reads small. Enlarge the artwork inside the circle
 * rather than the circle inside the grid: the layout keeps its rhythm and the
 * circle clips whatever white overflows.
 */
.woo_categories_grid .cat-img,
.woo_categories_grid .cat-img-block {
	overflow: hidden;
}

.woo_categories_grid .cat-img img {
	transform: scale(1.1);
	transform-origin: center center;
}

@media (max-width: 767px) {
	.woo_categories_grid {
		padding: 24px 14px 20px;
	}
}

/*
 * Homepage hero arrows.
 *
 * Slider Revolution parks both arrows inside the slide, where they sit on top
 * of the headline. The module has room either side of it on a desktop layout,
 * so move them into that margin. The plugin writes each arrow's position and a
 * per-arrow transform inline - and it centres them with hand-tuned pixel
 * offsets that differ between the two, leaving them 3px out of line with each
 * other - so the offsets have to be stated here and !important is what beats
 * the inline style. Only the fade is animated, so pinning the transform costs
 * no motion. Below 1280px the margin is too narrow to hold a 45px control, and
 * the plugin's own placement stands.
 */
@media (min-width: 1280px) {
	body sr7-module sr7-arrow.sr7-leftarrow,
	body sr7-module sr7-arrow.sr7-rightarrow {
		transform: translateY(-50%) !important;
	}

	body sr7-module sr7-arrow.sr7-leftarrow {
		left: 0 !important;
		margin-left: -59px !important;
		right: auto !important;
	}

	body sr7-module sr7-arrow.sr7-rightarrow {
		left: auto !important;
		margin-right: -59px !important;
		right: 0 !important;
	}
}

/*
 * Header rhythm.
 *
 * The category bar started one pixel under the logo block, so the mark and the
 * navigation read as a single crowded slab. A gap above the first row separates
 * identity from navigation without changing either.
 */
@media (min-width: 1025px) {
	body .site-header-bottom-section-center {
		padding-bottom: 18px;
		padding-top: 16px;
	}

	/*
	 * Each label centres in its own equal track, so the bar's ink is only
	 * centred if the first and last labels are the same length. They are not -
	 * "Substrates & Wafers" is 168px against "Electrochemistry" at 145 - which
	 * left 5px of air on the left of the row and 30px on the right. Shifting
	 * the whole grid evens that out; the tracks themselves do not move relative
	 * to each other, so the two rows stay in column. The correction is padding
	 * inside the grid rather than a shift of it: a relative offset or a
	 * transform would both widen the page's scrollable area.
	 */
	body #site-navigation .primary-menu-container > ul {
		padding-left: 25px;
	}

	/*
	 * The account control's chevron is the same redundant affordance the
	 * category bar's chevrons were: the menu opens on hover either way.
	 */
	body .site-header-item .header-account-in-wrap .dropdown-nav-toggle,
	body .site-header-main-section-right .dropdown-nav-toggle {
		display: none !important;
	}

	/*
	 * With the chevron gone the account glyph finished 17px short of the hero
	 * slide's right edge, because the space the chevron occupied stayed behind.
	 * Close that distance so the two icons end on the same line as everything
	 * else on the page. The space the chevron occupied is reclaimed from inside
	 * the account control rather than by moving the control outward, which
	 * would widen the page's scrollable area. The cart is left where it is: the
	 * 8px between the two controls is a frozen contract that also governs the
	 * signed-out header, where there is no chevron to reclaim and moving the
	 * cart alone would run the two icons into each other.
	 */
	body .site-header-item .header-account-in-wrap .header-account-button .nav-drop-title-wrap {
		grid-template-columns: auto !important;
		justify-items: end !important;
		padding-right: 8px !important;
	}

}

/*
 * Footer alignment.
 *
 * The page carries three different left edges: the hero and the category panel
 * at the container edge, the footer 20px inside it, and the promotional cards
 * directly above the footer another 20px inside that. Against the block it
 * actually sits beneath, the footer was the odd one out, so the footer row
 * takes the same inset as those cards and the column of text below them
 * continues the line they start.
 */
@media (min-width: 1025px) {
	body .site-middle-footer-inner-wrap {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/*
 * Checkout order summary.
 *
 * The review-order block inside the summary panel is floated, and a float with
 * an automatic width shrinks to its contents rather than filling its parent.
 * The panel is 396px wide inside its padding; the block was taking 198 of them
 * and pushing the rest of the panel's width into empty space, which squeezed
 * the product name into a four-line ribbon beside its thumbnail. Take it out of
 * the float so it occupies the panel it was given, and hold the money column to
 * one line at the right so each row reads as a label and an amount.
 */
.zhc-checkout .checkout-summary-panel .woocommerce-checkout-review-order {
	float: none;
	padding-left: 0;
	width: 100%;
}

.zhc-checkout .checkout-summary-panel table td.product-total,
.zhc-checkout .checkout-summary-panel table tr.cart-subtotal td,
.zhc-checkout .checkout-summary-panel table tr.order-total td,
.zhc-checkout .checkout-summary-panel table tr[class*="shipping"] td:last-child {
	text-align: right;
	white-space: nowrap;
	width: 1%;
}

/*
 * Promotional pair above the footer.
 *
 * The copy ran at 25px over 21px and started 9px inside the card, so it
 * crowded the card's own edge and competed with the headline in the hero.
 * Smaller type set further in gives the photograph beside it room to read.
 */
.elementor-element-ddc8bcb .elementor-heading-title {
	font-size: 21px !important;
}

.elementor-element-ddc8bcb .elementor-widget-container a,
.elementor-element-ddc8bcb .elementor-widget-text-editor {
	font-size: 16px !important;
}

/*
 * Each card is a flex container whose own padding Elementor prints with a more
 * specific generated selector, so the inset is applied to the widget boxes
 * themselves; the photograph is the container's background and does not move.
 */
/*
 * Both text blocks are absolutely positioned with hand-set offsets that differ
 * by 2.6px, so the heading and the line under it never shared a left edge.
 * Pin them to the same origin and let the inset below do the positioning.
 */
.elementor-element-ddc8bcb .e-con-inner > .elementor-element {
	left: 0 !important;
}

/*
 * The pair is built from two photographs with the copy laid over them. A single
 * blanket inset moved the artwork as well as the words, so each widget states
 * its own. The content column is a fixed 1200px at every desktop width, which
 * is why these can be pixel offsets: only the page's left margin changes.
 *
 * The photographs now start and finish on the hero slide's own edges - the
 * left one at the slide's left, the right one at the slide's right - at equal
 * width with 60px between them, and each card's copy sits 48px inside its own
 * photograph.
 */
@media (min-width: 1240px) {
	.elementor-element-240e188 > .elementor-widget-container {
		margin-left: -60px !important;
		width: 530px !important;
	}

	.elementor-element-3ec53ad > .elementor-widget-container {
		margin-left: 20px !important;
		width: 530px !important;
	}

	.elementor-element-ddc8bcb .elementor-widget-image img {
		height: auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.elementor-element-06f25ec > .elementor-widget-container,
	.elementor-element-656ba44 > .elementor-widget-container {
		margin-left: -16px !important;
	}

	.elementor-element-599cd0d > .elementor-widget-container,
	.elementor-element-77e10c9 > .elementor-widget-container {
		margin-left: 44px !important;
	}
}

/*
 * The card's second line is a link, so it inherited the navy every link on
 * the site is drawn in and competed with the black heading above it. Grey
 * makes it read as the subtitle it is.
 */
.elementor-element-ddc8bcb .elementor-heading-title a {
	color: var(--zhc-nav-slate) !important;
}

/*
 * The subtitle's own text sits in an <a> inside a heading span that carries no
 * visible text of its own. Give the empty wrapper the same size and colour, so
 * anything reading either element - a reviewer, a future stylesheet - gets one
 * answer instead of two.
 */
.elementor-element-656ba44 .elementor-heading-title,
.elementor-element-77e10c9 .elementor-heading-title {
	color: var(--zhc-nav-slate) !important;
	font-size: 16px !important;
}

/*
 * Shop by Category, tightened.
 *
 * A 192px circle is larger than anything else the page asks you to look at,
 * and eight of them made the block the tallest thing on the homepage. 150px
 * still shows the material clearly while letting the section sit as one
 * compact panel; the rows close up to match.
 */
.woo_categories_grid {
	padding: 26px 24px 24px;
}

.woo_categories_grid .grid-cols {
	row-gap: 34px !important;
}

.woo_categories_grid .cat-img-block,
.woo_categories_grid .cat-img {
	height: 150px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 150px !important;
}

/*
 * The discount chip's filled half carries a deep crimson rather than a bright
 * orange: it still reads as heat next to a navy price, without the sweet-shop
 * brightness of the first two attempts.
 */
.zhc-badge-group {
	border-color: #d3dae3;
}

.zhc-badge-group .zhc-badge--hot {
	background: #a51c30;
}

/*
 * Footer.
 *
 * The store notice at the top of every page is drawn in the house navy; the
 * footer now closes the page on the same colour so the site is bracketed by
 * one band top and bottom. Everything inside it is set in white, and the navy
 * wordmark - which would vanish on its own colour - is knocked out to white
 * rather than swapped for a second asset to keep in sync.
 */
.site-footer .site-footer-row-container-inner {
	background: var(--zhc-nav-navy) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
}

/*
 * Gutenberg emits a per-block `.wp-elements-<hash> a` colour with !important,
 * printed after this file, and the block's own palette class sets the list to
 * the same navy the footer now uses - so the links were being painted the
 * colour of their own background. Matching !important is not enough against an
 * equally specific rule that comes later; the body prefix settles it.
 */
body .site-footer,
body .site-footer p,
body .site-footer li,
body .site-footer h2,
body .site-footer h3,
body .site-footer h4,
body .site-footer .widgettitle,
body .site-footer .wp-block-heading,
body .site-footer a,
body .site-footer .wp-block-list a,
body .site-footer .widget_block ul a,
body .site-footer .site-footer-section {
	color: #fff !important;
}

body .site-footer a:hover,
body .site-footer a:focus-visible {
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

.site-footer img.footer-logo,
.site-footer .footer-html img,
.site-footer .widget_block img {
	filter: brightness(0) invert(1);
}

.site-footer .footer-social-item,
.site-footer .social-button {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
}

.site-footer .footer-social-item:hover,
.site-footer .social-button:hover {
	background: rgba(255, 255, 255, 0.22) !important;
}

/* Payment marks keep their own light chips so the card names stay legible. */
.site-footer .payment-method-item,
.site-footer .zhc-payment-method {
	background: #fff !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	color: var(--zhc-nav-navy-deep) !important;
}

/*
 * Footer density.
 *
 * The middle row stood 430px tall while its left column finished 115px short
 * of the bottom: the height was set entirely by eight category links spaced
 * 16px apart on a 27px line, and 50px of padding above and below that. The
 * address and its email each carried 15px of margin on both sides. None of it
 * is doing work - it is a footer, not a page - so every gap comes in and the
 * block reads as one dense panel. The bottom row gets the same treatment: it
 * was 101px around a single 24px line of copyright.
 */
body .site-footer .site-middle-footer-inner-wrap {
	padding-bottom: 30px;
	padding-top: 34px;
}

body .site-footer ul.wp-block-list li {
	line-height: 24px !important;
	margin-top: 7px !important;
}

body .site-footer ul.wp-block-list li:first-child {
	margin-top: 0 !important;
}

body .site-footer .wp-block-group p {
	margin-bottom: 8px !important;
	margin-top: 8px !important;
}

body .site-footer .footer-social-wrap {
	margin-top: 4px !important;
}

body .site-footer .wp-block-heading,
body .site-footer .widgettitle {
	margin-bottom: 14px !important;
}

body .site-footer .site-bottom-footer-inner-wrap {
	padding-bottom: 6px;
	padding-top: 6px;
}

body .site-footer .site-bottom-footer-inner-wrap .site-footer-section {
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}

/* Second pass: the row heights are set by the longest column, so the link
   rhythm and the block's own padding are where the remaining air is. */
body .site-footer .site-middle-footer-inner-wrap {
	padding-bottom: 24px;
	padding-top: 28px;
}

body .site-footer ul.wp-block-list li {
	line-height: 22px !important;
	margin-top: 6px !important;
}

body .site-footer .wp-block-group p {
	margin-bottom: 6px !important;
	margin-top: 6px !important;
}

body .site-footer .wp-block-heading,
body .site-footer .widgettitle {
	margin-bottom: 12px !important;
}

body .site-footer .site-bottom-footer-inner-wrap {
	padding-bottom: 4px;
	padding-top: 4px;
}


/*
 * Category directory, second pass.
 *
 * The hairline around each circle drew a ring the artwork did not need, and a
 * grey panel behind white circles inverted the emphasis: the surface was tinted
 * and the objects on it were not. Neither the panel nor the circles are tinted
 * now - the block is the page's own white throughout, and the product
 * photographs are the only thing in it carrying colour.
 */
body .woo_categories_grid {
	background: transparent;
}

body .woo_categories_grid .cat-img,
body .woo_categories_grid .cat-img-block {
	background: #ffffff !important;
	border: 0 !important;
	box-shadow: none !important;
}

/*
 * The one category that opens a mega menu draws its links in near-black; every
 * other category's dropdown was drawing them in the brand navy, so the same
 * kind of list looked like two different things depending on which heading you
 * happened to hover.
 */
body #site-navigation .primary-menu-container ul.sub-menu a {
	color: #333333 !important;
}

/* The last band is one line: copyright at the left, marks at the right. */
body .site-footer .site-bottom-footer-inner-wrap {
	align-items: center;
}

/* Brand marks keep their own colours. The footer whitening filter above is
   meant for the monochrome logo, and it was erasing every payment mark. */
.site-footer .footer-html img.zhc-footer-payment-mark,
.site-footer .widget_block img.zhc-footer-payment-mark,
.site-footer img.zhc-footer-payment-mark {
    filter: none;
}

/* Frameless, uniform marks. Each brand ships a different aspect ratio, so
   width:auto left Affirm at 28px beside Visa's 41px. Fix the box, let the
   artwork scale inside it, and drop the white chip. */
.zhc-footer-payment-panel {
    gap: 10px;
}

.site-footer .zhc-footer-payment-mark,
.zhc-footer-payment-mark {
    background: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    width: 40px;
    height: 26px;
    padding: 0;
    object-fit: contain;
}
/* Checkout: let the form column flow with the page. It was pinned to the
   viewport (675px) while holding 2345px of content, so the whole form sat
   behind an inner scrollbar most people never notice, and the footer showed
   up while the customer was still mid-form. The summary stays sticky. */
@media (min-width: 981px) {
    body .zhc-checkout .checkout-main-panel {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }

    body .zhc-checkout .checkout-summary-panel {
        height: auto !important;
        max-height: calc(100vh - 48px) !important;
        overflow-y: auto !important;
        position: sticky !important;
        top: 24px !important;
    }
}

/* B plan: official brand artwork with the card panel stripped out and the
   dark lettering turned white, so the marks sit straight on the navy footer
   with no frame. Data URIs keep this to one file. */
img.zhc-footer-payment-mark[alt="Visa"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 471'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23fff' d='M278.2 334.2l33.4-195.7h53.3l-33.4 195.7zm246.1-191.5c-10.6-4-27.1-8.2-47.8-8.2-52.7 0-89.9 26.5-90.2 64.6-.3 28.1 26.5 43.8 46.8 53.2 20.7 9.5 27.7 15.7 27.6 24.2-.1 13.2-16.6 19.2-32 19.2-21.3 0-32.6-3-50.1-10.3l-7-3.1-7.4 43.8a169 169 0 0059.4 10.4c56.1 0 92.5-26.2 93-66.8.2-22.3-14-39.3-44.8-53.2-18.7-9-30.1-15.1-30-24.3 0-8.1 9.7-16.8 30.6-16.8 17.4-.3 30 3.5 39.9 7.5l4.8 2.2 7.2-42.4m137.3-4.2h-41.2c-12.8 0-22.3 3.5-28 16.2l-79.2 179.4h56l11.3-29.4h68.3a3753 3753 0 016.5 29.4h49.5zm-65.4 126.4l21.3-54.8c-.4.6 4.3-11.3 7-18.6l3.6 16.8 12.4 56.6zM232.9 138.5L180.7 272l-5.6-27.2c-9.7-31.2-40-65.1-73.9-82L149 333.8h56.4l84-195.4z'/%3E%3Cpath fill='%23f2ae14' d='M132 138.5H45.8l-.7 4c67 16.2 111.2 55.4 129.6 102.5l-18.7-90c-3.2-12.4-12.6-16.1-24.2-16.5'/%3E%3C/g%3E%3C/svg%3E")}
img.zhc-footer-payment-mark[alt="Mastercard"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 471'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23fff' d='M618.6 422.1c-1.2 0-2.2.5-3 1.2a4 4 0 000 5.9 4.2 4.2 0 006 0 4 4 0 000-5.8 4.2 4.2 0 00-3-1.3zm0 7.4a3.2 3.2 0 110-6.4 3.2 3.2 0 010 6.4zm.2-5.2h-1.7v3.9h.8v-1.5h.3l1.2 1.5h1l-1.3-1.5c.4 0 .7-.2 1-.4.1-.2.3-.4.3-.7 0-.4-.2-.7-.4-1-.3-.2-.7-.3-1.2-.3zm0 .7c.2 0 .4 0 .5.2a.4.4 0 01.2.4.4.4 0 01-.2.3l-.5.2h-1v-1zm-458.6 2.8h-8.7v-41h8.5v5s7.6-6 12-6c8.8.2 14 7.6 14 7.6s4.2-7.6 13.7-7.6c14 0 16.1 13 16.1 13v28.8h-8.4v-25.4s0-7.8-9-7.8c-9.5 0-10.4 7.8-10.4 7.8v25.4h-8.7V402s-.9-8-8.8-8c-10.3 0-10.5 8.2-10.5 8.2zm266.3-42c-4.5 0-12 6-12 6v-5h-8.6v41h8.7l-.2-25.6s.2-8.3 10.5-8.3c2 0 3.4.5 4.6 1.2l2.8-8c-1.7-.7-3.6-1.2-5.8-1.3zm123.3 0c-4.5 0-12 6-12 6v-5h-8.6v41h8.7l-.1-25.6s.2-8.3 10.4-8.3c2 0 3.4.5 4.6 1.2l2.9-8c-1.8-.7-3.7-1.2-6-1.3zm-305.7-.1c-13 0-20 11.7-20 21.6 0 10 7.9 21.7 20.4 21.7 7.3 0 13.3-5.4 13.3-5.4v4.2h8.6v-41h-8.6v5.2s-5.7-6.3-13.7-6.3zm1.7 8.3c7 0 12.8 6.1 12.8 13.7 0 7.5-5.7 13.6-12.8 13.6-7 0-12.7-6-12.7-13.6s5.7-13.7 12.7-13.7zm249.7-8.3c-13.1 0-20 11.7-20.1 21.6 0 10 7.9 21.7 20.4 21.7 7.3 0 13.4-5.4 13.4-5.4v4.2h8.6v-41H509v5.2s-5.6-6.3-13.6-6.3zm1.6 8.3c7 0 12.8 6.1 12.8 13.7 0 7.5-5.7 13.6-12.8 13.6-7 0-12.7-6-12.7-13.6s5.7-13.7 12.7-13.7zm81.1-8.3c-13.1 0-20 11.7-20 21.6-.1 10 7.8 21.7 20.4 21.7 7.3 0 13.3-5.4 13.3-5.4v4.2h8.6v-57.1H592V392s-5.7-6.3-13.7-6.3zm1.7 8.3c7 0 12.7 6.1 12.7 13.7 0 7.5-5.7 13.6-12.7 13.6s-12.7-6-12.7-13.6 5.6-13.7 12.7-13.7zm-287.2 35.1c-8.9 0-17.1-5.5-17.1-5.5l3.7-5.8s7.8 3.6 13.4 3.6c3.7 0 9.7-1.2 9.8-4.8.1-3.9-10.2-5-10.2-5s-15.4-.2-15.4-12.9c0-8 7.7-13 17.6-13 5.6 0 16.3 5 16.3 5l-4.3 6.6s-8.2-3.2-12.6-3.4c-3.6-.1-8 1.6-8 4.8 0 8.7 25.5-.7 25.5 16.9 0 11.4-10.4 13.5-18.7 13.5zm33-54v11.8H318v8.6h7.7v20.6S325 430 339.9 430c4.2 0 12.2-3 12.2-3l-3.4-9s-3.2 2.7-6.9 2.6c-6.9-.1-6.7-4.6-6.7-4.6v-20.5h14.3v-8.6H335V375h-9.4zm51.8 11c-14 0-21 11.6-21 21.7 0 10.3 6.4 22 21.9 22 6.6 0 15.9-5.8 15.9-5.8l-4-7s-6.4 4.5-12 4.5c-11.1 0-11.8-11-11.8-11h29.9s2.2-24.3-18.9-24.3zm-1.3 8.1h1c10.6 0 10.5 10 10.5 10h-21.2s-.5-9.4 9.7-10zm90.2 22.7l4 8s-6.4 4.1-13.5 4.1c-14.7 0-23-11-23-21.6C434 391 447 386 456 386c8 0 14.8 4.7 14.8 4.7l-4.4 8s-2.8-4.3-10.7-4.3c-8 0-12.2 6.9-12.2 13.4 0 7.3 5 13.5 12.3 13.5 5.8 0 10.7-4.4 10.7-4.4z'/%3E%3Cpath fill='%23f79f1a' d='M624.5 278.6v-5.5h-1.4l-1.7 3.8-1.6-3.8h-1.5v5.5h1v-4.1l1.6 3.6h1l1.6-3.6v4.1zm-9.1 0v-4.5h1.8v-1h-4.7v1h1.9v4.5zm9.4-82c0 85.4-69 154.6-154.3 154.6-85.2 0-154.3-69.2-154.3-154.6S385.3 41.9 470.5 41.9c85.2 0 154.3 69.2 154.3 154.7z'/%3E%3Cpath fill='%23ea001b' d='M434.5 196.6c0 85.4-69.1 154.6-154.3 154.6-85.2 0-154.3-69.2-154.3-154.6s69-154.7 154.3-154.7c85.2 0 154.3 69.2 154.3 154.7z'/%3E%3Cpath fill='%23ff5f01' d='M375.3 74.8c-36 28.3-59 72.3-59 121.7s23 93.5 59 121.8c36-28.3 59.1-72.3 59.1-121.8s-23-93.4-59-121.7z'/%3E%3C/g%3E%3C/svg%3E")}
img.zhc-footer-payment-mark[alt="American Express"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 752 471'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23fff' d='M1 221.2h36l8.2-19.5h18.1l8.1 19.5h71v-15l6.2 15h36.8l6.4-15.2v15.2h176.1v-32h3.3c2.4 0 3.1.3 3.1 4.2v27.8h91.1v-7.5c7.4 4 18.8 7.5 33.9 7.5h38.3l8.2-19.5H564l8 19.5h73.8v-18.5l11.2 18.5h59.2V98.7h-58.6V113l-8.2-14.4h-60V113l-7.6-14.4h-81.2a73.2 73.2 0 00-35.2 7.1v-7.1h-56v7.1c-6.1-5.4-14.5-7.1-23.8-7.1H180.9l-13.7 31.6L153 98.7H88.6V113l-7-14.4h-55L1 156.9v64.3zm227.4-17.7h-21.6l-.1-68.8-30.6 68.8h-18.5L127 134.7v68.8H84L76 184H32L24 203.5H1l37.8-87.8H70l35.8 83.1v-83.1h34.5l27.5 59.6 25.4-59.6h35.1v87.8zM68.8 165.7l-14.5-35-14.3 35zm245.6 37.8H244v-87.8h70.4V134h-49.3v15.8h48.1v18h-48.1v17.5h49.3v18.2zm99.3-64.2c0 14-9.4 21.3-14.9 23.4 4.6 1.8 8.6 4.9 10.4 7.4 3 4.4 3.5 8.3 3.5 16.2v17.2h-21.2l-.1-11c0-5.3.5-13-3.3-17.2-3.1-3-7.8-3.7-15.4-3.7h-22.6v32H329v-88h48.5c10.8 0 18.7.4 25.5 4.3 6.7 4 10.7 9.6 10.7 19.4zm-26.7 13c-2.9 1.8-6.3 1.9-10.4 1.9H351v-19.5h26c3.6 0 7.5.1 10 1.6 2.7 1.2 4.4 4 4.4 7.7 0 3.9-1.6 7-4.4 8.4zm60.5 51.2H426v-87.8h21.5zm249.7 0h-29.9l-40-66v66h-42.9l-8.2-19.6h-43.8l-8 19.6h-24.6c-10.2 0-23.2-2.2-30.6-9.7-7.4-7.5-11.2-17.6-11.2-33.5 0-13 2.3-25 11.3-34.4 6.9-7 17.5-10.2 32-10.2h20.5v18.8h-20c-7.7 0-12 1.1-16.2 5.2-3.6 3.7-6.1 10.7-6.1 19.9 0 9.4 1.9 16.2 5.8 20.6 3.2 3.5 9.1 4.6 14.7 4.6h9.5l29.7-69.1h31.6l35.7 83v-83h32l37.1 61.2v-61.2h21.6v87.8zm-128.1-37.8l-14.6-35-14.5 35h29zm181.9 178c-5.2 7.5-15.1 11.3-28.7 11.3h-40.7v-18.8h40.6c4 0 6.8-.6 8.5-2.2a7.7 7.7 0 002.5-5.7c0-2.6-1-4.6-2.6-5.8-1.5-1.4-3.7-2-7.4-2-19.8-.7-44.5.6-44.5-27.2 0-12.7 8.1-26.1 30.3-26.1h42v-17.5h-39a44.1 44.1 0 00-26.5 7.1v-7.1h-57.7c-9.2 0-20 2.2-25.2 7.1v-7.1h-103v7.1a55 55 0 00-28.5-7.1h-68v7.1c-6.4-6.2-20.9-7.1-29.7-7.1h-76L280 268.4l-16.4-18.7H150v122.6h111.5l18-19.1 16.8 19 68.8.1v-28.8h6.7a72 72 0 0029.4-4.3v33H458v-31.9h2.7c3.5 0 3.9.1 3.9 3.6v28.4h172.2c11 0 22.4-2.8 28.7-7.9v7.9H720c11.4 0 22.5-1.6 31-5.7zm-341.5-47c0 24.3-18.3 29.4-36.8 29.4h-26.3v29.4h-41l-26-29-26.9 29H169v-87.8h84.8l26 28.8 26.7-28.8H374c16.8 0 35.6 4.6 35.6 29zM241.8 337H190v-17.4h46.3v-18H190v-16h52.8l23.1 25.7zm83.6 10.1L293 311.3l32.4-34.6zm47.8-39H346v-22.4h27.5c7.6 0 12.9 3 12.9 10.7 0 7.6-5 11.6-13.2 11.6zM516 267.6h70.3v18.1H537v16H585v18H537v17.4l49.3.1v18.2H516v-87.8zm-27 47a23 23 0 0110.2 7.4c3 4.3 3.5 8.3 3.5 16v17.4h-21.1v-11c0-5.3.5-13-3.4-17.2-3.1-3.1-7.8-3.9-15.5-3.9h-22.5v32.1H419v-87.8h48.7c10.6 0 18.4.4 25.3 4.1 6.7 4 10.9 9.5 10.9 19.5 0 14-9.4 21.2-15 23.4zm-12-11.1c-2.8 1.7-6.3 1.8-10.4 1.8H441v-19.7h26c3.7 0 7.4 0 10 1.6 2.7 1.4 4.4 4.1 4.4 7.9 0 3.7-1.7 6.7-4.4 8.4zm190.3 5.6c4.1 4.2 6.3 9.6 6.3 18.6 0 18.9-11.8 27.7-33 27.7h-41.1v-18.8h40.9c4 0 6.8-.5 8.6-2.2a7.8 7.8 0 002.5-5.7c0-2.6-1.2-4.6-2.6-5.8-1.6-1.4-3.9-2-7.5-2-19.7-.7-44.4.6-44.4-27.2 0-12.7 8-26.1 30.1-26.1h42.3v18.7h-38.7c-3.8 0-6.3.1-8.4 1.6-2.4 1.4-3.2 3.5-3.2 6.3 0 3.3 2 5.5 4.6 6.5 2.2.8 4.6 1 8.2 1l11.4.3c11.4.3 19.3 2.3 24 7zm83.7-23.5h-38.4c-3.9 0-6.4.1-8.6 1.6-2.2 1.4-3 3.5-3 6.3 0 3.3 1.8 5.5 4.6 6.5 2.2.8 4.6 1 8.1 1l11.4.3c11.6.3 19.3 2.3 24 7 .8.8 1.3 1.5 1.9 2.3z'/%3E%3C/g%3E%3C/svg%3E")}
img.zhc-footer-payment-mark[alt="Discover"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 501'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23fff' d='M415.1 161.2c31 0 56 23.6 56 52.7 0 29.2-25 52.8-56 52.8s-56-23.6-56-52.7c0-29.2 25-52.8 56-52.8zm-88 .7a55 55 0 0125.3 6v22.8a35.4 35.4 0 00-25.7-11.1 34 34 0 00-34.5 34c0 20.1 14.7 34.2 35.4 34.2 9.3 0 16.6-3 24.8-10.8v22.7c-9.3 4.2-16.9 5.8-25.7 5.8-31.3 0-55.6-22.6-55.6-51.7 0-28.9 25-52 56-52zm-97 .6c11.5 0 22 3.7 30.9 11l-10.8 13.3c-5.3-5.7-10.4-8-16.5-8-8.9 0-15.3 4.7-15.3 11 0 5.3 3.6 8.1 16 12.4 23.3 8 30.2 15.2 30.2 31 0 19.1-15 32.5-36.3 32.5-15.6 0-27-5.8-36.5-18.9l13.3-12a24.5 24.5 0 0022.4 13.2c9.2 0 16-6 16-14 0-4.1-2-7.7-6.2-10.2-2-1.2-6.2-3-14.2-5.7-19.3-6.5-26-13.5-26-27.2 0-16.2 14.3-28.4 33-28.4zm234.7 1.7h22.4l28 66.6 28.5-66.6H566L520.5 266h-11zm-397.4.2h30.2c33.3 0 56.5 20.4 56.5 49.6 0 14.6-7.1 28.7-19.1 38.1a57 57 0 01-37.6 11.4h-30zm96.1 0h20.6v99.1h-20.6zm411.8 0h58.2v16.8h-37.7v22h36.3V220h-36.3v26.8h37.7v16.7h-58.2v-99.1zm71.8 0h30.5c23.7 0 37.3 10.7 37.3 29.3 0 15.2-8.6 25.1-24 28l33.1 41.8h-25.2l-28.5-39.8h-2.6v39.8H647zm20.6 15.6v30h6c13 0 20-5.3 20-15.3 0-9.6-7-14.7-19.7-14.7zm-579.8 1.2v65.6h5.6c13.2 0 21.6-2.4 28-8a32.5 32.5 0 000-49.7c-6.7-5.7-14.8-7.9-28-7.9z'/%3E%3Cpath fill='%23f47216' d='M780 288.4C754 306.7 558.9 437.7 221.2 501H725a55 55 0 0055-55z'/%3E%3C/g%3E%3C/svg%3E")}
img.zhc-footer-payment-mark[alt="Apple Pay"]{content:url("data:image/svg+xml,%3Csvg width='31.62' height='13.1' viewBox='10.08 11.4 31.62 13.1' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8 13.1C15.5 13.5 14.9 13.9 14.3 13.8C14.2 13.2 14.5 12.6 14.8 12.2C15.2 11.7 15.9 11.4 16.4 11.4C16.4 12 16.2 12.6 15.8 13.1ZM16.4 13.9C15.9 13.9 15.4 14.1 15 14.2C14.7 14.3 14.5 14.4 14.4 14.4C14.2 14.4 14 14.3 13.7 14.2C13.4 14.1 13 13.9 12.7 14C11.8 14 10.9 14.5 10.5 15.3C9.6 16.9 10.3 19.3 11.1 20.6C11.6 21.2 12.1 21.9 12.8 21.9C13.1 21.9 13.3 21.8 13.6 21.7C13.8 21.6 14.1 21.5 14.5 21.5C14.9 21.5 15.2 21.6 15.4 21.7C15.7 21.8 15.9 21.9 16.2 21.9C16.9 21.9 17.4 21.2 17.8 20.6C18.3 19.9 18.5 19.2 18.6 19.1L18.6 19.1C18.6 19.1 18.5 19.1 18.5 19.1C18.4 19 17.2 18.5 17.2 17C17.1 15.7 18.1 15.1 18.3 15L18.3 15C18.3 15 18.3 15 18.3 15C17.7 14 16.7 13.9 16.4 13.9ZM21.3 21.8V12.1H25C26.8 12.1 28.1 13.4 28.1 15.3C28.1 17.2 26.8 18.5 24.9 18.5H22.8V21.8H21.3ZM22.8 13.4H24.6C25.9 13.4 26.6 14.1 26.6 15.3C26.6 16.5 25.9 17.2 24.6 17.2H22.8V13.4ZM33.1 20.6C32.7 21.4 31.8 21.9 30.9 21.9C29.5 21.9 28.5 21.1 28.5 19.8C28.5 18.6 29.4 17.8 31.2 17.7L33 17.6V17.1C33 16.3 32.5 15.9 31.6 15.9C30.9 15.9 30.3 16.3 30.2 16.9H28.8C28.9 15.6 30.1 14.7 31.7 14.7C33.4 14.7 34.5 15.6 34.5 17V21.8H33.1V20.6H33.1ZM31.3 20.7C30.5 20.7 30 20.4 30 19.8C30 19.2 30.4 18.8 31.4 18.7L33 18.6V19.2C33 20.1 32.3 20.7 31.3 20.7ZM39.1 22.2C38.5 23.9 37.8 24.5 36.3 24.5C36.2 24.5 35.8 24.4 35.8 24.4V23.2C35.9 23.3 36.1 23.3 36.2 23.3C36.9 23.3 37.2 23 37.5 22.3L37.6 21.8L35.1 14.8H36.6L38.4 20.5H38.4L40.2 14.8H41.7L39.1 22.2Z' fill='%23fff' /%3E%3C/svg%3E")}
img.zhc-footer-payment-mark[alt="Google Pay"]{content:url("data:image/svg+xml,%3Csvg width='23.97' height='9.22' viewBox='6.32 7.78 23.97 9.22' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M17.6 15V12.3V12.3H19.1C19.7 12.3 20.2 12.1 20.6 11.7C21 11.3 21.3 10.8 21.3 10.3C21.3 9.7 21 9.2 20.6 8.9C20.2 8.5 19.7 8.3 19.1 8.3H16.8V15H17.6ZM17.6 11.4V9.1V9.1H19.1C19.5 9.1 19.8 9.2 20 9.5C20.2 9.7 20.4 10 20.4 10.3C20.4 10.6 20.2 10.9 20 11.1C19.8 11.3 19.5 11.5 19.1 11.4H17.6Z' fill='%23fff' /%3E%3Cpath d='M24.9 10.8C24.5 10.4 24 10.2 23.3 10.2C22.5 10.2 21.8 10.5 21.4 11.1L22.2 11.6C22.5 11.2 22.9 11 23.4 11C23.7 11 24 11.1 24.2 11.3C24.4 11.5 24.6 11.8 24.6 12.1V12.3C24.2 12.1 23.8 12 23.3 12C22.7 12 22.2 12.1 21.8 12.4C21.4 12.7 21.2 13.1 21.2 13.6C21.2 14 21.4 14.4 21.8 14.7C22.1 15 22.6 15.1 23.1 15.1C23.7 15.1 24.2 14.9 24.5 14.3H24.6V15H25.4V12.2C25.4 11.6 25.2 11.1 24.9 10.8ZM22.5 14.1C22.3 14 22.2 13.8 22.2 13.6C22.2 13.3 22.3 13.1 22.5 12.9C22.8 12.8 23.1 12.7 23.4 12.7C23.9 12.7 24.3 12.8 24.6 13C24.6 13.4 24.4 13.7 24.1 14C23.9 14.2 23.5 14.4 23.1 14.4C22.9 14.4 22.6 14.3 22.5 14.1Z' fill='%23fff' /%3E%3Cpath d='M30.3 10.4L27.3 17H26.4L27.5 14.7L25.6 10.4H26.5L27.9 13.7H27.9L29.3 10.4H30.3Z' fill='%23fff' /%3E%3Cpath d='M14.1 11.7C14.1 11.4 14 11.2 14 10.9H10.3V12.4H12.4C12.3 12.9 12 13.3 11.6 13.5V14.5H12.9C13.6 13.8 14.1 12.8 14.1 11.7Z' fill='%234285F4' /%3E%3Cpath d='M10.3 15.4C11.3 15.4 12.2 15.1 12.9 14.5L11.6 13.5C11.3 13.8 10.8 13.9 10.3 13.9C9.2 13.9 8.4 13.2 8 12.3H6.7V13.3C7.4 14.6 8.8 15.4 10.3 15.4Z' fill='%2334A853' /%3E%3Cpath d='M8 12.3C7.9 11.9 7.9 11.3 8 10.9V9.9H6.7C6.2 11 6.2 12.2 6.7 13.3L8 12.3Z' fill='%23FBBC04' /%3E%3Cpath d='M10.3 9.3C10.8 9.3 11.4 9.5 11.8 9.8L12.9 8.8C12.2 8.1 11.2 7.7 10.3 7.8C8.8 7.8 7.4 8.6 6.7 9.9L8 10.9C8.4 9.9 9.2 9.3 10.3 9.3Z' fill='%23EA4335' /%3E%3C/svg%3E")}
img.zhc-footer-payment-mark[alt="Affirm"]{content:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.9 23.3C6.9 21.8 6.3 19.9 6.3 18C6.3 12.7 10.7 8.4 16 8.4C21.3 8.4 25.6 12.7 25.6 18C25.6 19.9 25.1 21.8 24.1 23.3H26.8C27.6 21.7 28 19.9 28 18C28 11.4 22.6 6 16 6C9.4 6 4 11.4 4 18C4 19.9 4.4 21.7 5.2 23.3H7.9Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3 21.4C14.4 21.4 13.9 21 13.9 20.3C13.9 19 15.6 18.6 17.7 18.6C17.7 20.1 16.8 21.4 15.3 21.4ZM16.2 12.3C14.4 12.3 12.4 13.1 11.3 14L12.3 16.1C13.2 15.3 14.6 14.6 15.9 14.6C17.1 14.6 17.8 15 17.8 15.8C17.8 16.4 17.3 16.7 16.5 16.8C13.3 17.1 10.9 18.1 10.9 20.5C10.9 22.4 12.2 23.6 14.5 23.6C16.1 23.6 17.3 22.7 17.9 21.6V23.3H20.8V16.3C20.8 13.5 18.8 12.3 16.2 12.3Z' fill='white'/%3E%3C/svg%3E")}

/*
 * Shop by Category listed an empty tile reading "Other (0)". That term is
 * WordPress's default product category, renamed - which is also why the admin
 * offers no Delete action for it: WooCommerce will not let the default term be
 * removed while it is still the default. Hiding the tile is what the storefront
 * needs; the term itself is empty and already hidden from every other listing.
 *
 * The row is a wrapping flex line that is already centred, so dropping one tile
 * from eight leaves the remaining three centred on their own.
 */
.woo_categories_grid .cat-outer-block:has(a[href*="/product-category/uncategorized/"]) {
	display: none !important;
}