/**
 * Altitude Aminos — base design tokens and components shared across
 * every template (buttons, eyebrow labels, section shells, breadcrumb,
 * header/footer theming). Page-specific layout lives in its own file:
 * front-page.css, single-product.css.
 *
 * Site-wide dark theme: the whole site now uses the navy-950 page /
 * navy-800 card surfaces the header, footer, and hero already used.
 * --slate-700 was recalibrated from a dark-on-light secondary-text color
 * to a light-on-dark one (it's only ever used as text color, never as a
 * background/border, so this one token change covers every usage). ice-200
 * still means "light text on dark" wherever it's used as a text color —
 * only its background/border usages needed individual updates, since
 * those assumed a light surface.
 */

:root {
	--navy-950: #060B1F;
	--navy-800: #0B1846;
	--blue-600: #1440C4;
	--cyan-400: #4FD1FF;
	--cyan-300: #8FE3FF;
	--ice-100: #F3F7FD;
	--ice-200: #E7EEFA;
	--slate-500: #6B7A99;
	--slate-700: #9CAAC9;

	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	--container: 1200px;
}

/* Storefront sets overflow-x: hidden on body/.site (prevents horizontal
   scroll from full-bleed sections) — but per the CSS overflow spec, pairing
   a non-visible overflow-x with a visible overflow-y forces the visible
   axis to compute as "auto" instead. An auto/non-visible overflow on any
   ancestor breaks position:sticky for descendants (the sticky element
   scopes to that ancestor's box instead of the real viewport), which is
   why the sticky headers below don't stick without this. overflow: clip
   doesn't trigger that forced-auto adjustment the way hidden does, so it
   keeps the horizontal-scroll protection without breaking sticky.
   !important because something in the build/cache pipeline (likely
   LiteSpeed's CSS combine/optimize) reorders stylesheets such that plain
   specificity/source-order isn't reliable here — confirmed by testing. */
html, body, #page {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

body {
	font-family: var(--font-body);
	color: var(--ice-100);
	background-color: var(--navy-950);
	line-height: 1.5;
}

/* Same "explicit rule beats inheritance" issue as h1-h6 below, for <mark>:
   the browser's own UA stylesheet sets black text (Storefront/WooCommerce
   strip the default yellow highlight background but leave that color rule
   in place), so any WooCommerce template using <mark> for emphasis (order
   number/date/status on My Account > View Order, at minimum) renders
   near-invisible black-on-navy instead of inheriting the page's light text
   color. Found on the account order page, but this is a WooCommerce
   template-wide element, not page-specific, hence the sitewide fix here. */
mark {
	background: transparent;
	color: inherit;
}

/* Storefront's own h1-h6 rule sets an explicit dark color, which beats
   inheritance from a lighter-themed parent (explicit rules always win over
   inherited values, regardless of specificity) — every heading that
   doesn't set its own color would otherwise render dark-on-dark. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.08;
	color: inherit;
}

.altitude-mono,
.price,
.sku,
.lot-number {
	font-family: var(--font-mono);
}

.wrap {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cyan-400);
	font-weight: 500;
}
.eyebrow.dark { color: var(--cyan-400); }

/* === Buttons (used in hero, product actions, newsletter CTA) === */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary {
	background: var(--cyan-400);
	color: var(--navy-950);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79,209,255,.35); }
.btn-ghost {
	background: transparent;
	color: var(--white, #fff);
	border-color: rgba(255,255,255,.35);
}
.btn-ghost:hover { border-color: var(--cyan-400); color: var(--cyan-400); }
.btn-dark {
	background: var(--navy-800);
	color: #fff;
	border-color: rgba(255,255,255,.1);
}
.btn-dark:hover { background: var(--blue-600); transform: translateY(-2px); }

/* === Section shell, reused by every content section === */
section.pad { padding: 88px 32px; }
.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 44px;
	flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 10px; }
.section-head p { color: var(--slate-700); max-width: 420px; font-size: 15px; }

/* === Storefront header/footer theming — markup stays native === */
.site-header,
#masthead {
	/* Gradient first so it composites over the texture (darkens it toward
	   the bottom edge for consistent contrast against nav text/links),
	   background-color is the fallback if the image fails to load.
	   header-texture.jpg is a pre-cropped, already-wide/dense section of
	   the source background (client-supplied crop) with consistent
	   pattern coverage across its full width, so a plain cover/no-repeat
	   is enough — no tiling needed this time. Overlay is stronger than
	   earlier attempts since this crop is noticeably brighter/busier. */
	background-image: linear-gradient(180deg, rgba(6,11,31,.45), rgba(6,11,31,.75)), url('../images/header-texture.jpg');
	background-size: cover;
	background-position: center;
	background-color: var(--navy-950);
	color: #fff;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
/* Complete rebuild of the desktop header layout (2026-08-04) — previous
   incremental patches kept surfacing new Storefront cascade behavior one
   symptom at a time (padding, then margin, then internal menu wrapping).
   This resets every box-model property explicitly on the whole chain in
   one pass instead of reactively. Scoped to desktop width only (matches
   Storefront's own ~768px breakpoint) so its native JS-driven mobile
   hamburger menu is untouched — confirmed working before this section,
   don't remove the media-query scoping. !important throughout because
   Storefront's own rules at equal specificity otherwise win on source
   order. */
@media (min-width: 768px) {
	#masthead {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
		padding: 0.125em 5% !important;
		margin: 0 !important;
	}
	/* .col-full is Storefront's centered-content-container class
	   (margin: 0 auto, capped max-width) — reset fully everywhere it
	   appears in the header, not just padding, or the leftover auto-margin
	   acts as a flex spacer and max-width caps available nav room. */
	#masthead .col-full {
		padding: 0 !important;
		margin: 0 !important;
		max-width: none !important;
		width: auto !important;
	}
	#masthead > .col-full {
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
	}
	.storefront-primary-navigation {
		padding: 0 !important;
		margin: 0 !important;
		max-width: none !important;
		flex: 1 1 auto !important;
	}
	.storefront-primary-navigation .col-full {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		flex-wrap: nowrap !important;
	}
	/* The actual <ul> menu list defaults to flex-wrap: wrap in Storefront,
	   which is what was pushing the last item ("Shop") onto its own line
	   even with plenty of free width available — this was never touched
	   by the container-level fixes above. */
	#site-navigation.main-navigation ul.menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 28px;
		margin: 0 !important;
		padding: 0 !important;
	}
	#site-navigation.main-navigation ul.menu li {
		flex-shrink: 0;
		white-space: nowrap;
	}
	#site-header-cart.site-header-cart {
		flex-shrink: 0;
		margin-left: 28px;
	}
	/* Search widget isn't part of the single-row layout (the reference
	   design doesn't show one in the header either). */
	.site-header .site-search {
		display: none !important;
	}
}
/* h1.logo (Storefront's actual wrapper, confirmed via inspector) never had
   its margin reset — browser default h1 margin would otherwise add
   unwanted space inside the flex row. */
.site-branding,
.site-branding h1.logo,
h1.logo {
	margin: 0 !important;
	padding: 0 !important;
}
.site-branding img {
	/* Bigger presence, matching feedback that the smaller sizes tried
	   earlier read as too small — some extra header height to accommodate
	   this is an acceptable tradeoff for a logo with real visual weight. */
	max-height: 100px !important;
	width: auto !important;
}
/* Plain text, no pill: bold weight plus one moderate, uncolored shadow —
   previous attempts stacked a color-tinted glow on top of a shadow, which
   is what read as blurry rather than crisp. Just the one plain shadow this
   time. */
.site-header .main-navigation a,
.site-header .site-header-cart a {
	color: #fff;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.site-header .site-title a {
	color: #fff;
	font-weight: 600;
}
#colophon,
.site-footer {
	background: var(--navy-950);
	color: var(--slate-500);
}
#colophon a { color: var(--ice-200); }
#colophon a:hover { color: var(--cyan-400); }

.altitude-footer-links {
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 28px 0;
}
.altitude-footer-links nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-bottom: 16px;
}
.altitude-footer-links nav a {
	font-size: 13.5px;
	font-weight: 500;
}
.altitude-footer-identity {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--slate-500);
	line-height: 1.7;
}

.altitude-announce {
	background: var(--navy-950);
	color: var(--ice-200);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .04em;
	text-align: center;
	padding: 9px 16px;
}
.altitude-announce span { color: var(--cyan-400); }
/* Optional whole-bar link (Customizer → Announcement Bar → Link): inherits
   the bar's own colours rather than picking up the global link colour, so a
   linked bar looks identical to an unlinked one until hover. */
.altitude-announce a { color: inherit; text-decoration: none; }
.altitude-announce a:hover,
.altitude-announce a:focus { text-decoration: underline; }

/* === Header mini-cart dropdown (native WooCommerce cart widget,
   #site-header-cart .widget_shopping_cart) — was never restyled, so it
   rendered in WooCommerce's default light theme (white background, small
   font) against this otherwise all-dark site. Selectors match WooCommerce
   core's own markup (.woocommerce-mini-cart, .mini_cart_item, etc.), no
   template override needed. */
.site-header-cart .widget_shopping_cart {
	position: absolute !important;
	right: 0 !important;
	top: 100% !important;
	left: auto !important;
	z-index: 110;
	width: 320px !important;
	max-width: 320px !important;
	background: var(--navy-800) !important;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 14px;
	padding: 20px !important;
	box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
/* Storefront's own anchor-text-shadow rule (.site-header .site-header-cart a,
   meant for the top-level cart icon link) also matches every link inside
   this dropdown once opened, since they're nested in the same
   .site-header-cart element -- reset it back off in here specifically. */
.widget_shopping_cart_content a {
	text-shadow: none !important;
}
.widget_shopping_cart_content .woocommerce-mini-cart {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	position: relative;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item:first-child { padding-top: 0; }
.widget_shopping_cart_content .woocommerce-mini-cart-item img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--navy-950);
	flex-shrink: 0;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item a:not(.remove) {
	color: var(--ice-100) !important;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	line-height: 1.4;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item a:not(.remove):hover { color: var(--cyan-400) !important; }
.widget_shopping_cart_content .quantity {
	display: block;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--slate-500) !important;
	margin-top: 4px;
}
.widget_shopping_cart_content .quantity .woocommerce-Price-amount { color: var(--slate-500) !important; }
.widget_shopping_cart_content .remove {
	position: absolute;
	top: 12px;
	right: 0;
	color: var(--slate-500) !important;
	font-size: 18px;
	line-height: 1;
	text-decoration: none !important;
}
.widget_shopping_cart_content .remove:hover { color: var(--cyan-400) !important; }
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
	color: var(--slate-700) !important;
	font-size: 14px;
	margin: 0 0 14px;
}
.widget_shopping_cart_content .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--ice-100) !important;
	background: transparent !important;
	padding: 14px 0 0 !important;
	border-top: 1px solid rgba(255,255,255,.12);
	margin: 0 0 16px;
}
.widget_shopping_cart_content .woocommerce-mini-cart__total .woocommerce-Price-amount { color: var(--ice-100) !important; }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons {
	display: flex !important;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	width: auto !important;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	/* Explicit height rather than relying on padding+line-height -- the two
	   buttons rendered at different heights (35px vs 42.7px) despite
	   provably identical padding/line-height/font in getComputedStyle,
	   cause never isolated. Sidestep it with a fixed height instead of
	   continuing to chase whatever's adding it just to .checkout. */
	height: 36px !important;
	min-height: 0 !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	white-space: nowrap;
	text-align: center;
	padding: 0 12px !important;
	border-radius: 999px !important;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12.5px;
	text-decoration: none;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: transparent !important;
	color: var(--ice-100) !important;
	border: 1px solid rgba(255,255,255,.25);
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:not(.checkout):hover { border-color: var(--cyan-400); color: var(--cyan-400) !important; }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--cyan-400) !important;
	color: var(--navy-950) !important;
	border: none !important;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--cyan-300); }

/* === Breadcrumb (native woocommerce_breadcrumb()) === */
.woocommerce-breadcrumb {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--slate-500);
}
.woocommerce-breadcrumb a { color: var(--slate-500); }
.woocommerce-breadcrumb a:hover { color: var(--blue-600); }

/**
 * Spec pills — split-badge tags for compact field/value display (lot
 * numbers, sizes, dates, etc). Introduced for the COA page but written
 * theme-wide since the shop pages reuse this same component later.
 */
.spec-pill-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 8px;
}
.spec-pill,
.spec-pill-link {
	display: flex;
	overflow: hidden;
	border-radius: 999px;
	border: 1px solid var(--blue-600);
	width: 100%;
	text-decoration: none !important;
}
.spec-pill-label {
	background: var(--blue-600);
	color: #fff;
	padding: 5px 11px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.spec-pill-value {
	background: rgba(255,255,255,.04);
	color: var(--ice-100);
	padding: 5px 13px 5px 11px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 600;
	flex: 1;
}
.spec-pill-link .spec-pill-value {
	color: var(--cyan-300);
	font-family: var(--font-body);
	font-weight: 600;
}
.spec-pill-link:hover .spec-pill-value { color: var(--cyan-400); }
.spec-pill-link .spec-pill-value::after {
	content: ' \2197';
	opacity: .7;
	font-weight: 500;
}

/* Generic payment-method icon + label swaps (checkout-payment-icons.js) —
   replaces third-party branded icons/names with our own, in the same
   stroke style as other icons in the theme (see the COA callout icon in
   inc/woocommerce.php). */
.altitude-payment-icon-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ice-100);
}
.altitude-payment-label-text {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
}

@media (max-width: 620px) {
	section.pad { padding: 64px 20px; }
}

/* ---------------------------------------------------------------------
   WooCommerce notices.

   Shipped as pale blue/green/red slabs designed for a light theme; against
   this dark background they render as glaring light blocks with barely
   legible text. Most visible on My Account, but the same classes appear on
   cart, checkout and product pages, so this lives in the base stylesheet
   rather than any one page's file.

   Restyled as a tinted panel with a coloured left edge -- keeps the
   severity signal without the slab.

   !important throughout. Storefront's Customizer prints its notice colours
   (green .woocommerce-message, sky-blue .woocommerce-info, 8px dark left
   border, an icon glyph) as inline CSS, and the cache layer reorders
   stylesheets so source order is not ours to rely on -- see the overflow
   note at the top of this file. Without it the product page's "added to
   your cart" bar was Storefront green with our pill button sitting on it,
   and My Account's temporary-password notice was Storefront blue.
   --------------------------------------------------------------------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	display: flex !important;
	align-items: center !important;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 20px !important;
	padding: 16px 20px !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	border-left: 3px solid var(--cyan-400) !important;
	border-radius: 8px !important;
	background: var(--navy-800) !important;
	color: var(--ice-100) !important;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	list-style: none;
	box-shadow: none !important;
}
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-left-color: #3fbf7f !important;
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: #e5484d !important;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.wc-block-components-notice-banner::before {
	/* Storefront injects an icon glyph that sits badly once the layout is
	   flex; the border already carries the severity cue. */
	content: none !important;
}
/* WooCommerce focuses the notice on render (tabindex="-1") so screen
   readers announce it; the browser then draws its default focus ring
   around the whole panel, which read as a second, mismatched border.
   Keyboard users never tab to it, so nothing is lost. */
.woocommerce-info:focus,
.woocommerce-message:focus,
.woocommerce-error:focus {
	outline: none !important;
}
/* The action link WooCommerce puts inside a notice (View cart, Browse
   products, Resend) -- match the pill buttons used elsewhere. */
.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info a.button,
.woocommerce-message a.button {
	order: 2;
	margin: 0 0 0 auto !important;
	padding: 8px 18px !important;
	border-radius: 999px !important;
	border: 1px solid var(--blue-600) !important;
	background: transparent !important;
	color: var(--cyan-400) !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: nowrap;
}
.woocommerce-info .button:hover,
.woocommerce-message .button:hover,
.woocommerce-error .button:hover {
	background: var(--blue-600) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------
   Empty cart icon.

   The Cart block draws its empty state's icon as a ::before background on
   the heading (WooCommerce's own stylesheet): a white crying face. Jon,
   2026-09-03: "a little silly." Replaced with a cart drawn in the logo's
   node-and-line chain style, solid cyan beads on a cyan outline -- the same
   stroke language as the COA callout icon. The heading text itself lives
   in the cart page's block content, not here.
   --------------------------------------------------------------------- */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	content: "" !important;
	display: block !important;
	width: 96px !important;
	height: 96px !important;
	margin: 0 auto 20px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%234FD1FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 22h9l8 34h34l8-24H29'/%3E%3C/g%3E%3Cg fill='%234FD1FF'%3E%3Ccircle cx='23' cy='22' r='3.5'/%3E%3Ccircle cx='31' cy='56' r='3.5'/%3E%3Ccircle cx='65' cy='56' r='3.5'/%3E%3Ccircle cx='73' cy='32' r='3.5'/%3E%3Ccircle cx='36' cy='70' r='4'/%3E%3Ccircle cx='60' cy='70' r='4'/%3E%3C/g%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	/* WooCommerce draws its face as a MASK over a white background-color,
	   so a replacement background-image alone just paints our cart in the
	   shape of the face. The mask has to go and the fill made transparent. */
	background-color: transparent !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

/* ---------------------------------------------------------------------
   "New in store" grid under the empty cart (the Cart block's
   woocommerce/product-new inner block). WooCommerce's grid styles assume a
   light page: dark grey names and prices, a pale grey button, all at 11.6px
   -- unreadable on navy (Jon, 2026-09-04). Same treatment as the shop loop
   cards: light name, mono price, pill button.
   --------------------------------------------------------------------- */
.wc-block-grid .wc-block-grid__product-link {
	text-decoration: none;
}
.wc-block-grid .wc-block-grid__product-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--ice-100);
	text-decoration: none;
	margin: 12px 0 4px;
}
.wc-block-grid .wc-block-grid__product-link:hover .wc-block-grid__product-title {
	color: var(--cyan-400);
}
.wc-block-grid .wc-block-grid__product-price,
.wc-block-grid .wc-block-grid__product-price .woocommerce-Price-amount {
	font-family: var(--font-mono);
	font-size: 13.5px;
	color: var(--slate-700);
}
.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--blue-600);
	background: transparent;
	color: var(--cyan-400);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--blue-600);
	color: #fff;
}
.wc-block-grid .wc-block-grid__product-image img {
	border-radius: 12px;
}

/* ---------------------------------------------------------------------
   Inline content links.

   The theme styles navigation, buttons and the footer explicitly, but never
   set a colour for ordinary links inside body copy -- so they inherited the
   browser default, and once clicked went the default visited purple. Very
   visible against this palette: "Sign in to see full order details" on
   /track-order/ rendered violet.

   :visited is set to the same colour as :link deliberately. On a shop the
   visited distinction carries almost no useful information, and the default
   purple is simply wrong against a navy background. Scoped to text elements
   so anything already styled as a button or nav item is untouched.
   --------------------------------------------------------------------- */
.site-main p a,
.site-main li a,
.site-main dd a,
.site-main td a,
.woocommerce-MyAccount-content p a,
.woocommerce-MyAccount-content li a {
	color: var(--cyan-400);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.site-main p a:visited,
.site-main li a:visited,
.site-main dd a:visited,
.site-main td a:visited,
.woocommerce-MyAccount-content p a:visited,
.woocommerce-MyAccount-content li a:visited {
	color: var(--cyan-400);
}
.site-main p a:hover,
.site-main li a:hover,
.site-main dd a:hover,
.site-main td a:hover,
.woocommerce-MyAccount-content p a:hover,
.woocommerce-MyAccount-content li a:hover {
	color: #fff;
}
/* Elements that are links but styled as controls keep their own treatment. */
.site-main p a.button,
.site-main p a.altitude-track__btn,
.site-main li a.button {
	text-decoration: none;
}

/* === Header account link (inc/account-link.php, storefront_header @51) ===
   Last item in the primary-navigation row, which the desktop header rebuild
   above makes justify-content: flex-end, so it sits at the far right after
   the menu. Styled like the eyebrow labels: mono, tracked, uppercase. Below
   768px the row is Storefront's hamburger, so the link drops to its own
   centered line instead. */
.altitude-account-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: 28px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}
.altitude-account-link a {
	color: var(--ice-100);
	text-decoration: none;
	text-shadow: none;
}
.altitude-account-link a:hover,
.altitude-account-link a:focus-visible {
	color: var(--cyan-400);
}
.altitude-account-link a.altitude-account-link__create {
	color: var(--cyan-400);
	font-weight: 600;
}
.altitude-account-link a.altitude-account-link__create:hover,
.altitude-account-link a.altitude-account-link__create:focus-visible {
	color: #fff;
}
.altitude-account-link__sep {
	color: var(--slate-500);
}
@media (max-width: 767px) {
	.altitude-account-link {
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 6px 0 4px;
	}
}