/* ==========================================================================
   Nexen Material Handling – theme styles (loaded after Bootstrap 5.3)
   Tokens match the Nexen design system. Nexen Orange #D93C1A passes WCAG AA
   with white (4.55:1) and black (4.61:1) text.
   ========================================================================== */

:root {
	--nx-orange: #D93C1A;
	--nx-orange-dark: #B83217;
	--nx-orange-tint: #FBEDE8;
	--nx-ink: #111111;
	--nx-grey-900: #1A1A1A;
	--nx-grey-700: #4A4A4A;
	--nx-grey-600: #5E5E5E;
	--nx-grey-500: #8A8A8A;
	--nx-grey-300: #B8B8B8;
	--nx-grey-200: #E3E3E0;
	--nx-grey-100: #F4F4F2;
	--nx-success: #1E7A3C;
	--nx-warning: #9A5B00;
	--nx-error: #B42318;
	--nx-font: "Barlow", "Helvetica Neue", Arial, sans-serif;
	--nx-font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

	/* Bootstrap overrides */
	--bs-body-font-family: var(--nx-font);
	--bs-body-color: var(--nx-ink);
	--bs-body-font-size: 1rem;
	--bs-body-line-height: 1.5;
	--bs-secondary-color: var(--nx-grey-700);
	--bs-border-color: var(--nx-grey-200);
	--bs-primary: var(--nx-orange);
	--bs-primary-rgb: 217, 60, 26;
	--bs-link-color: var(--nx-orange-dark);
	--bs-link-color-rgb: 184, 50, 23;
	--bs-link-hover-color: var(--nx-ink);
	--bs-link-hover-color-rgb: 17, 17, 17;
	--bs-border-radius: 4px;
	--bs-border-radius-sm: 2px;
	--bs-border-radius-lg: 8px;
	--bs-focus-ring-color: rgba(217, 60, 26, .35);
	--bs-danger: var(--nx-error);
	--bs-danger-rgb: 180, 35, 24;
	--bs-success: var(--nx-success);
}

body { font-family: var(--nx-font); padding-bottom: 64px; }
@media (min-width: 992px) { body { padding-bottom: 0; } }

h1, .h1 { font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 2.5rem); line-height: 1.15; }
h2, .h2 { font-weight: 700; font-size: clamp(1.6rem, 1.3rem + 1vw, 1.875rem); line-height: 1.2; }
h3, .h3 { font-weight: 600; font-size: 1.375rem; }
.h4, h4 { font-weight: 600; }
.text-body-secondary { color: var(--nx-grey-700) !important; }

:focus-visible { outline: 2px solid var(--nx-orange); outline-offset: 2px; }

.nx-skip { position: absolute; left: 1rem; top: 1rem; z-index: 2000; background: #fff; padding: .5rem 1rem; }

.nx-eyebrow {
	font: 600 .875rem/1.3 var(--nx-font-display);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--nx-orange-dark);
	margin-bottom: .5rem;
}
.nx-eyebrow--light { color: #fff; }
.nx-display {
	font: 700 clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem)/.97 var(--nx-font-display);
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}
.nx-display--md { font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); }
.nx-measure { max-width: 46rem; }
.nx-on-dark-muted { color: var(--nx-grey-300); }
.nx-link-arrow { font-weight: 600; text-decoration: none; }

/* Buttons ---------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.5rem; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-width: 2px; }
.btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-font-size: 1.0625rem; }
.btn-primary {
	--bs-btn-bg: var(--nx-orange); --bs-btn-border-color: var(--nx-orange);
	--bs-btn-hover-bg: var(--nx-orange-dark); --bs-btn-hover-border-color: var(--nx-orange-dark);
	--bs-btn-active-bg: var(--nx-orange-dark); --bs-btn-active-border-color: var(--nx-orange-dark);
	--bs-btn-disabled-bg: var(--nx-orange); --bs-btn-disabled-border-color: var(--nx-orange);
	--bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-dark { --bs-btn-color: var(--nx-ink); --bs-btn-border-color: var(--nx-ink); --bs-btn-hover-bg: var(--nx-ink); --bs-btn-hover-border-color: var(--nx-ink); }
.btn-danger { --bs-btn-bg: #fff; --bs-btn-color: var(--nx-error); --bs-btn-border-color: var(--nx-error); --bs-btn-hover-bg: var(--nx-error); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--nx-error); }

.form-control, .form-select { border-color: var(--nx-grey-500); border-radius: 2px; min-height: 48px; font-size: 1rem; }
.form-control:focus, .form-select:focus { border-color: var(--nx-orange); box-shadow: 0 0 0 .2rem rgba(217, 60, 26, .2); }
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .25rem; }
.form-check-input { width: 1.25em; height: 1.25em; border-color: var(--nx-grey-500); }
.form-check-input:checked { background-color: var(--nx-orange); border-color: var(--nx-orange); }

/* Header ------------------------------------------------------------------ */
.nx-utility { background: var(--nx-ink); color: #fff; font-size: .8125rem; }
.nx-utility .container { min-height: 36px; }
.nx-utility-link { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.nx-utility-link:hover { color: #fff; text-decoration: underline; }
.nx-utility-breakdown { background: var(--nx-orange); color: #fff; font-weight: 600; text-decoration: none; padding: .5rem .75rem; display: inline-flex; align-items: center; gap: .35rem; }
.nx-utility-breakdown:hover { background: var(--nx-orange-dark); color: #fff; }

.nx-header { background: #fff; border-bottom: 1px solid var(--nx-grey-200); transition: box-shadow .2s; }
.nx-header.is-scrolled { box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.nx-header .navbar { min-height: 72px; padding: 0; }
.nx-logo img { height: 26px; width: auto; display: block; }
.nx-nav .nav-link { font-weight: 600; font-size: .9375rem; color: var(--nx-ink); padding: 0 .75rem !important; line-height: 72px; border-bottom: 3px solid transparent; }
.nx-nav .nav-link:hover, .nx-nav .nav-link.active, .nx-nav .show > .nav-link { border-bottom-color: var(--nx-orange); color: var(--nx-ink); }
.nx-nav .dropdown-toggle::after { display: none; }
.nx-mega { margin-top: 0 !important; border-top: 1px solid var(--nx-grey-200) !important; box-shadow: 0 12px 24px rgba(17, 17, 17, .08); }
.nx-mega-heading { display: block; font-weight: 700; color: var(--nx-ink); text-decoration: none; margin-bottom: .5rem; }
.nx-mega-heading:hover { color: var(--nx-orange-dark); }
.nx-mega-links a { display: block; padding: .3rem 0; color: var(--nx-grey-700); text-decoration: none; }
.nx-mega-links a:hover { color: var(--nx-orange-dark); }
.nx-icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--nx-grey-500); border-radius: 2px; }
.nx-search-panel { border-top: 1px solid var(--nx-grey-200); background: var(--nx-grey-100); }
.nx-region-list a { display: block; padding: .6rem 0; border-bottom: 1px solid var(--nx-grey-200); font-weight: 600; text-decoration: none; color: var(--nx-ink); }

@media (max-width: 991.98px) {
	.nx-nav .nav-link { line-height: 1.4; padding: .85rem 0 !important; border-bottom: 1px solid var(--nx-grey-200); }
	.nx-mega .container { padding-top: .5rem !important; padding-bottom: .5rem !important; }
	.nx-mega { box-shadow: none; }
}

/* Sections ------------------------------------------------------------------ */
.nx-section { padding: 64px 0; }
@media (max-width: 767.98px) { .nx-section { padding: 48px 0; } }
.nx-bg-grey { background: var(--nx-grey-100); }
.nx-border-top { border-top: 1px solid var(--nx-grey-200); }
.nx-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.nx-page-head { background: var(--nx-grey-100); border-bottom: 1px solid var(--nx-grey-200); padding: 24px 0 40px; }
.nx-breadcrumb .breadcrumb { font-size: .875rem; --bs-breadcrumb-divider-color: var(--nx-grey-600); --bs-breadcrumb-item-active-color: var(--nx-ink); }

/* Hero */
.nx-hero {
	position: relative; color: #fff; min-height: 640px; display: flex; align-items: flex-end;
	background: var(--nx-ink) var(--nx-hero-img, none) center / cover no-repeat;
}
.nx-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,.88) 0%, rgba(17,17,17,.7) 40%, rgba(17,17,17,0) 75%); }
.nx-hero .container { position: relative; padding-top: 96px; padding-bottom: 120px; }
.nx-hero-copy { max-width: 620px; }
.nx-hero-tag { font: 600 .875rem/1.3 var(--nx-font-display); letter-spacing: 1.5px; text-transform: uppercase; background: var(--nx-orange); display: inline-block; padding: 6px 10px; margin-bottom: 1rem; }
.nx-hero-text { font-size: 1.1875rem; line-height: 1.55; margin-bottom: 2rem; }
@media (max-width: 767.98px) { .nx-hero { min-height: 520px; } .nx-hero::before { background: linear-gradient(0deg, rgba(17,17,17,.9) 30%, rgba(17,17,17,.4) 100%); } }

/* Task tiles */
.nx-tasks { position: relative; }
.nx-tasks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); background: #fff; border: 1px solid var(--nx-grey-200); box-shadow: 0 4px 12px rgba(17,17,17,.06); margin-top: -56px; position: relative; }
.nx-task { padding: 28px 24px; text-decoration: none; color: var(--nx-ink); display: flex; flex-direction: column; gap: .5rem; border-right: 1px solid var(--nx-grey-200); }
.nx-task:last-child { border-right: 0; }
.nx-task:hover { background: var(--nx-grey-100); color: var(--nx-ink); }
.nx-task-title { font: 700 1.625rem/1.1 var(--nx-font-display); text-transform: uppercase; }
.nx-task-text { color: var(--nx-grey-700); font-size: .9375rem; }
.nx-task .nx-link-arrow { color: var(--nx-orange-dark); }
.nx-icon-box { width: 48px; height: 48px; background: var(--nx-orange-tint); color: var(--nx-orange); border-radius: 4px; display: flex; align-items: center; justify-content: center; }

/* Finder */
.nx-finder { background: var(--nx-grey-100); padding: 24px; border-radius: 4px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: end; }
.nx-finder-title { font-weight: 700; font-size: 1.375rem; margin: 0; }

/* Cards */
.nx-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--nx-grey-200); border-radius: 4px; overflow: hidden; color: var(--nx-ink); text-decoration: none; transition: box-shadow .15s; }
.nx-card:hover { box-shadow: 0 1px 2px rgba(17,17,17,.08), 0 4px 12px rgba(17,17,17,.06); color: var(--nx-ink); }
.nx-well { position: relative; background: var(--nx-grey-100); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.nx-well img { max-width: 86%; max-height: 86%; width: auto; height: auto; object-fit: contain; }
.nx-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.nx-card-title { font-weight: 600; font-size: 1.25rem; margin-bottom: .25rem; }
.nx-card-text { color: var(--nx-grey-600); font-size: .875rem; }
.nx-card-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--nx-grey-200); padding-top: 12px; margin: 8px 0 16px; font-variant-numeric: tabular-nums; }
.nx-card-specs dt { font-weight: 400; font-size: .75rem; color: var(--nx-grey-600); display: flex; align-items: center; gap: 4px; }
.nx-card-specs dt .nx-icon { color: var(--nx-orange-dark); }
.nx-card-specs dd { font-weight: 600; font-size: 1.0625rem; margin: 0; }
.nx-card-price { font-weight: 600; margin-bottom: 12px; }
.nx-card-actions { display: flex; gap: 8px; margin-top: auto; }
.nx-card-actions .btn { flex: 1; --bs-btn-padding-x: .75rem; font-size: .9375rem; min-height: 44px; }
.nx-badge { position: absolute; top: 12px; left: 12px; background: #fff; font-weight: 600; font-size: .75rem; padding: 4px 8px; border-radius: 2px; border: 1px solid; display: inline-flex; align-items: center; gap: 4px; }
.nx-badge--ok { color: var(--nx-success); border-color: var(--nx-success); }
.nx-badge--warn { color: var(--nx-warning); border-color: var(--nx-warning); }
.nx-product-facts .nx-badge { position: static; }
.nx-por { font-weight: 600; }

/* Tiles, chips, stats */
.nx-tile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px; border: 1px solid var(--nx-grey-200); border-radius: 4px; color: var(--nx-ink); text-decoration: none; font-weight: 600; font-size: 1.0625rem; height: 100%; }
.nx-tile .nx-icon { color: var(--nx-ink); flex: none; }
.nx-tile:hover { border-color: var(--nx-ink); color: var(--nx-ink); }
.nx-tile-arrow { color: var(--nx-orange); }
.nx-chip { display: inline-block; padding: 8px 14px; border: 1px solid var(--nx-grey-500); border-radius: 999px; color: var(--nx-ink); text-decoration: none; font-weight: 600; font-size: .9375rem; background: #fff; }
.nx-chip:hover { border-color: var(--nx-orange); color: var(--nx-orange-dark); }
.nx-stat { font: 700 2.5rem/1.1 var(--nx-font-display); margin-bottom: .5rem; }

/* Showcase + dealer band + newsletter */
.nx-showcase { position: relative; color: #fff; min-height: 560px; display: flex; align-items: center; background: var(--nx-ink) var(--nx-showcase-img, none) center / cover no-repeat; }
.nx-showcase::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,0) 30%, rgba(17,17,17,.82) 62%, rgba(17,17,17,.92) 100%); }
.nx-showcase .container { position: relative; padding: 64px 12px; }
.nx-showcase-copy { max-width: 500px; }
@media (max-width: 991.98px) { .nx-showcase::before { background: rgba(17,17,17,.75); } }
.nx-dealer-band { background: var(--nx-ink); color: #fff; padding: 56px 0; }
.nx-newsletter { background: var(--nx-ink); color: #fff; padding: 64px 0; border-top: 3px solid var(--nx-orange); }
.nx-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.nx-ticks .nx-icon { color: var(--nx-orange); flex: none; margin-top: 2px; }
.nx-card-form { background: #fff; color: var(--nx-ink); border: 1px solid var(--nx-grey-200); border-radius: 8px; padding: 28px; }

/* Areas */
.nx-area-county { font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: .5rem; }
.nx-area-county .nx-icon { color: var(--nx-orange); }
.nx-area-towns li { padding: 2px 0; }

/* Prose */
.nx-prose { font-size: 1.0625rem; line-height: 1.65; color: var(--nx-grey-700); }
.nx-prose h2, .nx-prose h3 { color: var(--nx-ink); margin-top: 2rem; }
.nx-prose--cols { columns: 2 320px; column-gap: 40px; }
.nx-prose--cols > * { break-inside: avoid; }
.nx-prose--cols h2 { column-span: all; margin-top: 0; }
.nx-faq .accordion-button { font-weight: 600; font-size: 1.0625rem; }
.nx-faq .accordion-button:not(.collapsed) { background: var(--nx-orange-tint); color: var(--nx-ink); box-shadow: none; }
.nx-faq { --bs-accordion-border-radius: 2px; --bs-accordion-inner-border-radius: 2px; --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(217,60,26,.25); }
.nx-cta-panel { background: var(--nx-grey-100); border-radius: 8px; padding: 28px; }
.nx-post-card { position: relative; border-top: 3px solid var(--nx-ink); padding-top: 16px; }

/* Shop */
.nx-filters-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--nx-ink); padding-bottom: 12px; }
.nx-filter-group { border: 0; border-bottom: 1px solid var(--nx-grey-200); padding: 16px 0; margin: 0; }
.nx-filter-title { font-weight: 600; font-size: .9375rem; margin-bottom: 8px; float: none; }
.nx-filters .form-check { padding: 3px 0 3px 1.75em; }
.nx-shop-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.nx-shop-toolbar .woocommerce-result-count { margin: 0; color: var(--nx-grey-700); }
.nx-shop-toolbar .woocommerce-ordering { margin: 0; }
.nx-shop-toolbar .woocommerce-ordering select { min-height: 44px; border: 1px solid var(--nx-grey-500); border-radius: 2px; padding: 0 12px; }
.woocommerce-pagination ul.page-numbers { display: flex; gap: 6px; list-style: none; padding: 0; border: 0 !important; }
.woocommerce-pagination .page-numbers li { border: 0 !important; }
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--nx-grey-200) !important; border-radius: 2px; }
.woocommerce-pagination .page-numbers .current { background: var(--nx-ink) !important; color: #fff !important; }

/* Product page */
.nx-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.nx-gallery .woocommerce-product-gallery__wrapper { background: var(--nx-grey-100); border-radius: 4px; }
.nx-gallery .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 12px !important; }
.nx-gallery .flex-control-thumbs li { width: auto !important; }
.nx-gallery .flex-control-thumbs img { background: var(--nx-grey-100); border-radius: 4px; border: 2px solid transparent; }
.nx-gallery .flex-control-thumbs img.flex-active { border-color: var(--nx-orange); }
.nx-spec-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--nx-grey-200); border: 1px solid var(--nx-grey-200); border-radius: 4px; overflow: hidden; margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.nx-spec-tile { background: #fff; padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.nx-spec-tile .nx-icon { color: var(--nx-orange-dark); flex: none; }
.nx-spec-label { font-size: .8125rem; color: var(--nx-grey-600); }
.nx-spec-value { font-weight: 600; font-size: 1.375rem; line-height: 1.3; }
.nx-product-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 600; font-size: .9375rem; margin-bottom: 20px; }
.nx-product-facts li { display: flex; align-items: center; gap: 6px; }
.nx-product-facts .nx-icon { color: var(--nx-orange-dark); }
.nx-price { font-weight: 600; font-size: 1.375rem; }
.nx-price .price { color: var(--nx-ink) !important; font-size: inherit !important; }
.nx-section-nav { position: sticky; top: 72px; z-index: 900; background: #fff; border-top: 1px solid var(--nx-grey-200); border-bottom: 1px solid var(--nx-grey-200); }
.nx-section-nav .container { display: flex; gap: 32px; overflow-x: auto; white-space: nowrap; }
.nx-section-nav a { padding: 16px 0; font-weight: 600; color: var(--nx-ink); text-decoration: none; border-bottom: 3px solid transparent; }
.nx-section-nav a:hover, .nx-section-nav a.is-active { border-bottom-color: var(--nx-orange); }
[id="configure"], [id="features"], [id="specs"], [id="related"], [id="enquire"] { scroll-margin-top: 140px; }
.nx-feature .nx-icon { color: var(--nx-orange-dark); }
.nx-spec-table { font-variant-numeric: tabular-nums; }
.nx-spec-table th[scope="row"] { color: var(--nx-grey-600); font-weight: 400; width: 55%; }
.nx-spec-table td { font-weight: 600; }
.nx-spec-group th { font: 600 .8125rem/1.3 var(--nx-font-display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--nx-orange-dark) !important; border-bottom: 2px solid var(--nx-ink) !important; padding-top: 24px !important; }
.related.products > h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1.5rem; }

/* WooCommerce notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--nx-orange) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--nx-orange) !important; }

/* Footer */
.nx-footer { background: var(--nx-grey-900); color: #fff; padding: 56px 0 32px; font-size: .9375rem; }
.nx-footer a { color: #fff; text-decoration: none; line-height: 2; }
.nx-footer a:hover { color: #fff; text-decoration: underline; }
.nx-footer ul { padding: 0; list-style: none; margin: 0; }
.nx-footer-brand { font: 700 1.375rem/1.2 var(--nx-font-display); text-transform: uppercase; }
.nx-footer-title { font-weight: 600; margin-bottom: .5rem; }
.nx-footer-muted, .nx-footer li { color: var(--nx-grey-300); font-style: normal; }
.nx-footer-legal { border-top: 1px solid var(--nx-grey-700); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--nx-grey-300); font-size: .8125rem; }
.nx-legal-links { display: flex; gap: 16px; }
.nx-legal-links li { display: inline; }

/* Mobile quick-action bar */
.nx-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--nx-ink); border-top: 3px solid var(--nx-orange); }
.nx-mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; color: #fff; text-decoration: none; font-weight: 600; font-size: .8125rem; }
.nx-mobile-bar a.is-primary { background: var(--nx-orange); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }