/*
 * timc-theme stylesheet. Colors/type/layout values are sourced from the
 * live-site design audit (see migration/content-reference for raw notes).
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%; /* 1rem = 10px, matches the live site's sizing base */
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.6rem;
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 var(--space-sm);
	color: var(--color-text-strong);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-primary);
}

ul {
	margin: 0;
	padding: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-xs) var(--space-sm);
	z-index: 10000;
}
.skip-link:focus {
	top: 0;
}

.btn {
	display: inline-block;
	padding: 1.2rem 2.8rem;
	border-radius: 999px;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	font-family: var(--font-heading);
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.btn:hover {
	background: var(--color-primary-hover);
	color: #fff;
}
.btn--alt {
	background: var(--color-cta-alt);
}
.btn--alt:hover {
	background: var(--color-primary-hover);
}

/* Layout containers */
.container,
.site-header__sticky-inner,
.site-footer__widgets,
.front-page section > .container,
.entry-content,
.page-content,
.shop-main .container-inner {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-sm);
	padding-right: var(--space-sm);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: relative;
}

.site-header__infobar {
	background: #EEF0F4;
}
.site-header__infobar-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0.8rem var(--space-sm);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}
.site-header__tagline {
	margin: 0;
	font-family: var(--font-nav);
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-navy);
}
.contact-inline-list {
	display: flex;
	gap: var(--space-lg);
	list-style: none;
	font-family: var(--font-nav);
}
.contact-inline-list__item {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.contact-inline-list__icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--color-navy);
}
.contact-inline-list__text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.contact-inline-list__label {
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--color-text-muted);
}
.contact-inline-list a {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--color-text-strong);
	text-decoration: none;
}

.site-header__sticky {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--header-gradient);
	border-bottom: 3px solid var(--color-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.site-header__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 1.2rem var(--space-sm);
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.site-branding {
	flex: 0 0 auto;
}
.site-branding {
	padding: 0.4rem 0;
	display: flex;
	align-items: center;
}
.site-branding img {
	max-height: 8rem;
	width: auto;
	display: block;
}
.site-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 2rem;
	text-decoration: none;
	color: var(--color-navy);
}

.primary-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	list-style: none;
}
.primary-menu > li {
	position: relative;
}
.primary-menu > li > a {
	display: block;
	padding: 1rem 0;
	font-family: var(--font-nav);
	font-size: 1.7rem;
	font-weight: 400;
	text-decoration: none;
	color: var(--color-navy);
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a {
	color: var(--color-primary);
}
/* Caret on top-level items that open a dropdown (About Us, Products), so
   desktop visitors have the same "this expands" cue mobile already gives
   via its +/- toggle button. */
.primary-menu > li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.primary-menu > li.menu-item-has-children > a::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 0.4em solid transparent;
	border-right: 0.4em solid transparent;
	border-top: 0.45em solid currentColor;
	transition: transform 0.15s ease;
}
.primary-menu > li.menu-item-has-children.is-open > a::after {
	transform: rotate(180deg);
}

/* Standard dropdown (About Us, and 2nd/3rd level lists inside the mega menu) */
.primary-menu .sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 26rem;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border-radius: var(--radius);
	padding: var(--space-xs) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 10;
}
.primary-menu > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.primary-menu .sub-menu a {
	display: block;
	padding: 0.8rem 1.6rem;
	color: var(--color-navy);
	text-decoration: none;
	font-size: 1.4rem;
	white-space: nowrap;
}
.primary-menu .sub-menu a:hover {
	color: var(--color-primary-hover);
	background: var(--color-panel-cream);
}
/* Scoped to an actually-open top-level item: without the `> li.is-open`
   guard, this unconditionally forced nested sub-menus (e.g. every Products
   mega-menu column) to visibility:visible even while fully closed. Opacity
   0 on the closed ancestor still hid them visually, but visibility:visible
   on the descendant kept them hit-testable -- so an invisible Products
   column could silently intercept clicks meant for the About Us dropdown
   (or anything else) rendered underneath it. */
.primary-menu > li.is-open .sub-menu .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	background: transparent;
	padding-left: var(--space-sm);
}
.primary-menu .sub-menu .sub-menu a {
	font-size: 1.3rem;
	color: var(--color-text-muted);
}

/* Mega menu (Products): top-level dropdown becomes a full multi-column panel */
.primary-menu .menu-item-mega {
	position: static;
}
.primary-menu .menu-item-mega > .sub-menu {
	left: 0;
	right: 0;
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
	padding: var(--space-sm) var(--space-lg);
	min-width: 0;
}
.primary-menu .menu-item-mega > .sub-menu > li {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
}
.primary-menu .menu-item-mega > .sub-menu > li + li {
	border-left: 1px solid var(--color-border);
	padding-left: var(--space-lg);
}
.primary-menu .menu-item-mega > .sub-menu > li > a {
	font-weight: 700;
	color: var(--color-primary);
	padding-left: 1.6rem;
	pointer-events: none;
	text-transform: uppercase;
	font-size: 1.2rem;
	letter-spacing: 0.04em;
}
/* Item Categories' third-level items (e.g. Laboratory Consumables' 8
   sub-types, or the single "Sub Categorization Will Be Given" placeholder
   under Laboratory Instruments) used to render inline and inflate that one
   column far past the other two, forcing a cramped internal scroll that
   clipped rows mid-line with no visible scrollbar. They're shown instead as
   a flyout panel beside the item (opened via .is-open, wired up in
   main.js), so the column itself stays flat and the same shape as
   Industries/Brands, while the sub-categories are still reachable on
   desktop -- not just from the mobile accordion menu and each category's
   own archive page. */
.primary-menu .menu-item-mega > .sub-menu > li > .sub-menu > li {
	position: relative;
}
.primary-menu .menu-item-mega > .sub-menu > li > .sub-menu > li > .sub-menu {
	position: absolute;
	top: 0;
	left: 100%;
	min-width: 22rem;
	max-height: min(60vh, 24rem);
	overflow-y: auto;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border-radius: var(--radius);
	padding: var(--space-xs) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 11;
}
.primary-menu .menu-item-mega > .sub-menu > li > .sub-menu > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
/* Same "this expands" caret as the top-level nav items, but pointing at the
   flyout (sideways, not down) since that's the direction it opens in. */
.primary-menu .menu-item-mega > .sub-menu > li > .sub-menu > li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.primary-menu .menu-item-mega > .sub-menu > li > .sub-menu > li.menu-item-has-children > a::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 0.35em solid transparent;
	border-bottom: 0.35em solid transparent;
	border-left: 0.4em solid currentColor;
}
.primary-menu .menu-item-mega > .sub-menu > li > .sub-menu > li.menu-item-has-children.is-open > a {
	color: var(--color-primary-hover);
	background: var(--color-panel-cream);
}
.primary-menu .menu-item-mega > .sub-menu {
	max-height: min(70vh, 30rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary) var(--color-panel-cream);
}
.primary-menu .menu-item-mega > .sub-menu::-webkit-scrollbar {
	width: 6px;
}
.primary-menu .menu-item-mega > .sub-menu::-webkit-scrollbar-track {
	background: var(--color-panel-cream);
}
.primary-menu .menu-item-mega > .sub-menu::-webkit-scrollbar-thumb {
	background: var(--color-primary);
	border-radius: 3px;
}
.primary-menu .sub-menu a {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
/* Each column shows its first 5 items; the rest are toggled in by JS
   (inc/nav-menu.php / main.js) via a "View N More" button rather than
   dumping 34 brands into view at once. */
.mega-view-more {
	list-style: none;
	margin-top: 0.4rem;
}
.mega-view-more__btn {
	background: none;
	border: none;
	color: var(--color-primary);
	font-weight: 600;
	font-size: 1.3rem;
	padding: 0.6rem 1.6rem;
	cursor: pointer;
}
.mega-view-more__btn:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.site-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}
.mobile-contact {
	display: none;
}
.search-toggle {
	background: none;
	border: none;
	color: var(--color-navy);
	cursor: pointer;
	padding: 0.6rem;
}

.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 4rem;
	height: 4rem;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
}
.mobile-menu-toggle__bar {
	display: block;
	height: 2px;
	background: #fff;
	margin: 0 auto;
	width: 2rem;
}

.mobile-navigation {
	background: #fff;
	border-top: 1px solid var(--color-border);
}
.mobile-menu,
.mobile-menu .sub-menu {
	list-style: none;
}
.mobile-menu li {
	position: relative;
}
.mobile-menu a {
	display: block;
	padding: 1.2rem 5rem 1.2rem var(--space-sm);
	color: var(--color-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
}
.mobile-menu a:hover {
	color: var(--color-gold-accent);
}
.mobile-menu .sub-menu {
	padding-left: var(--space-sm);
	max-height: 0;
	overflow: hidden;
}
.mobile-menu li.is-open > .sub-menu {
	max-height: none;
}
.mobile-menu__toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 4.8rem;
	height: 100%;
	background: none;
	border: none;
	border-left: 1px solid var(--color-border);
	cursor: pointer;
}
.mobile-menu__toggle::before {
	content: "+";
	font-size: 2rem;
	color: var(--color-navy);
}
.mobile-menu li.is-open > .mobile-menu__toggle::before {
	content: "\2212";
}

.search-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 10000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 12vh;
}
.search-modal[hidden] {
	display: none;
}
.search-modal__form {
	background: #fff;
	padding: var(--space-md);
	border-radius: var(--radius);
	display: flex;
	gap: var(--space-xs);
	width: min(60rem, 90vw);
}
.search-modal__form input[type="search"] {
	flex: 1 1 auto;
	padding: 1rem;
	font-size: 1.6rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.search-modal__form button {
	padding: 1rem 2rem;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
}

@media (max-width: 960px) {
	.site-header__infobar {
		display: none;
	}
	.primary-navigation {
		display: none;
	}
	.mobile-menu-toggle {
		display: flex;
	}
	.site-header__actions {
		margin-left: auto;
	}
	.mobile-contact {
		display: flex;
		flex-direction: column;
		line-height: 1.3;
		text-align: right;
		text-decoration: none;
		font-family: var(--font-nav);
		color: var(--color-navy);
	}
	.mobile-contact__label {
		font-size: 1.2rem;
		font-weight: 500;
	}
	.mobile-contact__phone {
		font-size: 1.4rem;
		font-weight: 700;
	}
}

/* ==========================================================================
   Footer — branded (homepage) variant
   ========================================================================== */
.site-footer--branded {
	background: var(--color-footer-bg);
	color: #fff;
	margin-top: var(--space-xl);
}
.site-footer--branded .footer-infobar {
	border-bottom: 1px solid var(--color-footer-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	justify-content: space-between;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: var(--space-lg) var(--space-sm);
}
.site-footer--branded .footer-infobar__item h3 {
	color: var(--color-footer-heading);
	font-size: 1.6rem;
	margin-bottom: 0.4rem;
}
.site-footer--branded .footer-infobar__item p {
	margin: 0;
	color: #fff;
}
.site-footer--branded .site-footer__widgets {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: var(--space-lg) var(--space-sm);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}
.site-footer--branded .footer-column h3 {
	color: var(--color-footer-heading);
	font-size: 1.8rem;
}
.site-footer--branded .footer-menu {
	list-style: none;
}
.site-footer--branded .footer-menu a {
	font-family: var(--font-footer-nav);
	font-size: 1.8rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0.6rem 0;
}
.site-footer--branded .footer-menu a:hover {
	color: var(--color-primary);
}
.site-footer--branded .social-icons {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	list-style: none;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--space-sm) var(--space-lg);
}
.site-footer--branded .social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.site-footer--branded .social-icons svg {
	width: 22px;
	height: 22px;
}
.site-footer--branded .social-icons a:hover,
.site-footer--branded .social-icons a:focus-visible {
	color: #fff;
	border-color: transparent;
	transform: translateY(-3px);
}
.site-footer--branded .social-icons li:nth-child(1) a:hover,
.site-footer--branded .social-icons li:nth-child(1) a:focus-visible {
	background: #1877f2;
}
.site-footer--branded .social-icons li:nth-child(2) a:hover,
.site-footer--branded .social-icons li:nth-child(2) a:focus-visible {
	background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
}
.site-footer--branded .social-icons li:nth-child(3) a:hover,
.site-footer--branded .social-icons li:nth-child(3) a:focus-visible {
	background: #0a66c2;
}
.site-footer--branded .social-icons li:nth-child(4) a:hover,
.site-footer--branded .social-icons li:nth-child(4) a:focus-visible {
	background: #25d366;
}
.site-footer--branded .social-icons li:nth-child(5) a:hover,
.site-footer--branded .social-icons li:nth-child(5) a:focus-visible,
.site-footer--branded .social-icons li:nth-child(6) a:hover,
.site-footer--branded .social-icons li:nth-child(6) a:focus-visible {
	background: var(--color-primary);
}
.site-footer--branded hr {
	border: none;
	border-top: 1px solid var(--color-footer-border);
	margin: 0;
}
.site-footer__credit {
	margin-top: 0.4rem;
	font-size: 1.3rem;
	opacity: 0.85;
}
.site-footer__credit a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}
.site-footer__credit a:hover {
	color: var(--color-footer-heading);
}
.site-footer--branded .site-footer__bottom {
	text-align: center;
	padding: var(--space-md);
	color: #fff;
	font-size: 1.4rem;
}

.floating-actions {
	position: fixed;
	right: 2rem;
	bottom: 0;
	z-index: 500;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1rem;
}
.floating-actions__enquiry {
	/* Sticky vertical tab on the right edge, vertically centred */
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 500;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	padding: 2rem 1.1rem;
	border-radius: var(--radius) 0 0 var(--radius);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.08em;
	box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
	transition: background 0.15s ease, padding 0.15s ease;
}
.floating-actions__enquiry:hover {
	background: var(--color-primary-hover);
	padding-right: 1.5rem;
}
.floating-actions__whatsapp {
	position: fixed;
	right: 2rem;
	bottom: 7rem;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: #25D366;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.scroll-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 50%;
	background: #000;
	color: #fff;
	border: none;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 500;
}
.scroll-to-top.is-visible {
	display: flex;
}

/* ==========================================================================
   Footer — generic (default WordPress-widget) variant, used on every page
   other than the homepage, matching the live site's inconsistency.
   ========================================================================== */
.site-footer--generic {
	background: var(--color-bg-alt);
	margin-top: var(--space-xl);
	padding: var(--space-lg) 0 var(--space-md);
	border-top: 1px solid var(--color-border);
}
.site-footer--generic .footer-menu {
	list-style: none;
	display: flex;
	gap: var(--space-md);
	justify-content: center;
	margin-bottom: var(--space-lg);
}
.site-footer--generic .footer-menu a {
	color: var(--color-text);
	text-decoration: none;
	font-weight: 600;
}
.site-footer--generic .site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
}
.site-footer--generic .footer-widget-title {
	font-size: 1.6rem;
}
.site-footer--generic .site-footer__bottom {
	text-align: center;
	margin-top: var(--space-lg);
	color: var(--color-text-muted);
	font-size: 1.3rem;
}

@media (max-width: 782px) {
	.site-footer--branded .site-footer__widgets,
	.site-footer--generic .site-footer__widgets {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Homepage
   ========================================================================== */
.front-page section {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}
.section-eyebrow {
	display: block;
	text-align: center;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 2.2rem;
	color: var(--color-primary);
	margin-bottom: var(--space-xs);
}
.section-title {
	text-align: center;
	font-size: 3.8rem;
	font-weight: 800;
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-lg);
}
.section-intro {
	text-align: center;
	max-width: 70rem;
	margin: 0 auto var(--space-lg);
	color: var(--color-text-muted);
}
.section-subtitle {
	text-align: center;
	font-family: var(--font-heading);
	font-size: 2.2rem;
	font-weight: 700;
	margin: -1.5rem 0 var(--space-md);
}

/* Hero: text left, product image right -- contained to the site width
   rather than a full-bleed banner, and a fixed height instead of an
   aspect-ratio, so it stays a sensible size on wide monitors instead of
   growing past 700-900px tall. */
.hero-slider-section {
	background: var(--color-bg);
}
.hero-slider {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xl);
	min-height: 44rem;
	padding: var(--space-xl) var(--space-sm);
}
.hero-slider__content {
	flex: 1 1 44rem;
	max-width: 54rem;
}
.hero-slider__content h1 {
	font-size: 3.4rem;
	color: var(--color-text-strong);
	margin-bottom: var(--space-sm);
}
.hero-slider__content p {
	font-size: 1.8rem;
	color: var(--color-text);
	margin: 0;
}
.hero-slider__media {
	position: relative;
	flex: 1 1 44rem;
	max-width: 52rem;
	height: 36rem;
}
.hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.hero-slider__slide.is-active {
	opacity: 1;
}
.hero-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@media (max-width: 782px) {
	.hero-slider {
		flex-direction: column;
		justify-content: flex-start;
		text-align: center;
		min-height: 0;
		padding: var(--space-lg) var(--space-sm);
	}
	.hero-slider__content {
		flex: 0 1 auto;
		max-width: 100%;
	}
	.hero-slider__media {
		flex: 0 1 auto;
		max-width: 100%;
		width: 100%;
		height: 28rem;
	}
}

/* Product range spotlight */
.product-range__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
}
.product-range__card {
	position: relative;
	background: var(--color-panel-cream);
	border-radius: 130px 40px 40px 40px;
	padding: var(--space-lg) var(--space-md) var(--space-md);
	text-align: center;
	overflow: hidden;
}
.product-range__card img {
	max-width: 55%;
	max-height: 18rem;
	object-fit: contain;
	margin: 0 auto var(--space-md);
}
.product-range__card h3 {
	font-size: 2.2rem;
}

/* Who we are */
.who-we-are {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: center;
}
.who-we-are__media img {
	border-radius: var(--radius);
}

/* Mission */
.mission-list {
	list-style: none;
	display: flex;
	gap: var(--space-lg);
	margin-top: var(--space-md);
}
.mission-list li {
	flex: 1;
	text-align: center;
}

/* Testimonials: one review shown at a time, with manual prev/next arrows
   (see main.js) instead of the old auto-scrolling multi-card strip. */
.testimonials-section .section-eyebrow {
	color: var(--color-text-strong);
}
.testimonial-slider {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}
.testimonial-slider__arrow {
	flex: 0 0 auto;
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 50%;
	border: none;
	background: var(--color-panel-cream);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.testimonial-slider__arrow:hover {
	background: var(--color-panel-pink);
}
.testimonial-track {
	flex: 1 1 auto;
	min-width: 0;
}
.testimonial-card {
	display: none;
	align-items: center;
	gap: var(--space-xl);
	background: var(--color-panel-cream);
	border-radius: 40px 40px 300px 40px;
	padding: var(--space-xl) var(--space-lg);
}
.testimonial-card.is-active {
	display: flex;
}
.testimonial-card__person {
	flex: 0 0 16rem;
	text-align: center;
	border-right: 1px solid var(--color-border);
	padding-right: var(--space-lg);
}
.testimonial-card__name {
	font-weight: 700;
	margin: 0 0 0.4rem;
}
.testimonial-card__location {
	color: var(--color-text-muted);
	margin: 0;
	font-size: 1.4rem;
}
.testimonial-card__content {
	flex: 1 1 auto;
	min-width: 0;
}
.testimonial-card__content h3 {
	margin: 0 0 var(--space-sm);
}
.testimonial-card__quote {
	font-size: 1.8rem;
	margin: 0;
}

/* Counters */
.counters {
	display: flex;
	justify-content: center;
	gap: var(--space-xl);
	text-align: center;
}
.counter {
	max-width: 24rem;
}
/* Desktop: each caption on a single line (stacks/wraps normally below 1100px) */
@media (min-width: 1100px) {
	.counters {
		gap: var(--space-md);
		flex-wrap: nowrap;
	}
	.counter {
		max-width: none;
	}
	.counter__caption {
		white-space: nowrap;
		font-size: 1.5rem;
	}
}
.counter__number {
	font-variant-numeric: tabular-nums;
	font-family: var(--font-body);
	font-size: 4rem;
	font-weight: 900;
	color: var(--color-primary);
}
.counter__caption {
	font-family: var(--font-body);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

/* Esteemed customers logos: auto-scrolling marquee slider. The PHP renders
   the logo set twice inside the track, and the track slides left by exactly
   one set's width, so the loop is seamless. Pauses on hover/focus; falls
   back to a wrapped static grid for visitors who prefer reduced motion. */
.logo-strip {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-strip__track {
	display: flex;
	width: max-content;
	animation: logo-marquee 70s linear infinite;
}
.logo-strip:hover .logo-strip__track {
	animation-play-state: paused;
}
.logo-strip__set {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--space-lg);
	padding-right: var(--space-lg);
}
.logo-strip img {
	flex: 0 0 auto;
	width: 14rem;
	height: 7rem;
	object-fit: contain;
}
@keyframes logo-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.logo-strip {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.logo-strip__track {
		animation: none;
		width: auto;
	}
	.logo-strip__set {
		flex-wrap: wrap;
		justify-content: center;
	}
	.logo-strip__set[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 782px) {
	.product-range__grid,
	.who-we-are {
		grid-template-columns: 1fr;
	}
	.mission-list {
		flex-direction: column;
	}
	.counters {
		gap: var(--space-md);
		flex-wrap: wrap;
	}
	.testimonial-card.is-active {
		flex-direction: column;
		text-align: center;
		padding: var(--space-lg);
		gap: var(--space-md);
		border-radius: 40px;
	}
	.testimonial-card__person {
		flex: 0 0 auto;
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--color-border);
		padding-right: 0;
		padding-bottom: var(--space-sm);
	}
	/* Arrows move below the card instead of sitting at its vertical center
	   -- with the card stacked tall on mobile, centered side arrows would
	   land awkwardly across the middle of the text. */
	.testimonial-slider {
		flex-wrap: wrap;
		justify-content: center;
	}
	.testimonial-track {
		order: 1;
		flex-basis: 100%;
	}
	.testimonial-slider__arrow {
		order: 2;
		width: 3.6rem;
		height: 3.6rem;
		margin-top: var(--space-sm);
	}
}

/* ==========================================================================
   Shop / category archive
   ========================================================================== */
.shop-main {
	padding: var(--space-lg) 0 var(--space-xl);
}
.shop-main .container-inner > h1,
.shop-main .page-title {
	text-align: center;
	font-size: 3.8rem;
	font-weight: 800;
	margin-bottom: var(--space-md);
}
/* Result count + sorting dropdown, wrapped into one row by the
   woocommerce_before_shop_loop hooks in inc/woocommerce.php. */
.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}
.woocommerce-result-count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1.4rem;
}
.woocommerce-ordering {
	margin: 0;
}
.woocommerce-ordering select.orderby {
	padding: 0.8rem 1.2rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
	color: var(--color-text);
	font-family: inherit;
	font-size: 1.4rem;
	cursor: pointer;
}
ul.products {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	padding: 0;
}
ul.products li.product {
	position: relative;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	text-align: center;
}
ul.products li.product .woocommerce-loop-product__link {
	/* Grid rows stretch every card to match the tallest one in that row
	   (e.g. a title that wraps to 2 lines) -- without height:100% here,
	   that extra space sits below this link, outside its clickable area. */
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
/* Sizes measured from the live timc.in catalog: image fills ~71% of the card
   width (centred, flush with the top), and the title is regular-weight body
   font at ~18px. */
ul.products li.product img {
	display: block;
	width: 71%;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background: #fff;
	padding: 0;
}
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.8rem;
	color: var(--color-text);
	padding: 2.2rem var(--space-sm) 2.6rem;
	margin: 0;
}
/* No price/SKU/rating on cards, matching the live catalog-only presentation. */
ul.products li.product .price,
ul.products li.product .star-rating {
	display: none;
}
.woocommerce-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap; /* long page lists wrap instead of widening the phone screen */
	gap: var(--space-xs);
	justify-content: center;
	margin-top: var(--space-lg);
}
.woocommerce-pagination a,
.woocommerce-pagination span {
	display: block;
	padding: 0.8rem 1.4rem;
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-text);
}
.woocommerce-pagination .current {
	background: var(--color-primary);
	color: #fff;
}

@media (max-width: 960px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	ul.products {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Single product
   ========================================================================== */
.single-product .container-inner {
	padding-top: var(--space-lg);
	/* Live site's product page content is ~1050px wide, so the image
	   (39% of it) comes out ~410px rather than filling a 1200px row. */
	max-width: 1070px;
}
.timc-breadcrumb {
	font-size: 1.3rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}
.timc-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.single-product div.product {
	display: grid;
	/* Proportions measured from the live site: image ~39% of the row, text
	   ~52%, with a wide gap between them. */
	grid-template-columns: 39fr 52fr;
	column-gap: 8.6%;
	row-gap: var(--space-lg);
	align-items: start;
}
/* Only the gallery (child 1) and summary (child 2) belong in that 2-column
   row. Everything hooked onto woocommerce_after_single_product_summary --
   the description panel and Related Products -- is also a direct child of
   div.product, so without this it silently landed in the grid too,
   rendering related products beside the description instead of below it
   (QA: TIMC_012). */
.single-product div.product > :nth-child(n+3) {
	grid-column: 1 / -1;
}
.single-product .woocommerce-product-gallery img {
	border-radius: var(--radius);
}
.single-product .product_title {
	font-size: 2.8rem;
}
.product-cta-row {
	display: flex;
	gap: var(--space-sm);
	margin: var(--space-md) 0;
	flex-wrap: wrap;
}
.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--space-md);
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	border: 1px solid #DBD7CC;
	padding: 1.3rem 1.6rem;
	text-align: left;
	font-size: 1.6rem;
	line-height: 1.4;
}
/* WooCommerce wraps each value in a <p>; its default bottom margin was
   making every row ~30px taller than the live site's compact rows. */
.woocommerce-product-attributes td p {
	margin: 0;
}
.woocommerce-product-attributes th {
	width: 40%;
}

.product-description-panel {
	background: var(--color-panel-pink);
	border-radius: var(--radius);
	padding: var(--space-lg);
	margin-top: var(--space-xl);
}
.product-description-panel p {
	margin: 0 0 var(--space-sm);
}
/* Some product descriptions include a pasted-in model-comparison table
   (e.g. Model / Weighing Capacity / Readability / Calibration Type) --
   this styles any table dropped into the description field generically,
   rather than depending on whatever classes it happened to be pasted in
   with. */
.product-description-panel table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--space-md);
}
.product-description-panel th,
.product-description-panel td {
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1.2rem 1.6rem;
	text-align: left;
}
.product-description-panel th {
	font-weight: 700;
}

.related.products {
	margin-top: var(--space-xl);
}
.related.products > h2 {
	text-align: center;
}
.related.products ul.products {
	grid-template-columns: repeat(4, 1fr);
}

/* Grid children must be allowed to shrink below their content's width, or one
   wide table (e.g. a pasted-in model table) stretches the whole page wider
   than a phone screen. Wide tables scroll sideways inside their own box. */
.single-product div.product > * {
	min-width: 0;
}
.product-description-panel table {
	min-width: 0 !important; /* pasted-in tables carry an inline min-width: 700px */
	width: 100% !important;
}
.product-description-panel p,
.product-description-panel th,
.product-description-panel td {
	font-size: 1.8rem;
	line-height: 1.8;
}
.product-description-panel th,
.product-description-panel td {
	border-color: #ccc;
	line-height: 1.5;
}
@media (max-width: 960px) {
	.product-description-panel table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}
}

@media (max-width: 960px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
	}
	.related.products ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.related.products ul.products {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Blog / news
   ========================================================================== */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
.news-card {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
}
.news-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 60%);
}
.news-card__title {
	position: relative;
	z-index: 1;
	padding: var(--space-md);
	font-size: 1.8rem;
	margin: 0;
	color: #fff;
}

@media (max-width: 960px) {
	.news-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.news-grid {
		grid-template-columns: 1fr;
	}
}

.news-main,
.single-post {
	padding-top: var(--space-lg);
	padding-bottom: var(--space-xl);
}
.single-post .entry-header {
	text-align: center;
}
.single-post .entry-meta {
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}
.entry-body {
	max-width: 80rem;
	margin: 0 auto;
}
.entry-body--with-image {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--space-lg);
	align-items: start;
	text-align: left;
}
.single-post .entry-content {
	text-align: center;
}
.entry-body--with-image .entry-content {
	text-align: left;
}
.entry-body--with-image .entry-thumbnail img {
	border-radius: var(--radius);
	width: 100%;
}
/* Thumbnails in generic post lists (search results etc.): centred in their box */
.post-card__thumb {
	display: block;
	text-align: center;
}
.post-card__thumb img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}
@media (max-width: 782px) {
	.entry-body--with-image {
		grid-template-columns: 1fr;
	}
	.entry-body--with-image .entry-content {
		text-align: center;
	}
}
.entry-share {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	justify-content: center;
	margin-top: var(--space-lg);
}
.entry-share__label {
	font-weight: 700;
}
.entry-share a {
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: transparent;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.entry-share svg {
	width: 22px;
	height: 22px;
}
.entry-share a:hover,
.entry-share a:focus-visible {
	color: #fff;
	border-color: transparent;
	transform: translateY(-3px);
}
.entry-share a[aria-label="Facebook"]:hover,
.entry-share a[aria-label="Facebook"]:focus-visible {
	background: #1877f2;
}
.entry-share a[aria-label="Twitter"]:hover,
.entry-share a[aria-label="Twitter"]:focus-visible {
	background: #000;
}
.entry-share a[aria-label="LinkedIn"]:hover,
.entry-share a[aria-label="LinkedIn"]:focus-visible {
	background: #0a66c2;
}

.more-posts {
	margin-top: var(--space-xl);
}
.more-posts .section-title {
	font-size: 2.6rem;
}
.more-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
.more-post-card {
	display: block;
	text-decoration: none;
	color: var(--color-text);
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	padding-bottom: var(--space-sm);
}
.more-post-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain; /* show the whole photo, whatever its shape */
	object-position: center;
	background: #fff;
}
.more-post-card h3 {
	font-size: 1.6rem;
	padding: 0 var(--space-sm);
	margin: var(--space-sm) 0 0.4rem;
}
.more-post-card__link {
	display: block;
	padding: 0 var(--space-sm);
	color: var(--color-primary);
	font-weight: 600;
	font-size: 1.3rem;
}
.more-post-card time {
	display: block;
	padding: 0.4rem var(--space-sm) 0;
	color: var(--color-text-muted);
	font-size: 1.2rem;
}

@media (max-width: 782px) {
	.more-posts__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-page-banner {
	background: #d9d9d9;
	padding: var(--space-lg) var(--space-sm);
	text-align: center;
}
.contact-page-banner h1 {
	margin: 0;
	font-size: 3.8rem;
	font-weight: 800;
}
.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
}
.contact-info h2 {
	color: var(--color-primary);
	font-size: 2.6rem;
}
/* Company name always on one line; font scales down with the screen width
   so the full name fits on phones too. */
.contact-info h2 {
	font-size: clamp(1rem, 3.5vw, 2.1rem);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.contact-feature-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: var(--space-md);
}
.contact-feature-list li {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
}
.contact-feature-list .icon {
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #fff;
}
.contact-feature-list h3 {
	margin-bottom: 0.2rem;
}
.contact-form-col h2 {
	color: var(--color-primary);
	text-align: center;
}
.enquiry-form .form-row {
	margin-bottom: var(--space-sm);
}
.enquiry-form .form-row--honeypot {
	position: absolute;
	left: -9999px;
}
.contact-layout {
	padding-top: var(--space-lg);
	padding-bottom: var(--space-xl);
}
.enquiry-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4rem;
}
.enquiry-form input,
.enquiry-form textarea {
	width: 100%;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #f3f3f3;
	font-family: inherit;
	font-size: 1.5rem;
}
.enquiry-form .form-row--captcha label {
	font-weight: 600;
	color: var(--color-text-strong);
}
.enquiry-form .form-success {
	background: #eaffea;
	border: 1px solid #7fcf7f;
	padding: var(--space-sm);
	border-radius: var(--radius);
}
.enquiry-form .form-error {
	background: #ffecec;
	border: 1px solid #f0a0a0;
	padding: var(--space-sm);
	border-radius: var(--radius);
}
.contact-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 6;
	margin-bottom: var(--space-xl);
	border-radius: var(--radius);
	overflow: hidden;
}
.contact-map iframe {
	position: absolute;
	inset: 0;
}

@media (max-width: 782px) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
	.contact-map {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Generic static pages (About, Partners, Customers, Career)
   ========================================================================== */
.static-page {
	padding-top: var(--space-lg);
	padding-bottom: var(--space-xl);
}
.static-page__section {
	max-width: 90rem;
	margin: 0 auto var(--space-xl);
}
.static-page__section h2 {
	color: var(--color-primary);
}

.logo-gallery {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
}
.logo-gallery__item {
	aspect-ratio: 16 / 9;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: var(--space-xs);
	cursor: zoom-in;
}
.logo-gallery__item img {
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 960px) {
	.logo-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

.career-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	max-width: 90rem;
	margin: 0 auto;
}
.career-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
}
.career-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
}
.career-card h2 {
	font-size: 1.9rem;
	margin-bottom: 0.2rem;
}
.career-card__location {
	color: var(--color-text-muted);
	margin: 0;
}
.career-card__summary {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	text-align: left;
}
.career-card__summary h3 {
	font-size: 1.5rem;
	margin: var(--space-sm) 0 0.4rem;
}
.career-card__summary p {
	margin: 0 0 var(--space-sm);
}
.career-card__summary ul {
	margin: 0 0 var(--space-sm);
	padding-left: 1.8rem;
	list-style: disc;
}
.career-card__summary li {
	margin-bottom: 0.4rem;
}
.career-card__meta {
	color: var(--color-text-muted);
	font-size: 1.9rem;
	margin: 0;
}
.career-card__summary .btn {
	margin-top: var(--space-sm);
}

/* ==========================================================================
   404 / Search / empty states
   ========================================================================== */
.error-404-content {
	text-align: center;
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}
.error-404-search {
	display: flex;
	gap: var(--space-xs);
	max-width: 50rem;
	margin: 0 auto var(--space-lg);
}
.error-404-search input {
	flex: 1 1 auto;
	padding: 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 1.5rem;
}
.error-404-links {
	display: flex;
	gap: var(--space-sm);
	justify-content: center;
}

.search-results-list {
	list-style: none;
	max-width: 70rem;
	margin: 0 auto var(--space-xl);
}
.search-results-list li {
	border-bottom: 1px solid var(--color-border);
}
.search-results-list a {
	display: block;
	padding: var(--space-sm) 0;
	color: var(--color-text);
	text-decoration: none;
	font-weight: 600;
}
.search-results-list a:hover {
	color: var(--color-primary);
}

.woocommerce-no-products-found,
.woocommerce-info {
	text-align: center;
	background: var(--color-panel-cream);
	border-radius: var(--radius);
	padding: var(--space-lg);
	color: var(--color-text);
	max-width: 60rem;
	margin: 0 auto;
	list-style: none;
}

.lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
	cursor: zoom-out;
}
.lightbox-overlay[hidden] {
	display: none;
}
.lightbox-overlay img {
	max-width: 100%;
	max-height: 90vh;
	background: #fff;
	border-radius: var(--radius);
	padding: var(--space-sm);
}

/* ==========================================================================
   Career application modal
   ========================================================================== */
.apply-notice {
	max-width: 90rem;
	margin: 0 auto var(--space-md);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius);
	font-weight: 600;
}
.apply-notice--success {
	background: #e6f4ea;
	color: #1e6b34;
}
.apply-notice--error {
	background: #fdeaea;
	color: #a31515;
}
body.has-apply-modal {
	overflow: hidden;
}
.apply-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: var(--space-lg) var(--space-sm);
}
.apply-modal[hidden] {
	display: none;
}
.apply-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(35, 31, 32, 0.65);
}
.apply-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: var(--radius);
	width: 100%;
	max-width: 80rem;
	padding: var(--space-lg);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.apply-modal__dialog h2 {
	text-align: center;
	font-size: 3.2rem;
	margin: 0 0 var(--space-lg);
}
.apply-modal__close {
	position: absolute;
	top: 1rem;
	right: 1.4rem;
	background: none;
	border: none;
	font-size: 3.2rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-text);
}
.apply-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-lg);
}
.apply-form__field {
	margin-bottom: var(--space-md);
}
.apply-form__field label {
	display: block;
	font-size: 1.7rem;
	margin-bottom: 0.6rem;
}
.apply-form .req {
	color: var(--color-cta-alt);
	font-size: 1.5rem;
}
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form input[type="file"],
.apply-form select,
.apply-form textarea {
	width: 100%;
	padding: 1.2rem 1.4rem;
	border: 2px solid #dfe6f3;
	border-radius: 4px;
	background: #fafafa;
	font-family: inherit;
	font-size: 1.6rem;
	color: var(--color-text);
}
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
	outline: none;
	border-color: #6b8cf0;
}
.apply-form__hint {
	margin: 0.8rem 0 0;
	font-size: 1.5rem;
	color: var(--color-text-muted);
}
.apply-form__row--hp {
	position: absolute;
	left: -9999px;
}
.apply-form__submit {
	min-width: 22rem;
	margin-top: var(--space-sm);
	background: var(--color-cta-alt);
	border: none;
	cursor: pointer;
}
@media (max-width: 640px) {
	.apply-form__grid {
		grid-template-columns: 1fr;
	}
	.apply-modal__dialog {
		padding: var(--space-md);
	}
	.apply-modal__dialog h2 {
		font-size: 2.4rem;
	}
}

/* Phones: compact header so logo + search + "Contact us" + menu button fit
   on one line without pushing the page wider than the screen. */
@media (max-width: 560px) {
	.site-header__inner {
		gap: var(--space-xs);
		padding: 0.8rem var(--space-sm);
	}
	.site-branding {
		padding: 0.3rem 0.6rem 0.3rem 0;
	}
	.site-branding img {
		max-height: 5rem;
	}
	.site-header__actions {
		gap: 0.4rem;
	}
	.search-toggle {
		padding: 0.4rem;
	}
	.mobile-contact__label {
		font-size: 1.1rem;
	}
	.mobile-contact__phone {
		font-size: 1.3rem;
	}
	.mobile-menu-toggle {
		width: 3.6rem;
		height: 3.6rem;
	}
}

@media (max-width: 560px) {
	.woocommerce-pagination a,
	.woocommerce-pagination span {
		padding: 0.7rem 1.1rem;
	}
}