/* ==========================================================================
   GPULoom — Design Polish, Part B: shared chrome + site-wide layer
   --------------------------------------------------------------------------
   Scope: everything that appears on *every* page type — the global header,
   primary nav and dropdowns, the global footer, site-wide typography, focus
   rings, touch corrections, and conservative WooCommerce product/archive
   polish.

   Why this is a separate file: it touches shared chrome, so applying it to only
   some page templates would make the site look inconsistent between page types
   (e.g. the same header in two different typefaces). It is therefore shipped as
   the `gpuloom-design-polish` plugin, which enqueues it site-wide.

   Motion rules follow Emil Kowalski's design-engineering rules:
   transform/opacity only, custom ease-out curves, <300ms UI timings, hover
   gated behind `(hover: hover) and (pointer: fine)`, `prefers-reduced-motion`
   handled alongside the motion.
   ========================================================================== */

:root {
	--gp-ink: #0c1c2a;
	--gp-ink-2: #3a4e5e;
	--gp-ink-3: #5a7180;
	--gp-ink-4: #8d9faa;

	--gp-hairline: rgb(11 34 57 / 0.1);
	--gp-hairline-2: rgb(11 34 57 / 0.16);
	--gp-surface-2: #f6f9fb;
	--gp-surface-3: #eef4f9;

	--gp-r-xs: 6px;
	--gp-r-sm: 10px;
	--gp-r-md: 14px;
	--gp-r-lg: 18px;
	--gp-r-pill: 999px;

	--gp-shadow-1: 0 1px 2px rgb(11 34 57 / 0.05), 0 1px 3px rgb(11 34 57 / 0.04);
	--gp-shadow-2: 0 6px 16px -6px rgb(11 34 57 / 0.14), 0 2px 6px -2px rgb(11 34 57 / 0.06);
	--gp-shadow-3: 0 22px 44px -20px rgb(11 34 57 / 0.3), 0 6px 16px -8px rgb(11 34 57 / 0.12);

	--gp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--gp-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	--gp-dur-press: 140ms;
	--gp-dur-ui: 180ms;
	--gp-dur-pop: 220ms;

	--gp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

	/* Astra's own UI font, kept in step with the layer */
	--ast-body-font-family: var(--gp-font-sans);
}

/* --------------------------------------------------------------------------
   1. Site-wide typography baseline
   -------------------------------------------------------------------------- */

/* The inquiry plugin sets Arial with `!important` on several *class-qualified*
   body selectors: `body:not(.home)` (shell-subpage.css), `body.single-product`
   (ui-product.css) and `body.search` (shell-search.css). Specificity (0,1,1)
   beats a bare `body` (0,0,1) even when both are `!important`, so the plain
   `body` rule below loses on every page type except the home page. Match the
   competitors' specificity and win on document order (this layer prints last). */
body,
body:not(.home),
body.single-product,
body.search,
body.archive,
body.woocommerce,
body.error404 {
	font-family: var(--gp-font-sans) !important;
	color: var(--gp-ink) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   2. Global header
   -------------------------------------------------------------------------- */

.gd-global-header {
	font-family: var(--gp-font-sans);
}

.gd-global-header__main {
	gap: clamp(16px, 2vw, 28px);
}

/* Search: a real field, not a wireframe rectangle */
.gd-global-search {
	height: 46px !important;
	grid-template-columns: minmax(0, 1fr) 46px !important;
	border: 1px solid var(--gp-hairline-2) !important;
	border-radius: var(--gp-r-sm) !important;
	background: var(--gp-surface-2) !important;
	overflow: hidden !important;
	transition: border-color var(--gp-dur-ui) ease, box-shadow var(--gp-dur-ui) ease,
		background-color var(--gp-dur-ui) ease;
}

.gd-global-search:focus-within {
	border-color: rgb(6 114 206 / 0.55) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgb(6 114 206 / 0.14) !important;
}

.gd-global-search input {
	height: 44px !important;
	padding: 0 14px !important;
	background: transparent !important;
	color: var(--gp-ink) !important;
	font-family: var(--gp-font-sans) !important;
	font-size: 14px !important;
	letter-spacing: -0.004em !important;
	text-overflow: ellipsis;
}

.gd-global-search input::placeholder {
	color: var(--gp-ink-3) !important;
}

.gd-global-search button {
	width: 46px !important;
	min-width: 46px !important;
	height: 44px !important;
	border-left: 1px solid var(--gp-hairline) !important;
	background: transparent !important;
	color: #31414d !important;
	border-radius: 0 !important;
	transition: background-color var(--gp-dur-ui) ease, color var(--gp-dur-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
	.gd-global-search button:hover {
		background: #eaf3fb !important;
		color: #0672ce !important;
	}
}

.gd-global-search button:active {
	background: #dceaf7 !important;
}

/* iOS zooms the page when a focused input is under 16px */
@media (max-width: 700px) {
	.gd-global-search input {
		font-size: 16px !important;
	}
}

.gd-global-menu-toggle {
	border: 1px solid var(--gp-hairline-2);
	border-radius: var(--gp-r-sm);
	transition: background-color var(--gp-dur-ui) ease, border-color var(--gp-dur-ui) ease,
		transform var(--gp-dur-press) var(--gp-ease-out);
}

.gd-global-menu-toggle:active {
	transform: scale(0.96);
}

.gd-language select {
	font-family: var(--gp-font-sans);
	border-radius: var(--gp-r-sm);
}

/* --------------------------------------------------------------------------
   3. Primary navigation
   -------------------------------------------------------------------------- */

.gd-global-nav {
	border-top-color: rgb(11 34 57 / 0.06);
	border-bottom-color: var(--gp-hairline);
	font-family: var(--gp-font-sans);
}

.gd-global-nav a,
.gd-global-nav button {
	font-family: var(--gp-font-sans) !important;
	font-size: 14px !important;
	font-weight: 500;
	letter-spacing: -0.004em;
	transition: color var(--gp-dur-ui) ease;
}

.gd-global-nav-trigger .gd-global-icon {
	transition: transform var(--gp-dur-ui) var(--gp-ease-out) !important;
}

/* Underline that grows from the text, not a colour-only hover.
 *
 * ⚠️ bottom:14px was wrong. The link box is only ~19px tall (one text line),
 * so "14px from the bottom" lands 5px from the TOP of the text — measured in
 * Chrome 1440: rect.y=89, h=19, and the bar rendered at y≈92, i.e. ABOVE the
 * glyphs. That is the line the user kept seeing "on top" of News/About.
 * The bar has to hang BELOW the text: anchor it to the bottom edge of the
 * link box and push it down by the difference between the link's line box and
 * the nav row, so it sits under the descenders without touching the glyphs.
 * bottom:-6px puts it 6px below the text box, clear of descenders and clear of
 * the nav's own bottom hairline. */
@media (min-width: 701px) {
	.gd-global-nav .gd-shell > a:not(.gd-global-nav-cta)::after,
	.gd-global-nav-trigger::after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		opacity: 0.9;
		transition: transform var(--gp-dur-ui) var(--gp-ease-out);
		pointer-events: none;
	}

	.gd-global-nav .gd-shell > a:not(.gd-global-nav-cta),
	.gd-global-nav-trigger {
		position: relative;
	}

	@media (hover: hover) and (pointer: fine) {
		.gd-global-nav .gd-shell > a:not(.gd-global-nav-cta):hover::after,
		.gd-global-nav-item:hover > .gd-global-nav-trigger::after,
		.gd-global-nav-item:focus-within > .gd-global-nav-trigger::after,
		.gd-global-nav-item.is-open > .gd-global-nav-trigger::after {
			transform: scaleX(1);
		}
	}
}

/* CTA */
body .gd-global-header .gd-global-nav .gd-global-nav-cta {
	min-height: 38px !important;
	padding: 0 18px !important;
	border: 1px solid #0672ce !important;
	border-radius: var(--gp-r-sm) !important;
	background: #0672ce !important;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), var(--gp-shadow-1) !important;
	font-weight: 600 !important;
	letter-spacing: -0.006em;
	transition: background-color var(--gp-dur-ui) ease, box-shadow var(--gp-dur-ui) ease,
		transform var(--gp-dur-press) var(--gp-ease-out) !important;
}

body .gd-global-header .gd-global-nav .gd-global-nav-cta:active {
	transform: scale(0.975);
}

@media (hover: hover) and (pointer: fine) {
	body .gd-global-header .gd-global-nav .gd-global-nav-cta:hover {
		background: #055ba8 !important;
		border-color: #055ba8 !important;
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), var(--gp-shadow-2) !important;
	}
}

@media (max-width: 700px) {
	body .gd-global-header .gd-global-nav .gd-global-nav-cta {
		border-radius: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   4. Dropdowns — origin-aware pop instead of a plain translate
   -------------------------------------------------------------------------- */

@media (min-width: 701px) {
	.gd-global-dropdown {
		transform-origin: top left;
		border: 1px solid #d7dde1;
		border-top: 1px solid #d2d8de;
		border-radius: 0;
		padding: 6px;
		box-shadow: 0 16px 28px rgb(14 40 65 / 0.07);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px) scale(0.985);
		transition: opacity var(--gp-dur-ui) var(--gp-ease-out),
			transform var(--gp-dur-ui) var(--gp-ease-out), visibility var(--gp-dur-ui) linear;
	}

	.gd-global-nav-item:hover > .gd-global-dropdown,
	.gd-global-nav-item:focus-within > .gd-global-dropdown,
	.gd-global-nav-item.is-open > .gd-global-dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0) scale(1);
	}

	.gd-global-dropdown a {
		min-height: 40px !important;
		padding: 9px 14px !important;
		border-radius: 0;
		transition: background-color var(--gp-dur-ui) ease, color var(--gp-dur-ui) ease,
			transform var(--gp-dur-ui) var(--gp-ease-out);
	}

	.gd-global-dropdown a:hover,
	.gd-global-dropdown a:focus-visible {
		background: #eef5fb !important;
		transform: translateX(2px);
	}
}

/* --------------------------------------------------------------------------
   5. Global footer
   -------------------------------------------------------------------------- */

.gd-global-footer {
	font-family: var(--gp-font-sans);
	border-top-color: var(--gp-hairline);
	background: linear-gradient(180deg, #f8fafb 0%, #f4f7f9 100%);
}

.gd-global-footer h3 {
	margin-bottom: 15px !important;
	color: #29414f !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
}

.gd-global-footer a,
.gd-global-footer span {
	color: var(--gp-ink-2) !important;
	font-size: 12.5px;
	line-height: 1.5;
	transition: color var(--gp-dur-ui) ease;
}

.gd-global-footer__links {
	gap: 9px;
}

.gd-global-footer__about p {
	color: var(--gp-ink-3) !important;
	font-size: 12.5px;
	line-height: 1.65;
}

.gd-global-footer__contact-row {
	border-top-color: var(--gp-hairline);
	transition: background-color var(--gp-dur-ui) ease;
}

.gd-global-footer__contact-row b {
	color: #29414f;
	font-weight: 600;
}

.gd-global-footer__contact-row small {
	color: var(--gp-ink-3) !important;
	font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   6. Global buttons & focus
   -------------------------------------------------------------------------- */

.gd-external-btn,
.single_add_to_cart_button,
.ast-on-card-button,
.gpi-add-button,
button.button,
input[type="submit"].button,
.woocommerce a.button {
	border-radius: var(--gp-r-sm);
	font-family: var(--gp-font-sans);
	font-weight: 600;
	letter-spacing: -0.006em;
	transition: background-color var(--gp-dur-ui) ease, color var(--gp-dur-ui) ease,
		border-color var(--gp-dur-ui) ease, box-shadow var(--gp-dur-ui) ease,
		transform var(--gp-dur-press) var(--gp-ease-out);
}

.single_add_to_cart_button:active,
.ast-on-card-button:active,
.gpi-add-button:active,
button.button:active,
input[type="submit"].button:active,
.woocommerce a.button:active {
	transform: scale(0.975);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #0672ce;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. WooCommerce product & archive polish
   Matched to the /catalog/ reference (gpc-*): square corners, 1px hairlines,
   #0672ce accent, no drop shadows, no hover lift. Only colour, borders and
   press feedback are touched — no layout or sizing properties.
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce div.product div.images img,
.woocommerce ul.products li.product img {
	border-radius: 0;
}

.woocommerce .woocommerce-product-gallery img {
	background: #f5f8fa;
}

.woocommerce div.product .product_title {
	font-family: var(--gp-font-sans);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.16;
	color: #0e2841;
}

.woocommerce .woocommerce-breadcrumb {
	color: #61717b;
	font-size: 12.5px;
}

.woocommerce .woocommerce-breadcrumb a {
	color: #52636d;
	transition: color var(--gp-dur-ui) ease;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: #0672ce;
}

.woocommerce div.product .single-product-category a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid #8c9aa5;
	border-radius: 0;
	background: #fff;
	color: #243946;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--gp-dur-ui) ease, color var(--gp-dur-ui) ease,
		background-color var(--gp-dur-ui) ease;
}

.woocommerce div.product .single-product-category a:hover {
	border-color: #0672ce;
	background: #eef6fa;
	color: #0672ce;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: #52636d;
	line-height: 1.68;
}

.woocommerce div.product .quantity .qty,
.woocommerce .quantity input.qty {
	border: 1px solid #d7dde1;
	border-radius: 0;
	font-family: var(--gp-font-sans);
}

.woocommerce div.product .single_add_to_cart_button.button.alt {
	border: 2px solid #0672ce;
	border-radius: 0;
	background: #0672ce;
	box-shadow: none;
	font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce div.product .single_add_to_cart_button.button.alt:hover {
		background: #0063b4;
		border-color: #0063b4;
	}
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-weight: 600;
	letter-spacing: -0.004em;
	transition: color var(--gp-dur-ui) ease;
}

.woocommerce div.product .woocommerce-tabs .panel {
	color: #52636d;
	line-height: 1.68;
}

.woocommerce ul.products li.product {
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--gp-font-sans);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: #0e2841;
}

.gpi-gallery-nav,
.gpi-zoom {
	border-radius: 0;
	transition: background-color var(--gp-dur-ui) ease, transform var(--gp-dur-press) var(--gp-ease-out);
}

.gpi-gallery-nav:active,
.gpi-zoom:active {
	transform: scale(0.94);
}

.gpi-gallery-count {
	border-radius: 0;
	background: rgb(11 34 57 / 0.72);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. Touch corrections (web-app feel on phones)
   -------------------------------------------------------------------------- */

a,
button,
input,
select,
textarea,
[role="button"] {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gd-global-dropdown,
	.gd-global-nav .gd-shell > a::after,
	.gd-global-nav-trigger::after,
	.gd-global-nav-cta,
	.woocommerce ul.products li.product,
	.woocommerce .woocommerce-breadcrumb a,
	.gd-global-footer a {
		transform: none !important;
		transition-duration: 1ms !important;
	}

	.gd-global-dropdown {
		transition-duration: 120ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * 8b. CATALOG LANGUAGE ALIGNMENT (lives in the design layer because it must print AFTER
 *     part A and every head stylesheet — head rules were being beaten by part A)
 * The /catalog/ page (gpc-*) is the visual benchmark: square corners, 1px
 * #e4e8eb / #8c9aa5 hairlines, #0672ce accent, #0e2841 headings, row-hover
 * with a #eef6fa fill instead of underlined text.
 * ------------------------------------------------------------------------- */

/* --- home .gp-links ------------------------------------------------------ */
.gp-links {
	padding: 56px 0;
	border-top: 1px solid #d2d8de;
	border-bottom: 1px solid #d2d8de;
	background: #f6f9fb;
}

.gp-links__wrap {
	grid-template-columns: 1.15fr 1fr;
	gap: 56px;
}

.gp-links__col h2 {
	margin: 0 0 6px;
	color: #61717b;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
}

.gp-links .gp-links__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 10px;
	border-bottom: 1px solid #e4e8eb;
}

.gp-links .gp-links__list li:first-child {
	border-top: 1px solid #e4e8eb;
}

.gp-links .gp-links__list li:hover,
.gp-links .gp-links__list li:focus-within {
	background: #eef6fa;
}

.gp-links .gp-links__list a {
	color: #314652;
	font-size: 14px;
}

.gp-links .gp-links__list li:hover a,
.gp-links .gp-links__list li a:hover,
.gp-links .gp-links__list li a:focus {
	color: #0672ce;
	text-decoration: none;
}

.gp-links .gp-links__list li:hover .gp-links__id {
	color: #0672ce;
}

.gp-links__more {
	margin: 18px 0 0;
}

.gp-links__more a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid #8c9aa5;
	background: #fff;
	color: #243946 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.gp-links__more a:hover,
.gp-links__more a:focus {
	border-color: #0672ce;
	background: #eef6fa;
	color: #0672ce;
	text-decoration: none;
}

/* --- brand chips = the catalog's .gpc-brand (square, not a pill) --------- */
.gp-links .gp-links__brands,
.gp-hub .gp-hub__brands,
.gp-hubdir .gp-hubdir__brands {
	gap: 10px;
	margin-top: 22px;
}

.gp-links .gp-links__brands a,
.gp-hub .gp-hub__brands a,
.gp-hubdir .gp-hubdir__brands a {
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid #8c9aa5;
	border-radius: 0;
	background: #fff;
	color: #243946;
	font-size: 13px;
}

.gp-links .gp-links__brands {
	font-size: 14px;
	color: #314652;
}

/* --- square corners everywhere in these components ----------------------- */
.gp-hub__seealso,
.gnx-static .gnx-static__list a,
.gp-postlinks,
.gd-company-video {
	border-radius: 0;
}

.gp-hub__seealso {
	border-left-width: 2px;
}

/* --- about: the ga-offer items are now linked ---------------------------- */
.entry-content .ga-offer__list article h3 a,
.ga-offer__list article h3 a {
	color: #0e2841 !important;
	text-decoration: none !important;   /* the page's own body-printed CSS out-specifies
	                                       the head rules here, so this lock is deliberate */
	transition: color .15s ease;
}

.entry-content .ga-offer__list article h3 a:hover,
.entry-content .ga-offer__list article h3 a:focus,
.ga-offer__list article h3 a:hover,
.ga-offer__list article h3 a:focus {
	color: #0672ce !important;
	text-decoration: none !important;
}