@charset "utf-8";
/*
* IRUNGUNS storefront v2 - built against Jason's supplied desktop/mobile
* reference images and the exact supplied logo (see
* docs/466_STOREFRONT_CONTRACT_MAP.md / docs/467_*). Supersedes v1's header
* band approach with the real header/nav/hero/footer structure from the
* reference. v1 (irg_storefront_v1.css) stays loaded for the pages this
* wave did not touch (product/category card polish) - no rule here
* duplicates or fights it.
*/
/* Removes custom.css's legacy body background (images/bg.jpg - a tiled
wallpaper of manufacturer trademarks: Sig Sauer, Smith & Wesson, HK,
Remington, Colt, Mossberg, Glock, Beretta, FN, Daniel Defense, Ruger).
That file predates this storefront rebuild and was never an approved
design element - it was bleeding through as page "wallpaper" around and
between the v2 sections, flagged directly in owner visual review
(2026-09-05). Reclassified LEGACY/REFERENCE: the file itself is left on
disk untouched (other legacy-styled pages may still reference it), this
just stops the v2 storefront from painting it. */
body { background-image: none !important; background-color: #050506 !important; }
:root {
--irg2-bg: #060607;
--irg2-bg2: #0c0d10;
--irg2-panel: #121317;
--irg2-panel2: #1a1c22;
--irg2-line: #2a2d35;
--irg2-text: #f5f6f8;
--irg2-muted: #9aa0ac;
--irg2-dim: #6b7280;
--irg2-red: #c8161a;
--irg2-red2: #e0201f;
--irg2-cyan: #38bdf8;
--irg2-ca: #ef4444;
--irg2-us: #3b82f6;
--irg2-green: #22c55e;
--irg2-radius: 10px;
--irg2-header-h: 108px;
--irg2-bottomnav-h: 60px;
}
.irg-sf2 * { box-sizing: border-box; }
/* The legacy .header is position:fixed (custom.css), sized for the old
single-row header. This header is 3 stacked rows and much taller - every
page's own top-offset compensation (.main-container padding-top:75px,
.homecrl .slick-track padding-top:103px, etc.) was tuned to that old
height and would now sit partly hidden behind this one. Taking the
header out of fixed positioning removes the overlap everywhere in one
place instead of re-tuning every page's individual compensation value -
the header now scrolls with the page rather than staying pinned, a
deliberate, visible tradeoff, not a hidden one. */
header.header.irg-sf2 { position: relative; top: auto; left: auto; width: auto; }
/* ================= Utility strip ================= */
.irg-sf2-utility {
background: var(--irg2-bg);
border-bottom: 1px solid var(--irg2-line);
color: var(--irg2-muted);
font-size: 11.5px;
padding: 6px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
letter-spacing: .02em;
}
.irg-sf2-utility-left { display: flex; align-items: center; gap: 8px; }
.irg-sf2-utility-left .irg-sf2-flag { font-size: 14px; }
.irg-sf2-utility-right { display: flex; align-items: center; gap: 16px; }
.irg-sf2-utility-right a { color: var(--irg2-muted); text-decoration: none; }
.irg-sf2-utility-right a:hover { color: #fff; }
.irg-sf2-utility-social { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.irg-sf2-utility-social a { color: var(--irg2-muted); font-size: 13px; }
.irg-sf2-utility-social a:hover { color: #fff; }
@media (max-width: 991px) { .irg-sf2-utility { display: none; } }
/* ================= Main header (desktop) ================= */
.irg-sf2-mainheader {
background: #000;
border-bottom: 1px solid var(--irg2-line);
padding: 14px 24px;
display: flex;
align-items: center;
gap: 24px;
}
.irg-sf2-logo { flex: 0 0 auto; display: flex; align-items: center; }
.irg-sf2-logo img {
height: 40px;
width: auto;
aspect-ratio: 4.3 / 1;
object-fit: contain;
display: block;
}
.irg-sf2-searchwrap { flex: 1 1 auto; max-width: 620px; margin: 0 auto; position: relative; }
.irg-sf2-searchform {
display: flex;
background: var(--irg2-panel2);
border: 1px solid var(--irg2-line);
border-radius: 6px;
overflow: hidden;
}
.irg-sf2-searchform input[type="text"] {
flex: 1;
border: 0;
background: transparent;
color: var(--irg2-text);
padding: 12px 16px;
font-size: 14px;
outline: none;
}
.irg-sf2-searchform input[type="text"]::placeholder { color: var(--irg2-dim); }
.irg-sf2-searchform button {
border: 0;
background: var(--irg2-red);
color: #fff;
width: 52px;
font-size: 16px;
cursor: pointer;
}
.irg-sf2-searchform button:hover { background: var(--irg2-red2); }
/* ================= Predictive search suggestions ================= */
.irg-sf2-search-suggest {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--irg2-panel2);
border: 1px solid var(--irg2-line);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,.5);
max-height: 70vh;
overflow-y: auto;
z-index: 500;
padding: 6px;
}
.irg-sf2-search-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 6px;
text-decoration: none !important;
color: var(--irg2-text) !important;
cursor: pointer;
}
.irg-sf2-search-item:hover, .irg-sf2-search-item.is-active { background: rgba(255,255,255,.06); }
.irg-sf2-search-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; background: var(--irg2-panel); }
.irg-sf2-search-item-meta { flex: 1 1 auto; min-width: 0; }
.irg-sf2-search-item-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irg-sf2-search-item-sub { font-size: 11px; color: var(--irg2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irg-sf2-search-item-price { flex: 0 0 auto; text-align: right; }
.irg-sf2-search-item-price-val { font-size: 13px; font-weight: 800; color: var(--irg2-red2); }
.irg-sf2-search-item-stock { font-size: 10px; margin-top: 2px; }
.irg-sf2-search-item-stock.is-instock { color: #3ec46d; }
.irg-sf2-search-item-stock.is-oos { color: var(--irg2-muted); }
.irg-sf2-search-empty { padding: 14px 10px 6px; font-size: 13px; color: var(--irg2-muted); }
.irg-sf2-search-seeall { display: block; padding: 6px 10px 10px; font-size: 12px; color: var(--irg2-red2) !important; text-decoration: none !important; }
.irg-sf2-search-note { padding: 6px 10px 2px; font-size: 11px; color: var(--irg2-muted); border-top: 1px solid var(--irg2-line); margin-top: 4px; }
@media (max-width: 767px) {
.irg-sf2-search-suggest { position: fixed; top: 110px; left: 12px; right: 12px; max-height: 60vh; }
}
.irg-sf2-headeractions { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; }
.irg-sf2-headeraction {
display: flex;
align-items: center;
gap: 8px;
color: var(--irg2-text) !important;
text-decoration: none !important;
font-size: 12.5px;
line-height: 1.25;
}
.irg-sf2-headeraction .irg-sf2-ico { font-size: 18px; }
.irg-sf2-headeraction .irg-sf2-action-label small { display: block; color: var(--irg2-dim); font-weight: 400; }
.irg-sf2-headeraction .irg-sf2-action-label strong { display: block; font-weight: 700; }
.irg-sf2-cart-total { color: var(--irg2-muted); font-size: 11px; }
@media (max-width: 991px) { .irg-sf2-mainheader { display: none; } }
/* ================= Primary nav (desktop) ================= */
.irg-sf2-primarynav {
background: #0d0d0f;
border-bottom: 2px solid var(--irg2-red);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0 24px;
}
.irg-sf2-primarynav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.irg-sf2-primarynav li a {
display: flex;
align-items: center;
gap: 4px;
color: var(--irg2-text);
text-decoration: none !important;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
padding: 13px 14px;
}
.irg-sf2-primarynav li a:hover { color: var(--irg2-red2); background: rgba(255,255,255,.03); }
.irg-sf2-primarynav li a.irg-sf2-external-ico::after { content: "\2197"; font-size: 11px; opacity: .7; }
.irg-sf2-frt-clarify { opacity: .65; font-weight: 700; font-size: 10px; }
.irg-sf2-talkreggie {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--irg2-red);
color: var(--irg2-red2) !important;
border-radius: 6px;
padding: 7px 14px !important important;
font-weight: 800 !important;
margin: 8px 0;
}
.irg-sf2-talkreggie:hover { background: rgba(200,22,26,.12); }
@media (max-width: 991px) { .irg-sf2-primarynav { display: none; } }
@media (min-width: 992px) and (max-width: 1200px) {
/* Tighter tweener-width nav: prevents the 7 nav links + Talk to Reggie
from wrapping into a second line that visually overlapped the first
(found live at 1024px during the six-breakpoint sweep). */
.irg-sf2-primarynav li a { padding: 13px 8px; font-size: 10.5px; }
.irg-sf2-frt-clarify { display: none; }
}
/* ================= Mobile header ================= */
.irg-sf2-mobileheader {
display: none;
background: #000;
border-bottom: 1px solid var(--irg2-line);
align-items: center;
justify-content: space-between;
padding: 10px 14px;
}
@media (max-width: 991px) { .irg-sf2-mobileheader { display: flex; } }
.irg-sf2-mobile-searchrow { display: none; position: relative; background: #000; padding: 0 14px 10px; border-bottom: 1px solid var(--irg2-line); }
@media (max-width: 991px) { .irg-sf2-mobile-searchrow { display: block; } }
.irg-sf2-mobile-searchrow .irg-sf2-searchform { background: var(--irg2-panel2); }
.irg-sf2-mobileheader .irg-sf2-hamburger {
background: transparent;
border: 0;
color: #fff;
font-size: 22px;
padding: 6px;
line-height: 1;
}
.irg-sf2-mobileheader .irg-sf2-logo img { height: 30px; }
.irg-sf2-mobile-cart {
position: relative;
color: #fff;
font-size: 20px;
padding: 6px;
}
.irg-sf2-mobile-cart .irg-sf2-cart-badge {
position: absolute;
top: -2px;
right: -2px;
background: var(--irg2-red);
color: #fff;
font-size: 10px;
font-weight: 800;
border-radius: 50%;
min-width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
}
/* Mobile nav drawer */
.irg-sf2-drawer-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
z-index: 10600;
}
.irg-sf2-drawer-overlay.irg-sf2-open { display: block; }
.irg-sf2-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 82%;
max-width: 320px;
background: #0a0a0c;
border-right: 1px solid var(--irg2-line);
z-index: 10601;
transform: translateX(-100%);
transition: transform .22s ease;
overflow-y: auto;
padding: 16px;
}
.irg-sf2-drawer.irg-sf2-open { transform: translateX(0); }
.irg-sf2-drawer-close { background: transparent; border: 0; color: #fff; font-size: 22px; float: right; }
.irg-sf2-drawer nav ul { list-style: none; margin: 34px 0 0; padding: 0; }
.irg-sf2-drawer nav li a {
display: block;
color: var(--irg2-text);
text-decoration: none !important;
padding: 13px 4px;
border-bottom: 1px solid var(--irg2-line);
font-weight: 700;
font-size: 13.5px;
letter-spacing: .03em;
text-transform: uppercase;
}
.irg-sf2-drawer nav li a:hover { color: var(--irg2-red2); }
/* ================= Hero carousel ================= */
/* Minimal slick.js base positioning, scoped to this hero only - no
official slick.css/slick-theme.css is loaded anywhere in this codebase
(the existing home-panel carousel gets by on its own custom rules), so
this hero needs its own baseline rather than risking a sitewide
unscoped slick override. */
.irg-sf2-hero .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.irg-sf2-hero .slick-track { position: relative; top: 0; left: 0; display: flex; }
.irg-sf2-hero .slick-track:before,
.irg-sf2-hero .slick-track:after { display: table; content: ""; }
.irg-sf2-hero .slick-slide { display: none; float: left; }
.irg-sf2-hero.slick-initialized .slick-track,
.irg-sf2-hero .slick-initialized .slick-track { display: flex; }
.irg-sf2-hero .slick-initialized .slick-slide { display: block; }
.irg-sf2-hero .slick-slide img { display: block; }
.irg-sf2-hero .slick-prev, .irg-sf2-hero .slick-next {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(0,0,0,.4); border: 0; border-radius: 50%;
color: #fff; cursor: pointer;
}
.irg-sf2-hero .slick-prev:before, .irg-sf2-hero .slick-next:before { color: #fff; }
.irg-sf2-hero .slick-dots { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.irg-sf2-hero .slick-dots li { display: inline-block; }
.irg-sf2-hero .slick-dots li button { font-size: 0; border: 0; background: transparent; width: 20px; height: 20px; cursor: pointer; }
.irg-sf2-hero .slick-dots li button:before { font-family: inherit; font-size: 9px; content: "\25CF"; }
.irg-sf2-hero { position: relative; background: #000; overflow: hidden; }
.irg-sf2-hero-slide {
position: relative;
min-height: 460px;
display: flex !important;
align-items: center;
background-size: cover;
background-position: center;
}
.irg-sf2-hero-slide::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.15) 100%);
}
/* Real backend-managed hero media: an ![]()
/ behind the ::before
overlay (z-index:0 vs 1) so the same gradient legibility treatment
applies to a real photo exactly as it did to the CSS-gradient
placeholders - overlay is generated in CSS, never baked into the master. */
.irg-sf2-hero-media { position: absolute; inset: 0; z-index: 0; }
.irg-sf2-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.irg-sf2-hero-content { position: relative; z-index: 2; padding: 0 60px; max-width: 640px; }
.irg-sf2-hero-eyebrow {
color: var(--irg2-text);
letter-spacing: .3em;
font-size: 12px;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}
.irg-sf2-hero-title { font-size: 46px; font-weight: 900; line-height: 1.05; color: #fff; margin: 0 0 6px; }
.irg-sf2-hero-title em { color: var(--irg2-red2); font-style: normal; display: block; }
.irg-sf2-hero-sub { color: #dcdde1; font-size: 15px; max-width: 46ch; margin: 10px 0 22px; line-height: 1.5; }
.irg-sf2-hero-ctas { display: flex; align-items: center; gap: 14px; }
.irg-sf2-hero-shopnow {
background: var(--irg2-red);
color: #fff !important;
text-decoration: none !important;
font-weight: 800;
letter-spacing: .04em;
padding: 13px 26px;
border-radius: 6px;
font-size: 13px;
}
.irg-sf2-hero-shopnow:hover { background: var(--irg2-red2); }
.irg-sf2-hero-watch {
display: flex;
align-items: center;
gap: 8px;
color: #fff !important;
text-decoration: none !important;
font-size: 13px;
font-weight: 700;
border: 1px solid rgba(255,255,255,.5);
border-radius: 999px;
padding: 10px 18px 10px 12px;
}
.irg-sf2-hero .slick-dots { bottom: 18px; z-index: 3; }
.irg-sf2-hero .slick-dots li button:before { color: #fff; opacity: .5; font-size: 9px; }
.irg-sf2-hero .slick-dots li.slick-active button:before { opacity: 1; color: var(--irg2-red2); }
.irg-sf2-hero .slick-prev, .irg-sf2-hero .slick-next { z-index: 3; width: 40px; height: 40px; }
.irg-sf2-hero .slick-prev { left: 16px; } .irg-sf2-hero .slick-next { right: 16px; }
.irg-sf2-hero .slick-prev:before, .irg-sf2-hero .slick-next:before { font-size: 32px; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .irg-sf2-hero * { transition: none !important; } }
@media (max-width: 767px) {
.irg-sf2-hero-slide { min-height: 400px; }
.irg-sf2-hero-content { padding: 0 20px; max-width: 100%; }
.irg-sf2-hero-title { font-size: 30px; }
.irg-sf2-hero-sub { font-size: 13px; }
.irg-sf2-hero-watch { display: none; }
/* Banner 5 (Canada -> USA): the composited truck logo sits mid-frame in
the mobile 4:5 crop (libs/irg_hero_banner.php's mobile crop always uses
the source's full height - focal_y_mobile has no effect on this
composition), which is exactly where centered hero text also lands.
Anchoring this one slide's text to the top clears the logo without
touching the shared centered layout every other banner already relies
on (align-self overrides the parent's align-items per-child). */
.irg-sf2-hero-slide[data-banner-id="5"] .irg-sf2-hero-content { align-self: flex-start; padding-top: 24px; }
}
.irg-sf2-sponsorrow { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.irg-sf2-sponsorlink { display: block; background: #fff; border-radius: 8px; padding: 10px 16px; }
.irg-sf2-sponsorlink img { display: block; max-height: 48px; width: auto; }
/* ================= Category strip ================= */
.irg-sf2-section { max-width: 1600px; margin: 0 auto; padding: 44px 32px; }
@media (min-width: 1921px) { .irg-sf2-section { max-width: 1900px; } }
.irg-sf2-section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.irg-sf2-section-heading h2 { color: var(--irg2-text); font-size: 19px; font-weight: 800; letter-spacing: .02em; margin: 0; text-transform: uppercase; }
.irg-sf2-section-heading a { color: var(--irg2-muted); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.irg-sf2-section-heading a:hover { color: #fff; }
.irg-sf2-catgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; }
@media (max-width: 1200px) { .irg-sf2-catgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .irg-sf2-catgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.irg-sf2-cattile {
position: relative;
display: block;
border-radius: var(--irg2-radius);
overflow: hidden;
height: 280px;
background: linear-gradient(160deg, var(--irg2-panel2), #0c0d10);
border: 1px solid var(--irg2-line);
text-decoration: none !important;
}
@media (max-width: 1200px) { .irg-sf2-cattile { height: 240px; } }
@media (max-width: 767px) { .irg-sf2-cattile { height: 200px; } }
.irg-sf2-cattile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .2s ease, opacity .2s ease; }
.irg-sf2-cattile .irg-sf2-placeholder-icon { position: absolute; inset: 0; }
.irg-sf2-cattile:hover img { transform: scale(1.06); opacity: .95; }
.irg-sf2-cattile-label {
position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px 38px;
background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0));
color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
}
.irg-sf2-cattile-shop {
position: absolute; left: 14px; bottom: 10px; color: var(--irg2-red2); font-size: 11.5px; font-weight: 800;
}
.irg-sf2-cattile:focus-visible { outline: 2px solid var(--irg2-cyan); outline-offset: 2px; }
/* Same tile look as .irg-sf2-catgrid, but for an arbitrary/unknown tile
count (category.php/subcategory.php's subcategory tiles - could be
1, 4, 5, or 15+ children) instead of the homepage's fixed 8
departments. auto-fill avoids both "8 fixed columns with 3 empty
slots" and needing a fragile carousel just to fit a variable count -
replaced that carousel entirely (Directive 3 item 2/8, 2026-09-08). */
.irg-sf2-catgrid-flex { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
@media (max-width: 767px) { .irg-sf2-catgrid-flex { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.irg-sf2-catgrid-flex.irg-sf2-single-tile { grid-template-columns: minmax(200px, 320px); }
.irg-sf2-catgrid-empty {
text-align: center; padding: 48px 20px; color: var(--irg2-muted);
border: 1px dashed var(--irg2-line); border-radius: var(--irg2-radius);
}
/* subcategory.php's tiles - each one also carries a nested list of its
own children. The old design hid that list until a mouse hover
flipped the card (.slick-slide:hover), which has no touch
equivalent - those links were completely unreachable on mobile.
Redesigned as one always-visible card (photo + title + a plain link
list) - reachable identically by mouse, keyboard, and touch. */
.irg-subcat-tile {
display: flex; flex-direction: column;
border-radius: var(--irg2-radius); overflow: hidden;
border: 1px solid var(--irg2-line); background: var(--irg2-panel2);
}
.irg-subcat-tile-media { position: relative; height: 150px; overflow: hidden; background: var(--irg2-panel); }
.irg-subcat-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.irg-subcat-tile-body { padding: 14px 16px 8px; }
.irg-subcat-tile-title {
display: block; margin: 0 0 8px; font-size: 15px; font-weight: 800;
text-transform: uppercase; letter-spacing: .02em; color: var(--irg2-text);
}
/* .relative_box ul has a legacy position:absolute;top:50% rule
(custom_24jan2018.css) meant for the old full-height hover overlay -
not relevant to this compact always-visible card, and it clipped the
list against .irg-subcat-tile's overflow:hidden. Reset explicitly. */
.irg-subcat-tile .relative_box { position: static !important; height: auto !important; width: auto !important; }
.irg-subcat-tile .relative_box ul.irg-subcat-tile-links {
position: static !important; top: auto !important; transform: none !important;
list-style: none; margin: 0; padding: 0 0 6px;
}
.irg-subcat-tile-links li a {
display: block; padding: 7px 0; color: var(--irg2-muted) !important;
font-size: 13px !important; text-decoration: none !important;
border-top: 1px solid var(--irg2-line);
}
.irg-subcat-tile-links li:first-child a { border-top: 0; }
.irg-subcat-tile-links li a:hover, .irg-subcat-tile-links li a:focus-visible { color: var(--irg2-red2) !important; padding-left: 4px; }
/* ================= Business journeys ================= */
.irg-sf2-journeys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .irg-sf2-journeys { grid-template-columns: 1fr; } }
.irg-sf2-journey {
position: relative;
border-radius: 14px;
overflow: hidden;
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
text-decoration: none !important;
border: 1px solid var(--irg2-line);
background-size: cover;
background-position: center;
}
.irg-sf2-journey::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.25)); }
.irg-sf2-journey > * { position: relative; z-index: 2; }
/* Import/Export uses two distinct real photos (recovered flag imagery, one
per direction) rather than one shared placeholder background - each half
sits below the same ::before overlay used elsewhere on the card. */
.irg-sf2-journey-half { position: absolute; inset: 0; z-index: 0; display: flex; }
.irg-sf2-journey-half img { width: 50%; height: 100%; object-fit: cover; }
.irg-sf2-journey .irg-sf2-journey-flag { font-size: 22px; margin-bottom: 6px; }
.irg-sf2-journey h3 { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 10px; letter-spacing: .01em; }
.irg-sf2-journey p { color: #d7d9df; font-size: 14px; line-height: 1.6; margin: 0 0 20px; max-width: 34ch; }
.irg-sf2-journey-cta { display: inline-flex; align-items: center; gap: 6px; color: #fff !important; font-weight: 800; font-size: 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; padding: 8px 14px; align-self: flex-start; }
.irg-sf2-journey-cta:hover { background: rgba(255,255,255,.12); }
.irg-sf2-journey-dual { display: flex; gap: 8px; flex-wrap: wrap; }
.irg-sf2-journey-dual a {
flex: 1 1 auto;
text-align: center;
color: #fff !important;
font-weight: 800;
font-size: 11.5px;
border: 1px solid rgba(255,255,255,.5);
border-radius: 6px;
padding: 8px 10px;
text-decoration: none !important;
}
.irg-sf2-journey-dual a:hover { background: rgba(255,255,255,.12); }
/* ================= Service/tool row ================= */
.irg-sf2-servicerow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
@media (max-width: 900px) { .irg-sf2-servicerow { grid-template-columns: 1fr; } }
.irg-sf2-toolcard-live { color: var(--irg2-red2); font-weight: 800; font-size: 14px; margin: 0 0 4px; }
.irg-sf2-toolcard-asof { color: var(--irg2-muted); font-size: 11px; margin: 0 0 8px; }
.irg-sf2-servicecard {
background: var(--irg2-panel);
border: 1px solid var(--irg2-line);
border-radius: var(--irg2-radius);
padding: 28px;
display: flex;
align-items: center;
gap: 20px;
min-height: 150px;
}
.irg-sf2-servicecard .irg-sf2-service-ico {
width: 68px; height: 68px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; font-size: 28px;
background: rgba(200,22,26,.12); color: var(--irg2-red2);
overflow: hidden;
}
.irg-sf2-servicecard .irg-sf2-service-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.irg-sf2-servicecard h3 { color: var(--irg2-text); font-size: 18px; font-weight: 800; margin: 0 0 5px; letter-spacing: .01em; }
.irg-sf2-servicecard p { color: var(--irg2-muted); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }
.irg-sf2-servicecard .irg-sf2-btn { font-size: 12px; padding: 9px 16px; }
/* ================= Buttons (shared) ================= */
.irg-sf2-btn {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 6px;
font-weight: 800;
letter-spacing: .03em;
text-decoration: none !important;
font-size: 12px;
padding: 10px 16px;
}
.irg-sf2-btn-primary { background: var(--irg2-red); color: #fff !important; }
.irg-sf2-btn-primary:hover { background: var(--irg2-red2); }
/* A 1px border in --irg2-line (#2a2d35) on a --irg2-panel (#121317) card
background is barely distinguishable from the card itself - these read
as "empty" rather than as buttons (2026-09-08 visual feedback). A
visible fill plus a lighter, higher-contrast border gives them real
button weight without promoting them to the same visual rank as
irg-sf2-btn-primary (still the only solid-red CTA, e.g. Talk to Reggie). */
.irg-sf2-btn-ghost { background: var(--irg2-panel2); border: 1px solid #4a4e5a; color: var(--irg2-text) !important; }
.irg-sf2-btn-ghost:hover { border-color: var(--irg2-red2); background: #22252c; }
/* ================= Featured products ================= */
.irg-sf2-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.irg-sf2-tab {
background: transparent;
border: 1px solid var(--irg2-line);
color: var(--irg2-muted);
border-radius: 999px;
padding: 6px 14px;
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
}
.irg-sf2-tab.irg-sf2-tab-on { background: var(--irg2-red); border-color: var(--irg2-red); color: #fff; }
.irg-sf2-tab[disabled] { opacity: .45; cursor: not-allowed; }
.irg-sf2-prodgrid2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 1200px) { .irg-sf2-prodgrid2 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .irg-sf2-prodgrid2 { grid-template-columns: repeat(2, 1fr); } }
.irg-sf2-prodcard2 {
background: var(--irg2-panel);
border: 1px solid var(--irg2-line);
border-radius: var(--irg2-radius);
overflow: hidden;
text-decoration: none !important;
display: flex;
flex-direction: column;
}
.irg-sf2-prodcard2:hover { border-color: #47536a; }
.irg-sf2-prodcard2 .irg-sf2-prod-ph { height: 140px; background: #fff; display: flex; align-items: center; justify-content: center; }
.irg-sf2-prodcard2 .irg-sf2-prod-ph img { max-width: 92%; max-height: 92%; object-fit: contain; }
.irg-sf2-prodcard2 .irg-sf2-prod-body { padding: 10px 12px 12px; }
.irg-sf2-prodcard2 .irg-sf2-prod-name { color: var(--irg2-text); font-size: 12.5px; font-weight: 700; line-height: 1.3; min-height: 2.6em; margin-bottom: 6px; }
.irg-sf2-prodcard2 .irg-sf2-prod-price { color: var(--irg2-text); font-weight: 800; font-size: 14.5px; }
.irg-sf2-prodcard2 .irg-sf2-prod-stock { display: flex; align-items: center; gap: 5px; color: var(--irg2-green); font-size: 10.5px; font-weight: 700; margin-top: 4px; }
.irg-sf2-prodcard2 .irg-sf2-prod-stock .irg-sf2-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--irg2-green); }
.irg-sf2-prod-empty { color: var(--irg2-muted); font-size: 13px; padding: 30px; text-align: center; border: 1px dashed var(--irg2-line); border-radius: var(--irg2-radius); }
/* ================= Trust strip ================= */
.irg-sf2-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 8px 0; }
@media (max-width: 767px) { .irg-sf2-trust { grid-template-columns: repeat(2, 1fr); } }
.irg-sf2-trust-item { display: flex; align-items: center; gap: 14px; color: var(--irg2-muted); font-size: 12.5px; }
.irg-sf2-trust-item .irg-sf2-trust-ico { font-size: 30px; color: var(--irg2-text); width: 44px; text-align: center; flex: 0 0 auto; }
.irg-sf2-trust-item strong { display: block; color: var(--irg2-text); font-size: 14px; margin-bottom: 2px; }
.irg-sf2-paymarks { display: flex; gap: 10px; margin-top: 14px; font-size: 30px; color: var(--irg2-muted); }
/* ================= Sponsors ================= */
.irg-sf2-sponsors { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; opacity: .8; }
.irg-sf2-sponsors img { max-height: 34px; filter: grayscale(1) brightness(1.6); opacity: .75; }
/* ================= Footer ================= */
.irg-sf2-footer { background: #000; border-top: 1px solid var(--irg2-line); }
.irg-sf2-footer-top { max-width: 1400px; margin: 0 auto; padding: 40px 24px 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 24px; }
@media (max-width: 991px) { .irg-sf2-footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .irg-sf2-footer-top { grid-template-columns: 1fr; } }
.irg-sf2-footer-brand img { height: 30px; margin-bottom: 12px; }
.irg-sf2-footer-brand p { color: var(--irg2-dim); font-size: 12px; line-height: 1.5; max-width: 32ch; }
.irg-sf2-footer-col h4 { color: var(--irg2-text); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 12px; }
.irg-sf2-footer-col ul { list-style: none; margin: 0; padding: 0; }
.irg-sf2-footer-col li { margin-bottom: 8px; }
.irg-sf2-footer-col a { color: var(--irg2-muted); font-size: 12.5px; text-decoration: none; }
.irg-sf2-footer-col a:hover { color: #fff; }
.irg-sf2-footer-social { display: flex; gap: 10px; margin-top: 10px; }
.irg-sf2-footer-social a { width: 32px; height: 32px; border: 1px solid var(--irg2-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--irg2-muted) !important; text-decoration: none; }
.irg-sf2-footer-social a:hover { border-color: #fff; color: #fff !important; }
.irg-sf2-newsletter { display: flex; margin-top: 8px; }
.irg-sf2-newsletter input { flex: 1; border: 1px solid var(--irg2-line); background: var(--irg2-panel2); color: #fff; padding: 8px 10px; font-size: 12px; border-radius: 4px 0 0 4px; }
.irg-sf2-newsletter button { border: 0; background: var(--irg2-red); color: #fff; padding: 0 14px; font-weight: 800; font-size: 11px; border-radius: 0 4px 4px 0; }
.irg-sf2-footer-bottom { border-top: 1px solid var(--irg2-line); padding: 16px 24px; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.irg-sf2-footer-bottom, .irg-sf2-footer-bottom a { color: var(--irg2-dim); font-size: 11.5px; text-decoration: none; }
.irg-sf2-footer-bottom a:hover { color: #fff; }
.irg-sf2-payment-marks { display: flex; gap: 6px; }
.irg-sf2-payment-marks span { border: 1px solid var(--irg2-line); border-radius: 3px; padding: 2px 6px; font-size: 10px; color: var(--irg2-dim); }
/* ================= Persistent bottom nav (mobile only) ================= */
.irg-sf2-bottomnav {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
height: var(--irg2-bottomnav-h);
background: #000;
border-top: 1px solid var(--irg2-line);
z-index: 500;
padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 991px) { .irg-sf2-bottomnav { display: flex; } body { padding-bottom: var(--irg2-bottomnav-h); } }
.irg-sf2-bottomnav a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: var(--irg2-dim) !important;
text-decoration: none !important;
font-size: 10px;
font-weight: 700;
}
.irg-sf2-bottomnav a .irg-sf2-ico { font-size: 19px; }
.irg-sf2-bottomnav a.irg-sf2-active { color: var(--irg2-red2) !important; }
/* .cartview (legacy, custom.css/irg_tune.css: position:absolute, red
background/border-radius pill, top/right offsets) is reused here only so
footer.php's existing ajax_cart_action() ($('.cartview span')) keeps
updating every cart count on the page - explicitly neutralize its old
visual styling everywhere it's reused in the v2 header/bottom nav. */
.irg-sf2-headeraction.cartview,
.irg-sf2-mobile-cart.cartview,
.irg-sf2-bottomnav-cartlink.cartview {
position: static !important;
background: transparent !important;
border-radius: 0 !important;
top: auto !important; right: auto !important; left: auto !important;
filter: none !important;
}
.irg-sf2-headeraction.cartview > a,
.irg-sf2-bottomnav-cartlink.cartview > a { padding: 0 !important; }
.irg-sf2-headeraction.cartview:hover,
.irg-sf2-bottomnav-cartlink.cartview:hover { background: transparent !important; }
.irg-sf2-bottomnav-cartlink { position: relative; }
.irg-sf2-bottomnav-cartcount {
position: absolute; top: 2px; right: 50%; margin-right: -18px;
background: var(--irg2-red); color: #fff; font-size: 9px; font-weight: 800;
border-radius: 50%; min-width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
/* Dedicated mobile "Talk to Reggie" CTA (mandate 7.5) - desktop already has
one in the primary nav, so this stays mobile-only to avoid duplication. */
.irg-sf2-mobile-reggie-cta { display: none; }
@media (max-width: 991px) {
.irg-sf2-mobile-reggie-cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 18px 24px 0; padding: 13px; border: 1px solid var(--irg2-red);
border-radius: 8px; color: var(--irg2-red2) !important; text-decoration: none !important;
font-weight: 800; font-size: 13px; letter-spacing: .03em;
}
.irg-sf2-mobile-reggie-cta:hover { background: rgba(200,22,26,.1); }
}
/* ================= Visual placeholder marker =================
Applied to any region standing in for a real supplied asset (hero
photography, category photography, journey photography, Reggie 3D
artwork, GunBroker branding, sponsor logos) - per Jason's 2026-09-05
correction, these must never be presented as if they matched the
reference. See docs/468_STOREFRONT_VISUAL_ASSET_GAP_MANIFEST.md. */
.irg-sf2-placeholder { position: relative; }
.irg-sf2-placeholder::after {
content: "VISUAL PLACEHOLDER \2013 PENDING ASSET";
position: absolute;
top: 8px;
left: 8px;
z-index: 5;
background: rgba(0,0,0,.72);
color: #fbbf24;
font-size: 9px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
padding: 3px 7px;
border: 1px solid rgba(251,191,36,.5);
border-radius: 3px;
pointer-events: none;
}
/* Distinct from .irg-sf2-placeholder: this slot HAD a real (legacy
old-website) image that owner review pulled, vs. never having had one.
Orange/red instead of amber so the two states read differently at a
glance. */
.irg-sf2-placeholder-legacy { position: relative; }
.irg-sf2-placeholder-legacy::after {
content: "LEGACY ART \2013 AWAITING APPROVED ARTWORK"; /* 2026-09-23: the legacy file is displayed, not removed (docs/576 artwork audit) */
position: absolute;
top: 8px;
left: 8px;
z-index: 5;
background: rgba(0,0,0,.72);
color: #fb9a24;
font-size: 9px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
padding: 3px 7px;
border: 1px solid rgba(251,154,36,.5);
border-radius: 3px;
pointer-events: none;
}
.irg-sf2-placeholder-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 100%;
padding-bottom: 46px;
background: repeating-linear-gradient(135deg, #14161a, #14161a 10px, #191c21 10px, #191c21 20px);
border: 1px dashed #3a3f4a;
color: #5a616f;
box-sizing: border-box;
}
.irg-sf2-placeholder-icon i { font-size: 26px; }
.irg-sf2-placeholder-icon span { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-align: center; padding: 0 6px; }
/* Category tiles: the corner badge already says "pending asset" - drop the
redundant in-body "Photo Pending" caption there so the icon doesn't
collide with the bottom label at this tile's height. */
.irg-sf2-cattile .irg-sf2-placeholder-icon span { display: none; }
.irg-sf2-cattile .irg-sf2-placeholder-icon i { font-size: 34px; }
.irg-sf2-pending-tag {
display: inline-block;
color: #fbbf24;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
border: 1px solid rgba(251,191,36,.5);
border-radius: 3px;
padding: 1px 5px;
margin-left: 6px;
vertical-align: middle;
}
/* ================= FRT holding page ================= */
.irg-sf2-hold-page { max-width: 640px; margin: 60px auto; padding: 0 20px; }
.irg-sf2-hold-card { background: var(--irg2-panel); border: 1px solid var(--irg2-line); border-radius: 14px; padding: 40px 30px; text-align: center; }
.irg-sf2-hold-ico { font-size: 40px; display: block; margin-bottom: 14px; }
.irg-sf2-hold-card h1 { color: var(--irg2-text); font-size: 22px; margin: 0 0 14px; }
.irg-sf2-hold-card p { color: var(--irg2-muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.irg-sf2-hold-note { font-size: 12px !important; color: var(--irg2-dim) !important; font-style: italic; }
.irg-sf2-hold-card .irg-sf2-btn { margin: 6px; }
/* 2026-09-24 (docs/576 stabilization): footer links reach a 24 px tap height on phones; nothing else moves */
@media (max-width: 767px) { .irg-sf2-footer-col a { display: inline-block; padding: 6px 0; line-height: 1.2; } }
/* (31 Oct 2026, storefront item 3 A) Shop Canada beside Shop IRUNGUNS.com, and the one line that says the difference */
.irg-sf2-journeys.irg-sf2-journeys-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .irg-sf2-journeys.irg-sf2-journeys-three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .irg-sf2-journeys.irg-sf2-journeys-three { grid-template-columns: 1fr; } }
.irg-sf2-shopways { color: var(--irg2-muted); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.irg-sf2-shopways strong { color: var(--irg2-text); }
/* (31 Oct 2026, Jason) phones: the banner arrows covered the slide's words - hidden there; swiping still changes slides */
@media (max-width: 767px) { .irg-sf2-hero .slick-prev, .irg-sf2-hero .slick-next { display: none !important; } }
.irg-sf2-viewall { text-align: center; margin: 18px 0 0; }
/* (6 Nov 2026, Jason: the old pages are "yucky") Manage Pages text written as .irg-page: the storefront's own look */
.irg-page{max-width:900px;margin:0 auto;font-size:16px;line-height:1.6;color:#dfe2e7}
.irg-page > p:first-child{font-size:18px;color:#f5f6f8}
.irg-page h1,.irg-page h2,.irg-page h3{color:#fff !important;font-weight:800;text-transform:none !important;letter-spacing:0;margin:32px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--irg2-red,#c8161a)}
.irg-page h3{font-size:22px}
.irg-page p{margin:0 0 12px}
.irg-page strong{color:#fff}
.irg-page a{color:#fff;text-decoration:underline;text-decoration-color:var(--irg2-red,#c8161a);text-underline-offset:3px}
.irg-page ul{list-style:disc;padding-left:22px;margin:0 0 14px}
.irg-page ul li{margin:0 0 6px;padding:0}
.irg-page ol{list-style:none !important;padding-left:0 !important;counter-reset:irgstep;padding:0;margin:0 0 14px;display:grid;gap:10px}
.irg-page ol li{list-style:none !important;counter-increment:irgstep;position:relative;padding:0 0 0 42px;min-height:30px}
.irg-page ol li:before{content:counter(irgstep);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;background:var(--irg2-red,#c8161a);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.irg-page .irg-page-table{margin:0 0 14px;border:1px solid var(--irg2-line,#2a2d35);border-radius:10px;overflow:hidden}
.irg-page table.table{margin:0;border:0;background:transparent;width:100%}
.irg-page table.table th,.irg-page table.table td{border:0;border-bottom:1px solid var(--irg2-line,#2a2d35);padding:12px 14px;color:#dfe2e7;vertical-align:top}
.irg-page table.table tr:last-child td{border-bottom:0}
.irg-page table.table thead th{background:var(--irg2-panel2,#1a1c22);color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.irg-page table.table td:last-child{color:#fff;font-weight:700;white-space:nowrap;width:1%}
.irg-page .irg-page-button{background:var(--irg2-red,#c8161a) !important;font-size:18px;padding:14px 26px !important;border-radius:10px !important;text-decoration:none !important}
.irg-page .irg-page-button:hover{background:var(--irg2-red2,#e0201f) !important}
@media (max-width:767px){.irg-page table.table td:last-child{white-space:normal;width:auto}.irg-page table.table th,.irg-page table.table td{padding:10px}}
/* (6 Nov 2026, Jason and Carolyn: people must know the category panels are the Canadian store) libs/irg_canada_mark.php */
.irg-ca-gridhead{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.irg-ca-gridhead h2{margin:0;font-size:24px;font-weight:800;color:#fff;text-transform:none}
.irg-ca-gridhead p{margin:2px 0 0;color:var(--irg2-muted,#9aa0ac);font-size:14px}
.irg-ca-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0;padding:8px 12px;border:1px solid var(--irg2-line,#2a2d35);border-left:3px solid #d52b1e;border-radius:8px;background:var(--irg2-panel,#121317);color:#dfe2e7;font-size:13px;line-height:1.4}
.irg-ca-strip strong{color:#fff}
.irg-ca-strip a{color:var(--irg2-muted,#9aa0ac);text-decoration:underline;text-underline-offset:3px;margin-left:auto}
.irg-ca-leaf{flex:none;display:inline-block;vertical-align:middle}
.irg-ca-tiles .irg-sf2-cattile{position:relative}
.irg-ca-tiles .irg-sf2-cattile::before{content:"";position:absolute;top:8px;left:8px;z-index:3;width:26px;height:26px;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.5);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23d52b1e' d='M50 5 57 18 64 14 61 36 72 24 75 31 87 29 83 42 90 46 70 62 73 70 53 67 53 85 52 95 48 95 47 85 47 67 27 70 30 62 10 46 17 42 13 29 25 31 28 24 39 36 36 14 43 18Z'/%3E%3C/svg%3E") no-repeat 50% 50%/18px 18px;pointer-events:none} /* (6 Nov 2026, Jason: "maybe just a little maple leaf in the corner") */