/*
Theme Name:   Mantronics (Shoptimizer)
Theme URI:    https://mantronics.com/
Description:  Mantronics child theme for Shoptimizer. Replaces the previous
              Twenty Thirteen child, which had no WooCommerce templates.
Author:       Mantronics
Template:     shoptimizer
Version:      1.0.0
Text Domain:  shoptimizer-child
*/



/* ---------------------------------------------------------------------------
   Even loop tiles.

   Catalogue thumbnails aren't all the same shape — most are 370x370 but some,
   like the Mailing Supplies category, are 370x246. In a flex row that made one
   tile 293px tall against 416px for its neighbours, so the titles sat at
   different heights.

   Reserving a square box per thumbnail keeps every tile the same height. Using
   `contain` rather than `cover` because these are equipment photos on white —
   cropping them to fill would cut off the product.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product-category a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
}

/* Titles line up at the bottom of each tile rather than floating mid-card. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product-category > a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Mobile baseline.
   Shoptimizer is responsive out of the box, so this is only a safety net for
   legacy page content (Genesis Blocks layouts, wide tables) carried over from
   the old theme.
   --------------------------------------------------------------------------- */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

@media (max-width: 782px) {
	.entry-content table,
	.wpb_wrapper table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ---------------------------------------------------------------------------
   "We do not ship to PO Boxes" notice on checkout.
   Was previously inline-styled from functions.php.
   --------------------------------------------------------------------------- */
.no-po-box-notice {
	margin: 0 0 15px;
	padding: 12px;
	font-weight: 700;
	color: #b81c23;
}

/* ---------------------------------------------------------------------------
   Brand green on the block checkout's place-order button.

   Shoptimizer's shoptimizer_woocommerce_button_bg customizer setting only
   reaches classic WooCommerce buttons; the block checkout renders a
   wc-block-components-button that WooCommerce Blocks styles itself. This
   replaces the old "Checkout Pay Button Fix" WPCode snippet, which was written
   to un-hide this button under the previous theme and is no longer needed.
   --------------------------------------------------------------------------- */
.wc-block-components-checkout-place-order-button {
	background-color: #008641;
	color: #fff;
}

.wc-block-components-checkout-place-order-button:hover:not(:disabled),
.wc-block-components-checkout-place-order-button:focus:not(:disabled) {
	background-color: #00692f;
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Brand logo grid (replaces the logo-carousel-slider plugin).
   Plain responsive grid — no carousel JS, no owl.carousel stylesheets.
   --------------------------------------------------------------------------- */
/*
 * Flex-wrap rather than grid, deliberately.
 *
 * With `grid-template-columns: repeat(auto-fit, ...)` the nine logos filled a
 * five-column track and the second row held four, hard against the left edge,
 * leaving an empty fifth cell on the right. That read as "the section isn't
 * centred" — reported 2026-08-17. A wrapping flex row centres each line
 * independently, so 5 + 4 sits symmetrically. Grid cannot centre a short final
 * row; this is the reason for the change, not a style preference.
 */
.mantronics-logo-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px 48px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mantronics-logo-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 200px;
	margin: 0;
	padding: 0;
}

/*
 * Sources are 1200x400, so there is headroom: the previous 70px cap was
 * throwing away resolution, not protecting it. The artwork also carries its own
 * internal padding, which is why the marks read smaller than the box they sit
 * in — hence 96px rather than a like-for-like bump.
 */
.mantronics-logo-grid__item img {
	width: 100%;
	max-width: 220px;
	max-height: 96px;
	height: auto;
	object-fit: contain;
}

@media (max-width: 480px) {
	.mantronics-logo-grid {
		gap: 24px 28px;
	}

	.mantronics-logo-grid__item {
		flex: 0 1 40%;
	}
}

/* ---------------------------------------------------------------------------
   Contact Form 7 fields.

   CF7 renders inputs with a `size` attribute, which gives them an intrinsic
   width that ignores the container. On the contact page that pushed the layout
   to 366px inside a 320px viewport, so the page scrolled sideways on small
   phones. Forcing the wrap and controls fluid fixes it.
   --------------------------------------------------------------------------- */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	max-width: 100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Gravity Forms fieldsets.

   Gravity Forms wraps grouped fields in <fieldset><legend>. A <legend> sizes
   from its own content and does not respect the parent's width, and <fieldset>
   defaults to min-width:min-content — together they pushed the Service Request
   form on /support/ to 706px inside a 646px column, overflowing every viewport
   from 320px to 768px.
   --------------------------------------------------------------------------- */
.gform_wrapper fieldset,
.gform_wrapper .gfield {
	min-width: 0;
	max-width: 100%;
}

.gform_wrapper legend,
.gform_wrapper legend.gfield_label {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: 0;
	padding-right: 0;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
	max-width: 100%;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Block flow spacing.

   Shoptimizer is a classic theme: it ships theme.json (so spacing presets and
   --wp--style--block-gap resolve) but not core's layout stylesheet, which is
   what normally turns block-gap into margins between sibling blocks. Without
   it, stacked paragraphs and headings sit flush against each other.

   This supplies that one missing rule, using the theme's own fluid gap value
   rather than a fixed number, so it scales with the viewport like the rest of
   the spacing scale.
   --------------------------------------------------------------------------- */
.entry-content .wp-block-column > * + *,
.entry-content .wp-block-group > * + *,
.entry-content .wp-block-cover__inner-container > * + * {
	margin-block-start: var(--wp--style--block-gap, clamp(1rem, 4vw, 2rem));
}

/* ---------------------------------------------------------------------------
   Accessibility and small-screen corrections found by audit.
   --------------------------------------------------------------------------- */

/*
 * Footer menu links measured 38x21 — below the 44x44 minimum in WCAG 2.5.5
 * (Target Size) and Apple's HIG. Padding raises the hit area without changing
 * the visual rhythm of the list.
 */
.site-footer .menu li a,
.site-footer .widget_nav_menu li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-top: 4px;
	padding-bottom: 4px;
}

/*
 * Product category meta rendered at 10px, below the 12px floor where text stays
 * legible on a phone and iOS stops offering to zoom.
 */
.woocommerce div.product .product__categories,
.woocommerce div.product .product__categories a,
.product__categories,
.product__categories a {
	font-size: 12px;
}

/*
 * Shoptimizer's related-products carousel keeps its slide track at full width,
 * which pushed 660px of content into a 320px viewport on single product pages.
 */
.shoptimizer-plp-carousel-container,
.shoptimizer-plp-image-wrapper {
	max-width: 100%;
}

.shoptimizer-plp-carousel-container img {
	max-width: 100%;
	height: auto;
}

/*
 * Related products on single product pages.
 *
 * Shoptimizer gives each tile min-width:320px, intending the row to scroll
 * horizontally. On a 320px viewport the container doesn't scroll, so two tiles
 * measured 660px and pushed off-screen. Releasing the minimum lets the tiles
 * share the row like every other product grid on the site.
 */
@media (max-width: 600px) {
	.woocommerce .related.products ul.products li.product,
	.woocommerce .up-sells ul.products li.product {
		min-width: 0;
	}
}

/* ---------------------------------------------------------------------------
   Hero cover height.

   Sized against the viewport so the hero always occupies a consistent share of
   the screen rather than a fixed pixel height.

   svh (small viewport height) is the stable value on mobile: it ignores the
   browser chrome that shows and hides while scrolling, so the hero doesn't
   jump. vh is declared first as the fallback for browsers without svh.

   Capped with max-height because on a short landscape phone an uncapped vh
   would leave the hero taller than the content below it, and floored with
   min-height so it can't collapse on a very short window.
   --------------------------------------------------------------------------- */
.entry-content > .wp-block-cover:first-child {
	min-height: 62vh;
	min-height: 62svh;
	max-height: 620px;
}

@media (min-width: 783px) {
	.entry-content > .wp-block-cover:first-child {
		min-height: 72vh;
		min-height: 72svh;
		max-height: 760px;
	}
}

/* ---------------------------------------------------------------------------
   Hero framing on small screens.

   The hero photo is 16:9 and carries the wall sign on its right. At phone
   widths the cover crops in far enough that the sign is sliced through the
   middle and the headline lands on top of it. Biasing the crop left keeps the
   entrance and seating in frame and gives the copy a clean background, which
   reads better than a bisected logo.

   !important is needed because the block writes object-position inline.
   --------------------------------------------------------------------------- */
/*
 * Breakpoint is 992px, not 782px: that is where .col-full drops to 1em side
 * padding and, more importantly, where the theme's own full-width breakout
 * stops applying.
 *
 * The white frame: an `alignfull` cover is supposed to escape its container,
 * and on desktop it does — measured margin -47.5px each side, spanning the
 * full 1265px document. Below 992px that breakout does not apply, so the hero
 * sat inside .col-full's 15px padding and rendered 345px wide in a 375px page,
 * i.e. a white border down both sides. Reported from a phone 2026-08-21.
 *
 * -15px matches .col-full's `padding: 1em` at the theme's 15px root size.
 * Deliberately NOT `calc(50% - 50vw)`: 100vw includes the scrollbar gutter,
 * which measured 15px wider than the document here and would have introduced
 * horizontal scroll — the exact fault the 320-1920 sweep exists to catch.
 */
@media (max-width: 992px) {
	.entry-content > .wp-block-cover.alignfull:first-child,
	.entry-content > .mantronics-trust.alignfull,
	.entry-content > .mantronics-services.alignfull {
		margin-left: -15px;
		margin-right: -15px;
		width: calc(100% + 30px);
		max-width: none;
	}

	/*
	 * Framing. 24% pushed the crop hard left onto the window and chairs, which
	 * is why it read as a badly cropped photo rather than a reception desk.
	 * 52% 42% keeps the desk and the wall sign in frame behind the headline.
	 */
	.entry-content > .wp-block-cover:first-child .wp-block-cover__image-background {
		object-position: 52% 42% !important;
	}

}

/* ---------------------------------------------------------------------------
   Footer map embed.

   Mobile-first. The iframe is given an aspect-ratio box rather than the
   embed's hardcoded 600x450, so it fills the column at any width instead of
   overflowing on a phone. Slightly taller ratio on mobile where the column is
   full width, wider on desktop where it sits in a narrow third.
   --------------------------------------------------------------------------- */
.mantronics-map {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	max-width: 100%;
	overflow: hidden;
	border-radius: 6px;
	background: #1c1c1c;
}

.mantronics-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (min-width: 783px) {
	.mantronics-map {
		aspect-ratio: 4 / 3;
	}
}

/* ---------------------------------------------------------------------------
   Footer layout.

   Single column on phones with comfortable spacing between blocks, settling
   into the theme's columns once there's room. Footer links inherit the 44px
   tap target set earlier.
   --------------------------------------------------------------------------- */
.site-footer .widget {
	margin-bottom: 2rem;
}

.site-footer .widget:last-child {
	margin-bottom: 0;
}

.site-footer .widget-title {
	margin-bottom: 0.75rem;
}

@media (max-width: 782px) {
	.site-footer .widget p {
		margin-bottom: 0.5rem;
	}
}


/* ---------------------------------------------------------------------------
   Breathing room below product grids.

   Shoptimizer reveals the loop button on hover, anchored to the bottom of the
   card. The related-products section ended flush against the footer (both at
   the same y), so the revealed button and the card's hover shadow landed on
   the footer edge. Reserving space below the grid keeps the hover state clear
   of it.
   --------------------------------------------------------------------------- */
.related.products,
.up-sells.products,
.woocommerce-page .site-main > .woocommerce > ul.products:last-child {
	padding-bottom: var(--wp--preset--spacing--large, 2rem);
	margin-bottom: var(--wp--preset--spacing--medium, 1.5rem);
}

/* ---------------------------------------------------------------------------
   Empty category header panel.

   Shoptimizer gives .woocommerce-products-header a cream background
   (shoptimizer_archives_description_bg) and lays it out as description beside
   image. Categories with no description still render the panel, leaving a
   large empty cream block next to the image — visible on Low Volume and any
   other category without descriptive text.

   Dropping the panel styling when no .term-description is present keeps it for
   the categories that use it (Mailing Supplies) without the empty box
   elsewhere. Descriptions are the real fix; this stops it looking broken until
   they are written.
   --------------------------------------------------------------------------- */
header.woocommerce-products-header:not(:has(.term-description)) {
	display: block;
	background-color: transparent;
	overflow: visible;
}

header.woocommerce-products-header:not(:has(.term-description)) img {
	display: block;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   Touch target sizing — measured at 375px, 2026-08-13.

   WCAG 2.5.8 (AA) requires 24x24, which everything below already passed. These
   raise them to the 44px Apple HIG / Google recommend for comfortable tapping.
   That distinction matters: this is a conversion fix, not a compliance one, and
   the two elements that convert on a quote-driven site are the call-back button
   and the phone number.

   Before:  call-back button 345x35 · phone link 113x18 · menu toggle 60x30
            "Read more" 290x34 · cart link 46x29 · submenu links 26px tall
   --------------------------------------------------------------------------- */

/* Primary conversion action on every product page. */
.call-back-feature button {
	min-height: 44px;
}

/*
 * Catalogue call to action. Raising this lifts every loop tile by the same
 * amount, so the equal-height rule at the top of this file still holds.
 */
ul.products li.product a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

/*
 * Header controls — mobile only, and deliberately so.
 *
 * An earlier version of this rule set `display: inline-flex` on
 * button.menu-toggle unscoped. Shoptimizer hides that button at desktop with
 * `.menu-toggle { display: none }` (specificity 0,1,0); `button.menu-toggle` is
 * 0,1,1 and therefore won.  Result: the mobile hamburger appeared in the desktop
 * header and pushed it from 108px to 150px. Touch targets are a touch-device
 * concern, so scoping to the mobile breakpoint removes the risk entirely.
 *
 * Never set `display` on an element whose visibility the parent theme controls.
 */
@media (max-width: 782px) {
	button.menu-toggle,
	a.cart-contents {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}

	/* The "MENU" label sat at 10px, below this file's 12px floor. */
	button.menu-toggle .bar-text {
		font-size: 12px;
	}
}

/*
 * Phone links. Vertical padding on an inline element enlarges the hit area
 * without altering line box height, so surrounding copy does not reflow.
 */
a[href^="tel:"] {
	padding-top: 13px;
	padding-bottom: 13px;
}

@media (max-width: 782px) {
	/*
	 * Mobile menu only. The same links form the desktop mega-menu grid
	 * (ul.sub-menu > li.col-1-4), where forcing a height would break the columns.
	 */
	.sub-menu a.cg-menu-link.sub-menu-link {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/*
	 * Breadcrumbs ship as white-space: nowrap with an ellipsis. At 375px the
	 * trail needs 470px, so the product name truncates mid-word — the crumb a
	 * visitor most needs is the one that gets cut. Wrapping costs a second line.
	 */
	nav.woocommerce-breadcrumb {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}

/*
 * Second pass, same date. Two gaps found by re-measuring with the mobile menu
 * actually open — closed, every link reports 0x0 and looks fine.
 *
 * 1. Top-level menu links were missed above: the rule targeted .sub-menu only,
 *    and these sit outside it. Measured 270x34.
 * 2. "Manual" and "Automatic" measured 27px WIDE. They inherit the desktop
 *    mega-menu's four-column grid (li.col-1-4), which at 375px leaves each
 *    column ~27px. Stacking them full width is the fix; height was already 44.
 */
@media (max-width: 782px) {
	a.cg-menu-link.main-menu-link {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.main-navigation .sub-menu li.col-1-4,
	.main-navigation .sub-menu li[class*="col-"] {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}
}

/* ---------------------------------------------------------------------------
   Green navigation bar — 2026-08-13.

   The bar colour itself is Shoptimizer's own `shoptimizer_navigation_bg_color`
   customizer setting (#008641), not an override here. Only the hover state
   needs CSS, because the theme exposes a hover *text* colour but no hover
   *background*, and on a green bar a green text hover is invisible:

     white text on #008641 ............ 4.68:1  passes AA
     old hover #339e67 on #008641 ..... 1.39:1  invisible
     white text on #00692f ............ 6.86:1  the replacement

   So hover is carried by darkening the background instead of tinting the text.
   --------------------------------------------------------------------------- */

/*
 * One indicator, under the text.
 *
 * History, so this isn't re-litigated:
 *   1. #00692f background — drew a dark rectangle, read as a button. Rejected.
 *   2. box-shadow: inset 0 -3px 0 — drew the line at the *item's* bottom edge
 *      (the link is 60px tall, full bar height), so it sat at the bottom of the
 *      green bar rather than under the label, and read as a second line.
 *
 * text-decoration underlines the text itself, which is where the eye expects
 * it. text-underline-offset keeps it clear of the descenders. No layout shift,
 * and no geometry that depends on the item's height.
 *
 * Verified: Shoptimizer draws nothing at all on these links in any state —
 * no hover, focus, active, border, or pseudo-element rule matches them. Any
 * line in this bar is therefore ours, and there should only ever be one.
 */
/*
 * SCOPED TO DESKTOP, and it must stay that way.
 *
 * At <=992px Shoptimizer turns this very same .col-full-nav into the white
 * slide-out drawer (src/css/components/navigation-mobile.css:279). Unscoped,
 * the white below was therefore painting white text on a white panel and the
 * current item — plus anything hovered or tapped — became invisible. Reported
 * from a real phone on 2026-08-17.
 *
 * Same trap as the menu-toggle regression: this container is shared between
 * the green desktop bar and the white mobile drawer, so any colour set on it
 * needs a breakpoint. 992px is the theme's own boundary, not a guess.
 */
@media (min-width: 993px) {
	.col-full-nav .menu > li > a:hover,
	.col-full-nav .menu > li.current-menu-item > a,
	.col-full-nav .menu > li:hover > a {
		color: #ffffff;
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}
}

/*
 * The drawer is white, so it needs the opposite treatment: dark text, brand
 * green for the current page and for hover. Green on white measures 4.68:1.
 */
@media (max-width: 992px) {
	.col-full-nav .menu > li > a,
	.col-full-nav .menu > li > a:visited {
		color: #111111;
	}

	.col-full-nav .menu > li > a:hover,
	.col-full-nav .menu > li > a:focus,
	.col-full-nav .menu > li.current-menu-item > a,
	.col-full-nav .menu > li.current-menu-ancestor > a,
	.col-full-nav .menu > li.current-menu-parent > a {
		color: #008641;
		text-decoration: none;
	}
}

/*
 * Shoptimizer draws the cart price as a separate element that does not follow
 * shoptimizer_cart_color. Measured #111111 on the new bar = 4.03:1, under the
 * 4.5:1 needed for text.
 */
@media (min-width: 993px) {
	.col-full-nav .shoptimizer-cart .amount,
	.col-full-nav .cart-contents .amount,
	.col-full-nav .shoptimizer-cart .woocommerce-Price-amount {
		color: #ffffff;
	}
}

/* ---------------------------------------------------------------------------
   Enquiry call-to-action on quote-only products — 2026-08-18.

   Markup comes from mantronics_is_enquiry_product() in functions.php, which
   fires only where WooCommerce would otherwise render nothing: 51 of the 54
   products have no price and no add-to-cart, so the summary column beside the
   gallery was an empty panel on every one of them.

   Both buttons are >=44px tall, matching the touch-target work of 2026-08-13.
   --------------------------------------------------------------------------- */
.mantronics-enquiry {
	margin: 1.5rem 0 0;
	padding: 1.5rem;
	border: 1px solid #e3e6e8;
	border-radius: 4px;
	background: #fafbfb;
}

.mantronics-enquiry__lead {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #111111;
}

.mantronics-enquiry__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.mantronics-enquiry__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: 3px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Green on white for the primary action: 4.68:1 as white-on-green inverted. */
.mantronics-enquiry__btn--call {
	background: #008641;
	color: #ffffff;
	border: 2px solid #008641;
}

.mantronics-enquiry__btn--call:hover,
.mantronics-enquiry__btn--call:focus {
	background: #00692f;
	border-color: #00692f;
	color: #ffffff;
}

.mantronics-enquiry__btn--email {
	background: #ffffff;
	color: #008641;
	border: 2px solid #008641;
}

.mantronics-enquiry__btn--email:hover,
.mantronics-enquiry__btn--email:focus {
	background: #008641;
	color: #ffffff;
}

.mantronics-enquiry__note {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: #55595c;
}

/* One column on a phone, so neither button ends up narrower than a thumb. */
@media (max-width: 480px) {
	.mantronics-enquiry__actions {
		flex-direction: column;
	}

	.mantronics-enquiry__btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Product category header image — 2026-08-18.

   Shoptimizer prints the category thumbnail as `.cg-cat-image` inside
   `.archive-header` at its natural size. The thumbnails here are 1024x1024, so
   a category page opened with a full-width square graphic pushing the actual
   products below the fold, with a tall empty band above it. Reported as "I
   don't even know what this page is" on Multi-Channel Communications, which is
   fair: nothing identifying the page was visible without scrolling.

   Capping the height rather than the width keeps portrait and landscape
   thumbnails behaving the same.
   --------------------------------------------------------------------------- */
/* Selector corrected 2026-09-04: on the rendered page the image sits inside
   header.woocommerce-products-header (wrapped in <picture> by the WebP plugin),
   not .archive-header. The old selector matched nothing, so the cap never applied
   anywhere and category pages opened on an 889px image. Both kept, defensively. */
.woocommerce-products-header .cg-cat-image,
.archive-header .cg-cat-image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 260px;
	height: auto;
	margin: 0 auto 1.5rem;
	object-fit: contain;
}

@media (max-width: 782px) {
	.woocommerce-products-header .cg-cat-image,
	.archive-header .cg-cat-image {
		max-height: 180px;
	}
}

/* ---------------------------------------------------------------------------
   Homepage: trust line and "Sales, Service and Supplies" — 2026-09-03.

   Both are core blocks with their own classes; this only sets tone. The trust
   line is meant to read as a quiet caption under the hero, not a second
   headline. The service band gets a faint tint so it reads as a section rather
   than three paragraphs floating on white. Columns stack on their own below
   782px (core behaviour), so nothing here touches layout.
   --------------------------------------------------------------------------- */
.mantronics-trust {
	background: #f4f7f5;
	border-bottom: 1px solid #e3e9e5;
}

.mantronics-trust__line {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: #3d4a43;
}

.mantronics-trust__line strong {
	color: #008641;
}

.mantronics-services {
	background: #f9fbfa;
}

.mantronics-services__intro {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	color: #3d4a43;
}

.mantronics-services__cols h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}

.mantronics-services__cols p {
	color: #3d4a43;
	line-height: 1.6;
}

/* Brand green primary; outline secondary. Both >= 44px tall. */
.mantronics-services .wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	border-radius: 3px;
	font-weight: 600;
}

.mantronics-services__call .wp-block-button__link {
	background: #008641;
	color: #ffffff;
}

.mantronics-services__call .wp-block-button__link:hover,
.mantronics-services__call .wp-block-button__link:focus {
	background: #00692f;
	color: #ffffff;
}

.mantronics-services .is-style-outline .wp-block-button__link {
	border: 2px solid #008641;
	color: #008641;
	background: transparent;
}

.mantronics-services .is-style-outline .wp-block-button__link:hover,
.mantronics-services .is-style-outline .wp-block-button__link:focus {
	background: #008641;
	color: #ffffff;
}

@media (max-width: 782px) {
	.mantronics-trust__line {
		font-size: 0.95rem;
	}

	.mantronics-services .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.mantronics-services .wp-block-button,
	.mantronics-services .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
   About page on phones — 2026-09-04.
   The media-text block stacks its image on top at full width; the envelope
   photo is portrait, so it filled most of the first screen before any copy.
   Capped to roughly a third of the viewport, cropped rather than squashed.
   --------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.page-id-1709 .wp-block-media-text__media img {
		width: 100%;
		max-height: 34vh;
		object-fit: cover;
	}
}

/* ==========================================================================
   Dan's feedback, 2026-10-04
   ========================================================================== */

/* Request-a-quote form on enquiry products. Always in the markup, shown only
   when the "Request a Quote" anchor is followed (:target), so no JavaScript.
   scroll-margin keeps it clear of the sticky nav bar. */
.mantronics-quote {
	display: none;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	scroll-margin-top: 90px;
}
.mantronics-quote:target {
	display: block;
}
.mantronics-quote__title {
	margin: 0 0 1rem;
	font-size: 1.125rem;
}
.mantronics-quote .wpcf7 input[type="text"],
.mantronics-quote .wpcf7 input[type="email"],
.mantronics-quote .wpcf7 input[type="tel"],
.mantronics-quote .wpcf7 textarea {
	width: 100%;
}

/* "Select options" on supply cards. The Mailing Supplies WPCode snippet sets
   these buttons to width: 100%, but Shoptimizer anchors them 20px from the left,
   so on hover they ran 19px past the right edge of the card. Anchor to the left
   edge and let the 100% width fill the card exactly. Scoped to that page: other
   grids use Shoptimizer's own inset and were already centred. */
body.tax-product_cat.term-supplies ul.products li.product .button {
	left: 0;
}

/* Contact Supplies form under the supplies grid. */
.mantronics-supplies-contact {
	clear: both;
	max-width: 760px;
	margin: 3rem auto 1rem;
	padding: 2rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	background: #f8f8f8;
}
.mantronics-supplies-contact h2 {
	margin-top: 0;
}
@media (max-width: 782px) {
	.mantronics-supplies-contact {
		padding: 1.25rem;
	}
}

/* Staging-only notice on cart and checkout (printed from functions.php). */
.mantronics-staging-notice {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid #008641;
	background: #eef7f1;
	color: #111;
}