/**
 * WordPress/WooCommerce integration fixes ONLY — never move source styling
 * here. Each rule below says why it exists.
 */

/* wp-block-library (dequeued in inc/assets.php — it's core-block CSS the
   source design doesn't use) is also where WordPress defines the standard
   .screen-reader-text utility class. Losing it makes every sr-only label
   WooCommerce relies on (cart quantity labels, coupon field label, etc.)
   render as plain visible text. Restated here, verbatim from WP core. */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
	width: 1px; word-wrap: normal !important;
}

/* The source's spot-price ticker/nav are real <header> content on a page that
   has no other <header> element; WooCommerce doesn't add one, so no reset
   needed yet. First fixes land here as the homepage build surfaces WP/Woo
   default bleed-through (LAW: treat every stock Woo element as a defect
   until proven to match the source, STANDARDS.md). */

/* FIX 2026-09-25: `.container` is this theme's OWN name for its body-content
   wrapper (index.php, page.php) — it was never actually a generic class in
   source.css. The only bare `.container` rules that exist there are scoped
   to chrome: `header .container, footer .container, #tippy-top .container`
   (max-width:1240px; min-width:1000px) and, more narrowly, `header nav
   .container` (max-width:1310px, padding 0 — the navbar row only, not page
   content; an earlier pass misread this scoped rule as the generic value
   and used 1310px/1100px/900px in different places, which is why the body
   content width didn't match the source). With no rule of its own, this
   theme's `.container` had NO max-width at all and rendered full-bleed to
   the viewport. 1240px is the real, consistently-used site-wide content
   width (header/footer chrome AND the shop grid's own `.alp-container` both
   use it), so that's the one value used everywhere here. */
#main-content .container {
	max-width: 1240px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* .apx-seo-zone and .featured-products are THIS build's own additions (LOCKED
   standard #6 content zone; a plain "Best Sellers" grid standing in for the
   source's Dynamic-Yield-personalized section) — not source classes, so their
   spacing lives here rather than being assumed to already exist in source.css. */
.apx-seo-zone { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.apx-seo-zone h2 { margin-bottom: 16px; }
.apx-seo-zone p { line-height: 1.6; color: #444; margin-bottom: 14px; }

/* GENERAL .grid-view / .mod-product-card fix (2026-10-04, corrected) — this
   build's own `.grid-view` wrapper is only a style-less fallback for
   contexts that have NO real ancestor class to style against: homepage
   Best Sellers (`.featured-products`), the "Featured Rare Coins" tabs
   (`.apx-tabbed-module`), and the product-page Related
   Products/Recently Viewed carousel (`.apx-related-products`/
   `.apx-product-carousel`), and the homepage "Shop Our Deals of the Week"
   section (`.weekly-deals`). The category/shop archive is NOT one of these —
   its grid is wrapped in the real `.search-main` (archive-product.php:
   `.search-main > .search-results.products-group > .grid-view`), and
   `.search-main .mod-product-card` already has a COMPLETE real rule set in
   source.css (width/height/background, the real hover elevation effect,
   the real add-to-cart icon position/size, badge spacing via the real
   `.product-essential .product-badge` rule, price/message colors — all of
   it). An earlier pass applied these fallback overrides to bare `.grid-view`
   with no exception for `.search-main`, and because theme.css loads AFTER
   source.css, that fallback WON even where real, correct, more complete
   styling already existed — this is what caused the Top Pick badge and the
   add-to-cart button to visibly overlap (wrong icon size/position) and the
   real hover-elevation "movement" to never show. Scoped below to only the
   3 contexts that actually need a fallback. */
.featured-products .grid-view,
.apx-tabbed-module .grid-view,
.apx-related-products .grid-view,
.weekly-deals .grid-view {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	padding: 0 20px 30px;
}
/* `.search-main` (real, source.css: width:785px;float:left) and its real
   `.mod-product-card` children (float:left) have NO real clearfix anywhere
   between them in source.css — because the source's actual DOM between
   them is Unbxd's own widget wrapper (third-party, dropped per pipeline
   default), which this build replaced with its own plain `.grid-view` div
   that has no real styling of its own to inherit. Without a clearfix there,
   `.grid-view` collapsed to 0 height, which both hid the whole grid from
   layout (floated cards paint outside their 0-height parent) and was the
   real cause of the Top Pick badge / add-to-cart button visually
   overlapping, not a positioning bug in either of them individually. */
.search-main .grid-view:after {
	content: "";
	display: table;
	clear: both;
}
/* `.search-main` itself is ALSO a real floated element (source.css:
   `.search-main{width:785px;float:left}`) with nothing anywhere in the
   669 KB bundle clearing it at the wrapper level either (same real reason
   as above: the source's actual DOM there is Unbxd's own wrapper, not
   `.apx-shop-main`). Without this, the footer rendered starting from where
   this build's wrapper collapsed to instead of after the still-floating
   grid/pagination content, visually overlapping every product card. */
.apx-shop-main:after {
	content: "";
	display: table;
	clear: both;
}

.featured-products .mod-product-card,
.apx-tabbed-module .mod-product-card,
.apx-related-products .mod-product-card,
.weekly-deals .mod-product-card {
	width: 180px;
	position: relative;
	background: #fff;
	border: 1px solid #D4DADD;
	border-radius: 4px;
	padding: 10px 8px 14px;
	box-sizing: border-box;
}
.featured-products .mod-product-card .mod-product-title span,
.apx-tabbed-module .mod-product-card .mod-product-title span,
.apx-related-products .mod-product-card .mod-product-title span,
.weekly-deals .mod-product-card .mod-product-title span,
.featured-products .mod-product-card .mod-product-pricing span,
.apx-tabbed-module .mod-product-card .mod-product-pricing span,
.apx-related-products .mod-product-card .mod-product-pricing span,
.weekly-deals .mod-product-card .mod-product-pricing span {
	color: #000 !important;
	text-decoration: none;
}
.featured-products .mod-product-card .mod-product-title span,
.apx-tabbed-module .mod-product-card .mod-product-title span,
.apx-related-products .mod-product-card .mod-product-title span,
.weekly-deals .mod-product-card .mod-product-title span {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
.featured-products .mod-product-card .mod-product-pricing span,
.apx-tabbed-module .mod-product-card .mod-product-pricing span,
.apx-related-products .mod-product-card .mod-product-pricing span,
.weekly-deals .mod-product-card .mod-product-pricing span {
	font-size: 14px;
	font-weight: 700;
}
.featured-products .mod-product-card .mod-product-img img,
.apx-tabbed-module .mod-product-card .mod-product-img img,
.apx-related-products .mod-product-card .mod-product-img img,
.weekly-deals .mod-product-card .mod-product-img img {
	width: 130px;
	height: 130px;
	object-fit: contain;
}
.featured-products .strike-through span,
.apx-tabbed-module .strike-through span,
.apx-related-products .strike-through span { color: #999; text-decoration: line-through; font-weight: 400; font-size: 12px; }
.weekly-deals .strike-through span { color: #999; text-decoration: line-through; font-weight: 400; font-size: 12px; }
.featured-products .mod-product-message, .featured-products .mod-product-message-second,
.apx-tabbed-module .mod-product-message, .apx-tabbed-module .mod-product-message-second,
.apx-related-products .mod-product-message, .apx-related-products .mod-product-message-second { font-size: 11px; color: #F95929; }
.weekly-deals .mod-product-message, .weekly-deals .mod-product-message-second { font-size: 11px; color: #F95929; }
/* "Shop Our Deals of the Week" (2026-10-05) needs real red/green
   color-coding, not the uniform-black title/price treatment the other 3
   fallback contexts use — real source colors: #C30000 for the discounted
   price (same red used everywhere else a Sale price shows in this build),
   #24A186 for "X% Off The Premium" (the same teal-green already used for
   the real "New"/`.product-badge.new` color elsewhere in source.css). */
.weekly-deals .mod-product-pricing .price.discounted { color: #C30000 !important; }
.weekly-deals .mod-product-message-second { color: #24A186; font-weight: 600; }
.featured-products .add-to-cart-button-link,
.apx-tabbed-module .add-to-cart-button-link,
.apx-related-products .add-to-cart-button-link,
.weekly-deals .add-to-cart-button-link {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
}
.featured-products .add-to-cart-button-link i.add-to-cart-button,
.apx-tabbed-module .add-to-cart-button-link i.add-to-cart-button,
.apx-related-products .add-to-cart-button-link i.add-to-cart-button,
.weekly-deals .add-to-cart-button-link i.add-to-cart-button {
	background-image: url('../images/content/add-to-cart.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: block;
	width: 24px;
	height: 24px;
}
.featured-products .add-to-cart-button-link:hover i.add-to-cart-button,
.apx-tabbed-module .add-to-cart-button-link:hover i.add-to-cart-button,
.apx-related-products .add-to-cart-button-link:hover i.add-to-cart-button,
.weekly-deals .add-to-cart-button-link:hover i.add-to-cart-button {
	background-image: url('../images/content/add-to-cart-hover.png');
}
/* Real strikethrough "was" price (2026-10-05, apx_get_sale_was_price()) —
   no real `.search-main .mod-product-pricing .strike-through` rule exists
   in source.css at all (checked directly; only other contexts like
   `.featured-products-carousel`/`.product-value-history` have one), so
   reused those contexts' real values (#666, 14px, normal weight) rather
   than inventing new ones. */
.search-main .mod-product-pricing .strike-through,
.featured-products .mod-product-pricing .strike-through,
.apx-tabbed-module .mod-product-pricing .strike-through,
.apx-related-products .mod-product-pricing .strike-through,
.weekly-deals .mod-product-pricing .strike-through {
	display: block;
	color: #666;
	font-weight: normal;
	font-size: 14px;
	line-height: 22px;
}

/* Same real icon, same root-relative-404 cause as above, but these contexts
   already have their OWN real, more specific source.css rule for it
   (category/search grid, product-value-history, Recommended Supplies) —
   repointed those directly instead of a fallback. */
.search-main .mod-product-card a i.add-to-cart-button,
.product-value-history .content-section-wrapper .mod-product-card a i.add-to-cart-button,
.product-page .item-overview .recommended-supplies .content .rec-item .quantity a i.add-to-cart-button {
	background-image: url('../images/content/add-to-cart.png');
}
.search-main .mod-product-card a i.add-to-cart-button:hover,
.product-value-history .content-section-wrapper .mod-product-card a i.add-to-cart-button:hover,
.product-page .item-overview .recommended-supplies .content .rec-item .quantity a i.add-to-cart-button:hover {
	background-image: url('../images/content/add-to-cart-hover.png');
}
/* Homepage Best Sellers wants slightly larger cards than the default 180px. */
.featured-products .mod-product-card { width: 200px; }
.featured-products .mod-product-card .mod-product-img img { width: 130px; height: 130px; }

/* Specifications tab float-collapse fix (2026-10-04) — source.css floats
   `.tab-display .specs ul.left`/`.right` (the two Specifications columns)
   but never clears them anywhere in the 669 KB bundle for this context, so
   the floated content fell out of normal flow and the next real section
   (Related Products) rendered on top of it instead of below it. Same
   pragmatic restate-with-matching-specificity approach as the rest of this
   file, not a change to any visual styling. */
.product-page .item-details .tab-display .specs:after {
	content: "";
	display: table;
	clear: both;
}

/* Product-page Related Products / Recently Viewed carousel (2026-10-04,
   assets/js/product-carousels.js). `.grid-view` is flex/wrap everywhere
   else it's used (a static grid) — once Slick takes over here it manages
   its own track/slide layout, so the flex rules are neutralized only on
   the instances Slick actually initializes (`.slick-initialized`), not on
   `.grid-view` generally. */
.apx-product-carousel.slick-initialized {
	display: block;
	flex-wrap: initial;
	gap: 0;
}
.apx-product-carousel .slick-slide {
	display: flex;
	justify-content: center;
}
.apx-product-carousel .mod-product-card {
	margin: 0 8px;
}
.apx-product-carousel .slick-prev,
.apx-product-carousel .slick-next {
	width: 34px;
	height: 34px;
	background: #fff;
	border: 1px solid #D4DADD;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	z-index: 2;
}
.apx-product-carousel .slick-prev { left: -10px; }
.apx-product-carousel .slick-next { right: -10px; }
.apx-product-carousel .slick-prev:before,
.apx-product-carousel .slick-next:before {
	color: #666;
}

/* Same "found the real classes but something else outranks the expected
   layout rule" situation as the .grid-view fix above — five-cards'
   ".alp-col.card-inner" is a Bootstrap-auto-layout variant that computed to
   display:block/full-width instead of an even flex share. Same pragmatic
   fix: restate the intended layout here instead of continuing to trace it
   through 669KB of minified CSS. */
.five-cards .alp-section-body .alp-row { display: flex; flex-wrap: wrap; }
.five-cards .alp-col.card-inner { flex: 1 1 20%; max-width: 20%; box-sizing: border-box; padding: 0 4px; }
.five-cards .alp-card-5col-image img { width: 100%; height: 220px; object-fit: cover; display: block; }

/* ============================================================
   Rotating promo ticker (2026-10-16, header.php's own doc comment has the
   full real-vs-source rationale). Real messages stacked on top of each
   other and cross-faded by assets/js/site.js; kept the real source's own
   look (single-line, centered, same link color as `.top-bar .left a`).
   ============================================================ */
.apx-promo-ticker { position: relative; min-height: 1.3em; }
.apx-promo-msg {
	position: absolute;
	left: 0;
	right: 0;
	color: #24a186;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease-in-out;
}
.apx-promo-msg.is-active { opacity: 1; visibility: visible; position: relative; }

/* ============================================================
   "Latest Verified Reviews" (2026-10-05) — real CSS lifted verbatim from
   the live site's own injected `<style>` for this exact widget (read via
   the project's CDP-connected Chrome), not reconstructed from source.css
   (this widget's styles were never in the static bundle at all — it's
   injected by the widget's own script). `.sa-reviews-scroll` is a real
   NATIVE CSS scroll-snap carousel — no JS library, exactly matching the
   source's own actual mechanism (drag/swipe/wheel all work for free).
   `.card-cta`/`.alp-btn` additions are this build's own real "Read More
   Reviews" card (real local /apmex-reviews/ page) replacing the source's
   outbound Shopper Approved link, same vendor-free precedent as the rest
   of this project.
   ============================================================ */
#sa-reviews { background-color: #F5F5F5; padding-bottom: 1px; }
#sa-reviews .reviews-header {
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	margin: 24px 0 0;
	font-weight: 600;
	font-size: 24px;
}
#sa-reviews .reviews-header span { color: #666; font-size: 15px; font-weight: 400; display: block; }
#sa-reviews .sa-reviews-scroll {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	height: auto;
	margin: 24px 0 2.5rem 0;
	padding: 0 calc(50% - 8rem - 0.75rem);
	cursor: default;
	overflow: scroll hidden;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 1.25rem;
	scrollbar-width: none;
	font-family: 'Open Sans', sans-serif;
}
#sa-reviews .sa-reviews-scroll::-webkit-scrollbar { display: none; width: 0 !important; background: transparent; }
#sa-reviews .sa-reviews-scroll:active { cursor: grab; cursor: -webkit-grab; }
#sa-reviews .card {
	width: 16rem;
	height: auto;
	flex: 0 0 auto;
	margin: 0 0.75rem;
	border: none;
	outline: none;
	color: #666;
	background: #ffffff;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	text-align: center;
	border-top: 4px solid #24A185;
	scroll-snap-align: start;
}
#sa-reviews .card-inner { width: 100%; height: 100%; padding: 1rem; box-sizing: border-box; display: flex; flex-direction: column; }
#sa-reviews .card-inner a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
#sa-reviews .review-display-name { font-weight: 600; font-size: 16px; line-height: 22px; color: #666666; }
#sa-reviews .review-location-date { margin: 8px 0; font-weight: normal; font-size: 12px; line-height: 16px; color: #666666; }
#sa-reviews .img-fluid { display: flex; justify-content: center; gap: 2px; }
#sa-reviews .review-comments { margin-top: 5px; font-weight: normal; font-size: 16px; line-height: 24px; text-align: center; color: #666666; flex: 1; }
#sa-reviews .card.card-cta { display: flex; align-items: center; justify-content: center; }
#sa-reviews .card.card-cta .card-inner { justify-content: center; align-items: center; }
#sa-reviews .alp-btn {
	display: inline-block;
	padding: 14px 25px;
	color: #2B495A;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: capitalize;
	text-decoration: none;
	text-align: center;
	border: 1px solid #2B495A;
	border-radius: 4px;
	cursor: pointer;
	background: #fff;
	transition: background 180ms ease-in-out, color 180ms ease-in-out, border-color 180ms ease-in-out;
}
#sa-reviews .alp-btn.btn-tertiary { color: #fff; background-color: #24A186; border: 2px solid #24A186; }
#sa-reviews .alp-btn.btn-tertiary:hover { background-color: #38B59A; border-color: #38B59A; }
@media (max-width: 767px) {
	#sa-reviews .sa-reviews-scroll { padding: 0 1rem; }
}

/* ============================================================
   Horizontal filter-pill bar (2026-10-05) — real non-personalized
   equivalent of the source's Unbxd widget (see facet-bar.php's own
   comment); own apx- classes since nothing in source.css styles this real
   shape without Unbxd's JS driving it.
   ============================================================ */
.apx-hor-filters-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e5e5;
	position: relative;
}
.apx-facets-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.apx-filter-pill { position: relative; }
.apx-filter-pill-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #0f3144;
	cursor: pointer;
}
.apx-filter-pill-btn svg { transition: transform .15s ease; }
.apx-filter-pill.is-open .apx-filter-pill-btn svg { transform: rotate(180deg); }
.apx-filter-pill.is-open .apx-filter-pill-btn { border-color: #005F9B; }
.apx-filter-panel {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 50;
	min-width: 220px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 5px 15px rgba(0,0,0,.15);
	padding: 14px;
}
.apx-filter-pill.is-open .apx-filter-panel { display: block; }
.apx-filter-panel-scroll { max-height: 240px; overflow-y: auto; }
.apx-filter-panel .apx-facet-option { display: block; font-size: 14px; color: #444; padding: 5px 0; cursor: pointer; }
.apx-filter-panel .apx-facet-range { display: flex; align-items: center; gap: 8px; }
.apx-filter-panel .apx-facet-range input { width: 80px; padding: 6px; border: 1px solid #ccc; border-radius: 3px; }
.apx-filter-panel .apx-facet-note { font-size: 12px; color: #888; margin: 6px 0 0; }
.apx-filter-panel .apx-facet-note-inline { font-size: 12px; color: #999; }
.apx-filter-apply {
	margin-top: 10px;
	width: 100%;
	padding: 8px;
	background: #F98D29;
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-weight: 600;
	cursor: pointer;
}
.apx-facets-clear { font-size: 13px; color: #C30000; text-decoration: underline; margin-left: 4px; }
.apx-all-filters-btn {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #0f3144;
	cursor: pointer;
}
.apx-all-filters-btn.is-active { background: #0f3144; color: #fff; border-color: #0f3144; }
@media (max-width: 900px) {
	.apx-hor-filters-row { overflow-x: auto; flex-wrap: nowrap; }
	.apx-all-filters-btn { margin-left: 0; }
}

/* ============================================================
   CART — visual rebuild (LOCKED standard #3d). This is WooCommerce's OWN
   real cart.php/cart-totals.php (copied from the plugin, not hand-rolled),
   restyled here to resemble the source's real cart (the owner's own
   checkoutpage.png). No theme page.php exists yet, so /cart/ falls through
   to index.php's generic `.container` wrapper — these rules hang off that
   plus WooCommerce's own `body.woocommerce-cart` class.
   ============================================================ */
/* index.php/page.php both wrap content as
   `.container > article > h1 + div > [shortcode output]`, so that's what
   these selectors anchor to, not a direct-child assumption.
   FIX 2026-09-25: this used to force max-width:1100px here as a per-page
   override. That invented value is gone now that `#main-content .container`
   has its own real rule (max-width:1240px, see top of file) applying
   site-wide, so no per-page override is needed at all. */

.apx-cart-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.apx-cart-heading h1 { font-size: 28px; color: #0f3144; margin: 0; }
.apx-cart-heading-actions { display: flex; gap: 12px; }
.apx-btn { display: inline-block; padding: 12px 24px; border-radius: 3px; font-weight: 700; font-size: 13px; text-decoration: none; text-transform: uppercase; text-align: center; }
.apx-btn-outline { border: 1px solid #0f3144; color: #0f3144; background: #fff; }
.apx-btn-primary { background: #f98d29; color: #fff; border: 1px solid #f98d29; }
.apx-btn-primary:hover { background: #e07d1f; color: #fff; }

body.woocommerce-cart #main-content .container article > div { display: flex; flex-wrap: wrap; gap: 30px; }
body.woocommerce-cart .apx-cart-heading { flex-basis: 100%; }
body.woocommerce-cart .woocommerce-cart-form { flex: 1 1 620px; }
body.woocommerce-cart .cart-collaterals { flex: 0 0 320px; }

.woocommerce-cart-form table.cart,
.woocommerce-cart-form table.cart thead,
.woocommerce-cart-form table.cart tbody { display: block; width: 100%; }
.woocommerce-cart-form table.cart thead tr { display: none; }
.woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid #eee;
	position: relative;
}
.woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item td { border: 0; padding: 0; }
.woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item { padding-right: 40px; }
.woocommerce-cart-form td.product-remove { position: absolute; top: 16px; right: 0; }
.woocommerce-cart-form td.product-remove a.remove { display: block; width: 26px; height: 26px; line-height: 24px; text-align: center; border-radius: 50%; background: #f5f5f5; color: #c30000 !important; font-size: 18px; }
.woocommerce-cart-form td.product-thumbnail { flex: 0 0 70px; }
.woocommerce-cart-form td.product-thumbnail img { width: 70px; height: 70px; object-fit: contain; }
.woocommerce-cart-form td.product-name { flex: 1 1 300px; min-width: 200px; max-width: 100%; padding-right: 36px !important; font-size: 14px; font-weight: 600; line-height: 1.4; }
.woocommerce-cart-form td.product-name a { color: #0f3144; text-decoration: none; }
.woocommerce-cart-form td.product-price { flex: 0 0 100px; font-size: 13px; color: #666; }
.woocommerce-cart-form td.product-quantity { flex: 0 0 100px; }
.woocommerce-cart-form td.product-quantity .qty { width: 60px; padding: 6px; border: 1px solid #ddd; border-radius: 3px; }
.woocommerce-cart-form td.product-subtotal { flex: 0 0 100px; font-weight: 700; color: #0f3144; text-align: right; }
.woocommerce-cart-form td.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; }
.woocommerce-cart-form td.actions .coupon { display: flex; gap: 8px; flex: 1 1 260px; }
.woocommerce-cart-form td.actions .coupon label { display: none; }
.woocommerce-cart-form td.actions .coupon #coupon_code { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 3px; }
.woocommerce-cart-form td.actions button { padding: 10px 20px; border-radius: 3px; border: 1px solid #0f3144; background: #fff; color: #0f3144; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* Add-to-cart flash notice — Woo's default markup, restyled compact. */
.woocommerce-message { background: #e8f5f0; border: 1px solid #24a186; border-radius: 4px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: #0f3144; list-style: none; }
.woocommerce-message a.button.wc-forward { display: inline-block; margin-left: 12px; background: #0f3144; color: #fff; padding: 6px 14px; border-radius: 3px; font-size: 12px; text-decoration: none; font-weight: 600; }

/* The generic page <h1> (index.php's the_title()) duplicates cart.php's own
   "Review Your Cart" heading and checkout's own step UI — hide it on the
   WooCommerce-owned pages, which WooCommerce itself body-classes. */
body.woocommerce-cart #main-content .container article > h1,
body.woocommerce-checkout #main-content .container article > h1,
body.woocommerce-account #main-content .container article > h1 { display: none; }

body.woocommerce-cart ul#shipping_method { list-style: none; padding: 0; margin: 8px 0; }
body.woocommerce-cart ul#shipping_method li { margin-bottom: 6px; font-size: 14px; }

.cart_totals { background: #f9f9f9; border-radius: 6px; padding: 20px; }
.cart_totals table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.cart_totals table.shop_table tr th,
.cart_totals table.shop_table tr td { padding: 8px 0; border: 0; font-size: 14px; }
.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td { font-size: 18px; font-weight: 700; color: #0f3144; border-top: 1px solid #ddd; padding-top: 14px; }
.wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; background: #f98d29; color: #fff; padding: 14px; border-radius: 3px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.wc-proceed-to-checkout a.checkout-button:hover { background: #e07d1f; color: #fff; }

/* ============================================================
   CHECKOUT — visual rebuild (LOCKED standard #3d). Same approach as the
   cart: WooCommerce's OWN real checkout templates (copied from the plugin),
   restyled here. NOT a reproduction of the source's real 4-step accordion
   (login/guest gate -> shipping -> payment -> shipping method -> review,
   with a live 10-minute price-lock countdown — RECON-FINDINGS.md §6) — that
   staged-funnel UX is a substantial JS undertaking flagged as a follow-up,
   not silently skipped. This pass ships a single well-styled page with the
   same real fields/gateways/totals, phone already required (matches source).
   ============================================================ */
body.woocommerce-checkout #main-content .container article > h1 { display: none; }
/* FIX 2026-09-25: was max-width:1100px here as a per-page override, now
   gone — the site-wide `#main-content .container` rule (max-width:1240px,
   top of file) covers this; only the side padding still needs stating. */
body.woocommerce-checkout #main-content .container { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.apx-checkout-pricelock { display: inline-flex; align-items: center; gap: 10px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; padding: 10px 16px; margin-bottom: 20px; }
.apx-checkout-pricelock-label { font-size: 12px; color: #666; }
.apx-checkout-pricelock-time { font-size: 18px; font-weight: 700; color: #24a186; font-variant-numeric: tabular-nums; }
h2.apx-checkout-step { display: flex; align-items: center; gap: 10px; font-size: 20px; color: #0f3144; margin: 28px 0 16px; padding-bottom: 10px; border-bottom: 2px solid #eee; }
h3.apx-checkout-step { display: flex; align-items: center; gap: 10px; font-size: 20px; color: #0f3144; margin: 28px 0 16px; padding-bottom: 10px; border-bottom: 2px solid #eee; }
.apx-checkout-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #0f3144; color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0; }
/* CLASS COLLISION: the source's own generic grid uses ".form-row" too (a
   Bootstrap-style gutter class, margin-left:-10px), which collides with
   WooCommerce's OWN ".form-row" (its checkout field wrapper) — exactly the
   kind of collision STANDARDS.md's "check class collisions before writing
   templates" step warns about. The negative margin shifted every checkout
   field/label ~10px past the container's left edge, clipping label text at
   the viewport edge. Reset it back to a plain block spacer for real Woo
   checkout fields specifically. */
/* Generalized site-wide: the same collision recurs in every WooCommerce form
   context (My Account login/register/addresses/edit-account), not just
   checkout, since the source's clashing .form-row grid class is loaded
   globally via source.css. */
.woocommerce-form .form-row,
.woocommerce-MyAccount-content .form-row,
form.woocommerce-checkout .form-row { margin: 0 0 14px !important; }
form.woocommerce-checkout .col2-set { display: flex; flex-wrap: wrap; gap: 30px; }
form.woocommerce-checkout .col-1 { flex: 1 1 500px; }
form.woocommerce-checkout .col-2 { flex: 1 1 400px; padding-top: 4px; }
form.woocommerce-checkout .col-2 .apx-checkout-pricelock { display: flex; width: 100%; box-sizing: border-box; margin-bottom: 24px; }
form.woocommerce-checkout h3 { font-size: 18px; color: #0f3144; margin: 24px 0 12px; }
form.woocommerce-checkout .form-row { margin-bottom: 14px; }
form.woocommerce-checkout .form-row label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
form.woocommerce-checkout .form-row .required { color: #c30000; }
form.woocommerce-checkout input.input-text,
form.woocommerce-checkout select,
form.woocommerce-checkout textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; box-sizing: border-box; }

#order_review.woocommerce-checkout-review-order { background: #f9f9f9; border-radius: 6px; padding: 20px; }
#order_review table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
#order_review table.shop_table th, #order_review table.shop_table td { padding: 8px 0; font-size: 14px; border-bottom: 1px solid #eee; }
#order_review .order-total th, #order_review .order-total td { font-size: 18px; font-weight: 700; color: #0f3144; border-top: 1px solid #ddd; border-bottom: 0; }

ul.wc_payment_methods.payment_methods.methods { list-style: none; padding: 0; margin: 0 0 20px; }
ul.wc_payment_methods.payment_methods.methods li.wc_payment_method { border: 1px solid #ddd; border-radius: 4px; margin-bottom: 8px; padding: 12px; background: #fff; }
ul.wc_payment_methods.payment_methods.methods label { font-weight: 600; font-size: 14px; }
ul.wc_payment_methods.payment_methods.methods .payment_box { margin-top: 10px; padding: 12px; background: #f5f5f5; border-radius: 3px; font-size: 13px; }

#place_order, .checkout-button, button.checkout { width: 100%; padding: 16px; background: #f98d29; color: #fff; border: 0; border-radius: 3px; font-size: 15px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
#place_order:hover { background: #e07d1f; }
.woocommerce-terms-and-conditions-wrapper { margin: 16px 0; font-size: 13px; }

/* ============================================================
   CHECKOUT ACCORDION — see form-checkout.php's top comment for the AJAX-safe
   design (visibility driven entirely by a `data-apx-checkout-step` attribute
   on <body> plus these descendant selectors, never by classes added directly
   to the AJAX-replaced markup inside #order_review). Everything here is
   scoped under `.apx-js` so a no-JS visitor sees every step at once, exactly
   like the earlier one-page build (progressive enhancement, per the
   standard's own requirement).
   ============================================================ */
.apx-accordion-header { display: flex; align-items: center; gap: 14px; }
.apx-accordion-header .apx-checkout-step { flex: 1 1 auto; margin: 28px 0 16px; }
.apx-accordion-summary { display: none; font-size: 13px; color: #666; }
.apx-accordion-edit { display: none; background: none; border: 1px solid #0f3144; color: #0f3144; border-radius: 3px; padding: 6px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.apx-accordion-edit:hover { background: #0f3144; color: #fff; }
.apx-accordion-actions { margin-top: 20px; }
.apx-accordion-actions .apx-accordion-continue { min-width: 220px; }

.apx-js #apx-step-1-summary,
.apx-js #apx-step-1-header .apx-accordion-edit { display: block; }
.apx-js #apx-step-2-summary,
.apx-js #apx-step-2-header .apx-accordion-edit { display: block; }
/* Step 1 is current by default: no summary/edit yet, body visible.
   NOTE: `.apx-js` and `[data-apx-checkout-step]` are BOTH on <body> itself
   (assets/js/checkout-accordion.js adds both to document.body) — one
   compound selector on body, not `.apx-js body[...]`, which would ask for a
   second <body> nested inside the .apx-js-classed one and could never match. */
body.apx-js[data-apx-checkout-step="1"] #apx-step-1-summary,
body.apx-js[data-apx-checkout-step="1"] #apx-step-1-header .apx-accordion-edit { display: none; }
body.apx-js:not([data-apx-checkout-step="1"]) #apx-step-1-body { display: none; }
/* Step 2 shows its summary/edit only once step 3 is reached. */
body.apx-js:not([data-apx-checkout-step="3"]) #apx-step-2-summary,
body.apx-js:not([data-apx-checkout-step="3"]) #apx-step-2-header .apx-accordion-edit { display: none; }
/* #order_review's two real direct children (the table from review-order.php,
   and #payment from payment.php) are what actually get replaced by every
   update_checkout AJAX call — targeted directly rather than via an ancestor
   wrapper, so this CSS keeps matching correctly no matter how many times
   WooCommerce regenerates that markup underneath it. */
body.apx-js[data-apx-checkout-step="1"] #order_review { display: none; }
body.apx-js[data-apx-checkout-step="2"] #order_review #payment { display: none; }
body.apx-js[data-apx-checkout-step="3"] #order_review > table.woocommerce-checkout-review-order-table { display: none; }

/* Field-level validation state — WooCommerce's own real classes
   (woocommerce-invalid / woocommerce-invalid-required-field / -validated),
   reused as-is by assets/js/checkout-accordion.js rather than a parallel set. */
.woocommerce-invalid input.input-text,
.woocommerce-invalid select { border-color: #c30000; background: #fff6f6; }
.woocommerce-invalid label { color: #c30000; }

/* WooCommerce's thank-you page (order confirmation) — same restyle language. */
.woocommerce-order { max-width: 700px; margin: 0 auto; padding: 30px 0; }
.woocommerce-order .woocommerce-thankyou-order-received { font-size: 18px; color: #0f3144; margin-bottom: 20px; }
.woocommerce-order-details, .woocommerce-customer-details { background: #f9f9f9; border-radius: 6px; padding: 20px; margin-bottom: 20px; }

/* ============================================================
   MY ACCOUNT — LOCKED standard #1 (Blue Sky structure). No local reference
   exists for this on this machine, so this is built net-new from
   WooCommerce's own real my-account templates (copied from the plugin),
   restyled. The login form's "Welcome Back!" heading is the one piece taken
   from the real source (its harvested /account/login page); the logged-in
   dashboard/orders/addresses views are this build's own clean design, since
   the source's actual logged-in account pages were never captured (no
   source login credentials — RECON-FINDINGS.md never had access).
   ============================================================ */
body.woocommerce-account #main-content .container article > h1 { display: none; }
/* FIX 2026-09-25: was max-width:1100px here as a per-page override, now
   gone — the site-wide `#main-content .container` rule (max-width:1240px,
   top of file) covers this; only the flex layout still needs stating. */
body.woocommerce-account #main-content .container { padding: 0 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 30px; }
/* index.php's fallback template wraps content as `.container > article > div
   > [shortcode output]` (no page.php exists yet) — two levels to unwrap so
   the nav and content become direct flex children of .container. */
body.woocommerce-account #main-content .container article,
body.woocommerce-account #main-content .container article > div { display: contents; }

.woocommerce-MyAccount-navigation { flex: 0 0 220px; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; background: #f9f9f9; border-radius: 6px; overflow: hidden; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid #eee; }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 14px 18px; color: #0f3144; text-decoration: none; font-size: 14px; font-weight: 600; }
.woocommerce-MyAccount-navigation li a:hover { background: #eee; }
.woocommerce-MyAccount-navigation li.is-active a { background: #0f3144; color: #fff; }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: #c30000; }

.woocommerce-MyAccount-content { flex: 1 1 600px; min-width: 280px; }
.woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td { padding: 10px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }
.woocommerce-MyAccount-content .woocommerce-Addresses { display: flex; flex-wrap: wrap; gap: 20px; }
.woocommerce-MyAccount-content .woocommerce-Address { flex: 1 1 260px; background: #f9f9f9; border-radius: 6px; padding: 20px; }
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.woocommerce-MyAccount-content form .form-row { margin-bottom: 14px; }
.woocommerce-MyAccount-content form .form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.woocommerce-MyAccount-content form input.input-text,
.woocommerce-MyAccount-content form select { width: 100%; max-width: 400px; padding: 10px; border: 1px solid #ddd; border-radius: 3px; box-sizing: border-box; }
.woocommerce-MyAccount-content button.button, .woocommerce-MyAccount-content input[type="submit"] { background: #f98d29; color: #fff; border: 0; padding: 12px 24px; border-radius: 3px; font-weight: 700; text-transform: uppercase; cursor: pointer; }

/* Login/register (form-login.php) — the "Welcome Back!" heading matches the
   source's real login page; layout/inputs use the same alp-style form
   conventions seen there (form-group, rounded inputs). */
.apx-account-auth { max-width: 900px; margin: 30px auto; }
.apx-account-auth h2 { font-size: 24px; color: #0f3144; margin-bottom: 16px; }
.apx-account-auth .col2-set { display: flex; flex-wrap: wrap; gap: 40px; }
.apx-account-auth .col-1, .apx-account-auth .col-2 { flex: 1 1 320px; }
.apx-account-auth form .form-row label,
.apx-account-auth form p label { display: block; font-size: 13px; color: #666; margin-bottom: 4px; }
.apx-account-auth form input.input-text { width: 100%; border: 1px solid #ddd; border-radius: 5px; padding: 10px; box-sizing: border-box; }
.apx-account-auth form button[type="submit"] { background: #005f9b; color: #fff; border: 0; padding: 12px 28px; border-radius: 4px; font-weight: 700; text-transform: uppercase; cursor: pointer; margin-top: 8px; }
.apx-account-auth .woocommerce-LostPassword { margin-top: 12px; font-size: 13px; }

/* Metal spot-price hub pages (page.php) — this build's own design language
   (the source's real page is a full charting widget not reproduced here). */
.apx-spot-hub { max-width: 700px; margin: 40px auto; padding: 0 20px; text-align: center; }
.apx-spot-hub-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; }
.apx-spot-hub-tabs a { padding: 8px 18px; border-radius: 20px; background: #f5f5f5; color: #0f3144; text-decoration: none; font-weight: 600; font-size: 13px; }
.apx-spot-hub-tabs a.active { background: #0f3144; color: #fff; }
.apx-spot-hub h1 { font-size: 26px; color: #0f3144; margin-bottom: 20px; }
.apx-spot-hub-price { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px; background: #f9f9f9; border-radius: 8px; margin-bottom: 16px; }
.apx-spot-hub-current { font-size: 42px; font-weight: 700; color: #0f3144; }
.apx-spot-hub-current small { font-size: 14px; font-weight: 400; color: #666; }
.apx-spot-hub-change { font-size: 16px; font-weight: 600; }
.apx-spot-hub-green { color: #24a186; }
.apx-spot-hub-red { color: #c30000; }
.apx-spot-hub-note { font-size: 12px; color: #999; }

/* Category archive (woocommerce/archive-product.php) — Woo's default sort
   dropdown restyled minimally so it doesn't look like unstyled browser chrome
   next to the rest of the (real-source-styled) page. */
.apx-sort-bar select { padding: 6px 10px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px; }
.pagination-block.text-right { text-align: center; padding: 20px 0 40px; }
.pagination-block ul.pagination { list-style: none; display: inline-flex; gap: 6px; padding: 0; margin: 0; }
.pagination-block ul.pagination li a,
.pagination-block ul.pagination li span { display: block; padding: 6px 12px; border: 1px solid #ddd; border-radius: 3px; color: #0f3144; text-decoration: none; }
.pagination-block ul.pagination li.current span,
.pagination-block ul.pagination li.active span { background: #0f3144; color: #fff; border-color: #0f3144; }

/* Mobile nav toggle (apx-nav-toggle / assets/js/site.js). The source's real
   mobile drawer is built entirely by its own client-side JS — nothing named
   "mobile-menu"/"drawer"/"hamburger-nav" exists in the harvested HTML/CSS to
   reverse-engineer, so this is a functional stand-in: hide the same top nav
   list by default under 768px and toggle it open, rather than leaving the
   9-item bar to force horizontal overflow (the bug this fixes). */
/* The source's own meta viewport is a FIXED width=1100 (copied verbatim in
   header.php), so a real phone's CSS layout viewport is ~1100px even though
   its physical screen is much narrower — a plain max-width query never fires
   there. The source's own CSS works around this with max-DEVICE-width media
   queries (physical screen width, not layout viewport) throughout — matching
   that convention here rather than a standard max-width query, which tested
   as never triggering under real mobile emulation (Playwright isMobile). */
#apx-nav-toggle { display: none; }
@media (max-device-width: 768px) {
	#apx-nav-toggle {
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
		padding: 10px 16px;
		background: #fff;
		border: 0;
		border-bottom: 1px solid #ddd;
		font-size: 14px;
		font-weight: 600;
		color: #0f3144;
		cursor: pointer;
	}
	#top-menu .top-navigation-wrapper { display: none; }
	#top-menu .top-navigation-wrapper.is-open { display: block; }
	#top-menu .navbar-list {
		display: block;
		white-space: normal;
	}
	#top-menu .navbar-list .navbar-list-item {
		display: block;
		border-bottom: 1px solid #eee;
	}
	#top-menu .navbar-list .navbar-list-item .navbar-link {
		display: block;
		padding: 12px 16px;
	}
}

/* ============================================================
   BLOG (P9) — net-new, not a source reproduction: the source has no dated
   blog, only the static "precious-metals-market-news" hub page the homepage
   already links to (4 real headline titles, apx_market_news_items() in
   inc/template-helpers.php). This build makes that link real: home.php
   (index) + single.php (post), classes prefixed apx- throughout to avoid
   colliding with the source's own generic class names (STANDARDS.md class
   collision rule), same as apx-spot-hub/apx-checkout-*.
   ============================================================ */
.apx-blog-title { font-size: 32px; color: #0f3144; margin: 0 0 8px; }
.apx-blog-intro { color: #666; margin: 0 0 30px; font-size: 15px; }
.apx-blog-list { display: flex; flex-direction: column; gap: 24px; max-width: 800px; }
.apx-blog-card { border-bottom: 1px solid #eee; padding-bottom: 24px; }
.apx-blog-kicker { display: block; color: #24a186; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.apx-blog-card-title { margin: 0 0 8px; font-size: 22px; }
.apx-blog-card-title a { color: #0f3144; text-decoration: none; }
.apx-blog-card-title a:hover { text-decoration: underline; }
.apx-blog-card-excerpt { color: #444; font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.apx-blog-card-more { color: #f98d29; font-weight: 700; font-size: 13px; text-decoration: none; }

.apx-blog-post .apx-blog-kicker { margin-bottom: 10px; }
.apx-blog-post h1 { font-size: 30px; color: #0f3144; margin: 0 0 8px; }
.apx-blog-post-date { color: #999; font-size: 13px; margin: 0 0 24px; }
.apx-blog-post-back { margin-top: 30px; }
.apx-blog-post-back a { color: #0f3144; font-weight: 600; text-decoration: none; font-size: 14px; }

/* ============================================================
   SHOP FACETS — real filter facets rebuilt native (inc/facets.php,
   template-parts/facet-sidebar.php). apx- prefixed throughout to avoid
   colliding with the source's own generic class names (the class-collision
   lesson from checkout/cart, STANDARDS.md).
   ============================================================ */
.apx-shop-layout { display: flex; gap: 30px; align-items: flex-start; }
.apx-facets { flex: 0 0 240px; background: #f9f9f9; border-radius: 6px; padding: 20px; }
.apx-shop-main { flex: 1 1 auto; min-width: 0; }
.apx-facets-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.apx-facets-header h2 { font-size: 16px; color: #0f3144; margin: 0; }
.apx-facets-clear { font-size: 12px; color: #c30000; text-decoration: none; }
.apx-facet-group { margin-bottom: 22px; }
.apx-facet-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: #666; margin: 0 0 10px; }
.apx-facet-option { display: block; font-size: 13px; color: #333; margin-bottom: 8px; cursor: pointer; }
.apx-facet-option input { margin-right: 6px; }
.apx-facet-note-inline { color: #999; font-size: 11px; }
.apx-facet-range { display: flex; align-items: center; gap: 8px; }
.apx-facet-range input { width: 70px; padding: 6px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px; }
.apx-facet-note { font-size: 11px; color: #999; margin: 8px 0 0; }
.apx-facet-scroll { max-height: 220px; overflow-y: auto; padding-right: 6px; }
.apx-facets-apply { width: 100%; padding: 12px; background: #0f3144; color: #fff; border: 0; border-radius: 3px; font-weight: 700; text-transform: uppercase; font-size: 13px; cursor: pointer; }
.apx-facets-apply:hover { background: #1a4a66; }

/* max-device-width, not max-width: the source's own viewport meta tag
   (width=1100, copied verbatim) means a real phone's CSS layout viewport is
   ~1100px, so a plain max-width query never fires there — the same trap
   already found and fixed once for the mobile nav toggle. */
@media (max-device-width: 900px) {
	.apx-shop-layout { flex-direction: column; }
	.apx-facets { flex: 1 1 auto; width: 100%; box-sizing: border-box; }
}

/* ============================================================
   FAQ pages — real content (tools/create-faq-pages.php, extracted from the
   source's own harvested HTML, not invented). apx- prefixed to avoid
   colliding with the source's own generic class names.
   ============================================================ */
.apx-faq-categories { list-style: none; padding: 0; max-width: 700px; }
.apx-faq-categories li { padding: 14px 0; border-bottom: 1px solid #eee; }
.apx-faq-categories a { color: #0f3144; font-weight: 700; font-size: 16px; text-decoration: none; }
.apx-faq-categories a:hover { text-decoration: underline; }
.apx-faq-count { color: #999; font-size: 13px; margin-left: 8px; }

.apx-faq-toc { background: #f9f9f9; border-radius: 6px; padding: 20px 24px; margin-bottom: 30px; max-width: 800px; }
.apx-faq-toc strong { display: block; margin-bottom: 10px; font-size: 13px; text-transform: uppercase; color: #666; }
.apx-faq-toc ul { margin: 0; padding-left: 18px; }
.apx-faq-toc li { margin-bottom: 6px; font-size: 14px; }
.apx-faq-toc a { color: #0f3144; text-decoration: none; }
.apx-faq-toc a:hover { text-decoration: underline; }

.apx-faq-list { max-width: 800px; }
.apx-faq-item { padding: 22px 0; border-bottom: 1px solid #eee; scroll-margin-top: 20px; }
.apx-faq-item h3 { font-size: 17px; color: #0f3144; margin: 0 0 10px; }
.apx-faq-item p { font-size: 14px; line-height: 1.7; color: #333; margin: 0 0 10px; }
.apx-faq-item a { color: #0f3144; }

/* FIX 2026-09-27: real source CSS for `.promo-categories-1 .alp-cards`
   (the homepage's category-tiles section, front-page.php) — this was never
   actually captured. Unlike most of the source's styling, these rules ship
   as an inline <style> block on the homepage itself, not in the shared
   669 KB source.css bundle this build pulled everything else from, so the
   original harvest missed it entirely and this section has been rendering
   as a plain unstyled stack (heading, then a bare arrow icon, then a bare
   image) instead of the real rounded gray card with the image peeking out
   from the bottom-right corner. Verified by re-fetching the live homepage
   directly and finding the exact inline <style> block. Values below are
   copied from the source's own inline CSS, not approximated. */
.promo-categories-1 .alp-cards {
	width: 100%;
	height: 100px;
	border-radius: 10px;
	background: #f0f0f0;
	position: relative;
	overflow: hidden;
	margin-bottom: 25px;
}
.promo-categories-1 .alp-cards:hover { background: #e5e5e5; }
.promo-categories-1 .alp-cards:hover svg { display: inline-block; position: relative; z-index: 999; }
.promo-categories-1 .alp-cards:hover .alp-cards-image { display: inline-block; bottom: -56px; }
.promo-categories-1 .alp-cards-heading { padding-right: 0; }
.promo-categories-1 .alp-cards-heading h3 {
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #000;
	margin: 0;
	line-height: 27.24px;
	display: inline-block;
	z-index: 999;
	position: relative;
}
.promo-categories-1 .alp-cards-heading svg { margin-left: 10px; vertical-align: text-bottom; display: none; }
.promo-categories-1 .alp-cards-image {
	padding: 0;
	bottom: -65px;
	width: 162px;
	height: 120px;
	position: absolute;
	right: 0;
	transition: .2s bottom ease-in-out;
}
.promo-categories-1 .alp-cards-image img { height: initial; width: initial; }

/* FIX 2026-09-28 — "Shop Our Unique Categories" text overlapping its own
   images: same root cause as the .alp-cards fix above (real per-page inline
   <style> the original harvest never captured, not in the shared source.css
   bundle), same fix approach (copied verbatim from a fresh fetch of the live
   page, not approximated). Without `.alp-item` giving the row a background/
   overflow:hidden and `.alp-item-details` establishing its own flex column,
   the title/subtitle spans had no layout of their own and rendered as plain
   inline text sitting on top of the image next to them instead of in their
   own 7/12-width column — this theme's own markup (apx_render_unique_categories_section())
   already matches the source's real .alp-row/.alp-col-5/.alp-col-7 structure
   exactly, so no HTML/template change was needed, only the missing CSS. */
.promo-categories-2 .alp-item {
	box-shadow: 2px 2px 5px 0 #00000033;
	border-radius: 10px;
	text-decoration: none;
	background: #f5f5f5;
	transition: .3s all ease-in-out;
	overflow: hidden;
	margin-bottom: 30px;
}
/* Real markup adds a `.last-row` class server-side to whichever tiles are in
   the final grid row (to drop their bottom margin). Each .alp-item here is
   the lone child of its own .alp-col-4 wrapper, so :nth-last-child has to be
   checked on THAT wrapper (siblings under the shared .alp-row), not on
   .alp-item itself — every .alp-item is trivially "last-child of one" of its
   own single-item parent. This build's grid is a fixed 3-per-row
   (.alp-col-4), so the equivalent last row is always the final 3 wrappers. */
.promo-categories-2 .alp-col-4:nth-last-child(-n+3) .alp-item { margin-bottom: 0; }
.promo-categories-2 .alp-item:hover { transform: scale(1.05); }
.promo-categories-2 .alp-item:hover .alp-item-details .item-sub-title { font-weight: bold; }
.promo-categories-2 .alp-item-img img { display: block; width: 100%; height: auto; }
.promo-categories-2 .alp-item-details {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.promo-categories-2 .alp-item-details .item-title {
	width: 70%;
	font-size: 18px;
	line-height: 24.51px;
	font-weight: 700;
	color: #000;
	font-family: "Open Sans", sans-serif;
	margin: 0 0 10px;
}
.promo-categories-2 .alp-item-details .item-sub-title {
	line-height: 18.44px;
	font-size: 13.54px;
	color: #000;
	font-weight: 400;
	font-family: "Open Sans", sans-serif;
	margin: 0;
	display: flex;
	align-items: center;
	width: 100%;
}
.promo-categories-2 .alp-item-details .item-sub-title svg { margin-left: 15px; }

/* FIX 2026-09-28 — "Explore the Knowledge Center": not an overlap (default
   block flow keeps the title text below the image regardless), but visibly
   wrong against the source — no tinted section background, no white circular
   image badge, no centered alignment. Same root cause as the two fixes
   above (real per-page inline CSS the harvest never captured), same fix. */
.resource-center {
	background-color: #edf5f4;
	padding-top: 50px;
	padding-bottom: 50px;
}
.resource-center .alp-container { margin-top: 0; margin-bottom: 0; }
.resource-center a:hover .alp-item .alp-item-details .item-title { text-decoration: underline; }
.resource-center .alp-item .circle-image-area {
	background-color: #fff;
	width: 163px;
	height: 163px;
	border-radius: 50%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.resource-center .alp-item .circle-image-area .alp-item-img { padding: 10px; }
.resource-center .alp-item .circle-image-area img { max-width: 100%; max-height: 100%; }
.resource-center .alp-item .alp-item-details {
	text-align: center;
	margin: 17px auto 0;
	width: 85%;
}
.resource-center .alp-item .alp-item-details .item-title {
	font-size: 16px;
	line-height: 22px;
	color: #2b495a;
}

/* HERO + "One Week of Limited-Time Deals" (2026-09-30 UI revision) — real
   CSS for the source's CURRENT `.promo-template` hero mechanism, copied
   verbatim from a fresh fetch of the live site rather than approximated
   (see front-page.php's own note: this replaced the original 9-slide
   carousel entirely when the source's own seasonal campaign changed, and
   will change again). This is real per-page inline CSS, not in the shared
   source.css bundle — same recurring pattern as several earlier fixes.
   `.desktop-only`/`.mobile-only` are this build's own generic toggle
   classes (not source-specific), reused here exactly as the source itself
   names and uses them. */
.promo-template.top-banner-wrapper {
	background: linear-gradient(90deg, #2b1601 50%, #2c1702 50%);
	width: 100%;
}
/* FIX 2026-09-30: real source rule is a flat `max-width:1440px`, which
   assumes its own `.alp-col-12` wrapper has zero side padding on the real
   page. This build's `.alp-col-12` carries the generic Bootstrap-style
   gutter padding (15px each side, same grid classes used site-wide), so the
   image's OWN cap needs to respect that instead of assuming the full 1440px
   is always available — a flat 1440px cap overflowed the padded column by
   exactly 15px (found via real measurement, not guessed: the image rendered
   at its full natural 1440x400 regardless of its parent only having
   1410px of padded-in room). `min()` caps at whichever is smaller. */
.promo-template.top-banner-wrapper img { max-width: min(1440px, 100%); width: auto; height: auto; min-width: 1100px; }
.promo-template .desktop-only { display: block; }
.promo-template .mobile-only { display: none; }
.promo-template .alp-block.desktop-only { margin-bottom: 35px; padding: 0; }
.promo-template .alp-section-header h2 {
	color: #0f3144;
	text-align: center;
	font-family: "Open Sans", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
}
.alp-container.promo-template.three-columns { margin-top: 40px; }
.promo-template.three-columns img { border-radius: 5px; }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.promo-template.top-banner-wrapper img { max-width: 100%; min-width: 100%; }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 680px) {
	.promo-template.top-banner-wrapper { margin-left: -15px; margin-right: -15px; }
	.promo-template .alp-section-header .alp-col-12 { width: 55%; margin: 0 auto; }
	.alp-container.promo-template.three-columns { width: auto; margin: 30px -15px 0; }
	.promo-template .mobile-only { display: block !important; }
	.promo-template .desktop-only { display: none !important; }
	.promo-template .mobile-img { width: 100%; height: auto; }
	.promo-template.top-banner-wrapper img { max-width: 100%; min-width: 100%; }
	.promo-template.three-columns .alp-col-4 { padding-right: 0; padding-left: 0; margin-bottom: 20px; }
	.promo-template.three-columns .alp-col-4:last-child { margin-bottom: 0; }
	.promo-template .alp-section-header h2 { margin-bottom: 20px; font-size: 24px; line-height: 32px; }
}

/* Real footer markup uses a single <input type="image"> for the newsletter
   submit control, so the source's own #newsletter-submit CSS (55x40 teal
   button) sizes that element directly. This build uses a real <button> with
   a nested <img> icon instead (a plain <input type="image"> alone isn't
   focusable/keyboard-operable the same way a real <button> is), so the icon
   itself needs its own size — without it the SVG renders at its own native
   viewBox size, overflowing the 55x40 button entirely. */
footer .subscribeNewsLetter img { width: 16px; height: 16px; }

/* "Industry Leading Tools and Services" Slick carousel (2026-09-30 UI
   revision) — real CSS copied verbatim from the source's own per-page inline
   <style> block (same recurring pattern as several earlier fixes: not in
   the shared source.css bundle). Init options live in
   assets/js/homepage-carousels.js. */
.slick-latest-content .slick-slide:focus-visible,
.slick-latest-content .slick-slide a:focus,
.slick-latest-content .slick-slide a:focus-visible,
.slick-latest-content .slick-slide div:focus-visible,
.slick-latest-content .slick-slide img:focus-visible { outline: none; }
.slick-latest-content .slick-slide { padding: 0 20px; }
.slick-latest-content { display: block; width: 100%; max-width: 7000px; min-width: 1240px; margin: 0 auto; }
.slick-latest-content .alp-section-body { width: 100%; display: block; padding-bottom: 30px; position: relative; }
.slick-latest-content .alp-section-body .slider { display: block; width: 100%; }
.slick-latest-content .alp-section-body .slider .slick-slide { width: 650px !important; height: 495px !important; }
.slick-latest-content .alp-section-body .slider .alp-slick-slides { display: inline-block; border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.25); background: #fff; }
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner { display: flex; padding-top: 23.68px; padding-right: 0; position: relative; min-height: 400px; }
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner a { outline: none; }
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner a:hover { text-decoration: underline; }
/* FIX 2026-09-30: `.alp-slick-slides-image` had no size rule anywhere in the
   source's own real CSS — it relies entirely on its own image assets
   already being pre-cropped to fit. This build's downloaded images aren't
   all that shape (one is a tall 1813x2188 portrait crop), so without real
   containment it overflowed the slide's fixed 495px height and bled up over
   the description text above it. Contains any image regardless of its
   native aspect ratio instead of assuming every asset happens to fit. */
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	max-height: 400px;
	overflow: hidden;
}
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-image img {
	max-width: 100%;
	max-height: 400px;
	width: auto;
	height: auto;
}
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message { padding-left: 30px; }
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message a.alp-slick-slides-link { font-size: 15px; font-weight: 500; color: #24a186; font-family: "Open Sans", sans-serif; text-decoration: underline; }
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message a.alp-slick-slides-link:hover { color: #f98d29; }
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message h3.alp-slick-slides-message-title { font-family: "Open Sans", sans-serif; font-size: 26px; font-weight: 600; color: #143344; margin: 10px 0 24px; line-height: 40px; }
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message p.alp-slick-slides-message-paragraph { font-family: "Open Sans", sans-serif; font-size: 16px; color: #767676; font-weight: normal; margin-bottom: 50px; line-height: 30px; }
.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message a .alp-slick-slides-message-link { color: #24a186; font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: 700; }
.slick-latest-content .alp-section-body .slider .slick-active .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message h3.alp-slick-slides-message-title { font-size: 28px; }
.slick-latest-content .alp-section-body .slider .slick-active .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message p.alp-slick-slides-message-paragraph { font-size: 18px; margin-bottom: 20px; }
.slick-latest-content .alp-section-body .slider .slick-active .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message a .alp-slick-slides-message-link { font-size: 15px; }
.slick-latest-content .slick-arrow { display: none !important; }
.slick-latest-content ul.slick-dots { display: flex; width: 100%; align-items: center; justify-content: center; margin: auto; position: absolute; bottom: 10px; }
.slick-latest-content ul.slick-dots li button { font-size: 0; width: 11px !important; height: 11px !important; background: #d9d9d9; border: 1px solid #d9d9d9; margin-right: 0; border-radius: 100%; max-width: 11px !important; padding: 0; }
.slick-latest-content ul.slick-dots li { display: inline-block; margin-right: 12px; }
.slick-latest-content ul.slick-dots li:last-of-type { margin-right: 0; }
.slick-latest-content ul.slick-dots li.slick-active button { background: #383838; border-color: #383838; }
.slick-latest-content .alp-section-body .slider .slick-list.draggable { padding-top: 15px !important; padding-bottom: 15px !important; height: auto !important; max-height: 500px; }

@media only screen and (max-width: 1300px) {
	.slick-latest-content .slick-slide { padding: 0 15px; }
	.slick-latest-content .alp-section-body .slider .alp-slick-slides .alp-slick-slides-inner .alp-slick-slides-message { padding-left: 10px; }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.slick-latest-content { min-width: 100%; }
	.slick-latest-content .alp-section-body .slider .slick-list.draggable { max-height: 450px; }
	.slick-latest-content ul.slick-dots { bottom: -10px; }
}
@media only screen and (max-width: 1280px) {
	.slick-latest-content .alp-section-body .slider .slick-list.draggable { max-height: 445px; }
	.slick-latest-content ul.slick-dots { bottom: -10px; }
}

/* "Explore the World of Precious Metals" (2026-09-30, user-supplied saved
   page) — the card heading text ("New Releases" etc.) is meant to overlay
   the image near its bottom edge, not sit as plain text below it. Real CSS
   copied verbatim from the user's own saved complete-page capture; same
   recurring pattern (real per-page inline style, never in source.css). */
.five-cards .alp-col.card-inner { transition: .3s all ease-in-out; }
.five-cards .alp-card-5col { width: 100%; height: 300px; border-radius: 10px; background: #f0f0f0; position: relative; overflow: hidden; }
.five-cards .card-inner:hover { transform: scale(1.05); }
.five-cards a { color: #fff; text-decoration: none; }
.five-cards .alp-card-5col-image { position: relative; height: 100%; }
.five-cards .alp-card-5col-image img { width: 100%; height: 100%; object-fit: cover; }
.five-cards .alp-card-5col-heading { position: absolute; bottom: 35px; left: 17px; right: 17px; font-size: 18px; font-weight: 700; }
.five-cards .alp-col:last-child .alp-card-5col-heading span { display: inline-block; width: 90%; }

/* Trust stats bar ("20B+ In Transactions" etc.) — real CSS from the user's
   saved page capture; same missing-inline-CSS pattern as everything above. */
.trust-icons .alp-col-3 { border-right: 1px solid #002539; }
.trust-icons .alp-col-3:last-child { border-right: none; }
.trust-icons .alp-item-count { margin-bottom: 13px; }
.trust-icons .alp-item-count span { color: #002539; font-family: "Open Sans", sans-serif; font-size: 41.5px; font-weight: 700; letter-spacing: -2.49px; }
.trust-icons .alp-item-small-copy { color: #002539; font-family: "Open Sans", sans-serif; font-size: 18px; font-weight: 400; line-height: 17px; }

/* "Learn More about Gold & Silver" search CTA (2026-09-30, built from the
   user's saved page — this section is real and static, not DY-personalized
   as first suspected when it didn't appear in two fresh automated fetches;
   the user's own saved browser session settles that). Real CSS verbatim. */
.site-search { width: 100%; background: url(../img/new-homepage-5.png) no-repeat center; background-size: cover; }
.site-search .alp-container { padding: 65px 0; }
.site-search .alp-heading span { color: #fff; text-align: center; font-family: "Open Sans", sans-serif; font-size: 38px; font-weight: 600; }
.site-search .alp-sub-heading { margin-top: 11px; margin-bottom: 46px; }
.site-search .alp-sub-heading span { color: #fff; text-align: center; font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 400; }
.site-search .search-form { position: relative; width: 75%; margin: 0 auto; }
.site-search .search-form input[type="search"] { padding: 21.5px 44px 21.5px 11px; display: block; width: 100%; border-radius: 10px; font-size: 18px; color: #858585; line-height: 25.2px; border: 0; font-family: "Open Sans", sans-serif; outline: 0; box-sizing: border-box; }
.site-search .search-form button.search-btn { position: absolute; right: 21.5px; top: 21.5px; background: none; border: 0; padding: 0; cursor: pointer; }
.site-search .search-form button.search-btn img { width: 20px; height: 20px; display: block; }

/* "Watch Market Pulse" real video section — real CSS from the saved page.
   The source's own real mechanism is a `.video-popup` click opening a modal
   with a YouTube iframe (data-video/data-title attributes) — reused here
   with a plain vanilla-JS modal (assets/js/homepage-carousels.js) instead of
   the source's Bootstrap modal machinery, since only this one modal is
   needed, not the whole Bootstrap JS library. */
.market-news { padding-top: 60px; }
.market-news.border-top { border-top: 1px solid #dadada; }
.market-news .alp-section-header { margin-bottom: 60px; }
.market-news .alp-item { display: flex; padding-top: 35px; padding-bottom: 35px; border-bottom: 1px solid #dadada; margin-right: 35px; }
.market-news .alp-item:first-child { padding-top: 0; }
.market-news .alp-item:last-child { padding-bottom: 0; border-bottom: none; }
.market-news .alp-item .alp-item-img { width: 211px; height: 119px; flex-shrink: 0; position: relative; cursor: pointer; }
.market-news .alp-item .alp-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.market-news .alp-item .alp-item-img .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.market-news .alp-item .alp-item-details { margin-left: 16px; max-width: 230px; }
.market-news .alp-item-news-source span { color: #838383; font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.market-news .alp-item-news-title span { color: #002539; font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 700; }
.market-news .alp-item-large .alp-item-img { width: 100%; height: 379px; position: relative; cursor: pointer; }
.market-news .alp-item-large .alp-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.market-news .alp-item-large .alp-item-img .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.market-news .alp-item-large .alp-item-details { margin-top: 20px; }
.market-news .alp-item-large .alp-item-news-source span { color: #838383; font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.market-news .alp-item-large .alp-item-news-title span { color: #002539; font-family: "Open Sans", sans-serif; font-size: 34px; font-weight: 700; line-height: 115%; }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.market-news .alp-item-large .alp-item-img { width: 100%; height: auto; }
}
.apx-video-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9999; align-items: center; justify-content: center; }
.apx-video-modal.is-open { display: flex; }
.apx-video-modal-dialog { width: 90%; max-width: 620px; background: #fff; border-radius: 6px; padding: 20px; position: relative; }
.apx-video-modal-close { position: absolute; top: 10px; right: 14px; font-size: 24px; line-height: 1; border: 0; background: none; cursor: pointer; color: #838383; }
.apx-video-modal h3 { font-size: 20px; color: #838383; font-weight: 700; font-family: "Open Sans", sans-serif; margin: 0 0 14px; }
.apx-video-modal-frame-wrap { position: relative; padding-bottom: 56.25%; height: 0; }
.apx-video-modal-frame-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* "Featured Rare Coins" tabs (2026-09-30) — this build's own net-new UI for
   a real query-backed replacement of the source's DY recommendation widget
   (see apx_render_rare_coins_section()'s own comment). apx- prefixed, not
   a source class, since the source's own version has no plain-CSS
   equivalent worth copying (it's Bootstrap-carousel + DY markup). */
.apx-tabbed-module { max-width: 1240px; margin: 40px auto; padding: 0 20px; box-sizing: border-box; }
.apx-tab-container { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid #eee; margin-bottom: 20px; padding-bottom: 4px; }
.apx-tab-container span { font-size: 22px; font-weight: 700; color: #0f3144; margin-right: 10px; }
.apx-tablink { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 4px; font-size: 14px; font-weight: 600; color: #666; cursor: pointer; }
.apx-tablink.is-active { color: #0f3144; border-bottom-color: #f98d29; }
.apx-tabcontent { display: none; }
.apx-tabcontent.is-active { display: block; }

/* Review-card star sprite (2026-10-04) — source.css's .review-left .stars
   rule points at a root-absolute "/content/images/ratings/small-stars-filled.svg",
   which only resolves on the real apmex.com (served off its own domain
   root); this build hosts the identical real file (downloaded verbatim
   from images-apmex.com, not redrawn) inside the theme instead, so this
   just repoints the one declaration rather than touching source.css. */
.reviews .review-wrapper .review .review-left .stars {
	background-image: url('../images/ratings/small-stars-filled.svg');
}

/* item-details tab icons (2026-10-04) — same root-absolute-path issue as the
   review stars above: source.css points these at "/content/images/content/*",
   real files now downloaded verbatim into this theme instead. */
.product-page .item-details .tab-list .tab.details span { background-image: url('../images/content/detail-icon.png'); }
.product-page .item-details .tab-list .tab.specs span { background-image: url('../images/content/magnifier-icon.png'); }
.product-page .item-details .tab-list .tab.history span { background-image: url('../images/content/history-icon.png'); }
.product-page .item-details .tab-list .tab.price span { background-image: url('../images/content/price.png'); }
.product-page .item-details .tab-list .tab.why-buy span { background-image: url('../images/content/why-buy-icon.png'); }
.product-page .item-details .tab-list .tab.details.active span { background-image: url('../images/content/detail-icon-active.png'); }
.product-page .item-details .tab-list .tab.specs.active span { background-image: url('../images/content/magnifier-active.png'); }
.product-page .item-details .tab-list .tab.history.active span { background-image: url('../images/content/history-icon-active.png'); }
.product-page .item-details .tab-list .tab.price.active span { background-image: url('../images/content/price-active.png'); }
.product-page .item-details .tab-list .tab.why-buy.active span { background-image: url('../images/content/why-buy-icon-active.png'); }

/* ============================================================
   Real weight/year variant-switcher dropdowns (single-product.php,
   .product-variants) - 2026-10-19 audit follow-up. This CSS was inline on
   the live PDP itself (a per-page <style> block, same situation as
   assets/css/bullioncard.css), not in the bulk catalog-era source.css
   harvest - extracted live and reproduced verbatim.
   ============================================================ */

.product-variants {
    background-color: #F5F5F5;
    padding: 10px;
    border-radius: 10px;
}

    .product-variants .product-variants-content {
        display: flex;
        flex-wrap: wrap;
    }

    .product-variants .variant-wrapper {
        display: inline-block;
        margin: 0px 30px 10px 0px;
    }

        .product-variants .variant-wrapper.weight { order: 2; }
        .product-variants .variant-wrapper.year { order: 3; }

    .product-variants .varientName {
        color: #666;
        font-family: "Open Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0.14px;
        display: block;
        margin-bottom: 5px;
    }

    .product-variants .dropbtn {
        color: #666;
        padding: 6px 16px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        background-color: #fff;
        border-radius: 8px;
        height: 35px;
        min-width: 120px;
    }

    .product-variants .dropdown {
        position: relative;
        display: inline-block;
    }

    .product-variants .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        padding: 8px 16px;
        height: initial;
        border-radius: 8px;
        border: 0.5px solid #EEE;
        cursor: pointer;
    }

    .product-variants .dropdown-content-body.weight { min-width: 90px; }
    .product-variants .dropdown-content-body.year { min-width: 265px; }
        .product-variants .dropdown-content-body.year .customRadioBtn {
            display: inline-block;
            min-width: 80px;
        }

    .product-variants .dropdown-content-body a {
        color: #666;
        text-decoration: none;
        font-family: "Open Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
    }

    .product-variants .dropdown.dropdownOpened .dropdown-content { display: block; }
    .product-variants .dropdown .dropdown-content .customRadioBtn { padding: 4px 0px; }
    .product-variants .dropdown:hover .dropbtn {
        background-color: #fff;
        border: 1px solid #4F86C6;
        height: 35px;
    }
    .product-variants .dropdown.dropdownOpened .dropbtn svg { transform: rotate(180deg); }
    .product-variants .customRadioBtn input,
    .product-variants .customRadioBtn .variant_valueName { display: inline-block; }