/* 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. */
:root { --sd-sticky-top: 87px; }
@media (min-width: 900px) { :root { --sd-sticky-top: 130px; } }
/* ---------- 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;
}
/* 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;
}
/* =============================================================================
SHOP PASS (Phase 4b #2) — native filter sidebar + toolbar + pagination over
the JetEngine grid. JSF retired: markup comes from inc/shop-filters.php
([sd_shop_filters] / [sd_shop_toolbar] / [sd_shop_pagination] on the Shop
template 39372, shared by category archives). Tiles already carry the global
card system from the cart pass. Calm register: flat fills, no motion.
============================================================================= */
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
background: radial-gradient(ellipse 130% 70% at 50% -5%, #101a2c 0%, #05070d 55%) #05070d !important;
}
/* ---------- sidebar shell ---------- */
.sd-shopf { font-family: 'DM Sans', sans-serif; }
.sd-shopf__shell {
background: rgba(255, 255, 255, .035);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
}
.sd-shopf__mtoggle {
display: none; /* desktop: shell always open, toggle hidden */
list-style: none;
cursor: pointer;
padding: 14px 18px;
font-family: 'DM Mono', monospace;
font-size: .8rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: #eef2f8;
}
.sd-shopf__mtoggle::-webkit-details-marker { display: none; }
.sd-shopf__mcount {
display: inline-block;
min-width: 20px;
padding: 1px 6px;
margin-left: 8px;
border-radius: 999px;
background: var(--ccr-accent);
color: #fff;
font-size: .7rem;
text-align: center;
}
.sd-shopf__body { padding: 18px; }
.sd-shopf__kicker {
font-family: 'DM Mono', monospace;
font-size: .74rem;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ccr-blue);
margin: 0 0 12px;
}
@media (max-width: 1024px) {
.sd-shopf { margin-bottom: 18px; }
.sd-shopf__mtoggle { display: flex; align-items: center; }
.sd-shopf__mtoggle::after {
content: "";
margin-left: auto;
border: solid #9aa7bd;
border-width: 0 2px 2px 0;
padding: 3.5px;
transform: rotate(45deg);
transition: transform .2s ease;
}
.sd-shopf__shell[open] > .sd-shopf__mtoggle::after { transform: rotate(-135deg); }
.sd-shopf__body { padding-top: 4px; }
.sd-shopf__kicker { display: none; }
}
/* ---------- keyword search ---------- */
.sd-shopf__search {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.sd-shopf__search input[type="search"] {
flex: 1;
min-width: 0;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 10px;
color: #eef2f8;
padding: 10px 12px;
font-size: .88rem;
}
.sd-shopf__search input[type="search"]::placeholder { color: #9aa7bd; }
.sd-shopf__search input[type="search"]:focus {
border-color: rgba(56, 174, 232, .65);
outline: none;
}
.sd-shopf .sd-shopf__search button {
background: var(--ccr-accent);
color: #fff;
border: 0;
border-radius: 10px;
width: 42px;
flex: none;
/* the KIT button rule injects padding:15px 35px — restate the box so the
arrow centers in the fixed 42px square */
padding: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 1rem;
cursor: pointer;
transition: background .2s ease;
}
.sd-shopf .sd-shopf__search button:hover { background: var(--ccr-blue); color: #fff; border-radius: 10px; }
/* ---------- collapsible sections ---------- */
.sd-shopf__sec { border-top: 1px solid rgba(255, 255, 255, .07); }
.sd-shopf__sec > summary {
display: flex;
align-items: center;
list-style: none;
cursor: pointer;
padding: 12px 2px;
font-family: 'DM Mono', monospace;
font-size: .76rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: #dbe3f0;
user-select: none;
}
.sd-shopf__sec > summary::-webkit-details-marker { display: none; }
.sd-shopf__sec > summary::after {
content: "";
margin-left: auto;
border: solid #9aa7bd;
border-width: 0 2px 2px 0;
padding: 3px;
transform: rotate(45deg);
transition: transform .2s ease;
}
.sd-shopf__sec[open] > summary::after { transform: rotate(-135deg); }
.sd-shopf__sec > summary:hover { color: var(--ccr-blue); }
.sd-shopf__badge {
display: inline-block;
min-width: 18px;
padding: 0 5px;
margin-left: 8px;
border-radius: 999px;
background: var(--ccr-accent);
color: #fff;
font-size: .68rem;
line-height: 1.5;
text-align: center;
letter-spacing: 0;
}
.sd-shopf__opts { padding: 2px 2px 12px; }
/* the list scrolls; the minisearch above it stays pinned */
.sd-shopf__list {
max-height: 280px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.sd-shopf__opt {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 2px;
cursor: pointer;
border-radius: 8px;
}
.sd-shopf__opt:hover { background: rgba(56, 174, 232, .07); }
.sd-shopf__opt input[type="checkbox"] {
accent-color: var(--ccr-accent);
width: 15px;
height: 15px;
flex: none;
cursor: pointer;
}
.sd-shopf__opt-name {
flex: 1;
min-width: 0;
font-size: .86rem;
color: #dbe3f0;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sd-shopf__opt-count {
font-family: 'DM Mono', monospace;
font-size: .7rem;
color: #9aa7bd;
}
/* sd button rules ride at (0,2,0)+: the Elementor KIT's own stylesheet paints
every `.elementor-kit-39208 button` with the kit accent (#a51f1c — a THIRD
red, not in our CSS at all) at (0,1,1). Single-class component selectors
lose to it; scoping under .sd-shopf out-ranks it without !important. */
.sd-shopf .sd-shopf__more,
.sd-shopf .sd-shopf__apply {
display: block;
width: 100%;
margin-top: 8px;
padding: 8px 10px;
background: transparent;
border: 1px dashed rgba(56, 174, 232, .4);
border-radius: 10px;
color: var(--ccr-blue);
font-family: 'DM Mono', monospace;
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
transition: all .2s ease;
}
/* hover redeclares radius+color: the KIT's button:hover (0,2,1) forces
border-radius:0 + its own colors onto anything our hover doesn't restate */
.sd-shopf .sd-shopf__more:hover {
border-style: solid;
background: rgba(56, 174, 232, .08);
border-radius: 10px;
color: var(--ccr-blue);
}
.sd-shopf__minisearch {
width: 100%;
margin-bottom: 8px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 8px;
color: #eef2f8;
padding: 7px 10px;
font-size: .82rem;
}
.sd-shopf__minisearch::placeholder { color: #9aa7bd; }
.sd-shopf__minisearch:focus { border-color: rgba(56, 174, 232, .65); outline: none; }
.sd-shopf__empty {
color: #9aa7bd;
font-size: .8rem;
margin: 6px 2px;
}
/* ---------- comboboxes ---------- */
/* the combo section must not clip its dropdown (opts default to overflow:auto) */
.sd-shopf__sec--combo .sd-shopf__opts { overflow: visible; max-height: none; }
.sd-shopf__combo { position: relative; margin-bottom: 8px; }
.sd-shopf__combo input[type="text"] {
width: 100%;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 10px;
color: #eef2f8;
padding: 9px 12px;
font-size: .86rem;
}
.sd-shopf__combo input[type="text"]::placeholder { color: #9aa7bd; }
.sd-shopf__combo input[type="text"]:focus { border-color: rgba(56, 174, 232, .65); outline: none; }
.sd-shopf__combo[data-disabled] input[type="text"] { opacity: .45; }
.sd-shopf__combo-list {
position: absolute;
z-index: 40;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 280px;
overflow-y: auto;
background: var(--ccr-card-bg);
border: 1px solid var(--ccr-card-border);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
scrollbar-width: thin;
}
.sd-shopf .sd-shopf__combo-list button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
background: transparent;
border: 0;
color: #dbe3f0;
text-align: left;
padding: 8px 12px;
font-size: .84rem;
cursor: pointer;
}
.sd-shopf .sd-shopf__combo-list button:hover { background: rgba(56, 174, 232, .1); color: #fff; }
.sd-shopf .sd-shopf__combo-list button i {
font-style: normal;
font-family: 'DM Mono', monospace;
font-size: .68rem;
color: #9aa7bd;
}
/* ---------- toolbar ---------- */
.sd-shopt { margin-bottom: 16px; }
.sd-shopt__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.sd-shopt__kicker {
display: block;
font-family: 'DM Mono', monospace;
font-size: .74rem;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ccr-blue);
margin-bottom: 4px;
}
.sd-shopt__title h2,
.sd-shopt__title .sd-shopt__h {
display: inline-block;
font-family: inherit;
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .02em;
color: #fff;
margin: 0;
line-height: 1.1;
}
.sd-shopt__results {
display: inline-block;
margin-left: 12px;
font-family: 'DM Mono', monospace;
font-size: .74rem;
letter-spacing: .1em;
text-transform: uppercase;
color: #9aa7bd;
}
.sd-shopt__sort select {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 10px;
color: #eef2f8;
padding: 9px 34px 9px 12px;
font-size: .84rem;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa7bd' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.sd-shopt__sort select:focus { border-color: rgba(56, 174, 232, .65); outline: none; }
.sd-shopt__sort option { background: #101a2c; color: #eef2f8; }
/* ---------- active chips ---------- */
.sd-shopt__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 12px;
}
.sd-shopt__chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 11px;
border: 1px solid rgba(56, 174, 232, .4);
border-radius: 999px;
color: #9fd8f5;
font-family: 'DM Mono', monospace;
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
transition: all .2s ease;
}
.sd-shopt__chip span { color: #9aa7bd; font-size: .85rem; line-height: 1; }
.sd-shopt__chip:hover {
border-color: var(--ccr-accent);
color: #fff;
}
.sd-shopt__chip:hover span { color: var(--ccr-accent); }
.sd-shopt__clear {
font-family: 'DM Mono', monospace;
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ccr-accent);
text-decoration: none;
}
.sd-shopt__clear:hover { color: var(--ccr-accent-hover); text-decoration: underline; }
/* ---------- 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);
}
/* ---------- shop/category bottom SEO line ---------- */
/* WPCode 515557 prints it at body level with legacy styling (13px, #8a93a3,
28/36px band padding — read as dead space). Family voice, tighter band;
snippet content untouched. */
body.post-type-archive-product .sd-cat-seo-text,
body.tax-product_cat .sd-cat-seo-text,
body.tax-product_tag .sd-cat-seo-text {
padding: 16px 20px 22px !important;
margin: 0 auto !important;
max-width: 780px !important;
font-size: .8rem !important;
line-height: 1.7 !important;
color: var(--ccr-text-dim) !important;
text-align: center;
}
/* ---------- pagination ---------- */
.sd-shopp {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin: 26px 0 8px;
font-family: 'DM Mono', monospace;
}
/* wrap: the numbered window can run to 9 items (±10/±50 jumps) on a deep archive */
.sd-shopp__pages { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sd-shopp__link,
.sd-shopp__num {
display: inline-block;
padding: 7px 13px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 10px;
color: #dbe3f0;
font-size: .8rem;
text-decoration: none;
transition: all .2s ease;
}
.sd-shopp__link:hover,
.sd-shopp__num:hover {
border-color: rgba(56, 174, 232, .55);
color: var(--ccr-blue);
}
.sd-shopp__num.is-current {
background: var(--ccr-accent);
border-color: var(--ccr-accent);
color: #fff;
}
.sd-shopp__gap { color: #9aa7bd; align-self: center; }
@media (max-width: 767px) {
/* the window runs to 9 numbers on a deep archive — tighten so a phone gets
two or three rows instead of six */
.sd-shopp,
.sd-shopp__pages { gap: 6px; }
.sd-shopp__link,
.sd-shopp__num { padding: 6px 9px; font-size: .74rem; }
}
@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;
}
}
/* =============================================================================
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; }
@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; }
}
.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: "●";
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;
}
}
/* ============================================================
AFFILIATE AREA v2 (backlog #11 redesign, 2026-08-30) — the SOLE
CSS layer over SliceWP's [slicewp_affiliate_account], now rendered
inside the sd-acct shell (templates/sd-affiliate.php; shared
sidebar from inc/account-nav.php). Replaces BOTH the deleted
main.css #slicewp-affiliate-account block (Phase 2 migration,
L754-1199) and the v1 section here. #0177E3 is retired — the
area runs on the finalist tokens (--ccr-accent red primary,
--ccr-blue data/secondary). Blanket !important: slicewp-style
loads earlier but carries !important on table/nav/grid rules.
Litepicker: SliceWP's customized litepicker.js consumes
--slicewp-litepicker-* vars — re-tokened on .sd-aff below
instead of poking picker internals.
============================================================ */
/* Wrapper: family type, no width cap — the account content column
(minmax(0,1fr) in the 1300px grid) owns width now. */
.sd-aff #slicewp-affiliate-account,
.sd-aff #slicewp-affiliate-account * {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.sd-aff #slicewp-affiliate-account { color: #dbe3f0; }
/* Grid-blowout guard: the Chart.js canvas renders ~910px wide; the account
grid's mobile collapse to a bare 1fr track (min-width:auto) lets that
propagate and widen the whole page. Clamp the tracks, contain the canvas,
and let the chart card scroll itself as a last resort. */
.sd-aff .sd-acct__side,
.sd-aff .sd-acct__content { min-width: 0; }
.sd-aff canvas.slicewp-chart { max-width: 100% !important; }
.sd-aff .slicewp-card-inner:has(canvas.slicewp-chart) { overflow-x: auto; }
/* --- Tab nav → chip idiom (same pills desktop + mobile; scrolls on
overflow like the account chip scroller, finalist L4528+). --- */
.sd-aff .slicewp-nav-tab-wrapper {
display: flex !important;
flex-wrap: nowrap !important;
gap: 10px !important;
overflow-x: auto;
margin: 0 0 10px 0 !important;
padding: 0 0 14px 0 !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
.sd-aff .slicewp-nav-tab-wrapper::-webkit-scrollbar { display: none; }
.sd-aff .slicewp-nav-tab { flex: 0 0 auto; }
.sd-aff .slicewp-nav-tab a {
display: inline-flex !important;
align-items: center;
border: 1px solid rgba(255, 255, 255, .14) !important;
border-radius: 999px !important;
padding: 9px 16px !important;
background: transparent;
color: #9aa7bd !important;
font-family: 'DM Mono', monospace !important;
font-size: .74rem !important;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.sd-aff .slicewp-nav-tab a:hover,
.sd-aff .slicewp-nav-tab a:focus {
border: 1px solid rgba(255, 255, 255, .3) !important;
color: #f2f5fa !important;
}
.sd-aff .slicewp-nav-tab.slicewp-active a {
background: rgba(210, 64, 52, .16) !important;
border: 1px solid var(--ccr-accent) !important;
color: #f2f5fa !important;
}
.sd-aff .slicewp-nav-tab svg {
width: 15px !important;
height: 15px !important;
margin-right: 6px !important;
stroke: currentColor;
}
/* Stock ≤720: hides chip labels + wraps. Chips scroll instead. */
@media screen and (max-width: 720px) {
.sd-aff .slicewp-nav-tab-wrapper { flex-wrap: nowrap !important; gap: 10px !important; }
.sd-aff .slicewp-nav-tab span:last-of-type { display: inline !important; }
.sd-aff .slicewp-nav-tab a { padding: 9px 16px !important; }
.sd-aff .slicewp-nav-tab svg { margin-right: 6px !important; }
}
/* --- Cards (dashboard KPIs, chart, links, settings) → glass family. --- */
.sd-aff .slicewp-card {
background: rgba(255, 255, 255, .03) !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
border-radius: 14px !important;
box-shadow: none !important;
margin: 0 0 18px !important;
}
.sd-aff .slicewp-card-inner {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 18px 20px !important;
}
.sd-aff .slicewp-card-title {
color: #9aa7bd !important;
font-family: 'DM Mono', monospace !important;
font-size: .72rem !important;
font-weight: 500 !important;
letter-spacing: .1em;
text-transform: uppercase;
}
.sd-aff .slicewp-kpi-value {
color: #f2f5fa !important;
font-family: 'DM Mono', monospace !important;
font-size: 1.6rem !important;
font-weight: 500 !important;
}
.sd-aff .slicewp-kpi-direction {
background: rgba(255, 255, 255, .06) !important;
border-radius: 6px !important;
font-family: 'DM Mono', monospace !important;
font-size: .78rem !important;
}
.sd-aff .slicewp-kpi-direction.slicewp-positive {
background: rgba(38, 163, 135, .12) !important;
color: #2fbf9a !important;
}
.sd-aff .slicewp-kpi-direction.slicewp-negative {
background: rgba(210, 64, 52, .12) !important;
color: #e06457 !important;
}
.sd-aff .slicewp-card-footer {
background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, .08) !important;
padding: 10px 20px !important;
}
.sd-aff .slicewp-card-footer a { color: #9aa7bd !important; text-decoration: none; }
.sd-aff .slicewp-card-footer a:hover { color: var(--ccr-blue) !important; }
/* --- Chart card extras (series colors come from PHP:
slicewp_chart_args_affiliate_dashboard in inc/affiliate.php). --- */
.sd-aff .slicewp-chart-legend ul li { color: #dbe3f0 !important; }
.sd-aff select.slicewp-chart-time-unit-selector,
.sd-aff .slicewp-list-table-per-page-selector select,
.sd-aff .slicewp-list-table-filters select,
.sd-aff .slicewp-field-wrapper select {
background-color: rgba(255, 255, 255, .04) !important;
border: 1px solid rgba(255, 255, 255, .16) !important;
border-radius: 10px !important;
box-shadow: none !important;
color: #f2f5fa !important;
padding: 6px 10px !important;
}
.sd-aff select option { background: #10151f; color: #f2f5fa; }
/* --- Dashboard filter row + date-range input. --- */
.sd-aff .slicewp-affiliate-dashboard-filters form {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.sd-aff .slicewp-date-picker-input {
background: rgba(255, 255, 255, .04) !important;
border: 1px solid rgba(255, 255, 255, .16) !important;
border-radius: 10px !important;
box-shadow: none !important;
color: #f2f5fa !important;
}
.sd-aff .slicewp-date-picker-input-dates { border-left: 1px solid rgba(255, 255, 255, .12) !important; }
/* --- Litepicker: the real theming API (vars consumed by SliceWP's
customized litepicker.js — inherited from .sd-aff). --- */
.sd-aff {
--slicewp-litepicker-month-header-color: #f2f5fa;
--slicewp-litepicker-month-weekday-color: #9aa7bd;
--slicewp-litepicker-month-week-number-color: #9aa7bd;
--slicewp-litepicker-day-color: #dbe3f0;
--slicewp-litepicker-day-color-hover: #fff;
--slicewp-litepicker-is-today-color: var(--ccr-accent);
--slicewp-litepicker-is-in-range-color: rgba(210, 64, 52, .18);
--slicewp-litepicker-is-start-color: #fff;
--slicewp-litepicker-is-start-color-bg: var(--ccr-accent);
--slicewp-litepicker-is-end-color: #fff;
--slicewp-litepicker-is-end-color-bg: var(--ccr-accent);
--slicewp-litepicker-is-locked-color: rgba(154, 167, 189, .35);
--slicewp-litepicker-button-prev-month-color: #9aa7bd;
--slicewp-litepicker-button-next-month-color: #9aa7bd;
--slicewp-litepicker-button-prev-month-color-hover: #fff;
--slicewp-litepicker-button-next-month-color-hover: #fff;
--slicewp-litepicker-button-apply-color: #fff;
--slicewp-litepicker-button-apply-color-bg: var(--ccr-accent);
--slicewp-litepicker-button-cancel-color: #dbe3f0;
--slicewp-litepicker-button-cancel-color-bg: rgba(255, 255, 255, .08);
--slicewp-litepicker-button-reset-color: #9aa7bd;
--slicewp-litepicker-button-reset-color-hover: #fff;
--slicewp-litepicker-container-months-color-bg: transparent;
--slicewp-litepicker-container-months-box-shadow-color: transparent;
--slicewp-litepicker-footer-color-bg: transparent;
--slicewp-litepicker-footer-box-shadow-color: transparent;
--slicewp-litepicker-highlighted-day-color: #f2f5fa;
--slicewp-litepicker-highlighted-day-color-bg: rgba(255, 255, 255, .08);
--slicewp-litepicker-tooltip-color-bg: #10151f;
}
/* Structural (stock hardcodes these outside the var system). */
.sd-aff .slicewp-date-picker-modal {
background: #10151f !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
border-radius: 14px !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, .5) !important;
}
.sd-aff .slicewp-date-picker-predefined-date-ranges { border-right: 1px solid rgba(255, 255, 255, .08) !important; }
.sd-aff a.slicewp-date-picker-predefined-date-range { color: #dbe3f0 !important; }
.sd-aff a.slicewp-date-picker-predefined-date-range:hover,
.sd-aff a.slicewp-date-picker-predefined-date-range.is-active { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
.sd-aff .slicewp-litepicker .button-previous-month:hover,
.sd-aff .slicewp-litepicker .button-next-month:hover { background-color: rgba(255, 255, 255, .08) !important; }
/* --- Tables (commissions / visits / payouts) → ledger voice. --- */
.sd-aff .slicewp-list-table-wrapper {
background: rgba(255, 255, 255, .03) !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
border-radius: 14px !important;
box-shadow: none !important;
}
.sd-aff table.slicewp-list-table {
background: transparent !important;
box-shadow: none !important;
}
.sd-aff table.slicewp-list-table th {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
color: #9aa7bd !important;
font-family: 'DM Mono', monospace !important;
font-size: .7rem !important;
font-weight: 500 !important;
letter-spacing: .08em;
text-transform: uppercase;
padding: .7rem .875rem !important;
}
.sd-aff table.slicewp-list-table td {
border: 0 !important;
border-top: 1px solid rgba(255, 255, 255, .05) !important;
color: #dbe3f0 !important;
font-size: .88rem !important;
padding: .6rem .875rem !important;
}
.sd-aff a.slicewp-toggle-item-details { color: var(--ccr-blue) !important; text-decoration: none; }
.sd-aff .slicewp-list-table-item-details-row > td > div > div { background: rgba(255, 255, 255, .02) !important; }
.sd-aff table.slicewp-list-table tr.no-items td {
color: #9aa7bd !important;
font-family: 'DM Mono', monospace !important;
font-size: .8rem !important;
text-align: center !important;
padding: 28px !important;
}
.sd-aff .slicewp-list-table-before,
.sd-aff .slicewp-list-table-after { color: #9aa7bd; font-size: .85rem; }
.sd-aff .slicewp-list-table-before { margin-bottom: 12px; }
.sd-aff .slicewp-list-table-after { margin-top: 12px; }
.sd-aff .slicewp-pagination-links .slicewp-pagination-link {
background: rgba(255, 255, 255, .06) !important;
border-radius: 8px !important;
color: #dbe3f0 !important;
text-decoration: none;
}
.sd-aff .slicewp-pagination-links a.slicewp-pagination-link:hover {
background: rgba(210, 64, 52, .16) !important;
color: #f2f5fa !important;
}
.sd-aff .slicewp-pagination-links span.slicewp-pagination-link { opacity: .45; }
/* --- Links tab. --- */
.sd-aff input#slicewp-affiliate-link[readonly] {
font-family: 'DM Mono', monospace !important;
color: #f2f5fa !important;
}
.sd-aff .slicewp-field-description { color: #9aa7bd !important; font-size: .8rem !important; }
/* --- Buttons → family CTA (red, hover blue — checkout idiom). --- */
.sd-aff .slicewp-button-primary,
.sd-aff input[type="submit"] {
background: var(--ccr-accent) !important;
border: 0 !important;
border-radius: 10px !important;
color: #fff !important;
font-weight: 700 !important;
font-size: .8rem !important;
letter-spacing: .06em;
text-transform: uppercase;
padding: 12px 22px !important;
transition: background .2s ease;
}
.sd-aff .slicewp-button-primary:hover,
.sd-aff input[type="submit"]:hover { background: var(--ccr-blue) !important; color: #fff !important; }
/* --- Forms (settings tab + guest login/reset) → checkout input family. --- */
.sd-aff input[type="text"],
.sd-aff input[type="email"],
.sd-aff input[type="url"],
.sd-aff input[type="password"],
.sd-aff textarea {
background: rgba(255, 255, 255, .04) !important;
border: 1px solid rgba(255, 255, 255, .16) !important;
border-radius: 10px !important;
color: #f2f5fa !important;
padding: 11px 14px !important;
max-width: 520px;
}
.sd-aff .slicewp-field-label-wrapper label {
color: #9aa7bd !important;
font-family: 'DM Mono', monospace !important;
font-size: .74rem !important;
letter-spacing: .08em;
text-transform: uppercase;
}
.sd-aff a.slicewp-show-hide-password {
color: #9aa7bd !important;
/* a11y (backlog #17): stock is 22x22 at right:11px — 24px minimum
target, re-centred for the absolute positioning. */
width: 24px !important;
height: 24px !important;
right: 10px !important;
margin-top: -12px !important;
}
.sd-aff a.slicewp-show-hide-password svg { stroke: currentColor; }
/* --- Status pills (Paid / Unpaid / Pending / Rejected) → dark tints
(stock pastels are light-theme). --- */
.sd-aff .slicewp-status-pill {
background: rgba(255, 255, 255, .08) !important;
color: #dbe3f0 !important;
border-radius: 6px !important;
font-size: .78rem !important;
}
.sd-aff .slicewp-status-pill.slicewp-status-active,
.sd-aff .slicewp-status-pill.slicewp-status-complete,
.sd-aff .slicewp-status-pill.slicewp-status-paid { background: rgba(38, 163, 135, .15) !important; color: #2fbf9a !important; }
.sd-aff .slicewp-status-pill.slicewp-status-unpaid { background: rgba(56, 174, 232, .15) !important; color: var(--ccr-blue) !important; }
.sd-aff .slicewp-status-pill.slicewp-status-pending,
.sd-aff .slicewp-status-pill.slicewp-status-requested { background: rgba(243, 156, 18, .15) !important; color: #f0a848 !important; }
.sd-aff .slicewp-status-pill.slicewp-status-rejected,
.sd-aff .slicewp-status-pill.slicewp-status-failed { background: rgba(210, 64, 52, .15) !important; color: #e06457 !important; }
/* --- User notices → dark semantics (stock pastels are light-theme). --- */
.sd-aff .slicewp-user-notice {
border-width: 1px !important;
border-radius: 10px !important;
color: #dbe3f0 !important;
}
.sd-aff .slicewp-user-notice.slicewp-error { background: rgba(210, 64, 52, .08) !important; border-color: var(--ccr-accent) !important; }
.sd-aff .slicewp-user-notice.slicewp-warning { background: rgba(243, 156, 18, .08) !important; border-color: rgba(243, 156, 18, .5) !important; }
.sd-aff .slicewp-user-notice.slicewp-updated { background: rgba(38, 163, 135, .08) !important; border-color: rgba(38, 163, 135, .5) !important; }
/* --- Creatives tab + lightbox. --- */
.sd-aff .slicewp-card-creative .slicewp-card-creative-actions a { color: #9aa7bd !important; text-decoration: none; }
.sd-aff .slicewp-card-creative .slicewp-card-creative-actions a:hover { color: var(--ccr-blue) !important; }
.sd-aff .slicewp-global-overlay { background: rgba(5, 8, 14, .85) !important; }
.sd-aff .slicewp-global-overlay-inner {
background: #10151f !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
border-radius: 14px !important;
color: #dbe3f0 !important;
}
.sd-aff .slicewp-global-overlay-close { color: #9aa7bd !important; }
/* --- Guest login / reset-password → auth card. Scoped to the auth view
(main.sd-acct--auth) so the logged-in settings tab's form — also
form.slicewp-form — keeps the full content column + its inner card. --- */
.sd-aff.sd-acct--auth .slicewp-form {
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 14px;
padding: 28px;
max-width: 460px;
margin: 0 auto 22px;
}
.sd-aff.sd-acct--auth .slicewp-form p { color: #9aa7bd; }
.sd-aff.sd-acct--auth .slicewp-form input[type="text"],
.sd-aff.sd-acct--auth .slicewp-form input[type="email"],
.sd-aff.sd-acct--auth .slicewp-form input[type="password"] { max-width: 100%; width: 100%; }
.sd-aff .slicewp-lost-password a { color: #9aa7bd !important; text-decoration: none; }
.sd-aff .slicewp-lost-password a:hover { color: var(--ccr-blue) !important; }
/* --- Focus (accent retirement includes focus states). --- */
.sd-aff .slicewp-nav-tab a:focus-visible,
.sd-aff .slicewp-button-primary:focus-visible,
.sd-aff input[type="submit"]:focus-visible,
.sd-aff input:focus-visible,
.sd-aff select:focus-visible,
.sd-aff textarea:focus-visible {
outline: 2px solid var(--ccr-accent) !important;
outline-offset: 1px;
}
/* Account-nav Affiliate icon (endpoint sd-affiliate, emitted by
inc/account-nav.php for active SliceWP affiliates only). Trending-up,
feather stroke style like the rest of the set. */
.sd-acct .jet-custom-nav__item--ep-sd-affiliate .jet-custom-nav__item-link {
--ccr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}
/* Military / LE Discount tab (sd-military-le plugin endpoint, 2026-09-07):
feather "award" — circle + ribbon, distinct from SD Plus's shield. The
plugin owns the page itself (assets/css/sd-mle.css); only the nav icon
lives here because --ccr-icon is a theme token. */
.sd-acct .jet-custom-nav__item--ep-military-le-discount .jet-custom-nav__item-link {
--ccr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.89'/%3E%3C/svg%3E");
}
/* /shop/ bottom category chips (moved from the head — Jake 2026-08-21):
quiet centered index band above the SEO text, hairline-separated from
the grid. Category pages keep their child chips in the head. Doubled
class: the CATEGORY LINK SURFACES base rule sits LATER in this file and
its margin was winning the single-class tie, pinning the band left. */
.sd-shop__subcats.sd-shop__subcats--foot {
max-width: 1440px;
margin: 44px auto 0;
padding: 26px 24px 0;
border-top: 1px solid rgba(255, 255, 255, .07);
justify-content: center;
}
.sd-shop__subcats-title {
width: 100%;
text-align: center;
color: #9aa7bd;
font-family: 'DM Mono', monospace;
font-size: .74rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
margin: 0 0 6px;
}
/* RESTORED 2026-08-21: this block vanished from finalist between the
2.30.0 orphan-fix deploy and the 2.30.1 affiliate pull (parallel-session
clobber, same state on BOTH envs so the env-parity md5 missed it).
Recovered verbatim from ~/backup-finalist-aff-prod-2026-08-19-0022.css. */
/* ============================================================
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