/* DMA Cards Product Page + Premium Filters */
/* body:has() Elementor-fighting rules removed — this theme owns the whole body now. */

.dma-page-a3655c67 { --dma-bg: #0a0a0c; --dma-surface: #111114; --dma-surface-hover: #1a1a1e; --dma-border: #222228; --dma-border-hover: #333339; --dma-text: #e0e0e4; --dma-text-muted: #7a7a84; --dma-accent: #EF524E; --dma-accent-dim: rgba(239, 82, 78, 0.12); --dma-accent-glow: rgba(239, 82, 78, 0.25); --dma-white: #ffffff; --dma-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--dma-bg); color: var(--dma-text); font-family: var(--dma-font); line-height: 1.5; margin: 0; padding: 0; position: relative; overflow-x: hidden; min-height: 100vh; width: 100%; -webkit-font-smoothing: antialiased; }
.dma-page-a3655c67 *, .dma-page-a3655c67 *::before, .dma-page-a3655c67 *::after { box-sizing: border-box; margin: 0; padding: 0; }

.dma-grid-bg-a3655c67 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.dma-grid-lines-a3655c67 { position: absolute; top: -50%; left: -50%; right: -50%; bottom: -50%; width: 200%; height: 200%; background-image: linear-gradient(rgba(239, 82, 78, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 82, 78, 0.04) 1px, transparent 1px); background-size: 60px 60px; animation: dmaGridMove-a3655c67 20s linear infinite; }
.dma-grid-glow-a3655c67 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 800px 600px at 20% 10%, rgba(239, 82, 78, 0.06) 0%, transparent 70%), radial-gradient(ellipse 600px 400px at 80% 80%, rgba(239, 82, 78, 0.04) 0%, transparent 70%), radial-gradient(ellipse 400px 400px at 50% 50%, rgba(255, 255, 255, 0.01) 0%, transparent 70%); animation: dmaGlowPulse-a3655c67 8s ease-in-out infinite alternate; }

@keyframes dmaGridMove-a3655c67 { 0% { transform: translate(0, 0); } 100% { transform: translate(60px, 60px); } }
@keyframes dmaGlowPulse-a3655c67 { 0% { opacity: 0.6; } 100% { opacity: 1; } }
.dma-page-a3655c67 > *:not(.dma-grid-bg-a3655c67) { position: relative; z-index: 1; }

.dma-header-a3655c67 { padding: 80px 24px 60px; border-bottom: 1px solid var(--dma-border); position: relative; overflow: hidden; }
.dma-header-inner-a3655c67 { max-width: 1200px; margin: 0 auto; text-align: center; position: relative; }

/* Hero product-photo collage (transparent-bg renders, floated behind the copy) */
.dma-hero-gallery-a3655c67 { position: absolute; inset: -40px 0 auto 0; height: 420px; pointer-events: none; z-index: 0; }
.dma-hero-img-a3655c67 { position: absolute; opacity: 0.16; filter: saturate(0.9); object-fit: contain; animation: dmaHeroFloat-a3655c67 7s ease-in-out infinite; }
.dma-hero-img-0 { width: clamp(150px, 18vw, 280px); left: 0; top: 10%; animation-delay: 0s; }
.dma-hero-img-1 { width: clamp(150px, 18vw, 290px); right: 0; top: 4%; animation-delay: 1.2s; }
/* The staging site also carries a small block of Additional CSS ("ca-img-frames")
   that sets these two pictures to 320/360px at 1%/1.5% from the edges, which put
   them under the headline. These rules (same selectors, !important) keep them in
   the free space beside the text at every width. */
body.home .dma-hero-img-a3655c67.dma-hero-img-0 { width: clamp(150px, 18vw, 280px) !important; left: 0 !important; }
body.home .dma-hero-img-a3655c67.dma-hero-img-1 { width: clamp(150px, 18vw, 290px) !important; right: 0 !important; }
.dma-hero-img-2 { width: 200px; right: 14%; bottom: -10%; animation-delay: 2.4s; opacity: 0.1; }
@keyframes dmaHeroFloat-a3655c67 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (max-width: 900px) { .dma-hero-gallery-a3655c67 { display: none; } }

/* Hero wordmark: the logo's own lettering (inc/hero-wordmark.php) with a red
   glow. Static drop-shadows (painted once) plus one slow-breathing red haze
   behind it that only animates opacity, which the browser handles on the GPU
   with no repainting. Motion is switched off for "reduce motion". */
.dma-hero-logo-a3655c67 {
	font: inherit; letter-spacing: normal; text-transform: none;
	position: relative; display: flex; justify-content: center; margin-bottom: 26px;
	color: var(--dma-heading); isolation: isolate;
}
.dma-hero-logo-a3655c67 .dma-wordmark-svg {
	display: block; width: clamp(240px, 46vw, 520px); height: auto; overflow: visible; fill: currentColor;
	filter: drop-shadow(0 0 5px rgba(239, 82, 78, .55)) drop-shadow(0 0 22px rgba(235, 0, 23, .35));
}
.dma-hero-logo-a3655c67::before {
	content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
	width: min(640px, 92vw); height: 150px; transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(235, 0, 23, .30), rgba(235, 0, 23, 0));
	opacity: .55; pointer-events: none;
	animation: dmaWordmarkBreathe-a3655c67 5s ease-in-out infinite;
}
.dma-hero-logo-a3655c67::after {
	content: ""; position: absolute; left: 50%; bottom: -12px; width: min(300px, 60%); height: 2px; transform: translateX(-50%);
	background: linear-gradient(90deg, rgba(235, 0, 23, 0), var(--dma-accent), rgba(235, 0, 23, 0));
}
@keyframes dmaWordmarkBreathe-a3655c67 { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .dma-hero-logo-a3655c67::before { animation: none; opacity: .55; } }
.dma-hero-eyebrow-a3655c67 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dma-accent); margin-bottom: 14px; }
.dma-title-a3655c67 { font-size: 48px; font-weight: 800; color: var(--dma-heading); letter-spacing: -0.04em; margin-bottom: 12px; line-height: 1.1; }
.dma-subtitle-a3655c67 { font-size: 16px; color: var(--dma-text-muted); font-weight: 400; max-width: 520px; margin: 0 auto 28px; line-height: 1.6; }
.dma-header-actions-a3655c67 { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.dma-header-btn-primary-a3655c67 { display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 28px; background: var(--dma-accent); color: var(--dma-white); text-decoration: none; border: 1px solid var(--dma-accent); transition: background 0.2s ease, box-shadow 0.2s ease; }
.dma-header-btn-primary-a3655c67:hover { background: #d94440; box-shadow: 0 0 20px var(--dma-accent-glow); }
.dma-header-btn-secondary-a3655c67 { display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 28px; background: transparent; color: var(--dma-text-muted); text-decoration: none; border: 1px solid var(--dma-border); transition: color 0.2s ease, border-color 0.2s ease; cursor: pointer; font-family: var(--dma-font); }
.dma-header-btn-secondary-a3655c67:hover { color: var(--dma-heading); border-color: var(--dma-border-hover); }

/* Trust strip */
.dma-trust-a3655c67 { border-bottom: 1px solid var(--dma-border); padding: 20px 24px; }
.dma-trust-inner-a3655c67 { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.dma-trust-item-a3655c67 { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.dma-trust-num-a3655c67 { font-size: 15px; font-weight: 800; color: var(--dma-heading); letter-spacing: -0.01em; }
.dma-trust-label-a3655c67 { font-size: 11px; color: var(--dma-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Shop archive header (mirrors the hero copy, minus the big hero art) */
.dma-shop-header-a3655c67 { text-align: center; padding: 28px 0 0; }
.dma-shop-title-a3655c67 { font-size: 32px; font-weight: 800; color: var(--dma-heading); margin-bottom: 8px; letter-spacing: -0.02em; }

/* Grid Layout */
.dma-products-a3655c67 { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }
ul.products.dma-grid-a3655c67 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
ul.products.dma-grid-a3655c67::before, ul.products.dma-grid-a3655c67::after { display: none !important; }

/* Product Cards */
/* min-width:0 is load-bearing: a 1fr grid track defaults to
   minmax(auto,1fr), so without it a card with an unwrappable long line
   (e.g. a spec list entry) forces its whole column wider than the other
   two — that's what made columns render as (say) 390/617/233px instead
   of three equal thirds, and on narrower viewports pushed the grid wider
   than the page. min-width:0 lets the item shrink to the shared track
   width so the ellipsis/clamp rules below can actually take effect. */
/* !important throughout: the Shop archive is a real WooCommerce archive
   (body gets the "woocommerce"/"woocommerce-page" classes the homepage
   doesn't), so WC's own default plugin stylesheet is active there and
   its ".woocommerce(-page) ul.products li.product" selector outranks a
   plain ".dma-card-a3655c67" class on specificity — that's what stripped
   this card's padding to 0 and let the image stretch to ~380px tall on
   Shop while the homepage (no WC classes on that body) looked fine. */
li.product.dma-card-a3655c67 { background: var(--dma-surface) !important; border: 1px solid var(--dma-border) !important; padding: 20px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; position: relative; min-width: 0; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.35s ease; margin: 0 !important; width: 100% !important; float: none !important; }
li.product.dma-card-a3655c67:hover { border-color: rgba(239, 82, 78, 0.3); background: var(--dma-surface-hover); box-shadow: 0 4px 30px rgba(239, 82, 78, 0.08), 0 0 0 1px rgba(239, 82, 78, 0.1); transform: translateY(-2px); }

/* 700px and smaller screen sizes - removing side padding for filters */
@media (max-width:700px){

	/* Division */
	#dma-products-section-a3655c67 > div{
		padding-left:0px;
		padding-right:0px;
		
	}
	
}

/* 701px and larger screen sizes */
@media (min-width:701px){

	/* Division */
	#dma-products-section-a3655c67 > div{
		padding-left:0px;
		padding-right:0px;
	}
	
}

.dma-badge-a3655c67 { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; background: var(--dma-accent-dim); color: var(--dma-accent); border: 1px solid rgba(239, 82, 78, 0.2); align-self: flex-start; }
/* Product cards only: not every product gets a badge (cyberammo_home_get_badge()
   returns '' when no keyword matches), and while it sat in normal flex flow,
   a badge-less card lost its height+gap, throwing off every element below it
   — including the buttons, which is what actually broke row-to-row alignment.
   Lifting it out of flow onto the product photo (like the stock-urgency tag
   already does) means its presence/absence never shifts anything else.
   Scoped to a direct child of the card so it doesn't touch the same class
   reused for blog category tags or the comparison table. */
li.dma-card-a3655c67 > .dma-badge-a3655c67 { position: absolute; top: 20px; left: 20px; z-index: 2; }
.dma-stock-urgency-a3655c67 { position: absolute; top: 20px; right: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; background: rgba(240, 169, 59, 0.12); color: #f0a93b; border: 1px solid rgba(240, 169, 59, 0.3); border-radius: 3px; }
.dma-card-link-a3655c67 { display: flex; flex-direction: column; gap: 10px; text-decoration: none; min-width: 0; }
.dma-card-img-a3655c67 { width: 100% !important; height: 140px !important; max-width: 100% !important; object-fit: contain !important; background: var(--dma-image-bg) !important; border: 1px solid var(--dma-border) !important; }
/* Fixed 2-line clamp so every card title takes the same vertical space,
   whether the product name is 3 words or 8. */
/* !important on font-size/margin: it's a bare <h3>, and WooCommerce's own
   plugin CSS styles product-loop h3s directly (".woocommerce ... h3") with
   higher specificity than this one class — only bites on real WC archives
   like Shop, which is why this only showed up there and not on the
   homepage's non-WC-archive loop. */
.dma-card-name-a3655c67 {
	font-size: 15px !important; font-weight: 600; color: var(--dma-heading); letter-spacing: -0.01em; line-height: 1.3;
	margin: 0 !important;
	min-height: calc(1.3em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Fixed 3-line HEIGHT (not just a cap) on the spec list — cyberammo_home_get_specs()
   can return anywhere from 1 to 5 lines. A max-height plus flex-grow let a
   short-spec card's list stretch to fill whatever space was left in its row,
   which shifted the price/buttons below it up or down depending on how many
   specs THAT product happened to have. A fixed height means every card
   reserves the exact same vertical slot for specs regardless of content, so
   the price and action buttons land at the same offset on every card, not
   just within one row. flex-grow removed for the same reason — nothing here
   should expand to soak up leftover space anymore. */
.dma-specs-a3655c67 {
	list-style: none; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; min-width: 0;
	height: calc(1.5em * 3 + 4px * 2); overflow: hidden;
}
.dma-specs-a3655c67 li { font-size: 12px; color: var(--dma-text-muted); padding-left: 14px; position: relative; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
.dma-specs-a3655c67 li::before { content: '\203A'; position: absolute; left: 0; color: var(--dma-accent); font-weight: 700; font-size: 13px; }
/* Price badge: white pill, red text. !important because WooCommerce's own
   core stylesheet sets ".woocommerce div.product p.price / span.price" to a
   yellow-olive color with higher selector specificity than a plain class
   here — without !important that core rule wins wherever a card happens to
   sit inside a div.product wrapper (e.g. the single product page). */
.dma-price-a3655c67 {
	display: inline-flex !important; align-items: baseline; gap: 6px;
	background: var(--dma-white) !important; color: var(--dma-accent) !important;
	font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
	padding: 5px 12px; border-radius: 7px; width: fit-content;
	min-height: 17px; flex-shrink: 0; white-space: nowrap;
}
/* Light mode: the card itself is white (--dma-surface), so the price pill's
   always-white background needs its own border to stay visible instead of
   blending into the card. */
[data-theme="light"] .dma-price-a3655c67 { border: 1px solid var(--dma-border); }
.dma-price-a3655c67 del { color: rgba(10,10,12,.45) !important; font-size: 12px; font-weight: 500; }
.dma-price-a3655c67 ins { text-decoration: none; }

.dma-btn-a3655c67 { display: inline-block; text-align: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 16px; background: transparent; color: var(--dma-accent); border: 1px solid var(--dma-accent); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; margin-top: auto; font-family: var(--dma-font); }
.dma-btn-a3655c67:hover { background: var(--dma-accent); color: var(--dma-white); box-shadow: 0 0 16px var(--dma-accent-glow); }
.dma-btn-a3655c67:disabled { opacity: 0.6; cursor: default; }

/* No margin-top:auto here on purpose: with the badge, specs and price above
   all now fixed-height, actions already lands at the same offset from the
   top of every card without needing to be pushed to the bottom of the row.
   Bottom-anchoring it (the old behavior) is what caused the actual bug —
   a row's shortest card would get pulled all the way down to match its
   tallest neighbor, landing its "Add to Cart"/"Select Options" button at a
   different height than the same button on a different row. Any leftover
   space from the grid's row-stretch now falls below Actions instead, which
   just reads as a little extra bottom padding on a shorter card. */
.dma-card-actions-a3655c67 { display: flex; flex-direction: column; gap: 8px; }
.dma-btn-buynow-a3655c67 { background: var(--dma-accent); color: var(--dma-white); }
.dma-btn-buynow-a3655c67:hover { background: #d94440; box-shadow: 0 0 16px var(--dma-accent-glow); }
.dma-btn-view-a3655c67 { align-self: center; font-size: 11px; color: var(--dma-text-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 0; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.dma-btn-view-a3655c67:hover { color: var(--dma-heading); border-color: var(--dma-border-hover); }

.dma-btn-loading-84138301 { position: relative; color: transparent !important; pointer-events: none; }
.dma-btn-loading-84138301::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: dmaSpin-84138301 0.6s linear infinite; }
@keyframes dmaSpin-84138301 { to { transform: rotate(360deg); } }

.dma-search-empty-a3655c67 { padding: 60px 20px; text-align: center; }
.dma-search-empty-a3655c67 p { color: var(--dma-text-muted); margin-bottom: 20px; }

/* Buttons with a leading icon (Join Discord): icon is 1em, the size of the text. */
.dma-btn-has-icon-a3655c67 { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; }
.dma-btn-icon-a3655c67 { width: 1em; height: 1em; flex: 0 0 auto; display: block; }
/* "Showing 3 out of 16 products" above the homepage showcase, left-aligned with the grid. */
.dma-showcase-count-a3655c67 { margin: 0 0 14px; text-align: left; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--dma-text-muted); }
.dma-showcase-count-a3655c67 span { color: var(--dma-accent); font-weight: 700; }
.dma-view-more-wrap-a3655c67 { display: flex; justify-content: center; margin-top: 36px; }
.dma-view-more-btn-a3655c67 {
	display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; padding: 14px 28px; background: transparent; color: var(--dma-heading);
	border: 1px solid var(--dma-border-hover); border-radius: 6px; text-decoration: none; transition: .2s ease;
}
.dma-view-more-btn-a3655c67:hover { border-color: var(--dma-accent); color: var(--dma-accent); background: var(--dma-accent-dim); }

/* ========================================
   PROMO / SIDE-BY-SIDE SECTIONS
   (Bundle Builder callout + "How Ordering Works")
   ======================================== */
.dma-promo-a3655c67 { max-width: 1200px; margin: 0 auto; padding: 56px 24px; border-top: 1px solid var(--dma-border); }
.dma-promo-inner-a3655c67 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.dma-promo--reverse-a3655c67 .dma-promo-inner-a3655c67 { grid-template-columns: 0.9fr 1.1fr; }
.dma-promo--reverse-a3655c67 .dma-promo-visual-a3655c67 { order: 1; }
.dma-promo--reverse-a3655c67 .dma-promo-copy-a3655c67 { order: 2; }
.dma-promo-eyebrow-a3655c67 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dma-accent); margin-bottom: 12px; }
.dma-promo-title-a3655c67 { font-size: 28px; font-weight: 800; color: var(--dma-heading); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 14px; }
.dma-promo-text-a3655c67 { font-size: 14px; color: var(--dma-text-muted); line-height: 1.7; margin-bottom: 24px; }

.dma-promo-checklist-a3655c67 { background: var(--dma-surface); border: 1px solid var(--dma-border); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.dma-promo-check-item-a3655c67 { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--dma-text); font-weight: 500; }
.dma-promo-check-item-a3655c67 em { color: var(--dma-text-muted); font-style: normal; }
.dma-promo-check-item--final-a3655c67 { padding-top: 12px; border-top: 1px solid var(--dma-border); color: var(--dma-heading); font-weight: 700; }
.dma-promo-check-dot-a3655c67 { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--dma-accent-dim); color: var(--dma-accent); border: 1px solid rgba(239, 82, 78, 0.3); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.dma-promo-check-item--final-a3655c67 .dma-promo-check-dot-a3655c67 { background: var(--dma-accent); color: var(--dma-white); border-color: var(--dma-accent); }

.dma-promo-stats-a3655c67 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--dma-surface); border: 1px solid var(--dma-border); padding: 28px; }
.dma-promo-stat-a3655c67 { display: flex; flex-direction: column; gap: 4px; }
.dma-promo-stat-num-a3655c67 { font-size: 18px; font-weight: 800; color: var(--dma-heading); letter-spacing: -0.01em; }
.dma-promo-stat-label-a3655c67 { font-size: 11px; color: var(--dma-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.dma-promo-steps-a3655c67 { display: flex; flex-direction: column; gap: 18px; }
.dma-promo-step-a3655c67 { display: flex; gap: 14px; align-items: flex-start; }
.dma-promo-step-a3655c67 strong { display: block; font-size: 14px; color: var(--dma-heading); margin-bottom: 3px; }
.dma-promo-step-a3655c67 p { font-size: 13px; color: var(--dma-text-muted); line-height: 1.6; }
.dma-promo-step-a3655c67 a { color: var(--dma-accent); text-decoration: none; }
.dma-promo-step-a3655c67 a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.dma-promo-inner-a3655c67, .dma-promo--reverse-a3655c67 .dma-promo-inner-a3655c67 { grid-template-columns: 1fr; }
	.dma-promo--reverse-a3655c67 .dma-promo-visual-a3655c67 { order: 2; }
	.dma-promo--reverse-a3655c67 .dma-promo-copy-a3655c67 { order: 1; }
}

/* ========================================
   "WHICH CARD DO I NEED?" QUIZ
   ======================================== */
.dma-quiz-a3655c67 { max-width: 1200px; margin: 0 auto; padding: 56px 24px; border-top: 1px solid var(--dma-border); }
.dma-quiz-inner-a3655c67 { max-width: 640px; margin: 0 auto; text-align: center; }
.dma-quiz-title-a3655c67 { font-size: 28px; font-weight: 800; color: var(--dma-heading); letter-spacing: -0.02em; margin-bottom: 10px; }
.dma-quiz-subtitle-a3655c67 { font-size: 14px; color: var(--dma-text-muted); margin-bottom: 32px; }
.dma-quiz-card-a3655c67 { background: var(--dma-surface); border: 1px solid var(--dma-border); padding: 32px; text-align: left; }
.dma-quiz-question-a3655c67 { font-size: 15px; font-weight: 700; color: var(--dma-heading); margin-bottom: 18px; text-align: center; }
.dma-quiz-options-a3655c67 { display: flex; flex-direction: column; gap: 10px; }
.dma-quiz-option-a3655c67 { width: 100%; text-align: left; font-size: 13px; font-weight: 600; color: var(--dma-text); background: var(--dma-bg); border: 1px solid var(--dma-border); padding: 14px 18px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; font-family: var(--dma-font); }
.dma-quiz-option-a3655c67:hover { border-color: var(--dma-accent); color: var(--dma-heading); background: var(--dma-accent-dim); }
.dma-quiz-result-a3655c67 { text-align: center; }
.dma-quiz-result-label-a3655c67 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dma-accent); margin-bottom: 10px; }
.dma-quiz-result-name-a3655c67 { font-size: 22px; font-weight: 800; color: var(--dma-heading); margin-bottom: 10px; }
.dma-quiz-result-text-a3655c67 { font-size: 13px; color: var(--dma-text-muted); line-height: 1.6; margin-bottom: 22px; }
.dma-quiz-result-a3655c67 .dma-header-btn-primary-a3655c67 { margin-right: 10px; }
.dma-quiz-restart-a3655c67 { background: transparent; }
@media (max-width: 500px) {
	.dma-quiz-result-a3655c67 .dma-header-btn-primary-a3655c67 { display: block; margin: 0 0 10px; }
	.dma-quiz-restart-a3655c67 { display: block; width: 100%; }
}

/* ========================================
   RESTOCK NOTIFY (out-of-stock signup)
   ======================================== */
.dma-restock-form-a3655c67 { display: flex; gap: 6px; margin-top: auto; }
.dma-restock-form--compact-a3655c67 { flex-direction: column; }
.dma-restock-email-a3655c67 { flex: 1; min-width: 0; background: var(--dma-bg); border: 1px solid var(--dma-border); color: var(--dma-heading); font-size: 12px; padding: 9px 10px; font-family: var(--dma-font); }
.dma-restock-email-a3655c67::placeholder { color: var(--dma-text-muted); }
.dma-restock-submit-a3655c67 { margin-top: 0; white-space: nowrap; }
.dma-restock-msg-a3655c67 { font-size: 11px; color: var(--dma-accent); margin-top: 6px; line-height: 1.5; }
.dma-restock-msg--error-a3655c67 { color: #f0a93b; }

/* ========================================
   FAQ CATEGORY TABS
   ======================================== */
.dma-faq-tabs-a3655c67 { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.dma-faq-tab-a3655c67 { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 8px 16px; background: var(--dma-surface); color: var(--dma-text-muted); border: 1px solid var(--dma-border); cursor: pointer; transition: all 0.2s ease; font-family: var(--dma-font); }
.dma-faq-tab-a3655c67:hover { color: var(--dma-heading); border-color: var(--dma-border-hover); }
.dma-faq-tab-active-a3655c67, .dma-faq-tab-active-a3655c67:hover { background: var(--dma-accent-dim); color: var(--dma-accent); border-color: rgba(239, 82, 78, 0.3); }

/* Why Cyber Ammo */
.dma-why-a3655c67 { max-width: 1200px; margin: 0 auto; padding: 48px 24px; border-top: 1px solid var(--dma-border); }
.dma-why-title-a3655c67 { font-size: 24px; font-weight: 800; color: var(--dma-heading); text-align: center; margin-bottom: 28px; letter-spacing: -0.02em; }
.dma-why-grid-a3655c67 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dma-why-card-a3655c67 { background: var(--dma-surface); border: 1px solid var(--dma-border); padding: 24px; }
.dma-why-card-a3655c67 h3 { font-size: 15px; font-weight: 700; color: var(--dma-heading); margin-bottom: 8px; }
.dma-why-card-a3655c67 p { font-size: 13px; color: var(--dma-text-muted); line-height: 1.6; }
@media (max-width: 900px) { .dma-why-grid-a3655c67 { grid-template-columns: 1fr; } }

/* Minimal "drip" underline — used sparingly, per the brief */
.dma-underline-drip { position: relative; overflow: visible; }
.dma-underline-drip::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--dma-accent); transition: width 0.25s ease; }
.dma-underline-drip:hover::after { width: 100%; }

/* FAQ & CTA */
.dma-faq-a3655c67 { max-width: 1200px; margin: 0 auto; padding: 32px 24px; border-top: 1px solid var(--dma-border); }
.dma-faq-title-a3655c67 { font-size: 18px; font-weight: 700; color: var(--dma-heading); margin-bottom: 20px; letter-spacing: -0.01em; }
.dma-faq-grid-a3655c67 { display: flex; flex-direction: column; gap: 8px; }
.dma-faq-grid-a3655c67[hidden] { display: none; }
.dma-faq-item-a3655c67 { border: 1px solid var(--dma-border); background: var(--dma-surface); transition: border-color 0.2s ease; }
.dma-faq-item-a3655c67:hover { border-color: var(--dma-border-hover); }
.dma-faq-item-a3655c67.dma-faq-open-a3655c67 { border-color: rgba(239, 82, 78, 0.3); }
.dma-faq-q-a3655c67 { width: 100%; text-align: left; background: none; border: none; color: var(--dma-heading); font-size: 13px; font-weight: 600; padding: 14px 40px 14px 16px; cursor: pointer; font-family: var(--dma-font); position: relative; transition: color 0.2s ease; }
.dma-faq-q-a3655c67::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--dma-text-muted); transition: transform 0.2s ease, color 0.2s ease; }
.dma-faq-item-a3655c67.dma-faq-open-a3655c67 .dma-faq-q-a3655c67::after { content: '\2212'; color: var(--dma-accent); }
.dma-faq-q-a3655c67:hover { color: var(--dma-accent); }
.dma-faq-a-a3655c67 { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.dma-faq-item-a3655c67.dma-faq-open-a3655c67 .dma-faq-a-a3655c67 { max-height: 200px; }
.dma-faq-a-a3655c67 p { padding: 0 16px 14px; font-size: 12px; color: var(--dma-text-muted); line-height: 1.6; }
.dma-cta-a3655c67 { max-width: 1200px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--dma-border); display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.dma-cta-text-a3655c67 { font-size: 14px; margin: 0; line-height: 1.7; color: var(--dma-text-muted); }
.dma-cta-link-a3655c67 { color: var(--dma-accent); font-weight: 600; text-decoration: none; white-space: nowrap; margin-left: 6px; }
.dma-cta-link-a3655c67:hover { text-decoration: underline; text-underline-offset: 3px; }
.dma-cta-link-icon-a3655c67 { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 0.35em; }
.dma-cta-btn-a3655c67 { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 20px; background: var(--dma-accent); color: var(--dma-white); text-decoration: none; border: 1px solid var(--dma-accent); transition: background 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; }
.dma-cta-btn-a3655c67:hover { background: #d94440; box-shadow: 0 0 20px var(--dma-accent-glow); }
.dma-cta-actions-a3655c67 { display: flex; gap: 10px; flex-wrap: wrap; }
.dma-cta-btn-secondary-a3655c67 { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 20px; background: transparent; color: var(--dma-heading); text-decoration: none; border: 1px solid var(--dma-border); transition: border-color 0.2s ease, background 0.2s ease; white-space: nowrap; }
.dma-cta-btn-secondary-a3655c67:hover { border-color: var(--dma-accent); background: var(--dma-accent-dim); }

/* ========================================
   SHOP CATEGORY FILTER (archive-product.php)
   One row under the title: label on the left, chips after it, then the
   "Showing X out of Y" line left-aligned above the grid like the homepage.
   ======================================== */
.dma-shop-toolbar-a3655c67 { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 24px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--dma-border); }
.dma-shop-filter-label-a3655c67 { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dma-text-muted); white-space: nowrap; }
.dma-shop-filter-label-a3655c67 svg { opacity: 0.6; }
.dma-shop-chips-a3655c67 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dma-chip-num-a3655c67 { font-size: 11px; font-weight: 600; opacity: 0.7; }
.dma-shop-count-a3655c67 { margin-top: 0; }
.dma-shop-toolbar-a3655c67 .dma-shop-count-a3655c67 { margin: 0 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
	.dma-shop-toolbar-a3655c67 { flex-direction: column; align-items: flex-start; }
	.dma-shop-toolbar-a3655c67 .dma-shop-count-a3655c67 { margin: 0; }
}
.dma-filter-chip-84138301 { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; padding: 7px 16px; background: var(--dma-surface) !important; color: var(--dma-text-muted) !important; border: 1px solid var(--dma-border) !important; cursor: pointer; transition: all 0.25s ease; white-space: nowrap; user-select: none; position: relative; overflow: hidden; font-family: var(--dma-font); box-shadow: none !important; text-decoration: none !important; outline: none !important; }
.dma-filter-chip-84138301::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(239, 82, 78, 0.08), rgba(239, 82, 78, 0.02)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.dma-filter-chip-84138301:hover { border-color: rgba(239, 82, 78, 0.25) !important; color: var(--dma-text) !important; background: var(--dma-surface-hover) !important; box-shadow: none !important; }
.dma-filter-chip-84138301:hover::before { opacity: 0.5; }
.dma-filter-chip-84138301.dma-chip-active-84138301 { background: rgba(239, 82, 78, 0.12) !important; color: var(--dma-accent) !important; border-color: rgba(239, 82, 78, 0.3) !important; font-weight: 600; box-shadow: none !important; }
.dma-filter-chip-84138301.dma-chip-active-84138301::before { opacity: 1; }
.dma-filter-chip-84138301.dma-chip-active-84138301:hover { background: rgba(239, 82, 78, 0.18) !important; border-color: rgba(239, 82, 78, 0.45) !important; color: var(--dma-accent) !important; box-shadow: 0 0 16px rgba(239, 82, 78, 0.15) !important; }
.dma-chip-dot-84138301 { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(0); transition: all 0.25s ease; }
.dma-chip-active-84138301 .dma-chip-dot-84138301 { opacity: 1; transform: scale(1); }

/* Hidden state fixes grid gaps */
/* Selector must out-rank "li.product.dma-card-a3655c67" above (which sets
   display:flex !important) or the category filter's hide state silently
   loses the specificity fight and every filter chip shows all products. */
li.product.dma-card-a3655c67.dma-card-hidden-84138301 { display: none !important; }
.dma-card-visible-84138301 { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; position: relative; visibility: visible; }
.dma-filter-empty-84138301 { grid-column: 1 / -1; text-align: center; padding: 60px 24px; color: var(--dma-text-muted); font-size: 14px; font-weight: 500; }
.dma-filter-empty-84138301 span { display: block; font-size: 32px; margin-bottom: 12px; opacity: 0.4; }

/* Responsive */
@media (max-width: 900px) { ul.products.dma-grid-a3655c67 { grid-template-columns: repeat(2, 1fr) !important; } .dma-title-a3655c67 { font-size: 36px; } }
@media (max-width: 700px) { ul.products.dma-grid-a3655c67 { grid-template-columns: 1fr !important; } .dma-header-a3655c67 { padding: 50px 16px 40px; } .dma-title-a3655c67 { font-size: 28px; } .dma-subtitle-a3655c67 { font-size: 14px; } .dma-products-a3655c67, .dma-faq-a3655c67, .dma-cta-a3655c67, .dma-promo-a3655c67, .dma-quiz-a3655c67 { padding: 20px 16px; } .dma-cta-a3655c67 { flex-direction: column; text-align: center; } .dma-filter-bar-84138301 { padding: 0 16px; gap: 12px; } .dma-filter-chips-84138301 { gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .dma-filter-chips-84138301::-webkit-scrollbar { display: none; } .dma-filter-chip-84138301 { padding: 6px 12px; font-size: 11px; flex-shrink: 0; } .dma-promo-title-a3655c67, .dma-quiz-title-a3655c67 { font-size: 22px; } .dma-quiz-card-a3655c67 { padding: 20px; } .dma-promo-stats-a3655c67 { grid-template-columns: 1fr 1fr; padding: 20px; } .dma-promo-checklist-a3655c67 { padding: 20px; } }
/* ========================================
   LIGHT MODE — overrides .dma-page-a3655c67's own hardcoded token copy
   (see assets/css/tokens.css for the [data-theme="light"] :root values;
   this selector locally redeclares the same variable names, so the root
   override alone doesn't reach anything inside it — see the equivalent
   blocks in woo.css for the cart/checkout wrappers).
   ======================================== */
[data-theme="light"] .dma-page-a3655c67 {
	--dma-bg: #eef0f3;
	--dma-surface: #ffffff;
	--dma-surface-hover: #f6f7f9;
	--dma-border: #e1e4e9;
	--dma-border-hover: #cbd0d8;
	--dma-text: #3b3f4a;
	--dma-text-muted: #6b7180;
	--dma-accent: #d6403c;
	--dma-accent-dim: rgba(214, 64, 60, 0.10);
	--dma-accent-glow: rgba(214, 64, 60, 0.22);
}

/* Store disclaimer under the product grid (archive-product.php). */
.dma-shop-disclaimer-a3655c67 { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 760px; margin: 32px auto 0; padding: 14px 18px; border: 1px solid var(--dma-border); border-radius: 10px; background: var(--dma-surface); color: var(--dma-text-muted); font-size: 13px; line-height: 1.5; text-align: left; }
.dma-shop-disclaimer-a3655c67 svg { flex: 0 0 auto; margin-top: 1px; color: var(--dma-accent); }