/* GENERATED by runbooks/deploy/css-split/split.py (backlog #3 Phase 1) from finalist.css — DO NOT EDIT.
This is finalist.css with the other surfaces' blocks removed, order preserved. Edit finalist.css and re-run. */
/* =============================================================================
SKIN: FINALIST — homepage + static-page treatments only (chrome moved to
chrome.css when productionized, 2026-08-10). Merges into main.css when the
skin switcher retires.
HOMEPAGE v2 (2.1.0): editorial rhythm replaces the uniform glass shells —
ticker badges / gradient-framed raffles (the one flashy zone) / full-bleed
review band / narrow editorial about / numbered service dossiers / timeline
announcements. Gradient stays raffle-advertising-only; no keyframe motion
(raffle pages keep that exclusive).
============================================================================= */
/* ---------- STICKY OFFSET: one number for every pinned rail (Jake, 2026-09-20) ----------
The chrome bar is sticky and its geometry changes at the 900px breakpoint. Measured live:
desktop `top: 14px` + 104px tall -> its bottom edge sits at y=118
mobile `top: 0` + ~75px tall -> bottom edge at y=75
Every rail was hardcoded instead: checkout #order_review at 96px, and the cart, PDP and
account rails at 110px. On desktop that put all of them UNDER the bar while pinned --
checkout by 22px (Jake: "it cuts off the top of the Your Order box"), the other three by 8.
One token, 12px of air below the bar. Re-measure it if the chrome bar's height changes. */
:root { --sd-sticky-top: 87px; }
@media (min-width: 900px) { :root { --sd-sticky-top: 130px; } }
/* legacy Elementor hero stays hidden on the front page */
body.page-id-39225 .elementor-element-1149f936,
body.page-id-39225 .elementor-element-49e42885 { display: none !important; }
/* in-page footer clone (94KB of Jet footer + jet-search inside the body) — the
native chrome footer replaced it; hide until it's removed from the page
content for real in the de-Elementor pass */
body.page-id-39225 .elementor-element-4cc27f24 { display: none !important; }
body { background: #05070d !important; }
/* ---------- canvas: one deep-space glow behind everything ---------- */
body.page-id-39225 .elementor.elementor-39225 {
background: radial-gradient(ellipse 130% 70% at 50% -5%, #101a2c 0%, #05070d 55%) !important;
padding-bottom: 0;
}
/* ---------- shared section language ---------- */
body.page-id-39225 .elementor-element-3148fc8 h2.elementor-heading-title,
body.page-id-39225 .elementor-element-1693519 h2.elementor-heading-title,
body.page-id-39225 .elementor-element-6006aace h2.elementor-heading-title,
body.page-id-39225 .elementor-element-421a9c9 h2.elementor-heading-title,
body.page-id-39225 .elementor-element-3e22446c h2.elementor-heading-title {
font-size: clamp(2rem, 4.2vw, 3.1rem) !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: .02em !important;
line-height: 1.05 !important;
}
/* (the "//" mark stays hero-exclusive — Jake 2026-08-10) */
/* unified CTA voice (red, blue on hover) — raffle section excluded */
body.page-id-39225 .elementor-element-3148fc8 .elementor-button,
body.page-id-39225 .elementor-element-6006aace .elementor-button,
body.page-id-39225 .elementor-element-1693519 .elementor-button,
body.page-id-39225 .elementor-element-421a9c9 .elementor-button {
background: var(--ccr-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
font-weight: 800 !important;
font-size: .85rem !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
padding: 13px 26px !important;
box-shadow: 0 8px 26px rgba(210, 64, 52, .32) !important;
transition: all .22s ease !important;
}
body.page-id-39225 .elementor-element-3148fc8 .elementor-button:hover,
body.page-id-39225 .elementor-element-6006aace .elementor-button:hover,
body.page-id-39225 .elementor-element-1693519 .elementor-button:hover,
body.page-id-39225 .elementor-element-421a9c9 .elementor-button:hover {
background: var(--ccr-blue) !important;
box-shadow: 0 14px 38px rgba(56, 174, 232, .45) !important;
transform: translateY(-3px);
}
/* (trust badges 6723c8ff sit INSIDE the hidden legacy hero 49e42885 — resurrect
natively in the de-Elementor pass if wanted) */
/* ---------- 02 · raffles (3e22446c): the flashy zone — gradient frame, internals untouched ---------- */
body.page-id-39225 .elementor-element-3e22446c {
position: relative;
/* the frame IS the section boundary: hero runs flush into the top hairline,
and the bottom hairline sits directly against the reviews band — no dead
space outside the frame (Jake 2026-08-10) */
margin: 96px auto 0 !important;
padding: 44px 0 36px !important;
}
body.page-id-39225 .elementor-element-3e22446c::before,
body.page-id-39225 .elementor-element-3e22446c::after {
content: "";
position: absolute;
left: 8%;
right: 8%;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, #e8503f 25%, #ff8a45 75%, transparent);
box-shadow: 0 0 14px rgba(255, 100, 55, .4);
}
body.page-id-39225 .elementor-element-3e22446c::before { top: 0; }
body.page-id-39225 .elementor-element-3e22446c::after { bottom: 0; }
/* the View All CTA speaks raffle language (gradient, rounded) and sits evenly
between the cards and the closing hairline */
body.page-id-39225 .elementor-element-3e22446c .elementor-widget-button { margin: 30px 0 6px !important; }
body.page-id-39225 .elementor-element-3e22446c .elementor-button {
background: linear-gradient(92deg, #e8503f, #ff8a45) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
font-weight: 800 !important;
font-size: .85rem !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
padding: 14px 30px !important;
box-shadow: 0 10px 30px rgba(232, 80, 63, .35) !important;
transition: all .22s ease !important;
}
body.page-id-39225 .elementor-element-3e22446c .elementor-button:hover {
filter: brightness(1.12);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(255, 120, 60, .45) !important;
}
/* gradient headline — the only gradient text on the page, it advertises raffles */
body.page-id-39225 .elementor-element-3e22446c h2.elementor-heading-title {
background: linear-gradient(92deg, #ff4d3d, #ff9a3d);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
}
/* ---------- 03 · reviews (3148fc8): full-bleed quiet band ---------- */
body.page-id-39225 .elementor-element-3148fc8 {
max-width: none !important;
margin: 0 !important;
border-top: 1px solid rgba(255, 255, 255, .06);
background: rgba(255, 255, 255, .02) !important;
padding: clamp(48px, 7vw, 84px) clamp(18px, 4vw, 48px) !important;
}
body.page-id-39225 .elementor-element-3148fc8 h2.elementor-heading-title { text-align: center; }
body.page-id-39225 .elementor-element-3148fc8 .grw-row { gap: 20px; }
body.page-id-39225 .elementor-element-3148fc8 .grw-row > div,
body.page-id-39225 .elementor-element-3148fc8 .grw-content-inner {
background: rgba(10, 15, 28, .65) !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
border-radius: 14px !important;
color: var(--ccr-text) !important;
}
body.page-id-39225 .elementor-element-3148fc8 .grw-content-inner * { color: var(--ccr-text) !important; }
body.page-id-39225 .elementor-element-3148fc8 .grw-header,
body.page-id-39225 .elementor-element-3148fc8 .grw-header-inner { background: transparent !important; color: var(--ccr-text) !important; }
/* ---------- 04 · about (1693519): statement band (kept for local SEO —
restyled as a manifesto instead of floating text, Jake 2026-08-10) ---------- */
body.page-id-39225 .elementor-element-1693519 {
max-width: 820px;
margin: clamp(36px, 5vw, 56px) auto clamp(36px, 5vw, 56px) !important;
padding: clamp(36px, 5vw, 56px) 22px 0 !important;
position: relative;
}
body.page-id-39225 .elementor-element-1693519 h2.elementor-heading-title {
position: relative;
padding-bottom: 14px;
margin-bottom: 14px !important;
}
/* the ABOUT US ghost fights the long heading here — let the heading stand alone */
body.page-id-39225 .elementor-element-1693519 .elementor-heading-title[class*="size"]:not(h2),
body.page-id-39225 .elementor-element-1693519 div.elementor-heading-title { opacity: .35; }
/* opening line reads as the statement; the rest settles quiet */
body.page-id-39225 .elementor-element-1693519 p {
color: var(--ccr-text-dim) !important;
font-size: 1.05rem;
line-height: 1.85;
}
body.page-id-39225 .elementor-element-1693519 .elementor-widget-text-editor p:first-of-type {
color: #eef2f8 !important;
font-size: clamp(1.15rem, 2vw, 1.45rem);
line-height: 1.6;
font-weight: 500;
}
/* ---------- 05 · services (6006aace): numbered dossier cards ---------- */
body.page-id-39225 .elementor-element-6006aace {
max-width: 1240px;
margin: 0 auto clamp(36px, 5vw, 56px) !important;
padding: clamp(36px, 5vw, 56px) 22px 0 !important;
position: relative;
}
/* quiet structural hairlines between the calm sections — the gradient frame
stays raffle-exclusive */
body.page-id-39225 .elementor-element-6006aace::before,
body.page-id-39225 .elementor-element-421a9c9::before,
body.page-id-39225 .elementor-element-1693519::before {
content: "";
position: absolute;
top: 0;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12) 25%, rgba(255, 255, 255, .12) 75%, transparent);
}
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold) {
background: rgba(16, 26, 44, .55);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 16px;
transition: transform .22s ease, border-color .22s ease, background .22s ease;
position: relative;
}
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold) > .elementor-widget-wrap {
padding: 18px !important;
}
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold):hover {
transform: translateY(-4px);
border-color: rgba(56, 174, 232, .45);
background: rgba(16, 26, 44, .8);
}
/* the original Elementor column paint (dark bg + shadow) reads as a box-in-box
inside the dossier card — flatten it */
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold) > .elementor-widget-wrap {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* equal card rhythm: 2-line title slot + button row pinned to the bottom */
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold) > .elementor-widget-wrap {
display: flex;
flex-direction: column;
height: 100%;
}
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold) .elementor-widget-heading .elementor-heading-title {
min-height: 2.7em;
display: flex;
align-items: flex-end;
}
/* the unfold accordion made every card stretch when one expanded — retired.
Cards are teasers: clamped text, details live behind the section's Learn
More (Jake 2026-08-10). */
body.page-id-39225 .elementor-element-6006aace .jet-unfold__mask {
height: auto !important;
max-height: none !important;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.page-id-39225 .elementor-element-6006aace .jet-unfold__separator,
body.page-id-39225 .elementor-element-6006aace .jet-unfold__trigger {
display: none !important;
}
body.page-id-39225 .elementor-element-6006aace .jet-unfold__button,
body.page-id-39225 .elementor-element-6006aace .jet-unfold__button-wrap,
body.page-id-39225 .elementor-element-6006aace .jet-unfold__button-wrapper {
display: none !important;
}
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold) img {
border-radius: 10px;
filter: saturate(.88);
}
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold) h3,
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold) .elementor-heading-title {
font-size: 1.05rem !important;
font-weight: 800 !important;
}
body.page-id-39225 .elementor-element-6006aace p,
body.page-id-39225 .elementor-element-6006aace .jet-listing-dynamic-field__content {
color: var(--ccr-text-dim) !important;
line-height: 1.7;
}
body.page-id-39225 .jet-unfold__button,
body.page-id-39225 .jet-unfold__button * { color: #fff !important; }
/* [2026-08-13] 06 · announcements timeline RETIRED — section 421a9c9 removed
from homepage _elementor_data (Jake). Archived in
archive/finalist-announcements-timeline-retired-2026-08-13.css. A few inert
421a9c9 comma-parts remain in the shared section-h2/button/hairline rules
above — they match nothing and die at the next finalist consolidation. */
/* ---------- responsive ---------- */
@media (max-width: 767px) {
body.page-id-39225 .elementor-element-3e22446c { margin: 64px auto !important; padding: 28px 0 !important; }
body.page-id-39225 .elementor-element-6006aace .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-jet-unfold) { margin-bottom: 14px; }
}
/* ---------- static pages (sd-page): glass over deep space ---------- */
.sd-page { background: radial-gradient(ellipse 130% 80% at 50% -10%, #101a2c 0%, #05070d 60%) !important; }
.sd-page__card {
background: rgba(16, 26, 44, .6) !important;
border-color: rgba(255, 255, 255, .09) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 18px 60px rgba(0, 0, 0, .5) !important;
border-radius: 18px !important;
}
.sd-page__title { text-transform: uppercase; letter-spacing: .02em; }
/* policy section anchors (2.45.65): a #section jump lands below the sticky header, not under it */
.sd-page__card :is(h2, h3, h4)[id] { scroll-margin-top: calc(var(--sd-sticky-top) + 16px); }
/* policy anchor icons (2.45.66): a link icon after each section heading - shown on heading hover or link focus,
always on (dimmed) where there is no hover, i.e. touch screens */
.sd-page__card .sd-anchor {
display: inline-block;
vertical-align: middle;
margin-left: .45em;
line-height: 0;
color: var(--ccr-blue);
opacity: 0;
text-decoration: none;
border: 0;
box-shadow: none;
transition: opacity .15s ease;
}
.sd-page__card .sd-anchor svg { width: .7em; height: .7em; display: block; }
.sd-page__card :is(h2, h3, h4):hover .sd-anchor,
.sd-page__card .sd-anchor:focus-visible { opacity: 1; }
.sd-page__card .sd-anchor:hover { text-decoration: none; } /* main.css underlines card links on hover */
@media (hover: none) { .sd-page__card .sd-anchor { opacity: .55; } }
/* legal pages open with an exact duplicate of their title — hide there ONLY
(other native pages keep their distinct lead headings) */
body.page-id-39210 .sd-page__card > :is(h1, h2):first-child,
body.page-id-39214 .sd-page__card > :is(h1, h2):first-child,
body.page-id-361338 .sd-page__card > :is(h1, h2):first-child,
body.page-id-527513 .sd-page__card > :is(h1, h2):first-child,
body.page-id-260164 .sd-page__card > :is(h1, h2):first-child,
body.page-id-39210 .sd-page__card > :is(h1, h2):first-child + hr,
body.page-id-39214 .sd-page__card > :is(h1, h2):first-child + hr,
body.page-id-361338 .sd-page__card > :is(h1, h2):first-child + hr,
body.page-id-527513 .sd-page__card > :is(h1, h2):first-child + hr,
body.page-id-260164 .sd-page__card > :is(h1, h2):first-child + hr { display: none; }
/* native static-page content vocabulary */
.sd-page .sd-page__kicker,
.sd-page .sd-page__card .sd-page__kicker {
font-family: 'DM Mono', monospace !important;
font-size: .78rem !important;
font-weight: 500 !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
color: var(--ccr-blue) !important;
/* generic card-paragraph rules zero this out at lower specificity — the
52px above is what separates a kicker from the PREVIOUS section */
margin: 52px 0 0 !important;
}
/* whatever sits above a kicker contributes its own bottom margin, making the
gaps uneven — zero it so every kicker gap is exactly the 52px */
.sd-page__card :has(+ .sd-page__kicker) { margin-bottom: 0 !important; }
/* the kicker belongs to the heading beneath it — kill the heading's own top
margin so the pair reads as one unit */
.sd-page .sd-page__kicker + h2,
.sd-page .sd-page__kicker + h3 {
margin-top: 8px !important;
}
/* figure directly above a kicker: trim the figure's bottom so the section
block (image → kicker → heading) reads as one unit */
.sd-page .sd-page__figure + .sd-page__kicker { margin-top: 6px; }
/* 2.45.3: the guide CTA (.sd-guide__cta) is the same button. It used to have its own flat,
square, shadowless rule further down; Jake called that the old theme (2026-09-18). */
.sd-btn-inline,
.sd-guide__cta,
.sd-guide__cta:visited {
display: inline-block;
background: var(--ccr-accent);
color: #fff !important;
border-radius: 10px;
font-weight: 800;
font-size: .85rem;
line-height: 1.75; /* 2.45.3: pinned -- .sd-guide p sets 1.4 and the CTA inherited it (43px tall vs 48px on /services/) */
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none !important;
padding: 12px 24px;
box-shadow: 0 8px 26px rgba(210, 64, 52, .32);
transition: all .22s ease;
}
.sd-btn-inline:hover,
.sd-guide__cta:hover,
.sd-guide__cta:focus {
background: var(--ccr-blue);
color: #fff !important;
box-shadow: 0 14px 38px rgba(56, 174, 232, .45);
transform: translateY(-2px);
}
/* Multi-button row (2.43.2). The site's established pattern is one .sd-btn-inline per
paragraph (see /services/), which stacks fine but leaves 2-3 related CTAs with only a
whitespace gap and no vertical spacing when they wrap on a phone. Additive: nothing
existing uses this class. */
.sd-btn-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 18px 0 0;
}
.sd-page__figure { margin: 26px 0; }
.sd-page__figure img { border-radius: 14px; max-width: 100%; height: auto; }
.sd-page__list { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sd-page__list a { color: var(--ccr-blue); text-decoration: none; }
.sd-page__sep {
border: 0;
height: 1px;
margin: 44px 8%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12) 25%, rgba(255, 255, 255, .12) 75%, transparent);
}
.sd-page__map { margin: 26px 0 0; }
/* contact form (WPForms) in the finalist voice: unified dark fields, red submit */
.sd-page .wpforms-form .wpforms-field label.wpforms-field-label {
color: #eef2f8;
font-size: .92rem;
font-weight: 700;
margin-bottom: 6px;
}
html body .sd-page .wpforms-form .wpforms-field input,
html body .sd-page .wpforms-form .wpforms-field textarea,
.sd-page form[id^="wpforms-form"] .wpforms-field input,
#wpforms-form-2048 .wpforms-field input,
#wpforms-form-2048 .wpforms-field textarea {
background: rgba(255, 255, 255, .05) !important;
border: 1px solid rgba(255, 255, 255, .16) !important;
border-radius: 10px !important;
color: #eef2f8 !important;
padding: 12px 14px !important;
max-width: 100% !important;
width: 100% !important;
box-shadow: none !important;
transition: border-color .2s ease;
}
html body .sd-page .wpforms-form .wpforms-field input:focus,
html body .sd-page .wpforms-form .wpforms-field textarea:focus,
#wpforms-form-2048 .wpforms-field input:focus,
#wpforms-form-2048 .wpforms-field textarea:focus {
border-color: rgba(56, 174, 232, .65) !important;
outline: none !important;
}
.sd-page .wpforms-form textarea { min-height: 150px; }
.sd-page .wpforms-form button[type="submit"],
.sd-page .wpforms-form .wpforms-submit {
background: var(--ccr-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
font-weight: 800 !important;
font-size: .85rem !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
padding: 13px 30px !important;
box-shadow: 0 8px 26px rgba(210, 64, 52, .32) !important;
transition: all .22s ease !important;
cursor: pointer;
}
.sd-page .wpforms-form button[type="submit"]:hover,
.sd-page .wpforms-form .wpforms-submit:hover {
background: var(--ccr-blue) !important;
box-shadow: 0 14px 38px rgba(56, 174, 232, .45) !important;
transform: translateY(-2px);
}
.sd-page__map iframe { border-radius: 14px; }
/* ---------- hub pages (Store Policies, Guides): intro + child card grid ---------- */
.sd-hub__intro {
max-width: 760px;
margin: 0 auto 40px;
padding: 0 22px;
color: var(--ccr-text-dim);
font-size: 1.08rem;
line-height: 1.8;
text-align: center;
}
.sd-hub__grid {
max-width: 1080px;
margin: 0 auto 80px;
padding: 0 22px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}
.sd-hub__card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px;
border-radius: 16px;
background: rgba(16, 26, 44, .55);
border: 1px solid rgba(255, 255, 255, .07);
text-decoration: none;
transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.sd-hub__card:hover {
transform: translateY(-4px);
border-color: rgba(56, 174, 232, .45);
background: rgba(16, 26, 44, .8);
}
.sd-hub__chip {
align-self: flex-start;
font-family: 'DM Mono', monospace;
font-size: .68rem;
font-weight: 500;
letter-spacing: .18em;
padding: 4px 10px;
border-radius: 99px;
border: 1px solid rgba(255, 255, 255, .18);
color: #dbe3f0;
}
.sd-hub__chip--start-here { border-color: rgba(56, 174, 232, .5); color: var(--ccr-blue); }
.sd-hub__chip--live-data { border-color: rgba(255, 138, 69, .55); color: #ff9a5a; }
.sd-hub__card-title { font-size: 1.12rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.35; }
.sd-hub__card-desc { color: var(--ccr-text-dim); font-size: .92rem; line-height: 1.65; margin: 0; }
.sd-hub__card-cta { margin-top: auto; color: var(--ccr-blue); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* ---------- woo notices in the dark voice (site-wide) ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error li,
.woocommerce-error {
background: rgba(16, 26, 44, .92) !important;
color: #eef2f8 !important;
border-top-color: var(--ccr-blue) !important;
border-radius: 0 0 12px 12px;
}
.woocommerce-message a,
.woocommerce-info a { color: var(--ccr-blue) !important; }
.woocommerce-error,
.woocommerce-error li { border-top-color: var(--ccr-accent) !important; }
.woocommerce-message::before { color: var(--ccr-blue) !important; }
.woocommerce-error::before,
.woocommerce-error li::before { color: var(--ccr-accent) !important; }
/* =============================================================================
PRODUCT TILES (global) — the shared jet-woo listing card, redesigned in the
finalist voice. Applies wherever product tiles render: cart loadout, shop
archive, category pages, related products. (Kicks off the shop-card look.)
============================================================================= */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) {
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
overflow: hidden;
transition: transform .22s ease, border-color .22s ease;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart):hover {
transform: translateY(-4px);
border-color: rgba(56, 174, 232, .4);
z-index: 2; /* lift paints above neighbors */
}
/* the jet grid ships grid-collapse-gap — row spacing so the hover lift
never overlaps the row above (Jake 2026-08-11). The listing is FLEX
(items sized flex-basis: 100%/var(--columns)), so adding column-gap
alone makes rows wrap one short — re-derive the item basis from jet's
own --columns minus the gap share. One rule, every breakpoint. */
.jet-listing-grid__items:has(.jet-woo-builder-archive-add-to-cart) {
row-gap: 18px !important;
column-gap: 12px !important;
}
.jet-listing-grid__items:has(.jet-woo-builder-archive-add-to-cart) > .jet-listing-grid__item {
flex-basis: calc(100% / var(--columns) - 12px * (var(--columns) - 1) / var(--columns)) !important;
max-width: calc(100% / var(--columns) - 12px * (var(--columns) - 1) / var(--columns)) !important;
}
/* desktop runs 4-up (Jake 2026-08-11: 5-up made the photos too small) —
override the --columns var; the basis rule above follows automatically.
!important: the Elementor template CSS (post-39372) sets --columns:5 at
(0,4,0) widget-scope specificity. Media-scoped so tablet-2/mobile-1 keep
their own counts. */
@media (min-width: 1025px) {
.jet-listing-grid__items.grid-col-desk-5:has(.jet-woo-builder-archive-add-to-cart) { --columns: 4 !important; }
}
/* one paint layer: inner template sections go transparent */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-section,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-wrap,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-column {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* product photo: white framed tile, inset from the card edge. 5:4 frame —
the original square was ~half the card height and product shots are almost
all wider than tall, so the cap trims pure white letterbox (Jake 2026-08-11:
tiles too tall) */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-image img,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-thumbnail img {
background: #fff;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .06);
object-fit: contain;
width: 100% !important;
/* !important: the listing template's Elementor CSS (post-39820,
.elementor-element-94a81a8 img) pins height:240px */
height: auto !important;
aspect-ratio: 5 / 4 !important;
}
/* the wrapper (link/figure) SHRINK-WRAPS to the image's width attribute —
portrait products ship a 206px-wide medium, so their img rendered narrower
than the column and the 5:4 frame came out ~6px shorter (Magpul MOE-K2
family; Jake 2026-08-12). Full-width the whole chain. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-image a,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-image figure,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-thumbnail a,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-thumbnail figure {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
/* title */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .bcm-loop-title-text,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .bcm-loop-title-text a,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-title,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-title a {
color: #eef2f8 !important;
font-weight: 700 !important;
font-size: .95rem !important;
line-height: 1.32 !important;
text-decoration: none !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .bcm-loop-title-text a:hover,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-title a:hover {
color: var(--ccr-blue) !important;
}
/* "Online Inventory" / "In Store" chip: quiet mono badge, not a red alarm.
(Plain declarations — the loop markup is ours now, class-only, via
inc/catalog-labels.php; the labeler's inline styles no longer reach it.) */
.jet-listing-grid__item span.bcm-loop-prefix {
display: inline-block;
background: transparent;
border: 1px solid rgba(56, 174, 232, .45);
color: var(--ccr-blue);
font-family: 'DM Mono', monospace;
font-size: .6rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 99px;
margin-top: 4px;
white-space: nowrap;
}
/* price in the mono voice */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-product-price,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price .woocommerce-Price-amount {
font-family: 'DM Mono', monospace !important;
color: #fff !important;
font-size: 1.02rem !important;
font-weight: 700 !important;
}
/* stock status: mono caps, keep the state colors. One line ALWAYS — the
longest state ("Only 4 left in stock") was wrapping, which gave Only-X and
out-of-stock cards extra height that In-stock cards didn't have. Tighter
tracking + full-width widget (the template pins it narrower) make it fit. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-stock-status,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-stock-status *,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-stock-status,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-stock-status * {
font-family: 'DM Mono', monospace !important;
font-size: .76rem !important; /* .68 → .76 Jake 2026-08-17 ("a bit" bigger) */
letter-spacing: .04em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
/* explicit line box: an inherited sub-1 line-height + any overflow clip
was slicing the glyphs horizontally mid-height */
line-height: 1.5 !important;
height: auto !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-stock-status {
width: 100% !important;
max-width: 100% !important;
overflow: visible;
height: auto !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-stock-status p.stock,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-stock-status p.stock { margin: 0 !important; }
/* add to cart: the family red */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .add_to_cart_button,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-jet-woo-builder-archive-add-to-cart .button {
background: var(--ccr-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
font-weight: 800 !important;
font-size: .78rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
padding: 11px 12px !important;
box-shadow: none !important;
transition: all .2s ease !important;
white-space: nowrap !important;
}
/* Hover mirrors the paint rule's FULL selector pair above, not just the
.add_to_cart_button half. Why it matters (Jake, 2026-08-16 — "the View
Product button on Shop doesn't have the blue hover"): out-of-stock and
external products render "View Product" / "Select options", which carry
.button but NOT .add_to_cart_button. Those only matched the paint rule's
second selector — (0,5,0) and !important — so the red base outranked the
(0,3,1) hover fix down at ~L4590 and the button never changed colour. Adding
:hover here makes these (0,6,0), which beats the base paint outright.
General rule: a hover rule must out-specify EVERY selector that paints the
element, not just the one it was written next to. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .add_to_cart_button:hover,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .add_to_cart_button:focus-visible,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-jet-woo-builder-archive-add-to-cart .button:hover,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-jet-woo-builder-archive-add-to-cart .button:focus-visible {
background: var(--ccr-blue) !important;
color: #fff !important;
transform: translateY(-2px);
}
/* sale badge reads oversized in the grids (Jake 2026-08-12 desktop 4-up;
2026-08-14 mobile cart loadout) — compact at ALL widths. The wishlist/
compare circles below stay desktop-only (mobile has its own 32px rule). */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-product-badge {
font-size: .8rem !important;
padding: 5px 10px !important;
margin: 10px 0 0 10px !important;
border-radius: 6px !important;
}
@media (min-width: 768px) {
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-compare-button__link {
width: 38px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link svg,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-compare-button__link svg {
width: 17px !important;
height: 17px !important;
}
}
/* wishlist / compare affordances: quiet ghost circles */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-compare-button__link {
background: rgba(10, 15, 28, .75) !important;
border: 1px solid rgba(255, 255, 255, .15) !important;
color: #dbe3f0 !important;
border-radius: 99px !important;
transition: all .2s ease !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:hover,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-compare-button__link:hover {
border-color: var(--ccr-blue) !important;
color: var(--ccr-blue) !important;
}
/* desktop: the template pins the image WIDGET to ~80% width — let the photo
fill the tile (Jake 2026-08-11: images too small on desktop; mobile is
sized separately and stays as-is) */
@media (min-width: 768px) {
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-image,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-product-thumbnail {
width: 100% !important;
max-width: 100% !important;
}
}
/* every content widget spans the full card width, text flush left with the
image edge — the template centered ~80%-wide widgets, which read as random
mid-card alignment and wasted fitting room (Jake 2026-08-11). The absolute
overlays (wishlist/compare circles, sale badge) keep their own geometry. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-wrap > .elementor-widget:not(.elementor-widget-jet-wishlist-button):not(.elementor-widget-jet-compare-button):not(.elementor-widget-jet-woo-builder-archive-sale-badge) {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left;
}
/* …and the CONTAINER inside each widget: the template ALSO puts horizontal
margins/paddings there (20px at its breakpoints) — zeroing the widget alone
left text sitting right of the image edge (Jake 2026-08-12, all listings).
All widths; overlays excluded same as above. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-wrap > .elementor-widget:not(.elementor-widget-jet-wishlist-button):not(.elementor-widget-jet-compare-button):not(.elementor-widget-jet-woo-builder-archive-sale-badge) > .elementor-widget-container {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ---------- tile internals normalized: fixed slots, ledger alignment ---------- */
.jet-listing-grid__items { align-items: stretch; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) { height: 100%; display: flex; flex-direction: column; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) > div { display: flex; flex-direction: column; flex: 1; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-wrap {
display: flex !important;
flex-direction: column;
flex: 1;
}
/* title: three-line slot, clamped (slot height follows the 1.32 line-height;
the 3-line clamp itself stays — DB-backed, 54% of titles need it).
The loop markup is class-only now (inc/catalog-labels.php) — no inline
styles to fight. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .bcm-loop-title-text {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3.96em;
}
/* chip line: constant height whether or not a chip renders */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .bcm-loop-title-wrap { min-height: 1.5em; }
/* price + stock: single fixed lines */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-product-price { min-height: 1.75em; margin-top: 2px !important; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-stock-status { min-height: 1.4em; }
/* button pinned to the card floor */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-add-to-cart {
margin-top: auto !important;
padding-top: 8px;
}
/* sale prices: Woo renders old new, which was wrapping
to two lines and making sale tiles taller than the row. One fixed line:
old price small/dim inline, sale price keeps the mono voice (the SALE
badge widget already flags the deal). When a del is present BOTH prices
size down so the pair fits the tile instead of clipping at its edge. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-product-price {
width: 100% !important;
max-width: 100% !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-product-price,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price {
white-space: nowrap;
overflow: hidden;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price:has(del) .woocommerce-Price-amount {
font-size: .85rem !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price del,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price del .woocommerce-Price-amount,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price del .woocommerce-Price-currencySymbol {
display: inline !important;
font-size: .72rem !important;
color: #9aa7bd !important;
font-weight: 500 !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price ins,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price ins .woocommerce-Price-amount,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price ins .woocommerce-Price-currencySymbol {
text-decoration: none !important;
color: #fff !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-price ins { margin-left: 4px; }
/* mobile: single-column grid — no cross-card alignment to preserve, so the
fixed slots collapse and the card hugs its content (Jake 2026-08-11: too
much dead space). Flatter image, tighter widget gaps and inset. */
@media (max-width: 767px) {
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .bcm-loop-title-text { min-height: 0; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .bcm-loop-title-wrap { min-height: 0; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-product-price { min-height: 0; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-stock-status { min-height: 0; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-image img,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-woo-builder-archive-product-thumbnail img {
aspect-ratio: 16 / 10 !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget:not(:last-child) { margin-bottom: 8px !important; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-section { padding: 14px 16px !important; }
/* breathing room around the title — the collapse round left it sitting
directly on the photo (Jake 2026-08-11 mobile screenshots) */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-shortcode,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-product-title {
margin-top: 10px !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-add-to-cart {
margin-top: 10px !important;
padding-top: 0;
}
}
/* the DM Mono dollar sign is too spindly — solid DM Sans symbol, mono digits
(applies everywhere prices went mono: tiles, cart rows, totals).
Weight was 800 and read CHUNKY on the tiles, where the price is smallest
(Jake, 2026-08-14) → tried 700 (matching the product page + checkout ledger),
now trying 600. NOTE: the product page and checkout ledger still declare 700
in their own rules — if 600 sticks, those two want the same treatment so the
symbol reads identically everywhere. */
.jet-listing-grid__item .woocommerce-Price-currencySymbol,
body.woocommerce-cart .woocommerce-Price-currencySymbol,
.cart_totals .woocommerce-Price-currencySymbol {
font-family: 'DM Sans', sans-serif !important;
font-weight: 600 !important;
font-size: .9em;
margin-right: 1px;
}
/* add-to-cart AJAX feedback: spinner rides inside the button, right edge */
.jet-listing-grid__item .add_to_cart_button { position: relative !important; }
.jet-listing-grid__item .add_to_cart_button.loading { opacity: .75; }
.jet-listing-grid__item .add_to_cart_button.loading::after {
position: absolute !important;
top: 50% !important;
right: 10px !important;
left: auto !important;
bottom: auto !important;
margin: -.5em 0 0 !important;
}
.jet-listing-grid__item .add_to_cart_button.added::after {
position: absolute !important;
top: 50% !important;
right: 10px !important;
left: auto !important;
margin: -.5em 0 0 !important;
}
/* spinner centered in its button (Jake 2026-09-24). The ::after inherited the button line-height (18.7px box)
against a -.5em (6.2px) pull-up, so the cog sat 3px low on tiles; the PDP button kept woo's top .618em and sat
9px high. A square 1em box centered on the button fixes both and makes the spin turn about the cog's center. */
.jet-listing-grid__item .add_to_cart_button.loading::after,
.jet-listing-grid__item .add_to_cart_button.added::after,
body.single-product .sd-pp__atc.loading::after,
body.single-product .sd-pp__atc.added::after {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
left: auto !important;
width: 1em !important;
height: 1em !important;
line-height: 1 !important;
text-align: center !important;
margin: -.5em 0 0 !important;
transform-origin: 50% 50% !important;
}
body.single-product .sd-pp__atc { position: relative; }
body.single-product .sd-pp__atc.loading::after,
body.single-product .sd-pp__atc.added::after { right: 16px !important; }
/* the "View cart" link that appears after adding: quiet blue, centered */
.jet-listing-grid__item .added_to_cart.wc-forward {
display: block !important;
text-align: center;
color: var(--ccr-blue) !important;
font-size: .78rem !important;
font-weight: 700 !important;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none !important;
margin-top: 8px;
}
/* ---------- back to top (mobile only): glass circle, chevron SVG ----------
body button.sd-backtop = (0,1,2): the KIT's `button` rule at (0,1,1) forces
border-radius:0 / padding:15px 35px / its red background onto any weaker
selector (the runbook rule applies to OUR buttons too) */
body button.sd-backtop {
display: none;
position: fixed;
right: 16px;
bottom: 18px;
z-index: 90;
width: 48px;
height: 48px;
border-radius: 999px;
background: rgba(13, 20, 36, .72);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(56, 174, 232, .5);
color: #9fd8f5;
padding: 0;
background-color: rgba(13, 20, 36, .72);
box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(10px) scale(.9);
transition: opacity .25s ease, transform .25s ease, border-color .2s ease, color .2s ease;
}
@media (max-width: 1024px) {
body button.sd-backtop { display: flex; align-items: center; justify-content: center; }
}
body button.sd-backtop.is-visible {
opacity: 1;
pointer-events: auto;
transform: none;
}
/* tap leaves :focus stuck on mobile and the KIT's button:focus (0,2,1)
re-squares it — restate the face on every interactive state */
body button.sd-backtop:hover,
body button.sd-backtop:focus,
body button.sd-backtop:active {
border-radius: 999px;
padding: 0;
background: rgba(13, 20, 36, .8);
background-color: rgba(13, 20, 36, .8);
border-color: var(--ccr-blue);
color: #fff;
outline: none;
}
body button.sd-backtop:active {
transform: scale(.9);
}
@media (max-width: 767px) {
/* (0,5,0)+ — must out-rank the tile system's (0,4,0)!important ATC rule */
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-jet-woo-builder-archive-add-to-cart .button,
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .button {
font-size: .68rem !important;
padding: 9px 8px !important;
letter-spacing: .04em !important;
white-space: nowrap !important;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* mobile density: one small uniform section inset for ALL tile cards */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-section {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* longest stock state ("ONLY 1 LEFT IN STOCK") must fit the narrow tiles */
body.single-product .sd-pp__related .jet-listing-grid__item p.stock,
body.single-product .sd-pp__related .jet-listing-grid__item p.stock.in-stock,
body.single-product .sd-pp__related .jet-listing-grid__item p.stock.out-of-stock {
font-size: .62rem !important;
letter-spacing: .04em !important;
white-space: nowrap !important;
}
/* 2-col grid: cross-card alignment matters again — restore the ledger
slots the 1-col mobile collapse zeroes (2- vs 3-line titles staggered
the chip/price/stock/CTA rows; Jake) and re-pin the CTA to the floor */
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .bcm-loop-title-text { min-height: 3.96em; }
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .bcm-loop-title-wrap { min-height: 1.5em; }
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-product-price { min-height: 1.75em; }
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-stock-status { min-height: 1.4em; }
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-add-to-cart { margin-top: auto !important; padding-top: 10px; }
/* wishlist circle at tile scale (the 38px compact sizing is desktop-only;
the template default is oversized for ~170px tiles) */
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link,
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-compare-button__link {
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link svg,
.sd-pp__related .jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-compare-button__link svg {
width: 14px !important;
height: 14px !important;
}
}
/* =============================================================================
GUIDE ARTICLES (sd-guide) — native port 2026-08-13. Values measured off the
live Elementor render pre-conversion (h1 56 Outfit / h2 42 / kicker 13px
#0177E3 ls2 caps / body 18px DM Sans / CTA #d24034 12x24 radius 0, container
1300). FAQ cards + numbered steps arrive inline-styled inside the ported
HTML — no rules needed here. Rank cards are cc-ammo-deals plugin CSS.
============================================================================= */
.sd-guide {
max-width: 1300px;
margin: 0 auto;
padding: 44px 20px 80px;
/* loose text in ported inline-styled divs (steps/FAQ) must inherit white +
body scale — the Elementor text-editor wrapper used to supply these */
color: #fff;
font-size: 18px;
line-height: 1.4;
}
.sd-guide__section { margin: 0 0 68px; }
.sd-guide__section:last-child { margin-bottom: 0; }
.sd-guide h1,
.sd-guide h2,
.sd-guide h3 {
font-family: 'Outfit', sans-serif;
font-weight: 600;
line-height: 1.2;
color: #fff;
margin: 0 0 20px;
}
.sd-guide h1 { font-size: clamp(34px, 6vw, 56px); }
.sd-guide h2 { font-size: clamp(27px, 4.5vw, 42px); }
.sd-guide h3 { font-size: clamp(22px, 3vw, 28px); }
.sd-guide p.sd-guide__kicker {
color: #0177E3;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 0 20px;
}
.sd-guide p { font-size: 18px; line-height: 1.4; color: #fff; margin: 0 0 20px; }
.sd-guide p:last-child { margin-bottom: 0; }
/* 2.45.5: the red-dot footprints guide is the first guide with real tables, a bullet list and a dated note.
Tables scroll sideways on a phone instead of squeezing four columns into 360px. */
.sd-guide p.sd-guide__note { font-size: 15px; line-height: 1.5; opacity: .68; margin: -6px 0 22px; }
.sd-guide ul { margin: 0 0 22px; padding: 0 0 0 22px; color: #fff; font-size: 18px; line-height: 1.5; }
.sd-guide ul li { margin: 0 0 10px; }
.sd-guide ul li::marker { color: var(--ccr-accent-hover); }
/* 2.45.7: a site-wide table reset outside this theme paints 1px gray (rgba(128,128,128,.5)) on every cell's
top/left/right and zebra-stripes odd rows; on top of our bottom rules that read as two schemes at once. Reset every
edge and background explicitly, then draw one scheme: horizontal rules only, tinted header, rounded wrapper. */
.sd-guide .sd-guide__table { margin: 0 0 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.02); }
.sd-guide .sd-guide__table table { width: 100%; min-width: 720px; border-collapse: collapse; border: 0; margin: 0; color: #fff; font-size: 15px; line-height: 1.5; background: transparent; }
.sd-guide .sd-guide__table thead, .sd-guide .sd-guide__table tbody, .sd-guide .sd-guide__table tr { border: 0; background: transparent; }
.sd-guide .sd-guide__table th, .sd-guide .sd-guide__table td { border: 0; background: transparent; padding: 12px 14px; vertical-align: top; text-align: left; }
.sd-guide .sd-guide__table th { font-family: Outfit, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; border-bottom: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); white-space: nowrap; }
.sd-guide .sd-guide__table td { border-bottom: 1px solid rgba(255,255,255,.08); }
/* Hello Elementor's reset wins the header's top edge with `table thead:first-child tr:first-child th { border-block-start: ... }` (0,2,4) -- out-rank it */
.sd-guide .sd-guide__table thead:first-child tr:first-child th, .sd-guide .sd-guide__table thead tr:first-child td, .sd-guide .sd-guide__table thead th { border-top: 0; border-block-start: 0; }
.sd-guide .sd-guide__table tbody tr:last-child td { border-bottom: 0; }
.sd-guide .sd-guide__table tbody tr:nth-child(odd) td, .sd-guide .sd-guide__table tbody tr:nth-child(even) td { background: transparent; }
.sd-guide .sd-guide__table td:first-child { font-weight: 600; min-width: 150px; }
.sd-guide__table td a { color: var(--ccr-accent-hover); text-decoration: underline; text-underline-offset: 2px; }
/* a11y (backlog #17): --ccr-accent on #05070d is 4.34:1 (fails AA) and the
links were color-only against white body copy (SC 1.4.1) — lighter red
family + underline. Hover steps to --ccr-accent-2 (~7:1). */
.sd-guide a:not(.sd-guide__cta) { color: var(--ccr-accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.sd-guide a:not(.sd-guide__cta):hover { color: var(--ccr-accent-2); }
.sd-guide__cta-row { margin: 10px 0 0; } /* 2.45.3: room for the button's shadow */
/* .sd-guide__cta is styled with .sd-btn-inline (top of file) since 2.45.3. */
@media (max-width: 767px) {
.sd-guide { padding: 28px 14px 56px; }
.sd-guide__section { margin-bottom: 48px; }
.sd-guide p { font-size: 16px; }
.sd-guide ul { font-size: 16px; }
.sd-guide .sd-guide__table table { font-size: 14px; }
}
/* =============================================================================
404 (sd-404) — native port 2026-08-13, replaces the JetThemeCore template.
Same composition (big red 404 / title / blurb / search / stacked CTAs);
search input upgraded from legacy white to the family glass voice.
============================================================================= */
.sd-404 {
max-width: 720px;
margin: 0 auto;
padding: 72px 20px 110px;
text-align: center;
}
.sd-404__code {
font-family: 'Outfit', sans-serif;
font-size: clamp(84px, 16vw, 132px);
font-weight: 700;
line-height: 1;
color: var(--ccr-accent);
margin: 0 0 10px;
}
.sd-404__title {
font-family: 'Outfit', sans-serif;
font-size: clamp(28px, 5vw, 40px);
font-weight: 600;
color: #fff;
margin: 0 0 14px;
}
.sd-404__blurb {
color: var(--ccr-text-dim);
font-size: 1.02rem;
line-height: 1.55;
margin: 0 auto 30px;
max-width: 560px;
}
.sd-404__search {
display: flex;
gap: 10px;
justify-content: center;
margin: 0 auto 40px;
max-width: 440px;
}
.sd-404__search input[type="search"] {
flex: 1 1 auto;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 10px;
color: var(--ccr-text);
font-size: .95rem;
padding: 12px 16px;
outline: none;
}
.sd-404__search input[type="search"]::placeholder { color: #9aa7bd; }
.sd-404__search input[type="search"]:focus { border-color: var(--ccr-blue); }
.sd-404__search button {
background: var(--ccr-accent);
border: none;
border-radius: 10px;
color: #fff;
font-size: .9rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
padding: 12px 22px;
cursor: pointer;
transition: background .18s ease;
}
.sd-404__search button:hover,
.sd-404__search button:focus { background: var(--ccr-accent-hover); border-radius: 10px; color: #fff; }
.sd-404__links {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.sd-404__btn,
.sd-404__btn:visited {
display: block;
width: min(260px, 100%);
background: var(--ccr-accent);
border-radius: 10px;
color: #fff;
font-size: .92rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
padding: 13px 20px;
transition: background .18s ease;
}
.sd-404__btn:hover,
.sd-404__btn:focus { background: var(--ccr-accent-hover); color: #fff; }
/* =============================================================================
NATIVE GRID SHELL (sd-grid / sd-shop) — JWB rebuild arc 2026-08-14.
Replaces JetEngine frontend.css's grid base (flex + --columns from the
grid-col-* classes) for natively rendered tiles; the whole tile design
system above keys off the same jet class contract and applies unchanged.
Values match jet's: flex track, breakpoint column vars.
============================================================================= */
.sd-grid .jet-listing-grid__items {
display: flex;
flex-wrap: wrap;
}
@media (min-width: 1025px) {
.sd-grid .grid-col-desk-4 { --columns: 4; }
.sd-grid .grid-col-desk-5 { --columns: 5; }
.sd-grid .grid-col-desk-6 { --columns: 6; }
}
@media (min-width: 768px) and (max-width: 1024px) {
.sd-grid .grid-col-tablet-2 { --columns: 2 !important; }
.sd-grid .grid-col-tablet-3 { --columns: 3 !important; }
}
@media (max-width: 767px) {
.sd-grid .grid-col-mobile-1 { --columns: 1 !important; }
.sd-grid .grid-col-mobile-2 { --columns: 2 !important; }
}
/* ---------- shop archive layout (replaces template 39372's arrangement) ---------- */
.sd-shop__head {
max-width: 1440px;
margin: 0 auto;
padding: clamp(26px, 4vw, 44px) 20px 6px;
}
.sd-shop__title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .02em;
color: #fff;
margin: 0;
}
.sd-shop__desc { color: var(--ccr-text-dim); font-size: .9rem; max-width: 860px; margin: 8px 0 0; }
/* ammo archives link their buying guides (2.43.0) */
.sd-shop__guides { margin: 10px 0 0; font-size: .84rem; color: var(--ccr-text-dim); }
.sd-shop__guides-label {
font-family: 'DM Mono', monospace;
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
}
.sd-shop__guides a { color: var(--ccr-blue); text-decoration: none; }
.sd-shop__guides a:hover,
.sd-shop__guides a:focus-visible { text-decoration: underline; }
.sd-shop__guides-sep { opacity: .5; }
.sd-shop__wrap {
display: grid;
grid-template-columns: 330px minmax(0, 1fr);
gap: 10px 28px;
align-items: start;
max-width: 1440px;
margin: 0 auto;
padding: 10px 20px 50px;
}
.sd-shop__toolbar { grid-column: 2; grid-row: 1; min-width: 0; }
.sd-shop__side { grid-column: 1; grid-row: 1 / span 3; min-width: 0; }
.sd-shop__main { grid-column: 2; grid-row: 2; min-width: 0; }
.sd-shop__pagination { grid-column: 2; grid-row: 3; }
.sd-shop__sortm { display: none; }
@media (max-width: 1024px) {
/* single column, round-4 order: toolbar → filters → grid → pagination */
.sd-shop__wrap { grid-template-columns: 1fr; }
.sd-shop__toolbar, .sd-shop__side, .sd-shop__main, .sd-shop__pagination { grid-column: 1; grid-row: auto; }
/* Sort after the filters (Jake 2026-09-28): on one column the sort sat above the search box and filters, so the
first control offered was reordering 84K products. Narrow first, then order the results: the toolbar
wrappers step aside (display: contents) so the title, sort and chips join this grid, and order puts the sort
between the filters and the grid, full width. Desktop (sort top-right beside the count) is untouched. */
.sd-shop__toolbar,
.sd-shop__toolbar .sd-shopt,
.sd-shop__toolbar .sd-shopt__row { display: contents; }
.sd-shop__toolbar .sd-shopt__title { order: 1; }
.sd-shop__toolbar .sd-shopt__chips { order: 2; margin-top: 0; }
.sd-shop__side { order: 3; }
.sd-shop__toolbar .sd-shopt__sort { order: 4; }
.sd-shop__main { order: 5; }
.sd-shop__pagination { order: 6; }
.sd-shop__toolbar .sd-shopt__sort select { display: block; width: 100%; }
/* even spacing in the one-column stack (grid gap 10px): title/chips -> search 14px; search -> filters -> sort ->
grid 12px each. The filters form keeps an 18px margin for the old stack (filters -> grid); here the sort follows. */
.sd-shop__side { margin-top: 4px; }
.sd-shop__side .sd-shopf { margin-bottom: 2px; }
.sd-shop__toolbar .sd-shopt__sort { margin-bottom: 2px; }
/* Tab order follows the layout (2.45.63): the sort is also rendered after the filters (.sd-shop__sortm) and the
toolbar copy is display: none, so keyboard and screen-reader order match what is seen. The rules above still
place the toolbar copy for pages cached before the change, which have no .sd-shop__wrap--sortm. */
.sd-shop__wrap--sortm .sd-shop__toolbar .sd-shopt__sort { display: none; }
.sd-shop__sortm { display: block; order: 4; margin-bottom: 2px; min-width: 0; }
.sd-shop__sortm select { display: block; width: 100%; }
}
.sd-shop__none { color: var(--ccr-text-dim); padding: 30px 0; }
/* badge paint: was jet-woo-builder widget CSS (dies at kill #7) — finalist owns it */
.sd-grid .jet-woo-product-badge,
.elementor-39820 .jet-woo-product-badge {
display: inline-block;
background: var(--ccr-blue) !important;
/* a11y (backlog #17): #fff here was 2.05:1 — near-black passes 7.4:1 */
color: #05070d !important;
font-weight: 700;
line-height: 1.2;
}
/* loop-button hover: the old class-agnostic blue hover was jet-woo-builder
widget CSS — View Product / Select options buttons lack .add_to_cart_button
so the global rule misses them. Cover every loop button variant. */
.jet-woo-builder-archive-add-to-cart a.button:hover,
.jet-woo-builder-archive-add-to-cart a.button:focus {
background: var(--ccr-blue) !important;
border-color: var(--ccr-blue) !important;
color: #fff !important;
}
/* wishlist circle recolor (Jake 2026-08-14: keep design, change coloring):
glass circle + hairline (back-to-top family), blue hover, accent added */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link {
background: rgba(16, 26, 44, .55) !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
color: #dbe3f0 !important;
backdrop-filter: blur(4px);
transition: border-color .18s ease, color .18s ease;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:hover {
border-color: var(--ccr-blue) !important;
color: var(--ccr-blue) !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:has(.jet-wishlist-button__state-added:not([style*="none"])) { color: #dbe3f0; }
.jet-wishlist-button__state-added .jet-cw-icon { color: var(--ccr-accent); }
/* wishlist recolor take 2: jet-cw paints the circle on the PLANE layer divs
inside the link (absolute bg layers) — the 2.22.7 link paint sat underneath.
Planes carry the glass look; link keeps the heart color/hover. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__plane {
background: rgba(16, 26, 44, .55) !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
border-radius: 50% !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:hover .jet-wishlist-button__plane {
border-color: var(--ccr-blue) !important;
}
/* wishlist take 3 (Jake: no visible difference — the glass navy matched the
old disc): WHITE circle + navy heart, unmistakably new. Hover = blue heart,
added = red filled heart (rules above). */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__plane {
background: #fff !important;
border: 1px solid rgba(15, 23, 42, .14) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
color: #16233d !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link { color: #16233d !important; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:hover { color: var(--ccr-blue) !important; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:hover .jet-wishlist-button__plane { border-color: var(--ccr-blue) !important; }
/* wishlist take 4 (Jake: white was worse): the dark disc he liked, coloring
change carried by the ACCENT-RED heart. Hover = blue heart + border.
Added = filled red (existing rule). */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link,
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__plane {
background: rgba(16, 26, 44, .82) !important;
border: 1px solid rgba(255, 255, 255, .16) !important;
box-shadow: none;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link { color: var(--ccr-accent) !important; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:hover { color: var(--ccr-blue) !important; }
/* wishlist FINAL (Jake round): cyan heart at rest (joins badge/chip blue —
red stays reserved for ATC), RED on hover (previews the saved state) and
red-filled once added. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link { color: var(--ccr-blue) !important; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:hover { color: var(--ccr-accent) !important; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:hover .jet-wishlist-button__plane { border-color: var(--ccr-accent) !important; }
/* wishlist FINAL-2 (Jake: double ring artifact + wants transparent bg):
planes killed (they were the doubled outlines), bare heart — transparent,
no border, drop-shadow for legibility on white photos. Cyan rest / red
hover+added unchanged. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__plane { display: none !important; }
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link svg {
width: 19px !important;
height: 19px !important;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
/* wishlist FINAL-3 (Jake: keep the circle outline, transparent fill):
ONE ring on the link (planes stay dead — they were the double ring),
cyan ring+heart at rest, red ring+heart on hover, red filled when added. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link {
border: 1px solid rgba(56, 174, 232, .6) !important;
border-radius: 50% !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link:hover {
border-color: var(--ccr-accent) !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__link svg {
width: 17px !important;
height: 17px !important;
}
/* heart outline-only at rest (a stack rule force-fills SVGs; CSS fill beats
the fill="none" attribute) — added state stays filled */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .jet-wishlist-button__state-normal svg {
fill: none !important;
stroke: currentColor !important;
}
/* OOS stock dot: its rule family (main.css ~735) matches via the inner
stock-status wrapper but was left out of the .3em spacing rule (line 680
covers in-stock/backorder only) — dot hugged the text (Jake) */
.jet-woo-builder-archive-product-stock-status .stock.out-of-stock::before { margin-right: .3em !important; }
/* stock dot gap: the legacy .3em margin computes on the dot's 0.7em font
(~2px — invisible, Jake). Fixed 6px, every state, tiles only. */
.sd-grid .jet-woo-builder-archive-product-stock-status .stock::before,
.cc-xsell .jet-woo-builder-archive-product-stock-status .stock::before { margin-right: 6px !important; }
/* ---------- native wishlist page (sd-wl) — last JWB consumer retired ---------- */
.sd-wl__hero { position: relative; text-align: center; padding: clamp(34px, 5vw, 58px) 20px 8px; }
.sd-wl__title {
font-size: clamp(2rem, 4.2vw, 3.1rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .02em;
color: #fff;
margin: 0;
}
.sd-wl .jet-breadcrumbs__wrap { display: flex; justify-content: center; align-items: center; gap: 10px; }
.sd-wl .jet-breadcrumbs, .sd-wl .jet-breadcrumbs * {
font-family: 'DM Mono', monospace; font-size: .74rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--ccr-text-dim);
}
.sd-wl .jet-breadcrumbs__item-sep::after { content: "/"; font-family: 'DM Mono', monospace; color: var(--ccr-text-dim); opacity: .6; }
.sd-wl__body { max-width: 1240px; margin: 0 auto; padding: 14px 20px 60px; }
.sd-wl__empty { text-align: center; color: var(--ccr-text-dim); font-size: 1.05rem; padding: 40px 0 10px; }
.sd-wl__return-row { text-align: center; margin: 26px 0 0; }
/* ═══════════════════════════════════════════════════════════════════════
SALES-TAX MESSAGING (Jake 2026-08-16) — PDP note + cart/checkout savings
row. Markup/logic in inc/tax-messaging.php; nothing here names a state or
a rate, both come from WooCommerce's tax table at render time.
═══════════════════════════════════════════════════════════════════════ */
/* PDP: borrows the stock line's mono voice one step quieter, and carries the
same ● the stock states use so the two read as one column of conditions.
Blue, not a stock state colour — this is information, not an alert. */
body.single-product .sd-pp__taxfree {
font-family: 'DM Mono', monospace;
font-size: .78rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1.5;
/* margin ZERO, not the 5px this shipped with (Jake 2026-08-16: "the spacing
is just slightly greater between those two"). .sd-pp__panel is a flex
column with `gap: 14px`, so ANY margin here is additive on top of the gap
— the 5px made stock->note 19px against the 14px the chip/title/price/
stock run keeps. The gap alone owns the rhythm; leave this at 0. */
margin: 0;
color: var(--ccr-blue);
-webkit-text-fill-color: var(--ccr-blue);
}
body.single-product .sd-pp__taxfree::before {
content: none; /* dot dropped (backlog #68, Jake 2026-09-23): the tax note is information, not a stock state */
font-size: .7em;
vertical-align: .12em;
line-height: 1;
margin-right: .35em;
}
/* Cart + checkout savings row.
NOTE: this row IS the tax line for non-collected destinations — Woo hides
zero-value tax rows (woocommerce_cart_hide_zero_taxes defaults true), so
without it the order shows no tax line at all and the saving is invisible.
The fill colours below are declared on the SPANS, not inherited: the
checkout's tfoot th/td rules set -webkit-text-fill-color !important, which
inherits and beats `color` on descendants. Declaring directly on the span
sidesteps that entirely — no specificity contest needed. */
.sd-taxfree__zero {
display: block;
font-family: 'DM Mono', monospace;
}
.sd-taxfree__note {
display: block;
margin-top: 5px;
font-size: .76rem;
line-height: 1.45;
letter-spacing: 0;
text-transform: none;
font-family: inherit;
white-space: normal;
color: var(--ccr-blue);
-webkit-text-fill-color: var(--ccr-blue);
}
.sd-taxfree__note strong,
.sd-taxfree__note strong *,
.sd-taxfree__note .woocommerce-Price-amount,
.sd-taxfree__note .woocommerce-Price-currencySymbol {
font-weight: 800;
color: var(--ccr-blue);
-webkit-text-fill-color: var(--ccr-blue);
}
/* the row's own figure stays in the ledger's dim voice; only the saving is lit */
body.woocommerce-cart .cart_totals tr.sd-taxfree th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.sd-taxfree th {
vertical-align: top;
}
/* Tax note is a LINK to /guides/no-sales-tax/ (2026-08-17). It renders blue only
because -webkit-text-fill-color inherits from .sd-pp__taxfree — the link's own
`color` computes to the global link pink rgb(204,51,102). Third time this trap
has appeared in this codebase, so pin both properties here: the day someone
removes a fill declaration, this stays blue instead of turning pink. */
body.single-product .sd-pp__taxfree a {
color: var(--ccr-blue);
-webkit-text-fill-color: var(--ccr-blue);
text-decoration: none;
}
body.single-product .sd-pp__taxfree a:hover,
body.single-product .sd-pp__taxfree a:focus-visible {
text-decoration: underline;
text-underline-offset: .25em;
}
/* ============================================================
TILE STOCK→BUTTON GAP (Jake, 2026-08-17): was 44px visual —
16px in-widget slack + 20px template widget margin + 8px ATC
padding-top. Tightened to ~22px. Desktop-only: mobile keeps
the round-12 approved rhythm (title/ATC 10px, 8px gaps).
============================================================ */
@media (min-width: 768px) {
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-stock-status {
margin-bottom: 6px !important;
}
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-jet-woo-builder-archive-add-to-cart {
padding-top: 0 !important;
}
/* Tag→price gap (same request, round 2): was 24px visual — the same 20px
template widget margin on the title+chip shortcode widget + 4px price
offsets. 8px margin lands it ~12px. */
.jet-listing-grid__item:has(.jet-woo-builder-archive-add-to-cart) .elementor-widget-shortcode {
margin-bottom: 8px !important;
}
}
/* ============================================================
CATEGORY LINK SURFACES (SEO orphan fix, 2026-08-18): the crawl
found 197/224 categories with zero inbound links (sidebar filter
= checkboxes, footer = 8 silos). Two surfaces fix it: subcategory
chips on shop/category heads + the /categories/ index page.
============================================================ */
.sd-shop__subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.sd-shop__subcats a,
.sd-cats__chips a {
display: inline-flex;
align-items: baseline;
gap: 7px;
padding: 7px 13px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px;
background: rgba(255, 255, 255, .03);
color: #dbe3f0;
font-family: 'DM Mono', monospace;
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
transition: border-color .2s ease, color .2s ease;
}
.sd-shop__subcats a:hover,
.sd-cats__chips a:hover { border-color: var(--ccr-blue); color: var(--ccr-blue); }
.sd-shop__subcats a span,
.sd-cats__chips a span { color: var(--ccr-text-dim); font-size: .64rem; }
/* /categories/ index page */
.sd-cats__body { max-width: 1080px; margin: 0 auto; padding: 8px 24px 70px; }
.sd-cats__group { margin: 0 0 34px; }
.sd-cats__group h2 { margin: 0 0 12px; }
.sd-cats__group h2 a {
color: #fff;
font-size: 1.15rem;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
}
.sd-cats__group h2 a:hover { color: var(--ccr-blue); }
.sd-cats__group h2 a span { color: var(--ccr-text-dim); font-size: .8rem; font-family: 'DM Mono', monospace; }
.sd-cats__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-cats__chips--sub { width: 100%; padding: 2px 0 6px 22px; }
.sd-cats__chips--sub a { font-size: .66rem; padding: 5px 11px; border-color: rgba(255, 255, 255, .09); }
/* ---- PDP KICKER PARITY (2026-08-21) ----
Jake: the blue "Description" / "Additional Information" kickers must match
the description content's own h2s ("Key Specifications", "FAQ" — distributor
HTML rendering at a fixed 32px). One shared clamp on BOTH sides so they stay
equal at every viewport width and both shrink sanely on phones. */
.sd-pp__kicker,
.sd-pp__desc-body h1,
.sd-pp__desc-body h2 {
font-size: clamp(1.4rem, 4.8vw, 2rem);
}
/* ---- CHECKOUT: SHIP-TO-DIFFERENT TOGGLE FOR NON-FFL CARTS (2026-08-25) ----
Backlog #13. g-ffl-checkout prints an inline script on carts that need no
FFL selector which UNCHECKS woo's "Ship to a different address?" box and
blanks the shipping fields (vendor default = ship to billing). The inert-
heading treatment above hides the checkbox + label for every cart, so
customers could never re-open it. sd-checkout.php now classes the page
.sd-co--via-dealer / .sd-co--ships-direct via g-ffl's own order_requires_ffl_selector()
(+ its C&R cookie override). Non-FFL carts get the native toggle back,
styled, beneath the SHIPPING DETAILS heading — closed by default (ship to
billing), the customer opens it and woo reveals the fields. FFL carts keep
the inert heading (g-ffl locks the box checked + fills the dealer premise).
Doubled class on purpose: the inert rules above are (1,1,x).
CLASS NAMES: never put the substring "ffl" in a checkout class -- the FFL
notice rule at ~L2580 uses [class*="ffl"] p / div and would box every
element inside it (2026-08-25 incident: sd-co--noffl did exactly that). */
.sd-co.sd-co--ships-direct #ship-to-different-address {
pointer-events: auto;
}
.sd-co.sd-co--ships-direct #ship-to-different-address::before {
display: block;
margin-bottom: 12px;
}
/* ---------- billing opt-in checkbox rows (Jake, 2026-09-21, backlog #55) ----------
"these aren't aligned to their checkboxes" + "I don't think they need to be fully
uppercase". Rows: Omnisend "Email me with news and offers", Omnisend "Text me with
offers", and Woo's "Create an account?" (guests only) -- identical markup, so all three
take the same treatment or the block looks inconsistent.
Measured on prod: the label was `display:inline` with a 23px line box while the box
carried `margin-top:2px` + `vertical-align:middle` (the global rule at ~L2671), which put
the box centre 2.6px BELOW the text centre. "Ship to a different address?" (offset 0)
already uses flex + align-items:center -- this is that recipe, scoped to these rows.
Sentence case: the global checkout label rule (~L2627) uppercases every label at
.72rem/.1em/500; a sentence-length opt-in reads as shouting in that register, so these
take the insurance row's sentence-case voice (.82rem / 400 / no tracking). Colour is
left to the global muted value on purpose -- they are optional opt-ins.
Needs !important + an id on every line to beat the global rules above; `:has()` is
already relied on by those rules, so no new support assumption. Does NOT reach
#ship-to-different-address (an h3, not a p.form-row) or the rail's insurance row.
Descendant combinators, NOT child: Woo's checkbox field template puts a
span.woocommerce-input-wrapper between the p.form-row and the label (the Omnisend
rows), while the createaccount row has the label as a direct child -- a `>` here
fixed one row and silently skipped the other two (caught by the live prototype). */
html body.woocommerce-checkout #customer_details p.form-row:has(input[type="checkbox"]) label {
display: flex !important;
align-items: center !important;
/* gap 0, not 10px: the label holds THREE flex items -- box, text, Woo's --
and a flex gap landed between text and "(optional)" too ("offers (optional)", seen on prod).
The box-to-text space is the input's margin-right below; the span gets a normal word space. */
gap: 0 !important;
line-height: 1.5 !important;
font-size: .82rem !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0 !important;
cursor: pointer;
}
html body.woocommerce-checkout #customer_details p.form-row:has(input[type="checkbox"]) label input[type="checkbox"] {
margin: 0 10px 0 0 !important;
flex-shrink: 0 !important;
}
html body.woocommerce-checkout #customer_details p.form-row:has(input[type="checkbox"]) label .optional {
margin-left: .3em; /* flex drops the inter-item whitespace; restore a word space before "(optional)" */
}
.sd-co.sd-co--ships-direct #ship-to-different-address label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
/* type + box size come from the checkout's global !important label/checkbox
rules (same voice as "Create an account?") -- deliberately not fought. */
}
.sd-co.sd-co--ships-direct #ship-to-different-address input {
display: inline-block;
-webkit-appearance: auto;
appearance: auto;
margin: 0;
accent-color: #0177E3;
cursor: pointer;
}
/* ---- CHECKOUT: DEALER-FORCED SHIPPING (2026-08-25) ----
inc/ffl-shipping.php collapses a firearm cart's rates to the one the selected
FFL dictates; woo then prints a HIDDEN input + label instead of radios
(cart-shipping.php: radios only for 2+ rates). This block (a) renders that
single rate as a read-only line with the PHP-appended .sd-co-shipnote and
(b) before a dealer exists hides the still-choosable radio list behind the
instruction row the PHP emits right before it (adjacent sibling, no :has()).
Scoped to .sd-co--via-dealer only; non-firearm carts never match.
CLASS NAMES: no "ffl" substring anywhere here (see ~L2580 + backlog #13). */
.sd-co.sd-co--via-dealer tr.sd-co-shipstate--pending + tr.woocommerce-shipping-totals {
display: none !important; /* radios stay in the DOM (checkout.js still posts them); the customer can't pick */
}
html body.woocommerce-checkout .sd-co.sd-co--via-dealer tr.sd-co-shipstate {
display: grid !important;
grid-template-columns: 1fr;
padding: 11px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
html body.woocommerce-checkout .sd-co.sd-co--via-dealer tr.sd-co-shipstate th,
html body.woocommerce-checkout .sd-co.sd-co--via-dealer tr.sd-co-shipstate td {
border: 0 !important;
padding: 2px 0 !important;
text-align: left !important;
width: 100% !important;
}
html body.woocommerce-checkout .sd-co.sd-co--via-dealer .sd-co-shipstate__msg {
display: block; /* inherits the ledger td colour on purpose -- same 85% white as woo's own
"Enter your address to view shipping options." line (Jake 2026-08-25:
it is an instruction to act on; --co-text-muted is only 36% white).
Weight dropped to regular (Jake: bold competed with the totals). */
font-weight: 400 !important;
}
html body.woocommerce-checkout .sd-co.sd-co--via-dealer ul#shipping_method li:only-child label {
cursor: default !important;
margin: 0 !important;
}
html body.woocommerce-checkout .sd-co.sd-co--via-dealer ul#shipping_method .sd-co-shipnote {
display: block;
margin-top: 3px;
font-size: .72rem !important;
letter-spacing: .02em !important;
text-transform: none !important;
color: var(--co-text-muted) !important;
-webkit-text-fill-color: var(--co-text-muted) !important;
}
/* ===== CHECKOUT: keep selectWoo's hidden native