/* ==========================================================================
   WooCommerce re-skin: shop archive, single product, cart, checkout,
   my account. CSS ONLY — no template overrides, so cart/checkout logic,
   the FFL plugin, and Handgun/Long Gun shipping methods are untouched.
   Loaded only on WooCommerce pages, see inc/enqueue.php.
   ========================================================================== */

.woocommerce,
.woocommerce-page {
	font-family: Inter, system-ui, sans-serif;
	color: var(--text);
}
.woocommerce .tot-wrap { padding-top: 40px; padding-bottom: 56px; }

/* -------------------------------------------------------------------
 * Blanket guarantee: on every WooCommerce-rendered page, plain text is
 * always var(--text) (white in dark mode, near-black in light mode) and
 * links are always var(--link) — no matter what random color Elementor's
 * per-page saved CSS assigned to a given element (the blue/purple/
 * near-invisible text found throughout cart, checkout, and account).
 * Buttons, badges, and stock labels override this further down the file
 * with their own brand-specific colors (more specific selectors win even
 * though both sides use !important).
 * ------------------------------------------------------------------- */
.woocommerce *, .woocommerce-page * {
	color: var(--text) !important;
}
.woocommerce a:not(.tot-btn):not(.button), .woocommerce a:not(.tot-btn):not(.button) *,
.woocommerce-page a:not(.tot-btn):not(.button), .woocommerce-page a:not(.tot-btn):not(.button) * {
	color: var(--link) !important;
}

/* -------------------------------------------------------------------
 * Cart, Checkout, and My Account still run through Elementor Pro's
 * dedicated WooCommerce widgets (a deliberate prior setup, not just
 * leftover Theme Builder templates), each carrying its own saved
 * per-element CSS (e.g. post-4543.css) at very high, per-page-specific
 * selector specificity that can't be out-specified generically. Rather
 * than chase every element ID, font/color/background are reasserted
 * with !important here — layout and spacing are left alone so
 * Elementor's structure and responsive behavior still work.
 * ------------------------------------------------------------------- */
.woocommerce-cart .elementor-widget-container,
.woocommerce-checkout .elementor-widget-container,
.woocommerce-account .elementor-widget-container,
#owp-checkout-timeline {
	font-family: Inter, system-ui, sans-serif !important;
	color: var(--text) !important;
	background: transparent !important;
	background-image: none !important;
}
/* Elementor's WooCommerce widgets (cart/checkout/my-account) ship their
 * own off-white card backgrounds (e.g. .e-shop-table, .e-con wrapper
 * divs) independent of the per-page custom CSS already handled above —
 * this is what was still showing light/white patches in dark mode.
 * Flattening every Elementor structural wrapper to transparent lets our
 * own card styling (.cart_totals, .woocommerce-checkout-review-order,
 * #customer_details below) show through instead. */
.woocommerce-cart .elementor-element,
.woocommerce-checkout .elementor-element,
.woocommerce-account .elementor-element,
.woocommerce-cart [class*="e-con"],
.woocommerce-checkout [class*="e-con"],
.woocommerce-account [class*="e-con"],
.woocommerce-cart [class^="e-"],
.woocommerce-checkout [class^="e-"],
.woocommerce-account [class^="e-"] {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-cart .cart_totals {
	background: var(--surface) !important;
}
.woocommerce-cart label,
.woocommerce-checkout label,
.woocommerce-account label,
.woocommerce-cart label span,
.woocommerce-checkout label span,
.woocommerce-account label span {
	color: var(--text) !important;
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	padding: 24px !important;
	border-radius: 6px;
}
/* WooCommerce's own native column wrappers (not Elementor markup, so the
 * wildcard [class^="e-"] resets above never touched these) — carried a
 * solid light pink/gray background from the page's saved Elementor CSS. */
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2,
.woocommerce-cart .col-1, .woocommerce-cart .col-2,
.woocommerce-account .col-1, .woocommerce-account .col-2,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .shipping_address,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout #payment {
	background: transparent !important;
}
.woocommerce-checkout .payment_box,
.woocommerce-checkout ul.payment_methods li {
	background: var(--placeholder-bg) !important;
	color: var(--text) !important;
}
/* Select2 (jQuery plugin WooCommerce uses for Country/State dropdowns)
 * ships its own light-theme default skin. */
.woocommerce-checkout .select2-selection,
.woocommerce-checkout .select2-dropdown,
.woocommerce-checkout .select2-results__option {
	background: var(--input-bg) !important;
	color: var(--text) !important;
	border-color: var(--input-border) !important;
}
.woocommerce-checkout .select2-selection__rendered {
	color: var(--text) !important;
}
.woocommerce-cart .button, .woocommerce-cart button,
.woocommerce-checkout .button, .woocommerce-checkout button,
.woocommerce-account .button, .woocommerce-account button {
	background: var(--card-btn) !important;
	color: #FFFFFF !important;
	border: 0 !important;
}
.woocommerce-cart .checkout-button, .woocommerce-cart #place_order,
.woocommerce-checkout .checkout-button, .woocommerce-checkout #place_order,
.woocommerce-account .checkout-button, .woocommerce-account #place_order {
	background: var(--brass) !important;
	color: #15191C !important;
}
.woocommerce-cart h1, .woocommerce-cart h2, .woocommerce-cart h3,
.woocommerce-checkout h1, .woocommerce-checkout h2, .woocommerce-checkout h3,
.woocommerce-account h1, .woocommerce-account h2, .woocommerce-account h3,
#owp-checkout-timeline li {
	font-family: Oswald, sans-serif !important;
	color: var(--text) !important;
}
.woocommerce-cart a:not(.tot-btn):not(.button),
.woocommerce-checkout a:not(.tot-btn):not(.button),
.woocommerce-account a:not(.tot-btn):not(.button) {
	color: var(--link) !important;
}
.woocommerce-cart table, .woocommerce-cart th, .woocommerce-cart td,
.woocommerce-checkout table, .woocommerce-checkout th, .woocommerce-checkout td,
.woocommerce-account table, .woocommerce-account th, .woocommerce-account td {
	font-family: Inter, system-ui, sans-serif !important;
	color: var(--text) !important;
	background: transparent !important;
}
/* Elementor's saved per-page CSS sets an explicit color directly on price
 * amounts (blue on the cart line item, near-black — invisible on a dark
 * background — on the cart totals) regardless of the table-level fix
 * above, since .woocommerce-Price-amount is more specific than table/td. */
.woocommerce-cart .woocommerce-Price-amount,
.woocommerce-checkout .woocommerce-Price-amount,
.woocommerce-account .woocommerce-Price-amount,
.woocommerce-cart .woocommerce-Price-amount *,
.woocommerce-checkout .woocommerce-Price-amount *,
.woocommerce-account .woocommerce-Price-amount * {
	color: var(--text) !important;
}
/* The product table had no card boundary once Elementor's own wrapper
 * backgrounds were flattened to transparent — it was floating directly on
 * the page background with nothing to visually separate it. */
.woocommerce-cart table.shop_table {
	background: var(--surface) !important;
	border: 1px solid var(--border);
	border-radius: 6px;
}
.woocommerce-cart table.shop_table thead th {
	background: var(--placeholder-bg) !important;
}
.woocommerce-cart input, .woocommerce-cart select, .woocommerce-cart textarea,
.woocommerce-checkout input, .woocommerce-checkout select, .woocommerce-checkout textarea,
.woocommerce-account input, .woocommerce-account select, .woocommerce-account textarea {
	font-family: Inter, system-ui, sans-serif !important;
	color: var(--text) !important;
	background: var(--input-bg) !important;
	border-color: var(--input-border) !important;
}

.woocommerce h1.page-title,
.woocommerce-page h1.entry-title {
	font-family: Oswald, sans-serif;
	font-size: 36px;
	letter-spacing: 0.5px;
	margin: 0 0 28px;
}

/* -------------------------------------------------------------------
 * Buttons: map every WooCommerce button to the theme's button look
 * without touching the markup or logic behind them.
 * ------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
body.theme-three-oaks .add_to_cart_button,
body.theme-three-oaks a.button {
	font-family: Oswald, sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--card-btn);
	color: #FFFFFF !important;
	border: 0;
	border-radius: 4px;
	padding: 13px 24px;
	min-height: 44px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--btn-bg);
	color: var(--btn-text) !important;
	opacity: 0.95;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce a.checkout-button {
	background: var(--brass);
	color: #15191C !important;
	/* Overrides leftover per-element Elementor CSS from when these pages
	 * were hand-styled in the page builder (e.g. a 5px teal border saved
	 * against the Cart page's specific Elementor element ID). */
	border: 0 !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover {
	background: var(--brass-light);
	color: #15191C !important;
}

/* -------------------------------------------------------------------
 * Shop / category archive grid
 * ------------------------------------------------------------------- */
/* Scoped to body.theme-three-oaks rather than .woocommerce/.woocommerce-page
 * — Elementor "Products"/"Featured Products" widgets embed this exact
 * ul.products markup on non-WooCommerce pages too (Contact Us has one in
 * its footer area), and those pages don't carry the .woocommerce body
 * class, so a .woocommerce-scoped rule would never reach them. */
body.theme-three-oaks ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.theme-three-oaks ul.products li.product {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0 0 16px;
	overflow: hidden;
	/* WooCommerce core's own woocommerce-layout.css ships a classic
	 * float-based grid (width: ~22%; float: left) for li.product. Setting
	 * display:grid on the parent above makes float a no-op, but the
	 * explicit width % still overrides CSS Grid's default item-stretch
	 * behavior, which is what was squeezing every card down to a sliver
	 * with huge gaps on category archive pages. */
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
body.theme-three-oaks ul.products li.product img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	margin-bottom: 12px;
}
body.theme-three-oaks ul.products li.product .woocommerce-loop-product__title {
	font-family: Oswald, sans-serif;
	font-size: 16px;
	letter-spacing: 0.3px;
	padding: 0 16px;
	margin: 0 0 6px;
}
body.theme-three-oaks ul.products li.product .price {
	padding: 0 16px;
	font-size: 16px;
	color: var(--text) !important;
}
body.theme-three-oaks ul.products li.product .price * {
	color: var(--text) !important;
}
body.theme-three-oaks ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 700;
}

/* Subcategory tiles (shown when a shop/category archive lists subcategories
 * — WooCommerce's li.product-category, a sibling pattern to li.product
 * with its own markup: an <h2> title and a <mark class="count"> count,
 * which otherwise inherits the browser's default yellow <mark> highlight). */
body.theme-three-oaks ul.products li.product-category {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	padding: 0 0 16px;
	text-align: left;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
body.theme-three-oaks ul.products li.product-category img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	margin-bottom: 12px;
}
body.theme-three-oaks ul.products li.product-category .woocommerce-loop-category__title {
	font-family: Oswald, sans-serif;
	font-size: 16px;
	letter-spacing: 0.3px;
	padding: 0 16px;
	margin: 0;
	color: var(--text);
}
body.theme-three-oaks ul.products li.product-category mark.count {
	background: none !important;
	color: var(--muted) !important;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: 13px;
}
body.theme-three-oaks ul.products li.product .price del {
	color: var(--muted) !important;
	margin-right: 6px;
}
body.theme-three-oaks ul.products li.product .button {
	margin: 12px 16px 0;
	display: inline-flex;
	position: static !important;
}
.woocommerce span.onsale,
body.theme-three-oaks span.onsale {
	background: var(--brass);
	color: #15191C !important;
	font-family: Oswald, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.5px;
	border-radius: 3px;
	min-height: auto;
	min-width: auto;
	padding: 4px 10px;
	top: 12px;
	left: 12px;
}

/* Native WooCommerce widgets (price filter, category list, etc.) so
 * Hunter can add a Shop Sidebar in Appearance > Widgets if desired. */
.woocommerce .widget_price_filter .price_slider_amount .button { float: none; margin-top: 10px; }
.woocommerce .widget_layered_nav ul,
.woocommerce .widget_product_categories ul { list-style: none; margin: 0; padding: 0; }
.woocommerce .widget_layered_nav li,
.woocommerce .widget_product_categories li { padding: 6px 0; border-bottom: 1px solid var(--border); }

/* -------------------------------------------------------------------
 * "Stock source" label (tot_get_stock_source_label, inc/woocommerce.php)
 * — presentation only; real dropship logic lands with Lipsey's (phase 2).
 * ------------------------------------------------------------------- */
.tot-stock-source {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--olive) !important;
	background: var(--placeholder-bg);
	border-radius: 3px;
	padding: 3px 9px;
	margin: 0 16px 10px;
}
[data-theme="dark"] .tot-stock-source { color: var(--sage) !important; }
.single-product .tot-stock-source { margin: 0 0 14px; }

/* Custom Order Silencers (product 9068): the gallery image is a Silencer
 * Shop explainer graphic, not a product photo. inc/woocommerce.php
 * already moves it after the summary in the hook order, but the default
 * WooCommerce layout floats gallery/summary into two side-by-side
 * columns regardless of DOM order — stack them vertically here so the
 * reorder is actually visible, with the graphic landing below the
 * description/tabs instead of beside the title. */
#product-9068 {
	display: flex;
	flex-direction: column;
}
#product-9068 .summary.entry-summary { width: 100%; max-width: none; float: none; order: 1; }
#product-9068 .woocommerce-product-gallery { width: 100%; max-width: 600px; margin: 40px auto 0; float: none; order: 3; }
#product-9068 .woocommerce-tabs { order: 2; }
#product-9068 .related.products { order: 4; }

/* -------------------------------------------------------------------
 * Single product
 * ------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-family: Oswald, sans-serif;
	font-size: 32px;
	letter-spacing: 0.4px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--text) !important;
	font-size: 26px;
	font-weight: 700;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--muted) !important;
	font-size: 17px;
	font-weight: 400;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--muted) !important;
	line-height: 1.7;
}
.woocommerce div.product form.cart {
	margin-top: 20px;
}
.woocommerce div.product .stock {
	font-weight: 600;
	color: var(--olive) !important;
}
[data-theme="dark"] .woocommerce div.product .stock { color: var(--sage) !important; }
.woocommerce div.product .stock.out-of-stock { color: #9A3412 !important; }

.woocommerce-tabs ul.tabs li { font-family: Oswald, sans-serif; letter-spacing: 0.4px; }
.woocommerce-tabs ul.tabs li a { color: var(--text) !important; }
.woocommerce-tabs ul.tabs li.active a { color: var(--link) !important; }

.related.products h2,
.upsells.products h2 {
	font-family: Oswald, sans-serif;
	font-size: 28px;
	margin: 48px 0 24px;
}

/* -------------------------------------------------------------------
 * Cart
 * ------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--border);
	border-radius: 6px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table th {
	background: var(--surface);
	font-family: Oswald, sans-serif;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	font-size: 13px;
	border-bottom: 1px solid var(--border);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--border); }
.woocommerce-cart-form .product-thumbnail img { border-radius: 4px; max-width: 72px; }
.woocommerce .cart-collaterals .cart_totals {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 20px;
}
.woocommerce .cart_totals h2 { font-family: Oswald, sans-serif; font-size: 20px; }
.woocommerce .cart_totals table.shop_table { border: 0; }

/* -------------------------------------------------------------------
 * Checkout — presentation only, fields/order untouched so the FFL
 * plugin's FFL-selection step renders exactly as it does today.
 * ------------------------------------------------------------------- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 24px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: 4px;
	color: var(--text);
	font-family: Inter, sans-serif;
}
.woocommerce-checkout h3 {
	font-family: Oswald, sans-serif;
	font-size: 22px;
	letter-spacing: 0.3px;
}
#order_review table.shop_table { border: 0; }

/* -------------------------------------------------------------------
 * My account
 * ------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border); background: transparent !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; color: var(--text) !important; background: transparent !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--card-btn) !important; color: #FFFFFF !important; }
.woocommerce-MyAccount-content { background: var(--surface) !important; border: 1px solid var(--border); border-radius: 6px; padding: 24px; }
.woocommerce-MyAccount-content, .woocommerce-MyAccount-content * {
	color: var(--text) !important;
}
.woocommerce-MyAccount-content a:not(.tot-btn):not(.button) {
	color: var(--link) !important;
}
/* Logged-in My Account (Dashboard/Orders/Addresses/Account Details/
 * Logout tabs) runs through the same Elementor my-account widget as the
 * logged-out login/register forms fixed above, with its own white tab
 * backgrounds and mixed per-element text colors (Elementor Pro renders
 * these as its own tab buttons, not a plain <ul><li> list). */
.woocommerce-account [class*="account-tab"],
.woocommerce-account [class*="my-account-nav"],
.woocommerce-account [class*="e-account"] {
	background: transparent !important;
	color: var(--text) !important;
}
/* Logged-in Dashboard/Orders content looked off-center — Elementor's My
 * Account widget has its own outer width/alignment that didn't match the
 * rest of the site's centered 1280px content column. */
.woocommerce-account .elementor-widget-woocommerce-my-account,
.woocommerce-account [class*="e-account"],
.woocommerce-account .woocommerce {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}
/* The tab row (Dashboard/Orders/Downloads/Addresses/Account Details/
 * Logout) ran its tabs together with no gap at narrower widths — give it
 * room to wrap instead of overlapping. */
.woocommerce-account [class*="tabs"],
.woocommerce-account [class*="account-nav"],
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
}
/* Elementor Pro's "My Account" widget (distinct from its Cart/Checkout
 * widgets) wraps the Dashboard/Orders/Addresses tab content in its own
 * outer widget container — a class pattern not caught by the narrower
 * .elementor-widget-container reset above, which is what kept showing a
 * white box behind the Dashboard intro text and the Orders table. */
.woocommerce-account [class*="elementor-widget-woocommerce"],
.woocommerce-account .elementor-widget-container > div,
.woocommerce-account .elementor-widget-container > section {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}
.woocommerce-account table.my_account_orders,
.woocommerce-account table.my_account_orders th,
.woocommerce-account table.my_account_orders td {
	background: transparent !important;
}
/* Single order view (My Account > Orders > an order): the billing/shipping
 * address card and the order-details table border carried the same
 * Elementor per-page white background / bright blue border seen on Cart. */
.woocommerce-account table.shop_table,
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	border-color: var(--border) !important;
}
.woocommerce-account address {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
}

/* -------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */
@media (max-width: 782px) {
	.woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
	.woocommerce div.product .product_title { font-size: 26px; }
}