/* ==========================================================================
   VAS Electronics — B2B storefront refinements
   --------------------------------------------------------------------------
   Loaded LAST, after theme.css -> pages/<page>.css -> layout.css.
   Purely additive: this file never deletes or rewrites existing rules, so
   removing its <link> in includes/head.php restores the previous appearance
   exactly.

   Scope: typography, density, data tables, product cards, forms, buttons,
   focus states and print. No layout restructuring, no palette replacement —
   the existing navy/amber identity is kept and made consistent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — the single place to retune the theme.
   Values mirror the palette already used across the site.
   -------------------------------------------------------------------------- */
:root {
	--vas-navy:        #02334C;  /* primary brand navy   */
	--vas-navy-deep:   #162045;  /* buttons, headings    */
	--vas-amber:       #FFBB00;  /* accent / highlight   */
	--vas-amber-dark:  #FB9C00;  /* accent hover         */
	--vas-ink:         #212B35;  /* body copy            */
	--vas-muted:       #696973;  /* secondary copy       */
	--vas-border:      #E2E2E2;  /* hairlines            */
	--vas-surface:     #FFFFFF;
	--vas-surface-alt: #F0F2F5;  /* zebra rows, wells    */
	--vas-danger:      #DD0E1C;
	--vas-success:     #1B7F4B;

	--vas-radius:      4px;
	--vas-shadow-sm:   0 1px 2px rgba(2,51,76,.06), 0 1px 3px rgba(2,51,76,.08);
	--vas-shadow-md:   0 6px 18px rgba(2,51,76,.10);
	--vas-focus-ring:  0 0 0 3px rgba(2,51,76,.30);
}

/* --------------------------------------------------------------------------
   2. Typography
   Trade buyers scan part numbers, quantities and prices. Tabular figures make
   digits align in a column, which is the single highest-value type change on
   a B2B catalogue.
   -------------------------------------------------------------------------- */
.price, .price-new, .price-old, .price-tax, .product-price,
.cart-total, .total, .quantity input, input[type="number"],
td, th, .order-total, .invoice-total {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Headings: slightly tighter tracking reads more engineered, less "template". */
h1, h2, h3, h4, .title, .page-title, .module-title {
	letter-spacing: -0.01em;
}

.page-title {
	font-weight: 700;
}

/* Long technical product names wrap badly. Keep them readable, not clipped. */
.product-thumb .name a,
.product-thumb .caption .name a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.35;
	min-height: 2.7em;
}

/* Part numbers / SKUs read as data, not prose. */
.model, .product-model, .sku, .part-number {
	font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--vas-muted);
}

/* --------------------------------------------------------------------------
   3. Breadcrumb — was very low contrast against the light page.
   -------------------------------------------------------------------------- */
.breadcrumb {
	font-size: 13px;
}

.breadcrumb a {
	color: var(--vas-muted);
}

.breadcrumb a:hover {
	color: var(--vas-navy);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Data tables
   Cart, order history, invoices and bulk lists are where dealers spend their
   time. Tighter rhythm, zebra striping and right-aligned numerics.
   -------------------------------------------------------------------------- */
/* NOTE ON SELECTORS
   The catalogue table this site renders carries no class, has no <thead>, and
   uses <td> for its header row — so `table.table` and `th` selectors do not
   match it. Everything below targets the real structure:
       #content .table-responsive > table > tbody > tr:first-child   = header
       #content .table-responsive > table > tbody > tr:nth-child(n+2) = data
   The container already scrolls, so overflow/max-height are left untouched. */

/* Header row: keep it visible while scanning a long parts list. */
#content .table-responsive > table > tbody > tr:first-child > td {
	position: sticky;
	top: 0;
	z-index: 2;
	white-space: nowrap;
}

/* Zebra striping — the main readability win on a 100-row parts list. */
#content .table-responsive > table > tbody > tr:nth-child(2n+1):not(:first-child) > td {
	background: rgba(240, 242, 245, 0.6);
}

/* Row hover: helps track across Description -> Price -> Stock -> Quantity. */
#content .table-responsive > table > tbody > tr:not(:first-child):hover > td {
	background: rgba(2, 51, 76, 0.07);
}

/* Tighter vertical rhythm so more line items fit on one screen. */
#content .table-responsive > table > tbody > tr > td {
	padding-top: 8px;
	padding-bottom: 8px;
	vertical-align: middle;
}

/* Money and quantity columns line up on the decimal. */
#content table .text-right, #content table td[align="right"],
#content table .price, #content table .total, #content table .qty {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Order-quantity and line-reference inputs sit inside the table; keep them
   compact and consistent rather than stretching the column. */
#content .table-responsive > table input[type="text"],
#content .table-responsive > table input[type="number"] {
	max-width: 130px;
	height: 34px;
	padding: 4px 8px;
	font-variant-numeric: tabular-nums;
}

/* Give the per-line controls (add, wishlist, quantity, reference) breathing
   room so they stack cleanly instead of sitting flush against each other. */
#content .table-responsive > table > tbody > tr > td button,
#content .table-responsive > table > tbody > tr > td .btn,
#content .table-responsive > table > tbody > tr > td input {
	margin: 3px 6px 3px 0;
	vertical-align: middle;
}

/* Row density.
   Each catalogue row repeats the full product description, pushing rows to
   ~394px — roughly one and a half parts per screen. Clamping the description
   block to four lines brings a row to ~230px without hiding the fields a
   dealer actually orders from (part number, stock, price, quantity, ref).
   The complete description remains on the product page. */
#content .table-responsive > table > tbody > tr > td > div:not(.row) {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 6.4em;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5. Product cards
   Equal height, a clear hover affordance, and price given real emphasis.
   -------------------------------------------------------------------------- */
.product-grid .product-thumb,
.product-layout .product-thumb {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--vas-border);
	border-radius: var(--vas-radius);
	background: var(--vas-surface);
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.desktop .product-grid .product-thumb:hover,
.desktop .product-layout .product-thumb:hover {
	border-color: rgba(2, 51, 76, .35);
	box-shadow: var(--vas-shadow-md);
	transform: translateY(-2px);
}

.product-thumb .caption {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Push price + cart button to the bottom so cards align across a row. */
.product-thumb .price,
.product-thumb .button-group {
	margin-top: auto;
}

.product-thumb .price {
	color: var(--vas-navy-deep);
	font-weight: 700;
}

.product-thumb .price-old {
	color: var(--vas-muted);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   6. Buttons
   The storefront stretches primary actions to the full column width, which
   reads as a consumer landing page rather than a trade portal. Cap them on
   desktop only — full width is still correct on mobile.
   -------------------------------------------------------------------------- */
.btn {
	border-radius: var(--vas-radius);
	font-weight: 700;
	letter-spacing: 0.03em;
	transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.desktop .buttons .btn,
.desktop .btn-primary:not(.btn-block):not([class*="full"]) {
	max-width: 280px;
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--vas-navy) !important;
	box-shadow: var(--vas-shadow-sm);
}

/* Amber is an accent, not a text colour — dark ink on amber keeps contrast. */
.btn-warning, .btn-accent {
	background: var(--vas-amber) !important;
	color: var(--vas-navy-deep) !important;
	border-color: var(--vas-amber-dark) !important;
}

.btn-warning:hover, .btn-accent:hover {
	background: var(--vas-amber-dark) !important;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-control {
	border-radius: var(--vas-radius) !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
	border-color: var(--vas-navy) !important;
	box-shadow: var(--vas-focus-ring) !important;
	outline: none;
}

.form-control::placeholder {
	color: #9AA3AC;
}

.has-error .form-control:focus {
	box-shadow: 0 0 0 3px rgba(221, 14, 28, .25) !important;
}

/* --------------------------------------------------------------------------
   8. Accessibility — a visible keyboard focus ring everywhere.
   Trade accounts are often operated by keyboard-heavy purchasing staff.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--vas-navy);
	outline-offset: 2px;
	box-shadow: var(--vas-focus-ring);
}

/* --------------------------------------------------------------------------
   9. Trust bar — tighten the row so it reads as credentials, not decoration.
   -------------------------------------------------------------------------- */
.module-info_blocks .info-block-title,
.module-info_blocks .title {
	font-weight: 700;
	letter-spacing: 0.01em;
}

.module-info_blocks .info-block-description,
.module-info_blocks .description {
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   10. Print — dealers print orders, invoices and pick lists.
   -------------------------------------------------------------------------- */
@media print {
	header, .header, footer, .footer,
	.breadcrumb, .scroll-to-top, .module-info_blocks,
	.main-menu, .top-menu, #chat-widget-container, .cookie-notice {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
	}

	.table-responsive {
		max-height: none;
		overflow: visible;
	}

	table {
		page-break-inside: auto;
	}

	tr {
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	a[href]::after {
		content: "";
	}
}

/* --------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   12. Sticky left column
   --------------------------------------------------------------------------
   The category tree is how you move around a catalogue of 85,000 parts, and on
   a 50-product listing it used to scroll away after the first two rows, so
   changing category meant scrolling back to the top of the page first.

   `position: sticky` keeps it in view while the results scroll past. The tree
   is longer than most viewports, so it gets its own scrollbar rather than
   being clipped: max-height is the viewport minus the offset, and the list
   scrolls internally once it runs out of room.

   Sticky positioning silently does nothing if any ancestor has `overflow`
   other than `visible`, which is why this also clears the overflow the theme
   sets on the row wrapper. It is confined to desktop widths — on a phone the
   sidebar stacks above the results and pinning it would eat the screen.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	/* Sticky needs a non-clipping ancestor chain. */
	#content > .row,
	.container > .row {
		overflow: visible;
	}

	.vas-sidebar {
		position: -webkit-sticky;
		position: sticky;
		top: 12px;
		align-self: flex-start;
		max-height: calc(100vh - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* A slim scrollbar so the tree does not gain a heavy grey gutter. */
	.vas-sidebar::-webkit-scrollbar {
		width: 6px;
	}

	.vas-sidebar::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, .22);
		border-radius: 3px;
	}

	.vas-sidebar::-webkit-scrollbar-track {
		background: transparent;
	}

	.vas-sidebar {
		scrollbar-width: thin;
	}
}

/* Where you are in the tree, on both levels. */
.vas-sidebar .vas-active > a,
.vas-sidebar .vas-active > a .links-text {
	font-weight: 700;
	color: #02334c;
}

.vas-sidebar .menu-item.vas-active > a {
	border-left: 3px solid #f5a623;
	padding-left: 7px;
}

/* The brand filter is a long list; keep it scannable and bounded. */
.vas-sidebar .vas-brand-list {
	max-height: 320px;
	overflow-y: auto;
}

.vas-sidebar .vas-brand {
	display: block;
	margin: 0;
	font-weight: 400;
	line-height: 1.5;
}

.vas-sidebar .vas-brand a {
	text-decoration: none;
}

.vas-sidebar .vas-brand.vas-active a {
	font-weight: 700;
	color: #02334c;
}

.vas-sidebar .vas-brand-more {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   13. Pagination
   --------------------------------------------------------------------------
   Rendered by vas_pagination() in includes/pagination.php. The links carry
   their own inline styles for safety if this file is ever removed; these rules
   only add spacing, hit area and hover feedback.
   -------------------------------------------------------------------------- */
.vas-pagination {
	clear: both;
	margin: 20px 0 8px;
	line-height: 2.2;
}

.vas-pagination a:hover {
	background: #02334c !important;
	color: #fff !important;
	border-color: #02334c !important;
}

.vas-pagination a,
.vas-pagination span {
	min-width: 32px;
	text-align: center;
}

/* Touch targets on small screens. */
@media (max-width: 767px) {
	.vas-pagination a,
	.vas-pagination span {
		padding: 7px 11px !important;
	}
}

/* The count line ("1,250 products · page 3 of 25") reads as context, not as a
   control, so it sits on its own line on narrow screens instead of crowding
   the first page link. */
@media (max-width: 575px) {
	.vas-pagination > span:first-child {
		display: block;
		margin: 0 0 6px !important;
	}
}

/* --------------------------------------------------------------------------
   14. Page-level scrolling for the catalogue listings
   --------------------------------------------------------------------------
   The listing pages used to box the results table at a fixed `height: 1000px`
   and let it scroll inside that box, so a browser window showed three
   scrollbars at once: the sidebar's, the table's, and the page's. On a short
   result set the box also left several hundred pixels of empty white below the
   last row, and on subproduct.php the whole #content column was the scroller,
   which additionally broke the sticky sidebar — `position: sticky` does
   nothing inside an ancestor that clips.

   The fixed heights are gone from the markup. What remains is Bootstrap's
   `.table-responsive { overflow-x: auto }`, which applies at every width: a
   box that scrolls on one axis scrolls on both as far as `position: sticky` is
   concerned, so the header row would still pin to the box rather than to the
   window. On desktop the listing wrapper therefore opts out of overflow
   entirely and the page becomes the only scroller. Below the tablet
   breakpoint the horizontal scroll comes back, because the parts table is
   genuinely wider than a phone.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	#content .table-responsive.vas-list {
		overflow: visible;
		border: 0;
		margin-bottom: 0;
	}
}

@media (max-width: 767px) {
	#content .table-responsive.vas-list {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* With the page doing the scrolling, the column headings pin to the top of the
   window instead of to the top of a box. The shadow separates them from the
   rows passing underneath; without it the dark header and the first data row
   read as one block at the moment they meet. */
@media (min-width: 768px) {
	#content .table-responsive.vas-list > table > tbody > tr:first-child > td {
		box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
	}
}

/* The results table fills its column; the fixed-height box used to hide that
   the table itself had no width rule. */
#content .table-responsive.vas-list > table {
	width: 100%;
	margin-bottom: 0;
}

/* Pagination sits below the results as the end of the page, not as another
   floating control inside a scrollable box. */
#content .vas-pagination {
	margin: 22px 0 34px !important;
	padding-top: 18px;
	border-top: 1px solid rgba(226, 226, 226, 1);
}

/* Cart, address book and order tables were boxed at max-height and scrolled
   inside that box too. The inline heights are gone from the markup; these keep
   Bootstrap's own horizontal overflow, which a wide invoice table still needs. */

/* --------------------------------------------------------------------------
   15. Clearing the theme's pinned menu bar
   --------------------------------------------------------------------------
   Once the page scrolls, the theme fixes `.desktop-main-menu-wrapper` (the
   black ALL CATEGORIES / About / Inquiry bar) to the top of the window at 42px
   tall. Both sticky elements above were pinning to 0 and disappearing beneath
   it — and because the bar carries no z-index of its own, the sticky table
   header, being later in the document, actually painted over the menu.

   One number drives both offsets, so retuning the bar means editing one line.
   -------------------------------------------------------------------------- */
:root {
	--vas-pinned-nav: 42px;
}

/* The bar is the topmost chrome on the page and must stay that way. */
.desktop-main-menu-wrapper {
	z-index: 1000;
}

@media (min-width: 768px) {
	#content .table-responsive.vas-list > table > tbody > tr:first-child > td {
		top: var(--vas-pinned-nav);
		z-index: 2;
	}
}

@media (min-width: 992px) {
	.vas-sidebar {
		top: calc(var(--vas-pinned-nav) + 12px);
		max-height: calc(100vh - var(--vas-pinned-nav) - 24px);
	}
}