/* ── IMS CURRENT STOCK PAGE ── */
.ims-stock-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 32px 60px;
}
.ims-stock-item {
	background: #ffffff !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
}
.ims-stock-item:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,0.1);
	transform: translateY(-2px);
}
.ims-stock-img-wrap {
	display: block !important;
	overflow: hidden !important;
	background: #ffffff !important;
	border-bottom: 1px solid #e8e8e8 !important;
}
.ims-stock-img-wrap img {
	width: 100% !important;
	height: 200px !important;
	object-fit: contain !important;
	display: block !important;
	padding: 20px !important;
	box-sizing: border-box !important;
	transition: transform 0.3s !important;
	background: #ffffff !important;
}
.ims-stock-item:hover .ims-stock-img-wrap img {
	transform: scale(1.03);
}
.ims-stock-info {
	padding: 20px;
}
.ims-stock-badge {
	color: #cc0000;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.ims-stock-info h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.35;
	color: #1a1a1a;
}
.ims-stock-info h3 a {
	color: #1a1a1a;
	text-decoration: none;
}
.ims-stock-info h3 a:hover { color: #cc0000; }
.ims-stock-tagline {
	color: #666666;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 16px;
}
.ims-stock-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ims-stock-btn-red {
	display: inline-block;
	background: #cc0000;
	color: #ffffff !important;
	padding: 9px 18px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: 2px;
	transition: background 0.2s;
}
.ims-stock-btn-red:hover { background: #aa0000; }
.ims-stock-btn-outline {
	display: inline-block;
	background: transparent;
	color: #444444 !important;
	padding: 8px 18px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 1px solid #cccccc;
	border-radius: 2px;
	transition: border-color 0.2s, color 0.2s;
}
.ims-stock-btn-outline:hover {
	border-color: #cc0000;
	color: #cc0000 !important;
}
@media (max-width: 900px) {
	.ims-stock-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ims-stock-grid {
		grid-template-columns: 1fr;
		padding: 0 16px;
	}
}

/* ── HEADER SEPARATION ── */
/* Subtle shadow under the sticky header so it reads as a distinct bar over the hero and content below */
#masthead {
	position: relative;
	z-index: 10;
	box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.05);
}

/* ── CONTACT PAGE — centre the enquiry / details section ── */
/* These columns were "wide"-aligned inside a full-width band, so they spread to the screen edges.
   Constrain them to a centred container at the site's standard content width, as a clean 50/50 split. */
.page-id-41 .wp-block-columns.alignwide {
	max-width: 1160px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 40px;
}
/* Force an even 50/50 split at all widths (not gated to a desktop breakpoint, so it applies regardless of zoom / display scaling) */
body.page-id-41 .wp-block-columns.alignwide > .wp-block-column {
	flex: 1 1 0px !important;
	width: calc(50% - 20px) !important;
	min-width: 0 !important;
	max-width: none !important;
}
/* Stack them only on genuinely small screens */
@media (max-width: 600px) {
	body.page-id-41 .wp-block-columns.alignwide > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}
/* WPForms enquiry fields fill the column width instead of sitting short */
.page-id-41 .wpforms-field input[type="text"],
.page-id-41 .wpforms-field input[type="email"],
.page-id-41 .wpforms-field input[type="tel"],
.page-id-41 .wpforms-field input[type="url"],
.page-id-41 .wpforms-field input[type="number"],
.page-id-41 .wpforms-field textarea,
.page-id-41 .wpforms-field select {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* ── PAGE HEADER BANDS — unify the coloured title strip across the main pages to the brand navy ── */
/* The band is always the first full-width group in the content; scoped per page so red buttons/accents elsewhere are untouched. */
.page-id-3  .entry-content > .wp-block-group.alignfull:first-child,
.page-id-39 .entry-content > .wp-block-group.alignfull:first-child,
.page-id-40 .entry-content > .wp-block-group.alignfull:first-child,
.page-id-41 .entry-content > .wp-block-group.alignfull:first-child,
.page-id-42 .entry-content > .wp-block-group.alignfull:first-child,
.page-id-43 .entry-content > .wp-block-group.alignfull:first-child,
.page-id-44 .entry-content > .wp-block-group.alignfull:first-child {
	background-color: #0d1b2a !important;
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}

/* ── MEGA MENU DROPDOWN — thin grey divider between products (under each category heading) ── */
/* Double-ID prefix so Max Mega Menu's own styles can't override it. */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column .mega-sub-menu .mega-sub-menu li.mega-menu-item > a.mega-menu-link {
	border-bottom: 1px solid #e6e6e6 !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	padding: 5px 0 !important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column .mega-sub-menu .mega-sub-menu li.mega-menu-item:last-child > a.mega-menu-link {
	border-bottom: none !important;
}

/* ── MEGA MENU PANEL POSITION — re-anchor the (right-aligned) dropdown to the full-width header and centre it ── */
/* Desktop only; the mobile accordion keeps Max Mega Menu's own layout. */
@media (min-width: 769px) {
	#main-header { position: relative !important; }
	#mega-menu-wrap-primary,
	#mega-menu-wrap-primary #mega-menu-primary,
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu,
	.site-header-main-section-right,
	.site-header-main-section-right .site-header-item,
	.site-header-main-section-right #site-navigation,
	.site-header-main-section-right .primary-menu-container {
		position: static !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
		top: 100% !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		width: min(1280px, calc(100vw - 56px)) !important;
		max-width: calc(100vw - 56px) !important;
		margin: 0 !important;
		padding: 16px 12px 20px !important;
	}
}

/* ── MEGA MENU — Automation card, bottom of column four ──
   A solid navy card rather than another list of links, because Automation is
   not a category: it is a page that pulls machines from across the others.
   Giving it a different weight stops a reader scanning it as a fifth heading.

   Heading, description and hover all come from one menu item, so the styling
   works on a single anchor rather than a block of markup. */
@media (min-width: 769px) {
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 {
		background: #0d1b2a !important;
		border: 0 !important;
		padding: 0 !important;
		/* Inset 20px each side so the card lines up with the red rule under the
		   heading above it. The card is a sibling of the heading rather than a
		   child of its list, so it sits one level further out and would
		   otherwise be wider than everything else in the column.

		   width:auto matters as much as the margins: Max Mega Menu sets its
		   items to 100%, and 100% plus 40px of margin is wider than the column,
		   which pushed the card out past the right edge of the panel. */
		margin: 24px 15px 4px !important;
		width: auto !important;
		max-width: none !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	/* The background goes on the anchor as well as the list item. Max Mega Menu
	   paints its own background on .mega-menu-link, which sits on top of the
	   li — so setting it only on the li left white text on a white link.

	   :link and :visited are repeated here to match the specificity of the
	   plugin's own default-state rules. Without them the plugin won the resting
	   state and only the :hover rule below applied, so the card appeared to
	   materialise on hover and vanish again. */
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link,
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link:link,
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link:visited {
		background: #0d1b2a !important;
		font-family: 'Montserrat', sans-serif !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		color: #ffffff !important;
		padding: 20px 20px 22px !important;
		border: 0 !important;
		height: auto !important;
		line-height: 1.3 !important;
		display: block !important;
		box-sizing: border-box !important;
		width: auto !important;
	}
	/* The background goes on the anchor as well as the list item. Max Mega Menu
	   paints its own background on .mega-menu-link, which sits on top of the
	   li — so setting it only on the li left white text on a white link.

	   :link and :visited are repeated here to match the specificity of the
	   plugin's own default-state rules. Without them the plugin won the resting
	   state and only the :hover rule below applied, so the card appeared to
	   materialise on hover and vanish again. */
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link,
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link:link,
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link:visited {
		background: #0d1b2a !important;
		font-family: 'Montserrat', sans-serif !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		color: #ffffff !important;
		padding: 16px 18px !important;
		border: 0 !important;
		height: auto !important;
		line-height: 1.3 !important;
		display: block !important;
	}
	/* Max Mega Menu prints the item description inside the link, so it has to
	   be forced to a block to sit on its own line under the heading. */
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link .mega-menu-description {
		display: block !important;
		font-family: 'Inter', sans-serif !important;
		font-size: 12.5px !important;
		font-weight: 400 !important;
		font-style: normal !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		color: rgba(255,255,255,0.78) !important;
		line-height: 1.6 !important;
		margin-top: 7px !important;
	}
	/* "Learn more" as a pseudo-element rather than a second menu item. The whole
	   card is one link, so a real anchor inside it would nest anchors — invalid
	   markup and a keyboard trap. This gives the visual cue without either. */
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link::after {
		content: 'Learn more \2192';
		display: block !important;
		font-family: 'Montserrat', sans-serif !important;
		font-size: 11.5px !important;
		font-weight: 700 !important;
		letter-spacing: 0.08em !important;
		text-transform: uppercase !important;
		color: #e0242f !important;
		margin-top: 14px !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link:hover,
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column li.mega-menu-item-637 > a.mega-menu-link:focus {
		background: #142638 !important;
		color: #ffffff !important;
	}
	/* The card now sits in its own one-column row under the headings, so it
	   spans the panel. The plugin sizes items in a grid column to a fraction
	   of the column, which held the card to a third; force the row's column
	   and the card to the full width. */
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column.mega-menu-columns-1-of-1 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column.mega-menu-columns-1-of-1 li.mega-menu-item-637 {
		display: block !important;
		float: none !important;
		width: calc(100% - 30px) !important;
		max-width: none !important;
		margin: 16px 15px 4px !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column.mega-menu-columns-1-of-1 li.mega-menu-item-637 > a.mega-menu-link {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: baseline !important;
		gap: 6px 28px !important;
		padding: 18px 24px !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column.mega-menu-columns-1-of-1 li.mega-menu-item-637 > a.mega-menu-link .mega-description-group {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: baseline !important;
		gap: 6px 28px !important;
		flex: 1 1 auto !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column.mega-menu-columns-1-of-1 li.mega-menu-item-637 > a.mega-menu-link .mega-menu-description {
		margin-top: 0 !important;
		flex: 1 1 auto !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column.mega-menu-columns-1-of-1 li.mega-menu-item-637 > a.mega-menu-link::after {
		margin-top: 0 !important;
		margin-left: auto !important;
		white-space: nowrap !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE DRAWER — Kadence popup drawer, below 1024px
   ══════════════════════════════════════════════════════════════
   Max Mega Menu is switched off under 1024px, so the phone menu is
   Kadence's drawer rendering the same menu. Everything below styles that
   drawer to match the desktop panel: same headings, same red rule, same
   Automation card.

   "Entire parent menu item expands sub menu" is on in the Customizer, so the
   whole row is the toggle and the separate arrow button is no longer a second
   tap target competing with the label. */
@media (max-width: 1024px) {

	/* Top-level rows — Home, Machinery, Our Brands and so on. */
	#mobile-menu > li.menu-item > a,
	#mobile-menu > li.menu-item > .drawer-nav-drop-wrap > a {
		font-family: 'Montserrat', sans-serif;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.02em;
		color: #0d1b2a;
		/* 56px minimum so the row is a comfortable tap target on a phone. */
		min-height: 56px;
		display: flex;
		align-items: center;
	}
	#mobile-menu > li.menu-item + li.menu-item {
		border-top: 1px solid #e6e9ec;
	}

	/* The whole expanded block is indented and marked with a hairline rule, so
	   it is obvious you have stepped into Machinery rather than still reading
	   the top-level list. Without it, the six headings sat at the same indent
	   and near enough the same weight as Home and Our Brands, and nothing said
	   you were a level down. */
	#mobile-menu > li.menu-item > .sub-menu {
		margin-left: 4px;
		padding-left: 16px;
		border-left: 2px solid rgba(255,255,255,0.13);
	}

	/* Column headings inside Machinery — Sheet & Plate, Saws and the rest.
	   Smaller and slightly muted against the top level so the hierarchy reads
	   at a glance rather than needing to be worked out. */
	#mobile-menu .sub-menu > li.menu-item-has-children > .drawer-nav-drop-wrap > a {
		font-family: 'Montserrat', sans-serif;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.82) !important;
		min-height: 50px;
		display: flex;
		align-items: center;
	}

	/* An open section gets the red rule down its left edge, the same device the
	   desktop panel uses under each heading. */
	#mobile-menu .sub-menu .sub-menu {
		border-left: 3px solid #cc0000;
		margin-left: 4px;
		padding-left: 14px;
	}

	/* Category links — the rows that actually go somewhere. No arrow on these:
	   they lead straight to a category page rather than expanding further, and
	   a chevron would suggest another level that does not exist. */
	#mobile-menu .sub-menu .sub-menu > li.menu-item > a {
		font-family: 'Inter', sans-serif;
		font-size: 15px;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		color: #2b3a49;
		min-height: 48px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #edf0f2;
	}
	#mobile-menu .sub-menu .sub-menu > li.menu-item:last-child > a {
		border-bottom: none;
	}

	/* Expand toggle. Kadence draws a chevron; rotating it to point down when
	   closed and up when open reads as open/closed rather than "go deeper". */
	#mobile-menu .drawer-sub-toggle {
		color: #cc0000;
		min-width: 48px;
		min-height: 48px;
	}

	/* Automation row in the drawer.

	   Styled as a category heading with a red rule down the left, not as a
	   card. It is a secondary page rather than a product range, so it should
	   sit alongside the categories rather than above them — earlier versions
	   with a filled panel pulled the eye before the machines themselves, which
	   is the wrong order of importance. The red rule is the only thing marking
	   it as different in kind. */
	/* Automation row in the drawer.

	   Styled exactly like the six category headings above it — same size,
	   weight, letter spacing and colour — so it sits in the list rather than
	   above it. The only difference is the arrow: red and pointing right,
	   against the grey chevrons that mean "expands". One cue, doing one job. */
	#mobile-menu li.menu-item-637 > a {
		background: transparent !important;
		border: 0;
		font-family: 'Montserrat', sans-serif;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.82) !important;
		padding: 0 !important;
		margin: 0;
		min-height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#mobile-menu li.menu-item-637 > a::after {
		content: '\2192';
		font-size: 17px;
		font-weight: 400;
		color: #cc0000;
		margin-left: 12px;
	}

	/* "View all machinery" — a plain link with an arrow rather than a boxed
	   button. Outlined, it read as the primary action in the panel when it is
	   really just a way past the categories to the full list. */
	#mobile-menu li.menu-item-639 > a {
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 12.5px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.72) !important;
		border: 0;
		padding: 12px 0 !important;
		margin: 0 0 6px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 0;
	}
	#mobile-menu li.menu-item-639 > a::after {
		content: ' \2192';
		margin-left: 8px;
		color: #cc0000;
	}
}