/**
* Layout-fit fixes (SE 1.68.95, 2026-09-27; 1.68.96: "…" pill back to 32px at <360px;
* 1.68.97: compact WooCommerce pagination below 550px; 1.68.98: compact nav up to 767px;
* 1.68.99: compact nav up to 1199px; 1.68.100: compact page-number pills are true circles;
* 1.68.101: compact "…" dots vertically centred in their circle; 1.68.102: compact pills share
* one top/bottom, full-nav "…" dots centred at >= 1200px; 1.68.104: text-wrap balance/pretty
* on the single-post H1, video-card caption title, latest-posts widget links and post body;
* 1.68.105: byline kept together, video caption inner padding, sidebar latest-posts stacked at
* 850-951px, + includes/class-wla-layout-fit.php keeps short hyphenated words on one line in post text;
* + balance on category-archive H1 and Flatsome accordion titles, term description / footer About
* paragraph keep-together + last-word NBSP in PHP)
* -- no text changes.
*
* 1) Pagination on one row at phone widths (QA fails 2026-09-27, Ms. Pink).
* Flatsome pills are 2.25em (~34px) with a 0.4em gap and 3-digit pills ~44px, and the
* WooCommerce archive nav (end_size 3 / mid_size 3) runs up to 7 consecutive numbers with no
* "…" near the first/last pages (p5, p6, p375, p376 ...), so it cannot fit 320-414px.
* - Below 550px: pills tightened to 32px (tap target stays >= 32x32, the "…" is the same
* 32px circle), 14px digits, 2px gaps; under 360px 13px digits, 1px gaps. Nothing is
* forced to nowrap -- anything that still didn't fit would wrap as before instead of
* clipping or scrolling sideways.
* - WooCommerce product archives (1.68.97): includes/class-wla-layout-fit.php prints a
* compact copy of the nav (same paginate_links() args, end_size 1 / mid_size 1, so a real
* "…" marks every gap) right after the full one, with the `hidden` attribute. At 1199px and
* below (1.68.99; 767px in 1.68.98, 549px in 1.68.97 -- the full nav still wrapped at
* 550-~700px, and on p190 at 768 / 850 / 1024px, p6 / p375 / p376 at 850px when the shop
* sidebar narrows the column), where :has() is supported, the full nav's container (the
* one directly followed by the compact copy) is display:none and the compact copy is
* shown; 550-1199px it uses Flatsome's default pill sizing (the 32px sizing stays
* <= 549px). >= 1200px nothing changes: the compact copy stays hidden and the full nav
* renders exactly as before (the column is >= 870px there; the widest full nav, p190's
* 17 items with ten 3-digit pills, needs ~763px, so it stays on one row). Exactly one
* nav is displayed at any width, so assistive tech never gets two pagination landmarks.
* - Compact worst case is 9 items ("‹ 1 … 375 376 377 … 380 ›"), which fits from 360px
* but not in the ~290px a 320px screen leaves (9 x 32px + gaps > 290). Under 360px, on a
* 9-item compact list only, the number right after the first "…" and right before the
* second "…" are hidden -> "‹ 1 … 376 … 380 ›". The "…" still marks those gaps and the
* current page, first/last page and arrows are never hidden.
* - Compact pills are true circles (1.68.100, Pink QA: 3-digit pills were 36.4x32 ovals at
* 360-549px and 32.6x32 with the text almost on the ring at 320px). Every compact page
* number is a fixed width = height circle with no side padding: 32x32 at <= 549px, Flatsome's
* own 33.66px (2.25em of 14.96px = 2.10375rem) at 550-1199px (2-digit pills were 35.4px and
* 3-digit 44px wide there). The renderer tags 3-digit numbers .wla-pn-3d and 4+-digit
* numbers .wla-pn-4d; they use a smaller font with slightly tighter tracking so the digits
* stay inside the ring with >= 3px clear: 3-digit 12px (~20.3px of text in the 28px inside
* the ring) at <= 549px, 13px (~22px of 29.7px) at 550-1199px; 4-digit ("1,000") 11px.
* 1-2 digit numbers keep 14px (13px < 360px) / Flatsome's 14.96px. The "…", the arrows and
* the full nav (>= 1200px) are not touched.
* - Compact "…" dots centred (1.68.101, Pink QA: the drawn dots sat 3.5-4.5px below the
* circle's middle at 320-1199px -- the glyph sits on the text baseline, so the text box was
* centred but the ink wasn't). The compact "…" pill gets a shorter line-height (20px at
* <= 549px, 2em - 8px at 550-1199px) so the dots rise ~4px; its box stays 32x32 /
* 33.66x33.66 (height is fixed). Its is vertical-align:top so the shorter line box
* doesn't drop the pill below the others. Numbers, arrows, the full nav are untouched.
* - Compact row aligned (1.68.102, Pink QA: 3-digit pills sat 1.0px low -- the s are
* baseline-aligned inline-blocks and the 3-digit pills' smaller font moves their baseline --
* so the row was 33px / 34.66px tall instead of 32 / 33.66). Every compact is now
* vertical-align:top: all pills share one top and bottom and the row is exactly one pill tall.
* Pill sizes, fonts and horizontal positions are unchanged.
* - Full-nav "…" centred at >= 1200px (1.68.102, Pink QA: drawn 3.6-4.5px low, same cause as
* the compact one). Same fix, only on the "…" of the WooCommerce archive's full nav (the one
* followed by the compact copy) at >= 1200px; every other pill of the full nav renders
* pixel-identically. The full nav has no 3-digit row offset (all its pills share Flatsome's
* 14.96px font), so nothing else there changes. Other paginations (blog, shortcodes) untouched.
* The 1.68.95/1.68.96 hide-next-to-"…" rules are retired wherever the compact copy exists
* (they are scoped away from it and the full nav is hidden); they stay only for paginations
* without a compact copy (cached pre-1.68.97 pages, blog, shortcodes).
*
* 2) reCAPTCHA v3 badge (injected by Google, loaded sitewide by Contact Form 7) no longer sits
* fixed over content (it covered footer "Latest" titles at 375px, the post sidebar's last
* entries and the footer payment icons on desktop). It stays fully visible -- not hidden,
* so no disclosure text is needed -- but is placed in normal page flow as the last thing on
* the page, centred on a strip matching the absolute footer (#4d4d4d), so it can never
* overlap anything at any scroll position or width.
*/
/* ---- 1) Pagination ---------------------------------------------------------------- */
@media (max-width: 549px) {
ul.page-numbers.nav-pagination > li {
margin: 0 2px 0 0;
}
ul.page-numbers.nav-pagination > li:last-child {
margin-right: 0;
}
ul.page-numbers.nav-pagination > li > .page-number {
min-width: 32px;
height: 32px;
line-height: 28px;
padding: 0 4px;
font-size: 14px;
}
}
@media (max-width: 359px) {
ul.page-numbers.nav-pagination > li {
margin-right: 1px;
}
ul.page-numbers.nav-pagination > li > .page-number {
padding: 0 3px;
font-size: 13px;
}
}
/* Compact nav page numbers as true circles (1.68.100). Only the compact copy (<= 1199px); the
"…" and the arrows already are circles and are left alone. Flatsome animates .page-number
(transition: all .3s), so crossing a breakpoint while resizing eases into these sizes. */
@media (max-width: 549px) {
.wla-pagination-compact > ul.page-numbers.nav-pagination > li > .page-number:not(.prev, .next, .dots) {
box-sizing: border-box;
width: 32px;
min-width: 32px;
padding: 0;
text-align: center;
}
.wla-pagination-compact > ul.page-numbers.nav-pagination > li > .page-number.wla-pn-3d {
font-size: 12px;
letter-spacing: -0.2px;
}
.wla-pagination-compact > ul.page-numbers.nav-pagination > li > .page-number.wla-pn-4d {
font-size: 11px;
letter-spacing: -0.5px;
}
}
@media (min-width: 550px) and (max-width: 1199px) {
.wla-pagination-compact > ul.page-numbers.nav-pagination > li > .page-number:not(.prev, .next, .dots) {
box-sizing: border-box;
width: 2.10375rem; /* = Flatsome's 2.25em pill height at its 14.96px pill font */
min-width: 2.10375rem;
padding: 0;
text-align: center;
}
/* Smaller font below, so pin height / line-height to Flatsome's values (2.25em / 2em of 14.96px). */
.wla-pagination-compact > ul.page-numbers.nav-pagination > li > .page-number:is(.wla-pn-3d, .wla-pn-4d) {
height: 2.10375rem;
line-height: 1.87rem;
}
.wla-pagination-compact > ul.page-numbers.nav-pagination > li > .page-number.wla-pn-3d {
font-size: 13px;
letter-spacing: -0.2px;
}
.wla-pagination-compact > ul.page-numbers.nav-pagination > li > .page-number.wla-pn-4d {
font-size: 11px;
letter-spacing: -0.5px;
}
}
/* Compact nav "…" dots centred in the circle (1.68.101) and compact row aligned (1.68.102); full-nav
"…" centred at >= 1200px (1.68.102). The "…" glyph's ink sits on the text baseline, ~4px under
the circle's middle with the pill's own line-height (28px / 2em). A shorter line-height lifts
the ink to the middle (measured within 0.5px at 320-1920px); the pill keeps its fixed 32px /
2.25em height. The s are top-aligned: pills are inline-blocks on a shared baseline, so the
shorter line box of the "…" (and the smaller font of 3-digit numbers, 1.68.102) would otherwise
sit those pills lower than their neighbours and make the row taller than one pill. */
@supports selector(li:has(> span)) {
/* Compact copy (<= 1199px): every pill on one top/bottom (1.68.102; 1.68.101 did the "…" only). */
.wla-pagination-compact > ul.page-numbers.nav-pagination > li {
vertical-align: top;
}
@media (max-width: 549px) {
.wla-pagination-compact > ul.page-numbers.nav-pagination > li > .page-number.dots {
line-height: 20px;
}
}
@media (min-width: 550px) and (max-width: 1199px) {
.wla-pagination-compact > ul.page-numbers.nav-pagination > li > .page-number.dots {
line-height: calc(2em - 8px);
}
}
/* Full WooCommerce archive nav (>= 1200px, the one followed by the compact copy): the "…" only. */
@media (min-width: 1200px) {
.container:has(+ .wla-pag-compact) > nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li:has(> .page-number.dots) {
vertical-align: top;
}
.container:has(+ .wla-pag-compact) > nav.woocommerce-pagination > ul.page-numbers.nav-pagination > li > .page-number.dots {
line-height: calc(2em - 8px);
}
}
}
/* Compact WooCommerce pagination (1.68.97; swap cutoff 1199px since 1.68.99): hidden by its `hidden`
attribute unless swapped in here. 550-1199px it keeps Flatsome's default pill sizing. */
@supports selector(div:has(+ div)) {
@media (max-width: 1199px) {
.container:has(> nav.woocommerce-pagination):has(+ .wla-pag-compact) {
display: none;
}
.wla-pag-compact[hidden] {
display: block;
}
}
@media (max-width: 359px) {
.wla-pagination-compact > ul.page-numbers.nav-pagination:has(> li:nth-child(9)) > li:is(
li:has(> .dots) + li,
li:has(+ li > .dots)
):not(:first-child, :last-child, :has(> .current, > .dots, > .prev, > .next), li:has(> .prev) + li, :has(+ li > .next)) {
display: none;
}
}
}
/* 1.68.95/96 hide-next-to-"…" rules, now only for paginations WITHOUT a compact copy: pages still
served from cache with pre-1.68.97 HTML, the blog, [products] shortcodes. On 1.68.97 product
archives they only touch the full nav, which is display:none at 1199px and below anyway. */
@supports selector(li:has(+ li)) {
/* 10+ items: hide up to two page numbers on each side of every "…". */
@media (max-width: 549px) {
:not(.wla-pagination-compact) > ul.page-numbers.nav-pagination:has(> li:nth-child(10)) > li:is(
li:has(+ li > .dots),
li:has(+ li + li > .dots),
li:has(> .dots) + li,
li:has(> .dots) + li + li
):not(:first-child, :last-child, :has(> .current, > .dots, > .prev, > .next), :has(+ li > .current, + li > .next), li:has(> .current) + li, li:has(> .prev) + li) {
display: none;
}
}
/* Under 360px: also one page number on each side of "…" on shorter lists. */
@media (max-width: 359px) {
:not(.wla-pagination-compact) > ul.page-numbers.nav-pagination > li:is(
li:has(+ li > .dots),
li:has(> .dots) + li
):not(:first-child, :last-child, :has(> .current, > .dots, > .prev, > .next), :has(+ li > .current, + li > .next), li:has(> .current) + li, li:has(> .prev) + li) {
display: none;
}
/* 13+ items: also the third number from a "…". Only when the two numbers between it and
the "…" are hidden by the rules above (the current page is not among them), so no
unmarked gap can appear; the current page itself is never hidden. */
:not(.wla-pagination-compact) > ul.page-numbers.nav-pagination:has(> li:nth-child(13)) > li:has(> .dots) + li + li + li:not(:last-child, :has(> .current, > .dots, > .next), :has(+ li > .next), li:has(> .current) + li, li:has(> .current) + li + li),
:not(.wla-pagination-compact) > ul.page-numbers.nav-pagination:has(> li:nth-child(13)) > li:has(+ li + li + li > .dots):not(:first-child, :has(> .current, > .dots, > .prev), li:has(> .prev) + li, :has(+ li > .current), :has(+ li + li > .current)) {
display: none;
}
}
}
/* ---- 2) reCAPTCHA badge: in page flow instead of fixed over content --------------- */
.grecaptcha-badge {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
margin: 0 auto !important;
max-width: 100%;
}
body > div:has(> .grecaptcha-badge) {
background-color: #4d4d4d;
padding: 0 0 15px;
}
/* ---- 3) Line breaking (1.68.104, QA fail 2026-09-28, post 51690) ------------------- */
/* No text or font-size changes: the browser only picks different break points.
* balance -- evens out short headings/links so the last line is not one word ("Magnum",
* "Patrol", "Tactical"): the single-post H1, the [wla_video] card caption title, and the
* Flatsome latest-posts widget link text (footer + sidebar; set on the .flex-grow column
* because text-wrap is applied by the block container, not the inline ).
* pretty -- avoids one-word last lines in single-post body paragraphs.
* Browsers without text-wrap support ignore these and wrap exactly as before. */
.single-post h1.entry-title,
.wla-video-card-title,
.widget.flatsome_recent_posts .recent-blog-posts > .flex-grow {
text-wrap: balance;
}
.single-post .entry-content p {
text-wrap: pretty;
}
/* 1.68.124 (Pink QA 2026-10-19, /nfa-transfers/): no one-word last lines in table cells (page content sits in .page-wrapper .col-inner; 1.68.123's .entry-content scope never matched). */
.page-wrapper .col-inner table th,
.page-wrapper .col-inner table td {
text-wrap: pretty;
}
/* ---- 4) Blog chrome (1.68.105, QA fails 2026-09-28 r2, post 51690) ------------------ */
/* Byline: "by Wulfy's Armory" never breaks inside ("... BY WULFY'S" / "ARMORY" at 375px).
* An inline-block moves to the next line whole (the line can still break between the date
* and "by"); it is ~140px wide at the byline's size, so it fits a 320px screen, and
* max-width:100% lets it wrap inside itself rather than overflow. (white-space:nowrap
* overflowed the meta line by 1-2px in WebKit 26.5 at 392-393px.) */
.entry-meta .byline {
display: inline-block;
max-width: 100%;
}
/* [wla_video] caption bar: the figcaption rule in video-card.css zeroes the padding, so the
* title and "Watch on YouTube" line sat flush against the black bar's left edge. Same inner
* padding as the card's own .wla-video-card-caption rule, at every width (the 1.68.104
* text-wrap: balance on the title is unaffected -- it just balances inside the padding). */
.wla-video-card-wrap figcaption.wla-video-card-caption {
padding: 12px 16px;
}
/* Latest-posts widgets (sidebar + footer), 850-1119px (1.68.105: sidebar 850-951; widened in
* 1.68.106): in that band the widget columns are too narrow for the title next to the 37px
* date badge (one-word first lines such as "Administrative" / "Langdon" at 850-1084 in the
* sidebar and 850-979 in the footer). The badge sits above the title and the title gets the
* full column width. Below 850px both widgets are full-width; from 1120px the title column
* beside the badge is >= 167px, wide enough for the current titles. */
@media (min-width: 850px) and (max-width: 1119px) {
.flatsome_recent_posts .recent-blog-posts {
flex-wrap: wrap;
}
.flatsome_recent_posts .recent-blog-posts > .flex-col.mr-half {
flex: 0 0 100%;
margin: 0 0 0.4em;
}
}
/* Post sidebar, 850-951px: 20px side padding instead of Flatsome's 30px (row-large), so the
* stacked title column is 172-197px instead of 152-177px and "Administrative Results" (158px)
* fits on one line. The 1px divider and the main column are unchanged. */
@media (min-width: 850px) and (max-width: 951px) {
.row-divided > .post-sidebar.col {
padding-left: 20px;
padding-right: 20px;
}
}
/* ---- 5) Category archive + FAQ accordion headings (1.68.105, QA Magpul 2026-09-28) ------ */
/* Same balance as the post H1: no one-word last line on the category H1 ("Stocks") or the
* FAQ questions ("Indianapolis?", "FFL?", "now?"). The accordion title is the block that
* lays out the question text. Answer text, the term description paragraphs and the footer
* About paragraph get keep-together spans + a last-word U+00A0 from
* includes/class-wla-layout-fit.php instead (works in Firefox, which has no text-wrap:pretty). */
.category-page-title h1.shop-page-title,
.accordion .accordion-title {
text-wrap: balance;
}
/* ---- 6) Previous/next post links (1.68.108, Pink QA 2026-09-28 post-nav re-gate) --------- */
/* Line breaking: the 1.68.107 last-word U+00A0 (class-wla-layout-fit.php) could push a single
* word onto a middle line ("Garand Thumb on the / Springfield / Operator AOS", "... / Charter /
* Arms Bulldog"). balance evens the lines out; the NBSP still keeps the last two words together.
* Where balancing itself leaves one word alone (a long first word, or more than six lines in
* Chrome), assets/post-nav-fit.js measures the lines and switches that box to plain wrapping
* (.wla-nav-wrap) and/or joins the lone word to its neighbour. The title text sits in
* div.nav-previous / div.nav-next. */
.next-prev-nav .nav-previous,
.next-prev-nav .nav-next {
text-wrap: balance;
}
.next-prev-nav .nav-previous.wla-nav-wrap,
.next-prev-nav .nav-next.wla-nav-wrap {
text-wrap: wrap;
}
/* Divider: Flatsome draws it as the left border of the second column (.flex-col + .flex-col),
* and the row centres its columns, so the divider was only as tall as the next link -- a stub
* next to a taller previous link, or a lone stub on the newest post (no next link). The columns
* now stretch to the row height (links stay vertically centred inside them) and the divider is
* dropped when either side has no link (newest and oldest post). */
.next-prev-nav > .flex-col {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
}
.next-prev-nav > .flex-col.nav-next:not(:has(a)),
.next-prev-nav > .flex-col.nav-prev:not(:has(a)) + .flex-col.nav-next {
border-left: 0;
border-right: 0;
}
/* ---- 7) Previous/next post links: stack at <= 361px + glue guard (1.68.109, Pink QA 2026-09-28) */
/* A column never grows past its half of the row because of an unbreakable piece of its title
* (1.68.107 nowrap span + last-word U+00A0, e.g. "American-Made 2011?" on 51624 at 320px pushed the
* nav 9px past the page edge). Any piece wider than its column has its glue dropped by
* assets/post-nav-fit.js. */
.next-prev-nav > .flex-col {
min-width: 0;
}
/* <= 441px (361px in 1.68.109, moved in 1.68.110, see section 8): previous link on top, next
* link below it, both full width and left-aligned, one full-width rule between them and no
* vertical divider. The full width holds every glued piece (also with JS off). With only one
* link (newest / oldest post) the empty half is not shown, so there is no rule at all. */
@media (max-width: 441px) {
.flex-row.next-prev-nav {
flex-direction: column;
align-items: stretch;
}
.next-prev-nav > .flex-col {
width: 100%;
}
.next-prev-nav > .flex-col.nav-next,
.next-prev-nav > .flex-col.nav-next > .nav-next {
text-align: left;
}
.next-prev-nav > .flex-col > .nav-previous,
.next-prev-nav > .flex-col > .nav-next {
margin-left: 0; /* Flatsome .text-right > div { margin-left: auto } would push the next link right */
margin-right: 0;
}
.next-prev-nav > .flex-col.nav-prev + .flex-col.nav-next {
border-left: 0;
border-right: 0;
border-top: 1px solid #ececec;
}
.next-prev-nav > .flex-col.nav-prev:not(:has(a)),
.next-prev-nav > .flex-col.nav-next:not(:has(a)) {
display: none;
}
.next-prev-nav > .flex-col.nav-prev:not(:has(a)) + .flex-col.nav-next {
border-top: 0;
}
}
/* ---- 8) Previous/next post links: stack to 441px, top-aligned columns (1.68.110, Pink QA 2026-09-28) */
/* The stack above now runs to 441px: in the two-column layout at 362-441px the titles were up to six
* lines tall and a long first word could sit alone on the first line with JS off.
* From 442px up the two columns sit side by side. They used to be centred vertically, so the text
* tops did not line up when the titles had different line counts (51621 at 391-395px: 38px). Both
* columns now start at the top; the columns still stretch, so the divider stays full height. */
.next-prev-nav > .flex-col {
justify-content: flex-start;
}
/* The arrow (shown from 550px) is a 32px inline-block with a 38.4px line-height. It made the first
* line of the previous link (and the last line of the next link) taller than a text line, so the
* previous title started ~4px lower than the next one. With line-height 0 the arrow no longer adds
* to the line height; the glyph stays centred where it was (vertical-align: middle). */
.next-prev-nav .icon-angle-left,
.next-prev-nav .icon-angle-right {
line-height: 0;
}
/* 1.68.126: short-description pipe glue (Pink) */
.product-short-description p { text-wrap: pretty; }
/* 1.68.146: /about/ hero -- the heading column was 60% of the banner (174px at 320), so the 2.9em heading
("About Wulfy's Armory", ~10.1em wide) wrapped one word per line at 320-549. Full-width text box below 550px
and a heading size capped to fit the column on one line. Layout only; no words change. */
@media (max-width: 549px) {
.page-id-93 .banner .text-box.banner-layer { width: 100% !important; }
.page-id-93 .banner .text-box h2.lead { font-size: min(2.9em, calc((100vw - 34px) / 10.4)); }
}
/* 1.68.148: a multi-word post tag link ("Ridge Runner") stays on one line. */
.entry-meta a[rel~="tag"], a.tag-cloud-link { white-space: nowrap; }
/* 1.68.149: homepage banner tile headings -- no one-word lines ("Custom / Cases", "Use the / Firearms / Finder"). Layout only, no word changes. */
.home .banner .text-box.res-text h2, .home .banner .text-box.res-text h3 { text-wrap: balance; }
@media (min-width: 550px) { .home .banner-layers > .text-box.res-text { width: 80% !important; max-width: 80%; } }
/* 1.68.150: homepage Rock-Op and Silencers/NFA tile headings stay on one line at 850px+ ("Rock-Op Defense / Solutions", "Use the Silencers/NFA / Finder"); the font scales with the banner so nothing clips. Flatsome banner ids change per render, so class / link selectors. Layout only, no word changes. */
@media (min-width: 850px) {
.home .banner.wla-rockop-photo-zoom .text-box.res-text h2, .home .banner:has(a[href="/silencers-nfa-finder/"]) .text-box.res-text h2 { font-size: min(46.4px, calc(min(100vw, 1240px) / 22.5)); white-space: nowrap; }
}
/* 1.68.163 (Pink, post 51858 r1): home-page Latest News card titles balance their lines, so a short
last word ("10/22") never sits alone. Display only; titles, H1s and post_title are unchanged. */
.home .box-blog-post .post-title { text-wrap: balance; }
/* 1.68.165 (Pink, post 51858 r2): the same balance for that post's /blog/ archive card title, so
"10/22" never sits alone at 320-322px ("mixup98 on the / Ruger 10/22"). Only this card; other /blog/ titles unchanged. */
.blog .post-51858 .entry-title { text-wrap: balance; }