/* ========================================================================
 * Geo-Med — Blank skeleton cards for /shop
 * Renders a professional skeleton placeholder over each product card on
 * page load. Hides real card content until images finish loading, then
 * fades real content in. Scoped to body.gm-shop.
 *
 * Skeleton design (top → bottom):
 *   - Image area (top ~60% of card, soft brand-tinted gradient panel)
 *   - Title line 1 (78% width)
 *   - Title line 2 (54% width, slightly lighter)
 *   - Price line   (34% width)
 *   - Button       (72% width, centered, taller)
 * Subtle shimmer wave sweeps across at 1.6s.
 * ===================================================================== */

@keyframes gm-skel-shimmer {
	0%   { background-position: 220% 0; }
	100% { background-position: -120% 0; }
}

@keyframes gm-skel-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---- Base — paint isolation ------------------------------------------ */
/* `contain: layout` lets the browser isolate each card's layout work so
   per-card animations during the staggered reveal don't trigger layout
   on neighbors. Pure perf hint, no visual effect. */

body.gm-shop .products li.product {
	contain: layout;
}

/* ---- Loading state — applied by default on body.gm-shop -------------- */
/* :not(.gm-shop-loaded) means the skeleton shows immediately on first
   paint and stays until JS adds the loaded class. */

body.gm-shop:not(.gm-shop-loaded) .products li.product {
	position: relative;
	overflow: hidden;
	min-height: 380px;
	background: transparent;
}

/* Hide the real card content during skeleton state */
body.gm-shop:not(.gm-shop-loaded) .products li.product > * {
	visibility: hidden !important;
}

/* The skeleton card itself — drawn entirely by ::before */
body.gm-shop:not(.gm-shop-loaded) .products li.product::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #ffffff;
	background-image:
		/* button — bottom, centered */
		linear-gradient(#dde5ec, #dde5ec),
		/* price */
		linear-gradient(#dde5ec, #dde5ec),
		/* title line 2 — slightly lighter */
		linear-gradient(#e7edf3, #e7edf3),
		/* title line 1 */
		linear-gradient(#dde5ec, #dde5ec),
		/* image area — gradient panel */
		linear-gradient(135deg, #eef3f8 0%, #f5f8fb 50%, #eef3f8 100%);
	background-position:
		center calc(100% - 18px),
		16px   calc(100% - 70px),
		16px   calc(100% - 100px),
		16px   calc(100% - 124px),
		0      0;
	background-size:
		72% 38px,
		34% 13px,
		54% 13px,
		78% 13px,
		100% calc(100% - 154px);
	background-repeat: no-repeat;
	border-radius: 6px;
	box-shadow:
		0 0 0 1px rgba(14, 50, 100, 0.05),
		0 1px 3px rgba(14, 50, 100, 0.04);
}

/* Shimmer sweep on top */
body.gm-shop:not(.gm-shop-loaded) .products li.product::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image: linear-gradient(
		105deg,
		rgba(255, 255, 255, 0)    30%,
		rgba(255, 255, 255, 0.65) 50%,
		rgba(255, 255, 255, 0)    70%
	);
	background-size: 220% 100%;
	background-repeat: no-repeat;
	animation: gm-skel-shimmer 1.6s linear infinite;
	border-radius: 6px;
}

/* ---- Loaded state — staggered fade-in, skeleton fade-out ------------ */
/* Each card carries a `--gm-i` index (set by JS, capped at 16). Children
   fade in with a per-card 35ms delay so the grid reveals in a wave rather
   than flashing in all at once. Skeleton fades out on the same per-card
   delay so each card's transition is synchronized. */

body.gm-shop.gm-shop-loaded .products li.product > * {
	animation: gm-skel-fade-in 0.45s cubic-bezier(0.2, 0.85, 0.25, 1) calc(var(--gm-i, 0) * 35ms) forwards;
}

body.gm-shop.gm-shop-loaded .products li.product::before,
body.gm-shop.gm-shop-loaded .products li.product::after {
	opacity: 0;
	transition: opacity 0.4s ease calc(var(--gm-i, 0) * 35ms);
	pointer-events: none;
}

/* ---- Card hover state (loaded only) ---------------------------------- */
/* Subtle 3px lift + softer brand-tinted shadow on hover so cards feel
   interactive once content has revealed. Hover-only via @media (hover: hover)
   so touch devices and the skeleton state are untouched. */

body.gm-shop.gm-shop-loaded .products li.product {
	transition:
		transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1),
		box-shadow 0.28s cubic-bezier(0.2, 0.85, 0.25, 1);
	will-change: transform;
}

@media (hover: hover) {
	body.gm-shop.gm-shop-loaded .products li.product:hover {
		transform: translateY(-3px);
		box-shadow:
			0 12px 28px rgba(14, 50, 100, 0.10),
			0 2px 6px rgba(14, 50, 100, 0.06);
	}
}

/* ---- Tab visibility — pause shimmer when hidden ---------------------- */

body.gm-shop.gm-paused .products li.product::after {
	animation-play-state: paused;
}

/* ---- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.gm-shop:not(.gm-shop-loaded) .products li.product::after {
		animation: none !important;
		opacity: 0 !important;
	}
	body.gm-shop.gm-shop-loaded .products li.product {
		transition: none !important;
	}
	body.gm-shop.gm-shop-loaded .products li.product:hover {
		transform: none !important;
	}
	body.gm-shop.gm-shop-loaded .products li.product > * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	body.gm-shop.gm-shop-loaded .products li.product::before,
	body.gm-shop.gm-shop-loaded .products li.product::after {
		transition: none !important;
		opacity: 0 !important;
	}
}

/* ---- Shop toolbar restyle --------------------------------------------- */
/* Pulls the result count, view toggles, per-page selector, and sort
   dropdown into one unified bar instead of the stacked-on-three-rows
   layout. Pure CSS — sibling DOM (.woocommerce-result-count,
   .kkw-toolbar, .kkw-sort-container) is left as-is; we use negative
   margin to lift the sort row up onto the toolbar row. */

body.gm-shop .woocommerce-result-count {
	margin: 0 0 14px 0;
	color: #4a5560;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1px;
}

body.gm-shop #main-content .kkw-toolbar {
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 14px;
	padding-right: 248px; /* reserve space for the sort dropdown lifted from below */
	margin-bottom: 0;
	align-items: center;
	gap: 12px;
}

body.gm-shop #main-content .kkw-sort-container {
	margin: -54px 0 26px 0;
	padding: 0;
	pointer-events: none;
	position: relative;
	z-index: 2;
	/* Sort container is display:flex; the real cause of misalignment was
	   the inner <form.woocommerce-ordering>'s default margin-top:10px (a
	   WooCommerce default). The form rule below zeros that. We also
	   collapse the container's height + flex-start as defensive belt-and-
	   suspenders so the form has nowhere to drift to vertically. */
	height: 40px !important;
	align-items: flex-start !important;
}

/* Real root cause of the per-page / sort misalignment. WooCommerce's
   default form.woocommerce-ordering carries margin: 10px 0 — that 10px
   top margin was pushing the inner <select> 10px below where it should
   sit. Zeroed here so the form aligns flush with the container's top. */
body.gm-shop .kkw-sort-container form.woocommerce-ordering {
	margin: 0 !important;
}
body.gm-shop #main-content .kkw-sort-container > * {
	pointer-events: auto;
}

/* Modernize the dropdowns — consistent height, rounded, focus ring,
   drop the all-caps so they read as proper UI controls. */
body.gm-shop #main-content .kkw-per-page-select,
body.gm-shop #main-content .kkw-select-wrapper select.orderby {
	text-transform: none !important;
	font-weight: 500;
	letter-spacing: 0.1px;
	border-radius: 8px !important;
	height: 40px;
	border: 1px solid #d4dbe2 !important;
	background-color: #fff;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body.gm-shop #main-content .kkw-per-page-select:focus,
body.gm-shop #main-content .kkw-select-wrapper select.orderby:focus {
	border-color: #0e70bb !important;
	box-shadow: 0 0 0 3px rgba(14, 112, 187, 0.14);
	outline: none;
}

/* View toggles — square 40px hit targets, brand-blue active state */
body.gm-shop #main-content .kkw-view-btn {
	height: 40px;
	width: 40px;
	border-radius: 8px;
	border: 1px solid #d4dbe2;
	color: #4a5560;
	background: #fff;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
body.gm-shop #main-content .kkw-view-btn.active {
	background: #0e70bb;
	border-color: #0e70bb;
	color: #fff;
}
body.gm-shop #main-content .kkw-view-btn:not(.active):hover {
	border-color: #0e70bb;
	color: #0e70bb;
	background: rgba(14, 112, 187, 0.04);
}

/* Below ~720px viewport, the negative-margin overlap fights wrapping —
   stack the sort under the toolbar instead, like the original layout. */
@media (max-width: 720px) {
	body.gm-shop #main-content .kkw-toolbar {
		padding-right: 0;
	}
	body.gm-shop #main-content .kkw-sort-container {
		margin-top: 14px;
	}
}

/* ---- Pagination restyle ----------------------------------------------- */
/* Pill buttons at 40px height matching the toolbar control rhythm.
   Filled brand-blue active state mirrors the view-toggle so brand-blue
   becomes a recognizable "you are here" signal across the page. */

body.gm-shop nav.woocommerce-pagination {
	margin: 32px 0 16px;
	padding: 20px 0 8px;
	border-top: 1px solid #e2e8f0;
	text-align: center;
}

body.gm-shop nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

body.gm-shop nav.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

/* The pill — applied to both <a> links and <span> states (.current, .dots) */
body.gm-shop nav.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid #d4dbe2;
	background: #ffffff;
	color: #0e70bb;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Hover state on real links only — span.current and span.dots stay put */
body.gm-shop nav.woocommerce-pagination a.page-numbers:hover {
	background: rgba(14, 112, 187, 0.06);
	border-color: #0e70bb;
}

/* Current page — filled brand blue, mirrors active view-toggle */
body.gm-shop nav.woocommerce-pagination span.page-numbers.current {
	background: #0e70bb;
	border-color: #0e70bb;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(14, 50, 100, 0.10);
}

/* Ellipsis separator — no border, no hover, just a gray dot row */
body.gm-shop nav.woocommerce-pagination span.page-numbers.dots {
	border: 0;
	background: transparent;
	color: #94a3b8;
	min-width: 24px;
	padding: 0 2px;
	cursor: default;
}

/* Prev / next arrows — slightly larger glyph for visual weight */
body.gm-shop nav.woocommerce-pagination .prev.page-numbers,
body.gm-shop nav.woocommerce-pagination .next.page-numbers {
	font-size: 20px;
	font-weight: 700;
	padding: 0;
}

@media (max-width: 480px) {
	body.gm-shop nav.woocommerce-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 8px;
		font-size: 13px;
	}
}

/* ---- Vendor sidebar polish -------------------------------------------- */
/* Container becomes a proper rounded card with a tinted header strip,
   each vendor item gets a hover state with a brand-blue left-accent rule,
   and JS injects a search input + active-vendor highlight. */

body.gm-shop .sidebar-wrap .vendor-widget,
body.gm-shop .sidebar-wrap .contract-widget-dynamic {
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(14, 50, 100, 0.04);
	padding: 0; /* override the inherited 24px outer padding from theme/plugin CSS — the inner sections (header strip, search, list) carry their own padding */
}

body.gm-shop .sidebar-wrap .contract-widget-dynamic {
	margin-top: 16px;
}

body.gm-shop .sidebar-wrap .vendor-widget .title_clear_btn,
body.gm-shop .sidebar-wrap .contract-widget-dynamic .title_clear_btn {
	padding: 14px 18px 12px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	margin: 0;
}

body.gm-shop .sidebar-wrap .vendor-widget h2.rounded.filter_expand,
body.gm-shop .sidebar-wrap .contract-widget-dynamic h2.rounded.filter_expand {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #1a2a3a;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
}

/* Search input — injected by JS */
body.gm-shop .sidebar-wrap .vendor-widget .gm-vendor-search {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 16px;
	margin: 0;
	border: 0;
	border-bottom: 1px solid #e2e8f0;
	background: #ffffff;
	font-size: 14px;
	font-family: inherit;
	color: #1a1a1a;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.18s ease;
}
body.gm-shop .sidebar-wrap .vendor-widget .gm-vendor-search:focus {
	outline: none;
	background: rgba(14, 112, 187, 0.04);
}
body.gm-shop .sidebar-wrap .vendor-widget .gm-vendor-search::placeholder {
	color: #94a3b8;
}

/* Vendor + Contract list — custom thin scrollbar so the lists don't feel cluttered */
body.gm-shop .sidebar-wrap .vendor-widget ul.product_vendor,
body.gm-shop .sidebar-wrap .contract-widget-dynamic ul.product_contract {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	max-height: 380px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}
body.gm-shop .sidebar-wrap .vendor-widget ul.product_vendor::-webkit-scrollbar,
body.gm-shop .sidebar-wrap .contract-widget-dynamic ul.product_contract::-webkit-scrollbar {
	width: 6px;
}
body.gm-shop .sidebar-wrap .vendor-widget ul.product_vendor::-webkit-scrollbar-thumb,
body.gm-shop .sidebar-wrap .contract-widget-dynamic ul.product_contract::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}
body.gm-shop .sidebar-wrap .vendor-widget ul.product_vendor::-webkit-scrollbar-track,
body.gm-shop .sidebar-wrap .contract-widget-dynamic ul.product_contract::-webkit-scrollbar-track {
	background: transparent;
}

/* Vendor + Contract list items */
body.gm-shop .sidebar-wrap .vendor-widget li.vendor_li,
body.gm-shop .sidebar-wrap .contract-widget-dynamic li.contract_li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* Item appearance — vendor uses <a> inside <li>, contract uses bare <li>
   text. Style both so the contract list reads with the same rhythm. */
body.gm-shop .sidebar-wrap .vendor-widget li.vendor_li a,
body.gm-shop .sidebar-wrap .contract-widget-dynamic li.contract_li,
body.gm-shop .sidebar-wrap .contract-widget-dynamic li.contract_li a {
	display: block;
	padding: 8px 18px 8px 16px;
	color: #2a3138;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

body.gm-shop .sidebar-wrap .vendor-widget li.vendor_li a:hover,
body.gm-shop .sidebar-wrap .vendor-widget li.vendor_li a:focus-visible,
body.gm-shop .sidebar-wrap .contract-widget-dynamic li.contract_li:hover,
body.gm-shop .sidebar-wrap .contract-widget-dynamic li.contract_li:focus-visible,
body.gm-shop .sidebar-wrap .contract-widget-dynamic li.contract_li a:hover,
body.gm-shop .sidebar-wrap .contract-widget-dynamic li.contract_li a:focus-visible {
	background: rgba(14, 112, 187, 0.05);
	color: #0e70bb;
	border-left-color: #0e70bb;
	outline: none;
}

/* Active vendor — when URL has ?woo_vendor=X matching this item */
body.gm-shop .sidebar-wrap .vendor-widget li.vendor_li.gm-vendor-active a {
	background: rgba(14, 112, 187, 0.08);
	color: #0e70bb;
	font-weight: 600;
	border-left-color: #0e70bb;
}

/* Hidden by search filter */
body.gm-shop .sidebar-wrap .vendor-widget li.vendor_li.gm-vendor-hidden {
	display: none;
}

/* Empty state — shown when search has zero matches */
body.gm-shop .sidebar-wrap .vendor-widget .gm-vendor-empty {
	padding: 18px 18px 22px;
	color: #94a3b8;
	font-size: 13px;
	font-style: italic;
	text-align: center;
}

/* ---- Shop page header refinement ------------------------------------- */
/* Hide the redundant "All" H1 on the main /shop archive — the breadcrumb
   already establishes context and the toolbar's result count carries the
   number. Category archives keep the H1 untouched (it says something
   informative there, like "Wound Care"). */
body.woocommerce-shop.gm-shop h1.woocommerce-products-header__title {
	display: none;
}

/* Breadcrumb — modernize colors and spacing. Separator " | " gets
   rewritten to " › " by JS (textContent replacement). */
body.gm-shop nav.woocommerce-breadcrumb {
	font-size: 13px;
	color: #6b7681;
	letter-spacing: 0.1px;
	/* Left-align with the Vendors widget card. The breadcrumb's parent .row
	   starts at the same x as .sidebar-wrap (left=258), but the visible
	   .vendor-widget card sits 12px inside that (.sidebar-wrap has a 12px
	   left padding). Adding 12px left margin here matches the breadcrumb's
	   visible leading edge to the card's leading edge. */
	margin: 0 0 18px 12px;
	padding: 0;
}

body.gm-shop nav.woocommerce-breadcrumb a {
	color: #0e70bb;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s ease;
}
body.gm-shop nav.woocommerce-breadcrumb a:hover {
	color: #074a82;
	text-decoration: underline;
}

body.gm-shop nav.woocommerce-breadcrumb .active-breadcrumb {
	color: #4a5560;
	font-weight: 500;
}

/* ---- Add to Cart — primary brand-blue CTA ----------------------------- */
/* Logged-in users see "Add to Cart" on every product card; the WC default
   gray-on-gray styling reads as a secondary/disabled action. For a B2G
   procurement site this IS the primary action and should pop. Brand-blue
   fill matches the active view-toggle and active pagination — same
   "primary" language across the whole shop chrome.

   Logged-out users see a different button ("Log in to see prices" with
   different classes, no .add_to_cart_button) — that one stays subtle. */

body.gm-shop .products li.product a.add_to_cart_button,
body.gm-shop .products li.product button.add_to_cart_button {
	background: #0e70bb !important;
	background-color: #0e70bb !important;
	color: #ffffff !important;
	border: 1px solid #0e70bb !important;
	box-shadow: 0 1px 2px rgba(14, 50, 100, 0.10);
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

body.gm-shop .products li.product a.add_to_cart_button:hover,
body.gm-shop .products li.product button.add_to_cart_button:hover {
	background: #074a82 !important;
	background-color: #074a82 !important;
	border-color: #074a82 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(14, 50, 100, 0.18);
}

body.gm-shop .products li.product a.add_to_cart_button:active,
body.gm-shop .products li.product button.add_to_cart_button:active {
	transform: translateY(1px);
	box-shadow: 0 1px 2px rgba(14, 50, 100, 0.12);
}

/* WooCommerce ajax-add states — keep the brand-blue look so the user
   doesn't see an unexpected color flash mid-action */
body.gm-shop .products li.product a.add_to_cart_button.loading,
body.gm-shop .products li.product a.add_to_cart_button.added {
	background: #0e70bb !important;
	background-color: #0e70bb !important;
	color: #ffffff !important;
	opacity: 0.85;
}

/* ========================================================================
 * Senior UI eng pass — overall scale-down + typography refinement.
 *
 * The page was sized for ~1024px viewports; on modern 1440-1920px screens
 * the cards/text/sidebar widgets all read as oversized. This pass tightens
 * the rhythm: 4-column grid (was 3), smaller card type, refined sidebar
 * section headers (sentence case instead of all-caps tracking), tighter
 * pagination. Brings native 100% rendering to roughly what 75% felt like
 * before.
 * ===================================================================== */

/* ---- 4-column product grid (was 3) ----------------------------------- */
/* Override WC's float-based layout with CSS Grid for predictable column
   sizing. The columns-X classes WC emits become irrelevant; the grid
   handles everything. */

body.gm-shop ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* THE ANCIENT BUG.
 * WooCommerce's default CSS attaches `ul.products::before { content: " ";
 * display: table }` as a clearfix for the float-based card layout. Once we
 * flipped the ul to display:grid, that ::before became a grid ITEM —
 * silently consuming grid cell #1 of the first row, which is why the
 * first product slot kept rendering blank when anyone tried grid/flex on
 * the product list. Killing both pseudos here. */
body.gm-shop ul.products::before,
body.gm-shop ul.products::after {
	content: none !important;
	display: none !important;
}

body.gm-shop ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding: 14px !important; /* tighter card interior */
}

/* ===========================================================================
 * MOBILE-FIRST GRID
 * Base = 1 column (phone). Expand to 2/3/4 columns via min-width queries
 * as the viewport grows. List-view (kkw-view-list) always stays at 1 col,
 * handled separately below.
 * ========================================================================= */
body.gm-shop ul.products {
	grid-template-columns: 1fr !important;
}

@media (min-width: 540px) {
	body.gm-shop:not(.kkw-view-list) ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 900px) {
	body.gm-shop:not(.kkw-view-list) ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1240px) {
	body.gm-shop:not(.kkw-view-list) ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* List view (toggle in toolbar): when the user picks the list icon, the
   theme adds .kkw-view-list to <body>. Our 4-column grid would otherwise
   keep applying — collapsing each card to a 244px-wide column while the
   list-view inner styles try to render a horizontal layout, which looks
   completely broken. Force one column so each item gets the full row
   width and the existing list-view styles render correctly. */
body.gm-shop.kkw-view-list ul.products {
	grid-template-columns: 1fr !important;
	gap: 12px !important;
}

/* ========================================================================
 * List view inner card layout.
 *
 * Grid view: <a.woocommerce-LoopProduct-link> uses display:grid (80px
 * 730px 150px / 94px 16px) to stack image-on-top-of-content. That breaks
 * for a horizontal row layout.
 *
 * Flatten to flex row in list view: image on left, title + contract +
 * description in middle, price on right (followed by the Add-to-Cart
 * which is a sibling outside the <a>). All vertically centered.
 * ===================================================================== */

body.gm-shop.kkw-view-list .products li.product {
	padding: 14px 18px !important;
	gap: 16px;
	transform: none !important; /* skip the grid-view hover lift in list rows */
	transition: background 0.15s ease, box-shadow 0.15s ease;
	min-height: auto;
	border: 1px solid #e7ecf2 !important;
	position: relative; /* anchor for FEATURED badge */
	flex-wrap: wrap !important; /* allow Add to Cart to wrap to next row at narrow viewports */
	overflow: visible !important;
}

body.gm-shop.kkw-view-list .products li.product:hover {
	background: rgba(14, 112, 187, 0.02);
	box-shadow: 0 1px 3px rgba(14, 50, 100, 0.06);
}

body.gm-shop.kkw-view-list .products li.product > a.woocommerce-LoopProduct-link {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex: 1 1 auto;
	max-width: calc(100% - 150px) !important;
	gap: 24px;
	/* CRITICAL: position:static (not relative) so the absolute-positioned
	   price block AND Add-to-Cart anchor to <li.product> instead of <a>.
	   <a>'s max-width ends BEFORE the right column, so anchoring to <a>
	   would put the price in the middle of the row. <li> spans the full
	   row width, which is what we want. */
	position: static !important;
	grid-template-columns: unset !important;
	grid-template-rows: unset !important;
	/* CRITICAL #2: kill the identity transform left over from grid-view
	   animations (gm-fade-rise's `transform: matrix(1,0,0,1,0,0)`).
	   Per CSS spec, ANY non-none transform — even an identity one —
	   creates a containing block for absolutely-positioned descendants.
	   That's why the price block was anchoring to <a>'s right edge
	   (1343px) instead of <li>'s right edge (1648px). Without this fix,
	   the position:static change above is silently ignored. */
	transform: none !important;
	animation: none !important;
}

/* FEATURED badge — anchored to <li.product> (since innerA is now position:static).
   Position at top-left of LI, just inside its padding. Killed all
   inherited shadow/filter/glow that was looking tacky. */
body.gm-shop.kkw-view-list .products li.product .geo-med-featured-badge {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	font-size: 9px !important;
	padding: 3px 8px !important;
	line-height: 1.3 !important;
	border-radius: 6px !important;
	z-index: 2 !important;
	letter-spacing: 0.4px !important;
	box-shadow: none !important;
	filter: none !important;
	text-shadow: none !important;
}

/* Image — 90px square, contained, with subtle off-white plate behind it */
body.gm-shop.kkw-view-list .products li.product .attachment-woocommerce_thumbnail {
	flex: 0 0 90px !important;
	width: 90px !important;
	height: 90px !important;
	object-fit: contain !important;
	margin: 0 !important;
	order: 2;
	background: #f8fafc !important;
	border-radius: 8px !important;
	padding: 6px !important;
	box-sizing: border-box !important;
}

/* Top content (title + contract + description) — sits LEFT, doesn't grow.
   Don't grab flex:1 — that's what was leaving the price marooned in dead
   space. Take only what the content needs (capped), then let the price
   block use margin-left:auto to slide all the way to the right edge. */
body.gm-shop.kkw-view-list .products li.product .gm-card-top-content {
	flex: 0 1 auto !important;
	width: auto !important;
	max-width: 60% !important;
	height: auto !important;
	order: 3;
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	align-items: flex-start !important;
	text-align: left !important;
	margin: 0 !important;
	min-width: 0;
}

/* Price block — flows INLINE at the right of innerA. Pure flex, no
   absolute positioning. margin-left:auto pushes it to the right edge of
   innerA's flex line. */
body.gm-shop.kkw-view-list .products li.product .gm-card-bottom-content {
	position: static !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 90px !important;
	height: auto !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	text-align: right !important;
	align-self: center !important;
	order: 4;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
}

/* Hide the grid-spacer cell — not needed in flex layout */
body.gm-shop.kkw-view-list .products li.product .gm-card-spacer {
	display: none !important;
}

/* Price prominent in list view — was 16px, bumped slightly for the right column */
body.gm-shop.kkw-view-list .products li.product .price {
	font-size: 17px !important;
	font-weight: 700 !important;
}

/* Add to Cart — pure flex, sibling of innerA. Sits inline next to innerA
   on wide viewports; wraps to a full-width row below at narrow viewports
   via flex-wrap on the parent li. NO absolute positioning anywhere — the
   button is guaranteed visible at every viewport. */
body.gm-shop.kkw-view-list .products li.product > .add_to_cart_button,
body.gm-shop.kkw-view-list .products li.product > a.add_to_cart_button {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	right: auto !important;
	bottom: auto !important;
	top: auto !important;
	left: auto !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 130px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 10px 18px !important;
	font-size: 13px !important;
	text-align: center !important;
	order: 5;
	align-self: center;
}

/* On narrower viewports, force innerA to take a full row and Add to Cart
   to wrap below as a full-width button */
@media (max-width: 720px) {
	body.gm-shop.kkw-view-list .products li.product > a.woocommerce-LoopProduct-link {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	body.gm-shop.kkw-view-list .products li.product > .add_to_cart_button,
	body.gm-shop.kkw-view-list .products li.product > a.add_to_cart_button {
		flex: 0 0 100% !important;
		width: 100% !important;
		margin-top: 8px !important;
		order: 99 !important;
	}
}

/* (Old @media max-width:900px responsive fallback removed — base rules
   above now handle responsive wrapping naturally via flex-wrap. The
   @720px breakpoint earlier in this file forces innerA + Add to Cart to
   take their own full-width rows when the viewport is too narrow to
   keep them inline.) */

/* Below 540px: image and content stack vertically too */
@media (max-width: 540px) {
	body.gm-shop.kkw-view-list .products li.product > a.woocommerce-LoopProduct-link {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	body.gm-shop.kkw-view-list .products li.product .gm-card-top-content {
		max-width: 100% !important;
	}

	body.gm-shop.kkw-view-list .products li.product .gm-card-bottom-content {
		margin: 4px 0 0 0 !important;
		text-align: left !important;
		align-self: flex-start !important;
	}

	body.gm-shop.kkw-view-list .products li.product .attachment-woocommerce_thumbnail {
		flex: 0 0 80px !important;
		width: 80px !important;
		height: 80px !important;
	}
}

/* Inside .gm-card-top-content — override the grid-view align-self/grid-area
   that gets baked onto each child for grid placement. In list view we want a
   clean LEFT-aligned vertical column: SKU title on top, contract chip below,
   description below that. */

/* The h2 product title — align flex-start (was align-self: end from grid) */
body.gm-shop.kkw-view-list .products li.product .gm-card-top-content > h2.woocommerce-loop-product__title {
	align-self: flex-start !important;
	grid-column: unset !important;
	grid-area: unset !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1a2a3a !important;
	line-height: 1.3 !important;
	max-width: 100% !important;
	text-align: left !important;
}

/* The contract-type chip (.sku class — misleading; it actually holds
   "FSS" / "GSA" / "Government Open Market" etc., not the SKU). Make it a
   small muted line below the title. */
body.gm-shop.kkw-view-list .products li.product .gm-card-top-content > span.sku {
	align-self: flex-start !important;
	grid-column: unset !important;
	grid-area: unset !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #4a5560 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	display: inline-flex !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Description — gray secondary text */
body.gm-shop.kkw-view-list .products li.product .gm-card-top-content > .product_short_desc {
	align-self: flex-start !important;
	grid-column: unset !important;
	grid-area: unset !important;
	font-size: 13px !important;
	color: #6b7681 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
}

/* Price column — bigger and brand-colored to anchor the right side */
body.gm-shop.kkw-view-list .products li.product .gm-card-bottom-content .price,
body.gm-shop.kkw-view-list .products li.product .gm-card-bottom-content .price .amount {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #0e70bb !important;
}

/* ---- Card typography scale-down -------------------------------------- */

body.gm-shop .products li.product .woocommerce-loop-product__title {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 8px 0 6px !important;
}

body.gm-shop .products li.product .price,
body.gm-shop .products li.product .price .amount,
body.gm-shop .products li.product .price ins .amount {
	font-size: 16px !important;
	font-weight: 700 !important;
}

body.gm-shop .products li.product a.add_to_cart_button,
body.gm-shop .products li.product button.add_to_cart_button {
	font-size: 13px !important;
	padding: 9px 14px !important;
	height: auto !important;
	line-height: 1.3 !important;
}

/* Featured badge — slightly smaller to match the new card scale */
body.gm-shop .products li.product .featured-badge,
body.gm-shop .products li.product .gm-feature-tag {
	font-size: 10px !important;
	padding: 4px 9px !important;
	letter-spacing: 0.5px !important;
}

/* ---- Result count tighter ------------------------------------------- */

body.gm-shop .woocommerce-result-count {
	font-size: 13px !important;
}

/* ---- Sidebar list items tighter ------------------------------------- */

body.gm-shop .sidebar-wrap .vendor-widget li.vendor_li a {
	font-size: 13px !important;
	padding: 7px 16px !important;
}

/* ---- Pagination tighter (still hits 36px touch target on mobile) ----- */

body.gm-shop nav.woocommerce-pagination .page-numbers {
	min-width: 36px;
	height: 36px;
	font-size: 13px;
}

body.gm-shop nav.woocommerce-pagination .prev.page-numbers,
body.gm-shop nav.woocommerce-pagination .next.page-numbers {
	font-size: 18px;
}

/* ---- Card contract title (.sku) — single-line ellipsis -------------- */
/* The contract-type label rendered inside .gm-card-top-content as
   <span class="sku"> currently has display:flex + white-space:normal,
   which lets long values like "Government Open Market" wrap to two
   lines on the narrower 4-col cards. Force single line + truncate. */
body.gm-shop .products li.product .gm-card-top-content .sku {
	display: inline-flex !important;
	max-width: 100% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.3 !important;
	font-size: 11px !important;
	align-items: center !important;
	gap: 4px !important;
}

/* ===========================================================================
 * MOBILE-FIRST SHOP EXPERIENCE
 *
 * Below 992px the sidebar (Vendors + Available Contracts) is converted from
 * a full-width inline block above the products into an off-canvas drawer that
 * slides in over a backdrop when the user taps a "Filter" button injected
 * into the toolbar by shop-skeletons.js. This gets the user to products
 * immediately instead of forcing them to scroll past ~300px of filter chrome.
 *
 * Above 992px everything reverts to the original inline-sidebar layout and
 * the drawer machinery is hidden.
 * ========================================================================= */

/* Filter button — injected into the toolbar by shop-skeletons.js.
   Hidden by default; shown only on mobile via the (max-width: 991.98px)
   block below. */
body.gm-shop .gm-filter-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid #d4dbe2;
	border-radius: 8px;
	color: #1a2a3a;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
body.gm-shop .gm-filter-toggle:hover,
body.gm-shop .gm-filter-toggle:focus-visible {
	border-color: #0e70bb;
	color: #0e70bb;
	outline: none;
}
body.gm-shop .gm-filter-toggle .gm-filter-toggle-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
body.gm-shop .gm-filter-toggle .gm-filter-toggle-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 2px;
	border-radius: 9px;
	background: #0e70bb;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Drawer close button — injected into .sidebar-wrap by shop-skeletons.js.
   Hidden by default; shown only on mobile. */
body.gm-shop .gm-filter-close {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e2e8f0;
	color: #4a5560;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
	z-index: 2;
}
body.gm-shop .gm-filter-close:hover,
body.gm-shop .gm-filter-close:focus-visible {
	background: #f1f5f9;
	color: #1a2a3a;
	border-color: #cbd5e1;
	outline: none;
}

@media (max-width: 991.98px) {
	/* Make space inside the toolbar for the Filter button and let
	   controls wrap naturally on narrow screens instead of relying on
	   the negative-margin overlap trick. */
	body.gm-shop #main-content .kkw-toolbar {
		flex-wrap: wrap !important;
		padding-right: 0 !important; /* kill desktop reserved-space hack */
		gap: 10px !important;
		row-gap: 10px !important;
	}

	/* Show the filter button */
	body.gm-shop .gm-filter-toggle {
		display: inline-flex;
		order: -1; /* push to first position in toolbar */
	}

	/* Compact result count above the toolbar */
	body.gm-shop .woocommerce-result-count {
		font-size: 13px;
		margin-bottom: 10px !important;
	}

	/* Sidebar drawer container — fixed off-canvas by default */
	body.gm-shop .sidebar-wrap {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: min(86vw, 360px) !important;
		max-width: 360px !important;
		height: 100vh !important;
		height: 100dvh !important;
		max-height: 100vh !important;
		max-height: 100dvh !important;
		background: #ffffff !important;
		z-index: 10000 !important;
		transform: translateX(-105%);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		overflow-y: auto !important;
		overflow-x: hidden !important;
		padding: 56px 14px 24px 14px !important;
		margin: 0 !important;
		box-shadow: 0 10px 40px rgba(16, 24, 40, 0.22);
		flex: none !important;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
	}

	body.gm-shop.gm-filter-open .sidebar-wrap {
		transform: translateX(0);
		visibility: visible;
	}

	body.gm-shop .gm-filter-close { display: inline-flex; }

	/* Backdrop */
	body.gm-shop .gm-filter-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(11, 15, 25, 0.5);
		z-index: 9999;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
		border: 0;
		padding: 0;
		margin: 0;
		font: inherit;
		cursor: pointer;
	}
	body.gm-shop.gm-filter-open .gm-filter-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Lock body scroll when drawer is open */
	body.gm-shop.gm-filter-open {
		overflow: hidden;
		touch-action: none;
	}

	/* Inside the drawer, tighten the widget padding so more filters fit on screen */
	body.gm-shop.gm-filter-open .sidebar-wrap .vendor-widget,
	body.gm-shop.gm-filter-open .sidebar-wrap .contract-widget-dynamic {
		margin: 0 0 12px 0;
	}

	/* Sidebar filter lists can use the full drawer height now that we
	   have the room — bump max-height up so the lists scroll less and
	   feel more like a real filter panel. */
	body.gm-shop.gm-filter-open .sidebar-wrap .vendor-widget ul.product_vendor,
	body.gm-shop.gm-filter-open .sidebar-wrap .contract-widget-dynamic ul.product_contract {
		max-height: 60vh !important;
	}

	/* Sort container — kill the negative-margin desktop trick on mobile
	   so it falls back into the toolbar's flex flow. */
	body.gm-shop #main-content .kkw-sort-container {
		margin: 0 !important;
		flex: 1 1 auto !important;
		min-width: 160px;
	}
	body.gm-shop #main-content .kkw-sort-container .kkw-select-wrapper,
	body.gm-shop #main-content .kkw-sort-container form.woocommerce-ordering {
		width: 100% !important;
	}
	body.gm-shop #main-content .kkw-sort-container select.orderby {
		width: 100% !important;
	}

	/* Per-page form fills the remaining row width nicely */
	body.gm-shop #main-content .kkw-per-page-form {
		flex: 0 1 auto;
	}

	/* Floating Export Price Sheet button — slim down on mobile so it
	   doesn't dominate the screen or sit on top of cards. Pinned to
	   bottom-LEFT (the side-cart drawer owns the right edge on desktop;
	   we keep the position consistent across breakpoints). */
	body.gm-shop #gm-export-trigger {
		right: auto !important;
		left: 12px !important;
		bottom: 12px !important;
	}
	body.gm-shop #gm-export-btn {
		width: 52px !important;
		height: 52px !important;
		min-width: 52px !important;
		padding: 0 !important;
	}
	body.gm-shop #gm-export-btn .gm-btn-text { display: none !important; }
	body.gm-shop #gm-export-btn .gm-btn-icon { margin: 0 !important; }
}

/* Above 992px: everything reverts to the original inline layout.
   Drawer machinery is hidden in case the body class lingers. */
@media (min-width: 992px) {
	body.gm-shop .gm-filter-toggle,
	body.gm-shop .gm-filter-close,
	body.gm-shop .gm-filter-backdrop {
		display: none !important;
	}
	body.gm-shop.gm-filter-open {
		overflow: visible;
	}
}

/* Below 540px (small phones) — tighten the toolbar further so view
   toggles + filter button + per-page wrap to 2 rows max, not 3+. */
@media (max-width: 539.98px) {
	body.gm-shop #main-content .kkw-per-page-form {
		flex: 1 1 calc(50% - 5px);
	}
	body.gm-shop .gm-filter-toggle {
		flex: 1 1 calc(50% - 5px);
		min-width: 0;
	}
	body.gm-shop #main-content .kkw-view-toggles {
		flex: 0 0 auto;
	}
}