/*
Theme Name:   Civil Ordnance Storefront
Theme URI:    https://civilordnancemfg.com
Description:  Custom Storefront child theme for Civil Ordnance Manufacturing WooCommerce store.
Author:       Civil Ordnance
Author URI:   https://civilordnancemfg.com
Template:     storefront
Version:      1.1.5
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  civilordnance-storefront
*/

/* =========================================================================
   1. DESIGN TOKENS
   Pulled from the Civil Ordnance comp (dark / gold industrial FFL).
   ========================================================================= */
:root {
	--co-bg: #0d0d0d;
	--co-bg-raised: #161616;
	--co-bg-raised-2: #1f1f1f;
	--co-bg-card: #141414;
	--co-bg-darkest: #070707;
	--co-border: #242424;
	--co-border-light: #363636;
	--co-border-dark: #181818;

	--co-text: #f2ecd9;
	/* Prescott cream */
	--co-text-muted: #8f8b83;
	--co-text-faint: #b9b4ac;
	--co-text-bright: #ffffff;

	--co-accent: #cf9f3f;
	/* Prescott warm gold */
	--co-accent-hover: #e2b455;
	--co-on-accent: #0d0d0d;
	/* text sitting on gold */

	--co-danger: #b33927;
	--co-lowstock: #6e2723;
	/* deep maroon "N LEFT" chip */
	--co-success: #2e7d32;

	--co-font-display: 'Arial Narrow', 'Oswald', 'Impact', sans-serif;
	--co-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--co-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	--co-radius: 2px;
	--co-gap: 1.75rem;
}

/* =========================================================================
   2. BASE & RESET RESETS
   ========================================================================= */
html {
	background-color: var(--co-bg);
}

body {
	background-color: var(--co-bg) !important;
	color: var(--co-text);
	font-family: var(--co-font-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--co-text);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

a:hover,
a:focus {
	color: var(--co-accent);
	text-decoration: none;
}

.hentry a,
.hentry .entry-content a {
	color: var(--co-accent);
	text-decoration: none;
}

.hentry a:hover,
.hentry a:focus,
.hentry .entry-content a:hover,
.hentry .entry-content a:focus {
	text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.site-description,
.widget-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--co-font-display);
	color: var(--co-text);
	text-transform: uppercase;
	letter-spacing: .03em;
	font-weight: 700;
}

/* Content Area H5 Typography */
#content h5,
.site-content h5,
.entry-content h5,
.content-area h5 {
	font-family: var(--co-font-display) !important;
	font-size: 1.5rem !important;
	color: var(--co-accent) !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	line-height: 1.25 !important;
}

::selection {
	background: var(--co-accent);
	color: var(--co-on-accent);
}

#page,
#content,
.site-content {
	background-color: var(--co-bg);
}

.col-full {
	max-width: 78rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* =========================================================================
   3. UTILITY BAR (Topmost Bar)
   ========================================================================= */
.co-utility-bar {
	background-color: var(--co-bg-darkest);
	border-bottom: 1px solid var(--co-border);
	font-family: var(--co-font-display);
	font-size: .88rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--co-accent);
}

.co-utility-bar .col-full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem;
	padding-top: .6rem;
	padding-bottom: .6rem;
	min-height: 0;
}

.co-utility-bar__left,
.co-utility-bar__right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.co-utility-bar__item {
	display: inline-flex;
	align-items: center;
	color: var(--co-accent);
	font-weight: 500;
}

.co-utility-bar__item--highlight {
	color: var(--co-accent);
	font-weight: 700;
}

.co-utility-bar h5,
.co-utility-bar a {
	color: var(--co-accent);
	transition: color .15s ease;
}

.co-utility-bar a:hover {
	color: var(--co-accent-hover);
}

.co-utility-bar .widget {
	margin: 0;
	color: var(--co-accent);
	font-size: 1.2rem;
}

.co-utility-bar .widget-title,
.co-utility-bar ul {
	display: none;
}

/* Mobile nav toggle (hamburger). Lives in the utility bar; hidden on
   desktop, where the menu renders inline in the main header instead. */
.co-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: .25rem;
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.co-nav-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 14px;
}

.co-nav-toggle__bars span {
	display: block;
	height: 2px;
	width: 100%;
	background-color: var(--co-accent);
	transform-origin: center;
	transition: background-color .15s ease, transform .25s ease, opacity .2s ease;
}

.co-nav-toggle:hover .co-nav-toggle__bars span {
	background-color: var(--co-accent-hover);
}

/* Morph into an X when open (mobile-nav.js sets aria-expanded="true"). */
.co-nav-toggle[aria-expanded="true"] .co-nav-toggle__bars span:first-child {
	transform: translateY(6px) rotate(45deg);
}

.co-nav-toggle[aria-expanded="true"] .co-nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.co-nav-toggle[aria-expanded="true"] .co-nav-toggle__bars span:last-child {
	transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================================
   4. SITE HEADER, BRANDING & NAVIGATION
   ========================================================================= */
.site-header {
	background-color: var(--co-bg);
	border-bottom: 1px solid var(--co-border);
	padding: 0;
	margin-bottom: 0;
}

header.site-header .col-full,
.site-header .col-full {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: nowrap !important;
	gap: 2rem !important;
	padding-top: 1.25rem !important;
	padding-bottom: 1.25rem !important;
}

header.site-header .col-full::before,
header.site-header .col-full::after {
	display: none !important;
	content: none !important;
}

/* =========================================================================
   INLINE BRANDING (Logo + Title/Tagline Horizontal)
   ========================================================================= */
header.site-header .site-branding,
.site-header .site-branding,
.woocommerce-active .site-header .site-branding,
.site-branding {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 1.5rem !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
	flex-shrink: 0 !important;
}

.site-branding .custom-logo-link,
.site-header .custom-logo-link,
.site-branding a.custom-logo-link,
.site-branding .logo,
.site-branding>a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	flex-shrink: 0 !important;
	line-height: 1 !important;
}

.site-branding .custom-logo-link img,
.site-branding img.custom-logo,
.site-branding img,
.site-header .site-branding img,
.site-header .custom-logo-link img {
	height: 140px !important;
	max-height: 140px !important;
	width: auto !important;
	max-width: none !important;
	display: inline-block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: contain !important;
	vertical-align: middle !important;
}

.site-branding-text {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: .2rem !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	flex-shrink: 0 !important;
}

.site-branding-text .site-title,
.site-branding .site-title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--co-font-display) !important;
	font-size: 2.1rem !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
}

.site-branding-text .site-title a,
.site-branding .site-title a {
	color: #ffffff !important;
	text-decoration: none !important;
}

.site-branding-text .site-title a:hover,
.site-branding .site-title a:hover {
	color: var(--co-accent) !important;
}

.site-branding-text .site-description,
.site-branding .site-description {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--co-font-display) !important;
	font-size: .72rem !important;
	font-weight: 600 !important;
	letter-spacing: .18em !important;
	color: var(--co-accent) !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
}

.site-header .site-search {
	display: none !important;
}

/* Secondary Navigation Disabled */
.secondary-navigation,
.site-header .secondary-navigation {
	display: none !important;
}

/* =========================================================================
   PRIMARY NAVIGATION (Horizontal Flex Row, White Links)
   ========================================================================= */
.site-header #site-navigation,
.site-header .main-navigation,
.woocommerce-active .site-header .main-navigation,
.main-navigation {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
}

.site-header .main-navigation::before,
.site-header .main-navigation::after {
	display: none !important;
	content: none !important;
}

.site-header .main-navigation .menu-toggle {
	display: none !important;
}

.site-header .main-navigation .primary-navigation,
.site-header .main-navigation div.menu {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
}

.site-header .main-navigation .handheld-navigation {
	display: none !important;
}

/* Nav list UL */
.site-header .main-navigation ul.nav-menu,
.site-header .main-navigation ul.menu,
.site-header .main-navigation div.primary-navigation>ul,
.site-header .main-navigation div.menu>ul,
.main-navigation ul.menu,
.main-navigation ul.nav-menu {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 2.25rem !important;
	width: auto !important;
	max-height: none !important;
	overflow: visible !important;
	float: none !important;
}

/* Nav list items LI */
.site-header .main-navigation ul.nav-menu>li,
.site-header .main-navigation ul.menu>li,
.site-header .main-navigation div.primary-navigation ul>li,
.site-header .main-navigation div.menu ul>li,
.main-navigation ul li {
	display: inline-flex !important;
	align-items: center !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	width: auto !important;
}

/* Nav link text: Pure White */
.site-header .main-navigation ul.nav-menu>li>a,
.site-header .main-navigation ul.menu>li>a,
.site-header .main-navigation div.primary-navigation ul>li>a,
.site-header .main-navigation div.menu ul>li>a,
.site-header .main-navigation a,
.main-navigation a {
	display: inline-block !important;
	font-family: var(--co-font-display) !important;
	font-size: .95rem !important;
	font-weight: 600 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	padding: .5rem 0 !important;
	margin: 0 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	float: none !important;
	transition: color .15s ease !important;
}

.site-header .main-navigation a:hover,
.site-header .main-navigation ul li a:hover,
.site-header .main-navigation li.current-menu-item>a,
.site-header .main-navigation li.current_page_item>a,
.site-header .main-navigation li.current-menu-ancestor>a {
	color: var(--co-accent) !important;
}

/* Submenu dropdowns
   Sized with `width: max-content` on a plain block box (not flex) so the
   background always grows to fit the widest link label - the previous
   flex column with percentage-width `li`s inside an unsized absolutely
   positioned container let long labels report their own width without
   the parent `<ul>` growing to match, so the text/links spilled past the
   dropdown's background edge. */
.site-header .main-navigation ul.nav-menu ul,
.site-header .main-navigation ul.menu ul,
.site-header .main-navigation div.primary-navigation ul ul {
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	background-color: var(--co-bg-raised) !important;
	border: 1px solid var(--co-border) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .8) !important;
	width: max-content !important;
	min-width: 200px !important;
	max-width: 320px !important;
	box-sizing: border-box !important;
	padding: .5rem 0 !important;
	margin: 0 !important;
	z-index: 9999 !important;
}

.site-header .main-navigation ul li:hover>ul,
.site-header .main-navigation ul li.focus>ul {
	display: block !important;
}

.site-header .main-navigation ul ul li {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.site-header .main-navigation ul ul a {
	display: block !important;
	font-size: .85rem !important;
	padding: .6rem 1.25rem !important;
	letter-spacing: .06em !important;
	color: #ffffff !important;
	text-decoration: none !important;
	white-space: normal !important;
	box-sizing: border-box !important;
}

.site-header .main-navigation ul ul a:hover {
	background-color: var(--co-bg-raised-2) !important;
	color: var(--co-accent) !important;
}

/* Header Cart */
/* Header Cart (Disabled) */
.site-header-cart,
.site-header .site-header-cart,
.woocommerce-active .site-header .site-header-cart {
	margin-left: 1.5rem !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	list-style: none !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	display: none !important;
}

.site-header-cart .cart-contents {
	color: var(--co-text) !important;
	font-family: var(--co-font-display) !important;
	font-size: .9rem !important;
	letter-spacing: .08em !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: .4rem !important;
	padding: .5rem 0 !important;
}

.site-header-cart .cart-contents:hover {
	color: var(--co-accent) !important;
}

.site-header-cart .cart-contents .count {
	color: var(--co-accent) !important;
	font-weight: 700 !important;
}

.site-header-cart .widget_shopping_cart {
	background-color: var(--co-bg-raised);
	border: 1px solid var(--co-border);
	color: var(--co-text);
	box-shadow: 0 12px 35px rgba(0, 0, 0, .9);
	padding: 1.25rem;
}

/* =========================================================================
   5. BREADCRUMBS
   ========================================================================= */
.woocommerce-breadcrumb {
	font-family: var(--co-font-display);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	padding: 1.75rem 0 0.5rem;
	margin: 0;
	border: none;
}

.woocommerce-breadcrumb a {
	color: var(--co-text-muted);
}

.woocommerce-breadcrumb a:hover {
	color: var(--co-accent);
}

.woocommerce-breadcrumb .co-breadcrumb-separator {
	color: var(--co-text-faint);
	margin: 0 .45rem;
}

.woocommerce-breadcrumb .co-breadcrumb-item:last-child,
.woocommerce-breadcrumb> :last-child {
	color: var(--co-accent);
	font-weight: 600;
}

/* =========================================================================
   6. SHOP ARCHIVE / CATEGORY HEADER
   ========================================================================= */
.woocommerce-products-header {
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--co-border);
}

.page-title,
.woocommerce-products-header__title {
	font-size: 1.75rem;
	line-height: 0.95;
	letter-spacing: .02em;
	color: var(--co-text);
	margin: .5rem 0 .85rem;
	font-weight: 700;
	text-transform: uppercase;
}

.archive-description,
.term-description,
.woocommerce-products-header .page-description {
	color: var(--co-text-muted);
	font-family: var(--co-font-body);
	font-size: 1rem;
	line-height: 1.5;
	max-width: 65ch;
	margin-top: 0;
	margin-bottom: 0;
}

.archive-description p,
.term-description p {
	color: var(--co-text-muted);
	margin-bottom: 0;
}

/* =========================================================================
   7. SHOP LAYOUT & TWO-COLUMN SIDEBAR
   ========================================================================= */
@media (min-width: 768px) {
	.site-content .col-full {
		display: flex;
		flex-direction: row-reverse;
		/* Places left-sidebar (#secondary) visually on left */
		justify-content: space-between;
		gap: 2.5rem;
	}

	#primary.content-area {
		width: 100% !important;
		max-width: calc(100% - 270px) !important;
		float: none !important;
		margin: 0 !important;
	}

	#secondary.widget-area {
		width: 240px !important;
		flex-shrink: 0 !important;
		float: none !important;
		margin: 0 !important;
		padding-right: 1.5rem;
		border-right: 1px solid var(--co-border-dark);
	}
}

/* =========================================================================
   8. SIDEBAR & FILTER WIDGETS
   ========================================================================= */
.sidebar .widget,
#secondary .widget {
	margin-bottom: 2.5rem;
	background: transparent;
	padding: 0;
	border: none;
}

.sidebar .widget-title,
#secondary .widget-title {
	font-family: var(--co-font-display);
	font-size: 1.05rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--co-text);
	padding-bottom: .7rem;
	margin-top: 0;
	margin-bottom: 1.15rem;
	font-weight: 600;
}

/* Short gold rule under each sidebar heading (comp) */
.sidebar .widget-title::after,
#secondary .widget-title::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 2px;
	margin-top: .7rem;
	background: var(--co-accent);
}

/* Product Categories & standard navigation lists */
.sidebar .widget ul,
#secondary .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar .widget_product_categories ul li,
#secondary .widget_product_categories ul li,
.sidebar .widget_nav_menu ul li,
#secondary .widget_nav_menu ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .45rem 0;
	border: none;
	font-size: .95rem;
}

.sidebar .widget_product_categories ul li a,
#secondary .widget_product_categories ul li a,
.sidebar .widget_nav_menu ul li a,
#secondary .widget_nav_menu ul li a {
	color: var(--co-text);
	font-family: var(--co-font-body);
	font-size: .92rem;
	font-weight: 400;
	display: inline-block;
}

.sidebar .widget_product_categories ul li a:hover,
#secondary .widget_product_categories ul li a:hover {
	color: var(--co-accent);
}

.sidebar .widget_product_categories ul li.current-cat>a,
#secondary .widget_product_categories ul li.current-cat>a {
	color: var(--co-accent);
	font-weight: 600;
}

.sidebar .widget .count,
#secondary .widget .count {
	color: var(--co-text-faint);
	font-family: var(--co-font-mono);
	font-size: .85rem;
	margin-left: auto;
}

/* Nested subcategories */
.sidebar .widget_product_categories ul.children,
#secondary .widget_product_categories ul.children {
	margin-left: 1rem;
	margin-top: .25rem;
	border-left: 1px solid var(--co-border);
	padding-left: .75rem;
}

/* Attribute / Layered Nav Filter Badges (e.g. CALIBER: 9MM, .45 ACP, 10MM) */
.widget_layered_nav ul,
.widget_layered_nav_filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget_layered_nav ul li,
.widget_layered_nav_filters ul li {
	border: 1px solid var(--co-border);
	border-radius: var(--co-radius);
	padding: 0 !important;
	background-color: var(--co-bg-card);
	margin: 0 !important;
	transition: all .15s ease;
	display: inline-flex;
}

.widget_layered_nav ul li a,
.widget_layered_nav_filters ul li a {
	display: block;
	padding: .5rem .8rem;
	font-family: var(--co-font-mono);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--co-text-muted);
}

.widget_layered_nav ul li:hover,
.widget_layered_nav_filters ul li:hover {
	border-color: var(--co-border-light);
	background-color: var(--co-bg-raised);
}

.widget_layered_nav ul li:hover a,
.widget_layered_nav_filters ul li:hover a {
	color: var(--co-text-bright);
}

.widget_layered_nav ul li.chosen,
.widget_layered_nav_filters ul li.chosen {
	border-color: var(--co-accent);
	background-color: rgba(207, 159, 63, .08);
}

.widget_layered_nav ul li.chosen a,
.widget_layered_nav_filters ul li.chosen a {
	color: var(--co-accent);
	font-weight: 700;
}

.widget_layered_nav ul li .count,
.widget_layered_nav_filters ul li .count {
	display: none;
	/* Pill format keeps it clean like the comp buttons */
}

/* Price Filter Widget */
.widget_price_filter .price_slider_wrapper .ui-widget-content {
	background-color: var(--co-bg-raised-2);
	border: 1px solid var(--co-border);
	height: 6px;
	border-radius: 3px;
}

.widget_price_filter .ui-slider .ui-slider-range {
	background-color: var(--co-accent);
}

.widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--co-text);
	border: none;
	width: 14px;
	height: 14px;
	top: -4px;
	border-radius: 1px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
	cursor: pointer;
}

.widget_price_filter .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	font-family: var(--co-font-display);
	font-size: .85rem;
	color: var(--co-text-muted);
}

.widget_price_filter .price_slider_amount .price_label {
	color: var(--co-text);
}

.widget_price_filter .price_slider_amount .button {
	background-color: var(--co-bg-raised);
	border: 1px solid var(--co-border-light);
	color: var(--co-text);
	font-family: var(--co-font-display);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .35rem .75rem;
	border-radius: var(--co-radius);
}

.widget_price_filter .price_slider_amount .button:hover {
	background-color: var(--co-accent);
	border-color: var(--co-accent);
	color: var(--co-on-accent);
}

/* =========================================================================
   9. CATALOG HEADER / SORTING / RESULT COUNT
   ========================================================================= */
.storefront-sorting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--co-border);
}

.woocommerce-result-count {
	font-family: var(--co-font-display);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	margin: 0;
	float: none;
}

.woocommerce-ordering {
	margin: 0;
	float: none;
}

.woocommerce-ordering select {
	background-color: var(--co-bg-card);
	border: 1px solid var(--co-border);
	color: var(--co-text);
	font-family: var(--co-font-display);
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .5rem 2rem .5rem .9rem;
	border-radius: var(--co-radius);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cf9f3f'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right .6rem center;
	background-size: 16px;
}

.woocommerce-ordering select:focus {
	border-color: var(--co-accent);
	outline: none;
}

/* =========================================================================
   10. PRODUCT GRID & PRODUCT CARDS
   ========================================================================= */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
	gap: 1.5rem !important;
	margin: 0 0 3rem 0 !important;
	padding: 0 !important;
	list-style: none !important;
	clear: both;
}

/* Storefront/WooCommerce add a clearfix ::before/::after to ul.products; as a
   grid it would occupy the first cell. Kill them. */
ul.products::before,
ul.products::after {
	display: none !important;
	content: none !important;
}

@media (min-width: 992px) {
	ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

ul.products li.product {
	background-color: var(--co-bg-card) !important;
	border: 1px solid var(--co-border) !important;
	border-radius: var(--co-radius) !important;
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	position: relative;
}

ul.products li.product:hover {
	border-color: var(--co-border-light) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
	transform: translateY(-2px);
}

/* Product Image Frame */
ul.products li.product a.co-card-media {
	position: relative;
	display: block;
	background-color: #f4f3f0;
	overflow: hidden;
	aspect-ratio: 4/3;
	text-align: center;
}

ul.products li.product a.co-card-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	margin: 0 !important;
	padding: .9rem !important;
	border-radius: 0 !important;
	display: block;
	transition: transform .35s ease;
}

ul.products li.product:hover a.co-card-media img {
	transform: scale(1.03);
}

/* Product Badges (IN STOCK, USED, SALE) */
.co-product-badges {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	align-items: flex-start;
}

.co-stock-badge {
	display: inline-block;
	font-family: var(--co-font-display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .3rem .65rem;
	border-radius: 1px;
	line-height: 1.1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.co-stock-badge--in-stock {
	background-color: var(--co-accent);
	color: var(--co-on-accent);
}

.co-stock-badge--out-of-stock {
	background-color: rgba(14, 14, 14, .9);
	border: 1px solid var(--co-border-light);
	color: var(--co-text-muted);
}

.co-stock-badge--used {
	background-color: #2b2b2b;
	border: 1px solid #444;
	color: var(--co-text);
}

.co-stock-badge--sale {
	background-color: var(--co-danger);
	color: #fff;
}

/* Storefront default sale flash override */
.onsale {
	display: none !important;
	/* Replaced by our custom co-stock-badge */
}

/* Card body (eyebrow / title / price) — see also section 16 */
ul.products li.product .co-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.05rem 1.1rem 2.4rem;
	/* bottom room for the absolute VIEW link */
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	font-family: var(--co-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--co-text);
	line-height: 1.22;
	padding: 0 !important;
	margin: .35rem 0 0 !important;
	transition: color .15s ease;
}

ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--co-accent);
}

ul.products li.product .price {
	color: var(--co-text) !important;
	font-family: var(--co-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: 0 !important;
	margin: auto 0 0 !important;
	padding-top: .9rem !important;
	display: flex;
	align-items: baseline;
	gap: .45rem;
}

ul.products li.product .price del {
	color: var(--co-text-faint) !important;
	font-size: .9rem;
	order: 2;
	text-decoration: line-through;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--co-text);
}

/* =========================================================================
   11. PAGINATION
   ========================================================================= */
.woocommerce-pagination {
	margin-top: 2.5rem;
	margin-bottom: 3rem;
	text-align: center;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border: none;
	padding: 0;
	margin: 0;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li {
	border: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-block;
	background-color: var(--co-bg-card);
	border: 1px solid var(--co-border);
	color: var(--co-text);
	font-family: var(--co-font-display);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .05em;
	padding: .5rem .95rem;
	border-radius: var(--co-radius);
	transition: all .15s ease;
}

.woocommerce-pagination ul.page-numbers li .page-numbers:hover {
	border-color: var(--co-accent);
	color: var(--co-accent);
}

.woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background-color: var(--co-accent);
	border-color: var(--co-accent);
	color: var(--co-on-accent);
	font-weight: 700;
}

/* =========================================================================
   12. SINGLE PRODUCT PAGE
   ========================================================================= */
.single-product div.product {
	position: relative;
	margin-bottom: 4rem;
}

.single-product div.product .woocommerce-product-gallery {
	background-color: var(--co-bg-card);
	border: 1px solid var(--co-border);
	border-radius: var(--co-radius);
	padding: 1rem;
	margin-bottom: 2rem;
	overflow: hidden;
	position: relative;
}

/* Keep flexslider clone slides from leaking outside the frame */
.single-product div.product .woocommerce-product-gallery .flex-viewport,
.single-product div.product .woocommerce-product-gallery__wrapper {
	overflow: hidden;
}

/* Storefront's fixed prev/next "adjacent product" peek tabs — not in the comp */
.storefront-product-pagination {
	display: none !important;
}

.single-product div.product .woocommerce-product-gallery__image a {
	display: block;
	background: #f4f3f0;
}

.single-product div.product .woocommerce-product-gallery img {
	border-radius: var(--co-radius);
}

.single-product div.product .summary {
	margin-bottom: 2rem;
}

.single-product div.product .summary .product_title {
	font-size: 2.5rem;
	line-height: 1.1;
	color: var(--co-text);
	margin-bottom: .85rem;
}

.single-product div.product .summary .price {
	font-family: var(--co-font-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--co-accent);
	margin-bottom: 1.25rem;
}

.single-product div.product .summary .price del {
	color: var(--co-text-faint);
	font-size: 1.25rem;
	margin-right: .5rem;
}

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--co-text-muted);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--co-border);
	padding-bottom: 1.25rem;
}

.single-product div.product form.cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

.single-product div.product form.cart .quantity .qty {
	background-color: var(--co-bg-card);
	border: 1px solid var(--co-border);
	color: var(--co-text);
	font-family: var(--co-font-display);
	font-size: 1.1rem;
	font-weight: 600;
	padding: .65rem .75rem;
	border-radius: var(--co-radius);
	width: 4.5rem;
	text-align: center;
}

.single-product div.product form.cart .button {
	background-color: var(--co-accent) !important;
	border: 1px solid var(--co-accent) !important;
	color: var(--co-on-accent) !important;
	font-family: var(--co-font-display) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	padding: .75rem 2.25rem !important;
	border-radius: var(--co-radius) !important;
	transition: all .2s ease !important;
}

.single-product div.product form.cart .button:hover {
	background-color: var(--co-accent-hover) !important;
	border-color: var(--co-accent-hover) !important;
}

.single-product div.product .product_meta {
	font-family: var(--co-font-display);
	font-size: .82rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	border-top: 1px solid var(--co-border);
	padding-top: 1.25rem;
}

.single-product div.product .product_meta>span {
	display: block;
	margin-bottom: .4rem;
}

.single-product div.product .product_meta a {
	color: var(--co-accent);
}

/* Product Tabs (Description, Additional info, Reviews)
   Storefront lays these out as a two-column float (tabs left, panel right);
   override that back to a single horizontal tab bar with the panel below. */
.woocommerce-tabs {
	display: block;
	overflow: visible;
	clear: both;
	margin-top: 3rem;
	border-top: 1px solid var(--co-border);
	padding: 2rem 0 0 !important;
}

.woocommerce-tabs ul.tabs {
	width: 100% !important;
	float: none !important;
	margin: 0 0 1.75rem !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	list-style: none;
	border-top: none !important;
	border-bottom: 1px solid var(--co-border);
	text-align: left;
}

.woocommerce-tabs ul.tabs li {
	display: block !important;
	float: none !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* Kill Storefront's skewed tab-edge pseudo elements */
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
	content: none !important;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	font-family: var(--co-font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	padding: .75rem .15rem !important;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s ease, border-color .15s ease;
}

.woocommerce-tabs ul.tabs li a:hover {
	color: var(--co-text);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--co-accent);
	border-bottom-color: var(--co-accent);
}

.woocommerce-tabs .panel,
.woocommerce-tabs .wc-tab {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	background-color: var(--co-bg-card);
	border: 1px solid var(--co-border);
	border-radius: var(--co-radius);
	padding: 1.75rem 2rem !important;
	color: var(--co-text);
}

.woocommerce-tabs .panel h2,
.woocommerce-tabs .panel h2:first-of-type {
	font-family: var(--co-font-display);
	font-size: 1.35rem !important;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 1rem !important;
	color: var(--co-text);
}

.woocommerce-tabs .panel p {
	color: var(--co-text-muted);
	line-height: 1.65;
}

.woocommerce-tabs table.shop_attributes,
.woocommerce-tabs table.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	background: transparent;
}

.woocommerce-tabs table.shop_attributes tr,
.woocommerce-tabs table.woocommerce-product-attributes tr {
	background: transparent !important;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td,
.woocommerce-tabs table.woocommerce-product-attributes th,
.woocommerce-tabs table.woocommerce-product-attributes td {
	padding: .8rem 1rem;
	border: none;
	border-bottom: 1px solid var(--co-border);
	font-size: .95rem;
	background: transparent !important;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.woocommerce-product-attributes th {
	font-family: var(--co-font-display);
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--co-text-muted);
	width: 32%;
}

.woocommerce-tabs table.shop_attributes td,
.woocommerce-tabs table.woocommerce-product-attributes td {
	color: var(--co-text);
}

.woocommerce-tabs table.shop_attributes td p,
.woocommerce-tabs table.woocommerce-product-attributes td p {
	margin: 0;
	color: var(--co-text);
}

/* Related Products / Upsells */
.related.products,
.upsells.products {
	margin-top: 4rem;
	border-top: 1px solid var(--co-border);
	padding-top: 2.5rem;
}

.related.products>h2,
.upsells.products>h2 {
	font-size: 1.8rem;
	margin-bottom: 1.75rem;
}

/* =========================================================================
   13. CART, CHECKOUT & ACCOUNT PAGES
   ========================================================================= */
/* Cart Table */
table.shop_table {
	background-color: var(--co-bg-card);
	border: 1px solid var(--co-border);
	border-radius: var(--co-radius);
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin-bottom: 2rem;
}

table.shop_table th {
	background-color: var(--co-bg-raised);
	font-family: var(--co-font-display);
	font-size: .9rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--co-text);
	padding: 1rem;
	border-bottom: 1px solid var(--co-border);
}

table.shop_table td {
	padding: 1rem;
	border-bottom: 1px solid var(--co-border);
	color: var(--co-text);
	vertical-align: middle;
}

/* WordPress core's default table styles force a white background on
   `tbody td` (but not `tfoot td`) whenever the table lacks a `.has-background`
   class — that's what turns the cart/checkout item rows white. Force black
   text only there; tfoot rows (Subtotal/Total) keep the theme's dark card
   background and need to stay on the light --co-text color instead. */
table.shop_table tbody td {
	color: #000;
}

table.shop_table tbody td.product-name a {
	color: #000;
}

table.shop_table tbody td.product-price,
table.shop_table tbody td.product-subtotal {
	font-family: var(--co-font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: #000;
}

table.shop_table td.product-remove a.remove {
	color: var(--co-text-muted);
}

table.shop_table td.product-remove a.remove:hover {
	color: var(--co-danger);
}

/* Cart Collaterals & Totals */
.cart_totals {
	background-color: var(--co-bg-card);
	border: 1px solid var(--co-border);
	border-radius: var(--co-radius);
	padding: 1.75rem;
}

.cart_totals h2 {
	font-size: 1.4rem;
	margin-top: 0;
	border-bottom: 1px solid var(--co-border);
	padding-bottom: .75rem;
}

.cart_totals table.shop_table td {
	color: #000;
}

.cart_totals .order-total strong {
	color: #000;
	font-family: var(--co-font-display);
	font-size: 1.3rem;
}

/* Checkout Form */
form.checkout {
	margin-top: 1.5rem;
}

/* WordPress core's block-library styles inject `#order_review { background-color:
   #fff }` — the table and payment-notice boxes paint their own dark backgrounds
   over most of it, but the white wrapper still shows through the gaps between
   them (e.g. right below the totals table) as a stray white strip. */
#order_review {
	background-color: transparent !important;
}

.woocommerce-checkout #customer_details {
	margin-bottom: 2rem;
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input.input-text,
input.search-field,
input.wp-block-search__input,
textarea,
select {
	background-color: var(--co-bg-card);
	border: 1px solid var(--co-border);
	color: var(--co-text);
	font-family: var(--co-font-body);
	font-size: .95rem;
	padding: .65rem .85rem;
	border-radius: var(--co-radius);
	box-sizing: border-box;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease;
}

/* Keep focus dark — Storefront switches search/text inputs to a light grey
    background on :focus with a more specific selector, which hides the text. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input.input-text:focus,
input.search-field:focus,
input.wp-block-search__input:focus,
textarea:focus,
select:focus {
	background-color: var(--co-bg-raised);
	color: var(--co-text);
	border-color: var(--co-accent);
	box-shadow: none;
	outline: none;
}

input::placeholder,
textarea::placeholder {
	color: var(--co-text-faint);
	opacity: 1;
}

/* Chrome autofill would otherwise paint the field white with dark text */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
	-webkit-text-fill-color: var(--co-text);
	caret-color: var(--co-text);
	-webkit-box-shadow: 0 0 0 100px var(--co-bg-raised) inset;
	transition: background-color 9999s ease-in-out 0s;
}

/* Sold-individually cart line items render the quantity input readonly (and
   some render it disabled) — Safari/WebKit swaps in its own washed-out system
   text color for disabled/readonly fields that ignores `color`, making the
   quantity value unreadable against our dark input background. Force it back. */
input:disabled,
input:read-only,
input.qty:disabled,
input.qty:read-only {
	-webkit-text-fill-color: var(--co-text);
	color: var(--co-text);
	background-color: var(--co-bg-card);
	opacity: 1;
}

/* WooCommerce product-search + WP search block wrappers */
.woocommerce-product-search,
.wp-block-search__inside-wrapper {
	position: relative;
}

.woocommerce-product-search .search-field,
.wp-block-search .wp-block-search__input {
	width: 100%;
}

label {
	font-family: var(--co-font-display);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--co-text-muted);
	margin-bottom: .4rem;
	display: block;
}

/* Global Buttons */
.button,
button.button,
input.button,
a.button {
	background-color: var(--co-accent);
	border: 1px solid var(--co-accent);
	color: var(--co-on-accent);
	font-family: var(--co-font-display);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .7rem 1.5rem;
	border-radius: var(--co-radius);
	cursor: pointer;
	transition: all .2s ease;
	display: inline-block;
}

.button:hover,
button.button:hover,
input.button:hover,
a.button:hover {
	background-color: var(--co-accent-hover);
	border-color: var(--co-accent-hover);
	color: var(--co-on-accent);
}

.button.alt,
button.button.alt,
input.button.alt,
a.button.alt {
	background-color: var(--co-accent);
	border-color: var(--co-accent);
	color: var(--co-on-accent);
}

/* Payment Box on Checkout */
#payment {
	background-color: var(--co-bg-card);
	border: 1px solid var(--co-border);
	border-radius: var(--co-radius);
	padding: 1.5rem;
}

#payment ul.payment_methods {
	border-bottom: 1px solid var(--co-border);
	padding-bottom: 1.5rem;
	list-style: none;
	margin: 0 0 1.5rem 0;
}

#payment div.payment_box {
	background-color: var(--co-bg-raised);
	border: 1px solid var(--co-border);
	color: var(--co-text-muted);
	padding: 1rem;
	font-size: .9rem;
	margin-top: .75rem;
}

/* Storefront's customizer prints inline CSS that paints these panels near-white
   (derived from its white `background_color` theme mod), leaving the cream
   --co-text privacy-policy copy unreadable. Selectors copied verbatim from
   storefront/inc/woocommerce/class-storefront-woocommerce-customizer.php. */
#payment .payment_methods>li .payment_box,
#payment .place-order {
	background-color: var(--co-bg-raised) !important;
}

#payment .payment_methods>li:not(.woocommerce-notice) {
	background-color: var(--co-bg-raised-2) !important;
}

#payment .payment_methods>li:not(.woocommerce-notice):hover {
	background-color: var(--co-border-light) !important;
}

/* Same customizer CSS paints every `fieldset, fieldset legend` light — that's
   the white box around the gateway's card-number/expiry/CVC fields. */
#payment .payment_methods li .payment_box fieldset,
#payment .payment_methods li .payment_box fieldset legend {
	background-color: transparent !important;
}

#payment .payment_methods>li>label {
	color: var(--co-text);
}

#payment .woocommerce-privacy-policy-text,
#payment .woocommerce-privacy-policy-text p {
	color: var(--co-text-muted);
}

/* Place Order locked until a transfer FFL is picked (civil-ordnance-rsr). */
#payment #place_order.com-rsr-ffl-locked,
#payment #place_order:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.com-rsr-ffl-required-note {
	color: var(--co-accent);
	font-size: .9rem;
	margin: 0 0 .75rem;
}

/* Same Storefront customizer CSS that painted the payment-gateway fieldset
   and .order_details light also paints every OTHER bare `fieldset` /
   `fieldset legend` on the site (storefront/inc/customizer/
   class-storefront-customizer.php:902-906) - the one real-world place that
   bites is My Account > Edit Account's "Password change" fieldset
   (woocommerce/templates/myaccount/form-edit-account.php:64), where the
   <legend> text was invisible (cream text on a near-white background). */
.woocommerce-EditAccountForm fieldset,
.woocommerce-ResetPassword fieldset {
	background-color: transparent !important;
	border: 1px solid var(--co-border);
	border-radius: var(--co-radius);
	padding: 1.5rem;
	margin: 0 0 1.75rem;
}

.woocommerce-EditAccountForm fieldset legend,
.woocommerce-ResetPassword fieldset legend {
	background-color: transparent !important;
	color: var(--co-text);
	font-family: var(--co-font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 0 .5rem;
}

/* Product-gallery zoom trigger (magnifying-glass icon on the single
   product image) - unstyled by us so far, so it was still rendering in
   Storefront's light-gray button default instead of the site's buttons. */
.woocommerce-product-gallery__trigger {
	background-color: var(--co-accent) !important;
	color: var(--co-on-accent) !important;
	border-radius: 50%;
}

.woocommerce-product-gallery__trigger:hover {
	background-color: var(--co-accent-hover) !important;
}

/* Password-visibility "eye" icon toggle on password fields
   (woocommerce.js wraps every password input and appends
   <button class="show-password-input">, with no .button class) - caught
   by the same generic customizer rule (button { background:#eeeeee }) as
   the gallery trigger above, same root cause, different selector since
   this one is a bare, unclassed <button>. Transparent + muted icon rather
   than a filled accent circle, since it's an inline affordance inside the
   field, not a real button. */
.show-password-input {
	background: transparent !important;
	border: none !important;
	color: var(--co-text-muted) !important;
}

.show-password-input.display-password {
	color: var(--co-accent) !important;
}

.woocommerce-product-gallery__trigger:hover {
	background-color: var(--co-accent-hover) !important;
}

/* WooCommerce Notices (Messages, Info, Errors)
   Storefront positions a checkmark/info icon absolutely at `left: 1.5em` and
   expects the notice's own left padding to clear it (its default is
   "1em 2em 1em 3.5em"). Keep that reserved space instead of the flat
   1.5rem padding, or the icon sits on top of the first word. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--co-bg-raised) !important;
	border: 1px solid var(--co-border) !important;
	border-left: 4px solid var(--co-accent) !important;
	color: var(--co-text) !important;
	font-family: var(--co-font-body);
	font-size: .95rem;
	padding: 1rem 1.5rem 1rem 3.25rem !important;
	border-radius: var(--co-radius);
	margin-bottom: 2rem !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem 1rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	top: 50% !important;
	left: 1.15rem !important;
	transform: translateY(-50%);
	color: var(--co-accent) !important;
}

.woocommerce-error {
	border-left-color: var(--co-danger) !important;
}

.woocommerce-error::before {
	color: var(--co-danger) !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
	background-color: var(--co-accent);
	color: var(--co-on-accent);
	padding: .4rem .9rem;
	font-size: .78rem;
	float: none;
	margin: 0 0 0 auto;
	white-space: nowrap;
}

/* =========================================================================
   14. SITE FOOTER
   ========================================================================= */
.site-footer {
	background-color: var(--co-bg-darkest);
	border-top: 1px solid var(--co-border);
	color: var(--co-text-muted);
	padding: 3rem 0 2rem;
	margin-top: 4rem;
}

.site-footer .footer-widgets .widget-title {
	font-size: 1rem;
	letter-spacing: .1em;
	color: var(--co-text);
	border-bottom: 1px solid var(--co-border);
	padding-bottom: .6rem;
	margin-bottom: 1.25rem;
}

.site-footer .footer-widgets ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer .footer-widgets ul li {
	padding: .35rem 0;
}

.site-footer .footer-widgets a {
	color: var(--co-text-muted);
}

.site-footer .footer-widgets a:hover {
	color: var(--co-accent);
}

.site-info {
	font-family: var(--co-font-display);
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--co-text-faint);
	border-top: 1px solid var(--co-border);
	padding-top: 2rem;
	margin-top: 2rem;
	text-align: center;
}

.site-info a {
	color: var(--co-text-muted);
}

.site-info a:hover {
	color: var(--co-accent);
}

/* =========================================================================
   15. MOBILE / HANDHELD BAR & RESPONSIVENESS
   ========================================================================= */
.storefront-handheld-footer-bar {
	background-color: var(--co-bg-darkest) !important;
	border-top: 1px solid var(--co-border) !important;
}

.storefront-handheld-footer-bar ul li>a {
	color: var(--co-text-muted) !important;
	font-family: var(--co-font-display);
	text-transform: uppercase;
	font-size: .75rem;
	letter-spacing: .08em;
}

.storefront-handheld-footer-bar ul li>a:hover {
	color: var(--co-accent) !important;
}

.storefront-handheld-footer-bar ul li.cart .count {
	background-color: var(--co-accent) !important;
	color: var(--co-on-accent) !important;
}

.menu-toggle {
	background-color: var(--co-bg-raised);
	border: 1px solid var(--co-border);
	color: var(--co-text);
	font-family: var(--co-font-display);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .85rem;
	padding: .5rem 1rem;
	border-radius: var(--co-radius);
}

@media (max-width: 767px) {

	.page-title,
	.woocommerce-products-header__title {
		font-size: 1.75rem;
	}

	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1rem !important;
	}

	/* --- Utility bar becomes the nav-toggle row: hamburger left, the
	   location/FFL text hides, the right-hand text stays right-aligned. --- */
	.co-utility-bar .col-full {
		justify-content: space-between;
		text-align: left;
	}

	.co-nav-toggle {
		display: flex;
	}

	.co-utility-bar__left {
		display: none;
	}

	/* --- Main header: stack the logo above the title/tagline, centered ---
	   Matches the base rule's full selector list (incl. "header.site-header
	   .col-full") - the plain ".site-header .col-full" version used here
	   before had lower specificity than that selector, so the base rule's
	   row/space-between layout kept winning: the branding block itself was
	   correctly centered internally, but that whole block was still being
	   pinned to the left edge by the still-active row layout around it. */
	header.site-header .col-full,
	.site-header .col-full {
		flex-direction: column !important;
		justify-content: center !important;
		gap: .5rem !important;
		padding-top: 1rem !important;
		padding-bottom: 1.1rem !important;
	}

	/* Matches the full base selector list (incl. the "header.site-header
	   .site-branding" variant) on purpose - the base rule's row/flex-start
	   layout was winning on specificity alone despite this media query
	   coming later in the file, which is why the logo and text were still
	   sitting side by side instead of stacking. */
	header.site-header .site-branding,
	.site-header .site-branding,
	.woocommerce-active .site-header .site-branding,
	.site-branding {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: .6rem !important;
	}

	.site-branding .custom-logo-link img,
	.site-branding img.custom-logo,
	.site-branding img,
	.site-header .site-branding img,
	.site-header .custom-logo-link img {
		height: 110px !important;
		max-height: 110px !important;
	}

	.site-branding-text {
		align-items: center !important;
	}

	.site-branding-text .site-title,
	.site-branding .site-title {
		font-size: 1.4rem !important;
	}

	.site-branding-text .site-description,
	.site-branding .site-description {
		font-size: .62rem !important;
		letter-spacing: .14em !important;
	}

	/* --- Primary nav becomes a right-hand slide-out drawer --- */
	.main-navigation .primary-navigation {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 280px;
		max-width: 85vw;
		background-color: var(--co-bg-raised);
		border-left: 1px solid var(--co-border);
		box-shadow: -10px 0 30px rgba(0, 0, 0, .8);
		padding: 4.5rem 1.5rem 2rem;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .3s ease;
		z-index: 10001;
	}

	#site-navigation.toggled {
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, .6);
		z-index: 10000;
	}

	#site-navigation.toggled .primary-navigation {
		transform: translateX(0);
	}

	/* Matches the full base selector list ("Nav list UL", style.css:450-455)
	   on purpose - a mobile-Chrome-on-Android/Galaxy repro showed the
	   top-level menu was STILL laying out as a row, overflowing the drawer
	   by 400px+. Cause: the base rule's ".site-header .main-navigation
	   div.primary-navigation>ul" selector (which matches our actual
	   <div class="primary-navigation"><ul class="menu">... markup) has
	   higher specificity than the shorter ".main-navigation ul.menu" this
	   override used before, so its flex-direction:row kept winning
	   regardless of source order - the same specificity trap as the
	   .col-full and .site-branding fixes above. */
	.site-header .main-navigation ul.nav-menu,
	.site-header .main-navigation ul.menu,
	.site-header .main-navigation div.primary-navigation>ul,
	.site-header .main-navigation div.menu>ul,
	.main-navigation ul.menu,
	.main-navigation ul.nav-menu {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
	}

	/* Kill the desktop `inline-flex` on every <li> - left in place, it turns
	   each item's own children (its link + any nested submenu) into flex
	   siblings sitting side-by-side instead of stacked, which is why the
	   submenu links were rendering next to their parent instead of below
	   it. A plain block box lets them stack normally. Matches the full base
	   selector list ("Nav list items LI", style.css:471-475) for the same
	   specificity reason as the UL fix just above. */
	.site-header .main-navigation ul.nav-menu>li,
	.site-header .main-navigation ul.menu>li,
	.site-header .main-navigation div.primary-navigation ul>li,
	.site-header .main-navigation div.menu ul>li,
	.main-navigation ul li {
		display: block !important;
		width: 100% !important;
	}

	.main-navigation ul.menu>li>a,
	.main-navigation ul.nav-menu>li>a,
	.main-navigation a {
		display: block !important;
		padding: .85rem 0 !important;
		border-bottom: 1px solid var(--co-border);
		white-space: normal !important;
	}

	/* Flatten dropdowns into the drawer instead of hover/absolute flyouts -
	   hover doesn't work on touch, so submenus just show inline, indented. */
	.site-header .main-navigation ul.nav-menu ul,
	.site-header .main-navigation ul.menu ul,
	.site-header .main-navigation div.primary-navigation ul ul {
		display: block !important;
		position: static !important;
		width: 100% !important;
		max-width: none !important;
		box-shadow: none !important;
		border: none !important;
		border-top: 1px solid var(--co-border) !important;
		background-color: transparent !important;
		padding: 0 0 0 1rem !important;
	}

	.main-navigation ul ul a {
		border-bottom: 1px solid var(--co-border) !important;
	}
}

@media (max-width: 480px) {
	ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* =========================================================================
   16. COMP ALIGNMENT — SHOP / CATEGORY
   Refinements to match the uploaded design comp: card eyebrow + VIEW link,
   whole-dollar price row, hatched "[ PRODUCT SHOT ]" placeholder, extra
   stock-badge variants, "SORT" label, checkbox filters.
   ========================================================================= */

/* --- Toolbar: "SORT" label before the ordering select --- */
.woocommerce-ordering {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
}

.woocommerce-ordering::before {
	content: "Sort";
	font-family: var(--co-font-display);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--co-text-muted);
}

.woocommerce-result-count {
	font-family: var(--co-font-mono);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .1em;
}

/* --- Card eyebrow: "HANDGUN · 9MM" --- */
.co-card-eyebrow {
	font-family: var(--co-font-mono);
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--co-text-faint);
}

/* Title clamped to two lines so cards stay even */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- VIEW link, bottom-right of the card --- */
.co-card-view {
	position: absolute;
	right: 1.1rem;
	bottom: 1.1rem;
	font-family: var(--co-font-display);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--co-accent);
	z-index: 4;
}

ul.products li.product:hover .co-card-view {
	color: var(--co-accent-hover);
}

/* --- Hatched placeholder for cards with no real image --- */
ul.products li.product.co-no-image a.co-card-media {
	background-color: var(--co-bg-card);
	background-image: repeating-linear-gradient(-45deg,
			#131313 0, #131313 11px,
			#191919 11px, #191919 22px);
}

ul.products li.product.co-no-image a.co-card-media img {
	display: none !important;
}

ul.products li.product.co-no-image a.co-card-media::after {
	content: "[ Product Shot ]";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--co-font-mono);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--co-text-faint);
}

/* --- Sidebar list resets: kill folder icons / bullets on filter lists --- */
#secondary .product-categories li::before,
#secondary .product-categories li>a::before,
#secondary .woocommerce-widget-layered-nav-list li::before,
#secondary .woocommerce-widget-layered-nav-list li::marker {
	content: none !important;
	display: none !important;
}

#secondary .product-categories,
#secondary .product-categories li,
#secondary .woocommerce-widget-layered-nav-list,
#secondary .woocommerce-widget-layered-nav-list li {
	list-style: none !important;
	padding-left: 0;
}

#secondary .product-categories li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 0;
}

#secondary .product-categories li.current-cat>a {
	color: var(--co-accent);
}

#secondary .product-categories .count {
	color: var(--co-text-faint);
	font-family: var(--co-font-mono);
	font-size: .8rem;
}

/* Layered-nav chips: hide the trailing count, keep it button-clean */
#secondary .woocommerce-widget-layered-nav-list li .count {
	display: none;
}

#secondary .woocommerce-widget-layered-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

#secondary .woocommerce-widget-layered-nav-list li {
	border: 1px solid var(--co-border);
	background: var(--co-bg-card);
	border-radius: var(--co-radius);
	padding: 0 !important;
}

#secondary .woocommerce-widget-layered-nav-list li a {
	display: block;
	padding: .5rem .8rem;
	font-family: var(--co-font-mono);
	font-size: .74rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--co-text-muted);
}

#secondary .woocommerce-widget-layered-nav-list li.chosen {
	border-color: var(--co-accent);
	background: rgba(207, 159, 63, .1);
}

#secondary .woocommerce-widget-layered-nav-list li.chosen a {
	color: var(--co-accent);
}

/* Price filter "Filter" button + amount */
.widget_price_filter .price_slider_amount {
	flex-wrap: wrap;
	gap: .6rem;
}

.widget_price_filter .price_slider_amount .button {
	order: -1;
}

/* --- Stock-badge variants added for the comp --- */
.co-stock-badge--low {
	background-color: var(--co-lowstock);
	color: var(--co-text);
}

.co-stock-badge--built {
	background-color: var(--co-accent);
	color: var(--co-on-accent);
}

/* --- Checkbox-style filters (Condition, and any attribute checkbox list) --- */
#secondary .wc-block-components-checkbox,
#secondary .widget_layered_nav ul li.wc-layered-nav-term,
#secondary li .wc-layered-nav-term label {
	display: flex;
	align-items: center;
	gap: .6rem;
}

#secondary input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	border: 1px solid var(--co-border-light);
	border-radius: 1px;
	background: var(--co-bg-card);
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
}

#secondary input[type="checkbox"]:checked {
	background: var(--co-accent);
	border-color: var(--co-accent);
}

#secondary input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--co-on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* =========================================================================
   17. FIREARMS: TRANSFER-FFL PICKER, AGE ATTESTATION, SPLIT-SHIPMENT NOTICE
   (Phase 4 — only rendered on the checkout page when the cart has a firearm)
   ========================================================================= */
.com-rsr-ffl-picker {
	margin: 0 0 1.75rem;
	padding: 1.5rem;
	background: var(--co-bg-raised);
	border: 1px solid var(--co-border);
	border-left: 3px solid var(--co-accent);
}

.com-rsr-ffl-picker h3 {
	margin: 0 0 .5rem;
	font-family: var(--co-font-display);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.1rem;
	color: var(--co-text-bright);
}

.com-rsr-ffl-picker__hint {
	color: var(--co-text-muted);
	font-size: .875rem;
	line-height: 1.5;
	margin: 0 0 1.1rem;
}

.com-rsr-ffl-picker__row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin: 0 0 .85rem;
}

.com-rsr-ffl-picker__row label {
	flex-basis: 100%;
	font-family: var(--co-font-display);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--co-text-muted);
}

.com-rsr-ffl-picker__row input[type="text"] {
	flex: 1 1 auto;
	min-width: 12rem;
}

.com-rsr-ffl-picker__row .button {
	flex-shrink: 0;
}

.com-rsr-ffl-picker__select {
	width: 100%;
	background: var(--co-bg-darkest);
	color: var(--co-text);
	border: 1px solid var(--co-border-light);
	border-radius: var(--co-radius);
	font-family: var(--co-font-mono);
	font-size: .8rem;
	padding: .35rem;
}

.com-rsr-ffl-picker__select option {
	padding: .4rem .5rem;
}

.com-rsr-ffl-picker__select option:checked {
	background: var(--co-accent) linear-gradient(0deg, var(--co-accent) 0%, var(--co-accent) 100%);
	color: var(--co-on-accent);
}

.com-rsr-ffl-picker__selected {
	color: var(--co-accent);
	font-weight: 600;
	font-size: .875rem;
	margin: .85rem 0 0;
	min-height: 1.2em;
}

.com-rsr-age-attestation {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--co-bg-raised-2);
	border: 1px solid var(--co-border);
	border-radius: var(--co-radius);
	font-size: .8rem;
	line-height: 1.55;
	color: var(--co-text-muted);
}

.com-rsr-age-attestation label {
	display: flex;
	gap: .65rem;
	align-items: flex-start;
	cursor: pointer;
}

.com-rsr-age-attestation input[type="checkbox"] {
	margin-top: .2rem;
	flex-shrink: 0;
}

/* =========================================================================
   18. AGE VERIFICATION GATE
   Full-viewport interstitial shown to first-time visitors this session.
   Hidden by default; shown only when age-gate.js adds .co-age-gate-active
   to <html> (no valid sessionStorage confirmation found for this tab).
   ========================================================================= */
.co-age-gate {
	display: none;
}

html.co-age-gate-active,
html.co-age-gate-active body {
	overflow: hidden !important;
}

html.co-age-gate-active #page {
	display: none;
}

html.co-age-gate-active .co-age-gate {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 20000;
	/* above the mobile nav drawer's 10000/10001 */
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: var(--co-bg-darkest);
}

.co-age-gate__card {
	max-width: 26rem;
	width: 100%;
	background: var(--co-bg-card);
	border: 1px solid var(--co-border-light);
	border-radius: var(--co-radius);
	padding: 2.5rem 2rem;
	text-align: center;
}

.co-age-gate__logo {
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.25rem;
	display: block;
}

.co-age-gate__title {
	font-family: var(--co-font-display);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--co-text-bright);
	font-size: 1.35rem;
	margin: 0 0 .85rem;
}

.co-age-gate__copy {
	font-family: var(--co-font-body);
	color: var(--co-text-muted);
	font-size: .9rem;
	line-height: 1.55;
	margin: 0 0 1.75rem;
}

.co-age-gate__actions {
	display: flex;
	gap: .85rem;
	justify-content: center;
}

.co-age-gate__button {
	font-family: var(--co-font-display);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .85rem;
	padding: .75rem 1.5rem;
	border-radius: var(--co-radius);
	cursor: pointer;
	border: 1px solid transparent;
}

.co-age-gate__button--yes {
	background: var(--co-accent);
	color: var(--co-on-accent);
}

.co-age-gate__button--yes:hover {
	background: var(--co-accent-hover);
}

.co-age-gate__button--no {
	background: transparent;
	color: var(--co-text-muted);
	border-color: var(--co-border-light);
}

.co-age-gate__button--no:hover {
	color: var(--co-text);
	border-color: var(--co-text-muted);
}

@media (max-width: 767px) {
	.co-age-gate__card {
		max-width: 100%;
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.co-age-gate__actions {
		flex-direction: column;
	}

	.co-age-gate__button {
		width: 100%;
	}
}

/* =========================================================================
   19. HOMEPAGE SCROLLING PRODUCT BANNER
   Full-bleed strip below the header/nav (see storefront_before_content hook
   in functions.php). Reuses the section 10 product-card styling as-is; only
   ul.products/li.product layout is overridden here (grid -> flex row) so the
   shop page grid itself is untouched.
   ========================================================================= */
.co-scroll-banner {
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 1.75rem 0;
	background-color: var(--co-bg-raised);
	border-top: 1px solid var(--co-border);
	border-bottom: 1px solid var(--co-border);
}

.co-scroll-track {
	display: flex;
	width: max-content;
	animation: co-scroll-x 200s linear infinite;
}

.co-scroll-banner:hover .co-scroll-track {
	animation-play-state: paused;
}

@keyframes co-scroll-x {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.co-scroll-banner ul.products {
	display: flex !important;
	width: max-content !important;
	gap: 1.25rem !important;
	margin: 0 !important;
	padding: 0 1.25rem !important;
}

.co-scroll-banner ul.products li.product {
	flex: 0 0 220px !important;
	width: 220px !important;
}

@media (prefers-reduced-motion: reduce) {
	.co-scroll-track {
		animation: none;
	}
}

/* =========================================================================
   20. ORDER RECEIVED "RECEIPT" (WooCommerce .order_details)
   This is Storefront's own component, not ours - its torn-ticket zigzag
   edges come from storefront/assets/css/woocommerce/woocommerce.css, and
   its background/border color comes from a dynamically-generated inline
   style (storefront/inc/woocommerce/class-storefront-woocommerce-
   customizer.php:174-185) that reads the Customizer's Background Color
   theme_mod. We never touched that theme_mod - the dark page background
   was set via plain CSS instead - so Storefront still renders this one
   component with its own light default background, and our global cream
   text color (meant for dark backgrounds) becomes invisible against it.
   Re-themed here to match the rest of the site, reusing Storefront's own
   3-layer gradient technique for the zigzag teeth (just recolored) rather
   than just patching text contrast on an otherwise jarring white box.
   ========================================================================= */
.order_details {
	background-color: var(--co-bg-card) !important;
}

.order_details::before,
.order_details::after {
	background: -webkit-linear-gradient(transparent 0, transparent 0),
		-webkit-linear-gradient(135deg, var(--co-bg-card) 33.33%, transparent 33.33%),
		-webkit-linear-gradient(45deg, var(--co-bg-card) 33.33%, transparent 33.33%) !important;
}

.order_details li {
	color: var(--co-text-muted) !important;
	border-bottom: 1px dotted var(--co-border) !important;
}

.order_details li strong {
	color: var(--co-text-bright) !important;
}

/* Gold emphasis on the total, matching the price color used on product
   cards/single product pages elsewhere in the theme. */
.order_details li.total strong {
	color: var(--co-accent) !important;
}