/* Small, general site-header CSS tweaks that don't belong to any one feature — kept separate
   from finder.css/finder-sidebar.css, which are Finder-tool-specific. First use, 2026-08-15:
   "Laser Services" was wrapping to its own line in the primary nav. Tried shrinking the nav
   font-size first — worked, but Wulfy wanted the text kept at full size, not smaller. The real
   fix was moving My Account/Cart out of the main bar into the top bar (see the
   topbar_elements_right / header_elements_right theme_mods), freeing up real width instead of
   compressing what's already there. That freed up a lot of slack (measured live: 233px spare
   at 1280px wide), so the nav text is now sized UP from Flatsome's ~12.8px default rather than
   just left alone, filling the row properly instead of looking small in all that space. */
#masthead .header-nav-main.nav-uppercase {
	font-size: 16px; /* 2026-08-16: tried 17px per Wulfy's "a bit bigger" ask, but that was
		enough to wrap the nav to two lines again -- the exact problem 15px was originally chosen
		to avoid (2026-08-15). 16px is the largest step up that still holds one line. */
	display: flex;
	justify-content: flex-end; /* keeps the tight original per-item spacing below, just pushes
		the whole compact group right instead of spreading it across the row */
	width: 100%;
}

#masthead .header-nav-main.nav-uppercase > li {
	margin-right: 4px;
}

#masthead .header-nav-main.nav-uppercase > li:last-child {
	margin-right: 0; /* so "Laser Services" lands exactly on the shared right edge, not 4px short */
}

/* Top bar — a dark blue band (per Wulfy's Lipsey's reference) with real vertical breathing
   room above/below the search bar, instead of Flatsome's default thin white strip. */
#top-bar {
	background-color: #2c4562;
	padding-top: 14px;
	padding-bottom: 14px;
}

#top-bar .flex-right a {
	color: rgba(255, 255, 255, 0.85);
}

#top-bar .flex-right a:hover {
	color: #fff;
}

/* Search bar — widened well past Flatsome's default (the header_search_width slider wasn't
   moving the needle since .flex-left's width is driven by its content, not that setting), a
   soft rounded-rect matching the Finder drawer's own controls instead of square corners, and a
   light gray placeholder + subtle letter-spacing to echo Lipsey's own search bar styling. */
#top-bar .flex-left {
	flex: 1 1 420px;
	max-width: 480px;
}

#top-bar .searchform-wrapper,
#top-bar .searchform {
	width: 100%;
}

#top-bar .searchform .search-field {
	border-radius: 5px 0 0 5px;
}

#top-bar .searchform .search-field::placeholder {
	color: #8a8f96;
	letter-spacing: 0.01em;
}

/* Top-bar search button — rounded to match the Finder drawer's buttons, and the same amber
   (#C6791F) instead of Flatsome's default rust/red-orange, so it reads as the same brand
   rather than two different oranges. */
#top-bar .search-form button,
#top-bar .searchform button,
#top-bar .search-submit {
	background-color: #c6791f;
	border-color: #c6791f;
	border-radius: 0 5px 5px 0;
}

#top-bar .search-form button:hover,
#top-bar .searchform button:hover,
#top-bar .search-submit:hover {
	background-color: #d98a2b;
	border-color: #d98a2b;
}

/* Company name next to the logo mark — the uploaded logo file is icon-only (just the shield),
   so the wordmark is added as real text (see header-tweaks.js) rather than baked into the SVG,
   matching how Lipsey's own header pairs an icon mark with "LIPSEY'S." next to it.
   #logo itself is hard-locked to width:80px by Flatsome (sized exactly for the image) — found
   live 2026-08-15 that the appended text was overflowing straight past that box into the nav's
   own space rather than growing it, causing a visual overlap. Freeing the width lets the flex
   row reflow properly, pushing the nav to start after the logo's real (wider) rendered size. */
#logo {
	width: auto !important;
	flex-shrink: 0;
}

#logo a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wla-logo-text {
	font-family: 'Roboto Slab', Georgia, serif; /* design-system heading font, PRD §5.2 */
	font-weight: 700;
	font-size: 22px; /* sized up now that the nav is a compact right-justified group again,
		leaving real room next to the logo instead of it competing for a full-width row */
	letter-spacing: 0.01em;
	color: #1e2420; /* --ink, PRD §5.1 */
	white-space: nowrap;
}

/* Cart icon — replaced outright with our own controllable SVG rather than trying to recolor
   Flatsome's own glyph. That one turned out to be genuinely unrecolorable via CSS: six rounds
   of live inspection (background-image, mask, icon fonts, inline SVG, even
   document.elementsFromPoint at the icon's exact rendered pixel) found NOTHING painting it —
   no element or pseudo-element at that point had any visual property set at all, so there was
   no CSS lever left to try. See header-tweaks.js for the actual SVG injection. */
#top-bar .cart-icon svg {
	color: #c6791f;
}

/* Homepage "Our Blog" / "Custom Laser Work" / "About Us" tiles (class="wla-rounded-tile" added
   directly on their [ux_banner] shortcodes) -- rounded to match the sitewide button_radius
   (5px), and their text layer set to pointer-events:none so a click landing directly on the
   heading text still reaches the banner's own invisible full-tile link underneath it instead of
   being swallowed by the text layer sitting on top. Found live 2026-08-16 (per Wulfy) that
   hovering/clicking the text specifically made the link stop working -- everywhere else on the
   tile worked fine, confirming it was exactly this stacking issue. */
.wla-rounded-tile,
.wla-rounded-tile .banner-bg,
.wla-rounded-tile .banner-bg img {
	border-radius: 5px;
	overflow: hidden;
}

.wla-rounded-tile .banner-layers {
	pointer-events: none;
}

.wla-rounded-tile .banner-link {
	pointer-events: auto;
}

/* Flatsome vertically centers the *whole* .text-box (heading + divider together) as one block
   via a translateY(-50%) transform, so the divider's own height was pulling the heading text
   off true-center. Pulling the divider out of normal flow (position:absolute) means the
   .text-box's height -- what that transform centers against -- shrinks to just the heading, so
   the heading itself lands dead center, with the divider independently placed just below it. */
.wla-rounded-tile .text-inner {
	position: relative;
}

.wla-rounded-tile .is-divider {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	margin-top: 8px;
}

/* Homepage "Featured Builder" slider banner (Rock-Op) -- Flatsome's [ux_banner] has no native
   zoom attribute, only bg_pos (which it renders straight through to object-position on the
   banner's own <img>). Went through a couple of framings live on 2026-08-16: first anchored
   to the very bottom of the photo (bg_pos="50% 100%"), then Wulfy asked for it centered and
   zoomed on the rifle instead -- the rifle itself sits in the photo's middle-lower band (the
   case lid's "Relford" engraving takes up the top ~40%), so the shortcode's bg_pos is now
   "50% 62%" to center vertically on the rifle rather than the whole case. Zooming in is a
   plain CSS scale on top of that same image; object-fit:cover + the object-position above is
   what's already framing/cropping it, so scaling from center tightens the crop further while
   keeping that same rifle-centered framing. */
.wla-rockop-photo-zoom .banner-bg img {
	transform: scale(1.6);
}

/* Homepage hero banner slider -- was full-bleed (edge to edge, stretching further the wider
   the browser window got), while every other section of the homepage (the tiles row, product
   grids, etc.) stays boxed at the theme's normal ~1080px container width. Per Wulfy 2026-08-16
   ("I don't like how the banners stretch when I go to full screen... keep them the width they
   are at half screen"): capped to that SAME 1080px the rest of the page already uses (measured
   live against the "Weekly Featured Products" section's own container), rather than a
   guessed pixel value -- so the banner now reads as consistent with the rest of the page
   instead of specifically ballooning wider on large monitors. Widened ~15% from that (1080 ->
   1240px) per Wulfy's immediate follow-up -- now intentionally a bit wider than the rest of
   the page's boxed content, not matching it exactly, but still capped rather than stretching
   further past this on large monitors. Scoped to body.home so this can't affect a slider added
   to some other page later. */
body.home .slider-wrapper {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/* "New in store" grid on the empty Cart page (per Wulfy 2026-08-17 screenshot) -- this is
   WooCommerce's own legacy "Products (New)" block (.wc-block-grid.wp-block-product-new),
   which doesn't constrain product images to a consistent size the way the theme's normal shop
   grid does. Since the 4 newest products can be any mix of tall/short/wide source photos, each
   column's image rendered at a different height, pushing that column's title/price/Add to Cart
   button down by a different amount and breaking the row alignment. Forcing every image into
   the same fixed-ratio box (object-fit: contain, so nothing gets cropped) makes all 4 columns
   the same height regardless of the source photo's own dimensions. */
.wc-block-grid.wp-block-product-new .wc-block-grid__product-image img,
.wc-block-grid.wp-block-product-new img.wc-block-grid__product-image {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
}
.wc-block-grid.wp-block-product-new .wc-block-grid__product {
	display: flex;
	flex-direction: column;
}