/* 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; } /* 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; } } /* ============================================================================= NATIVE ACCOUNT SHELL (sd-acct) — JWB rebuild arc 2026-08-14. Layout only: cc-account.css owns ALL inner styling (jet-custom-nav sidebar, content h3s, forms, tables, ccr chips, dashboard cards) — the template emits jet-menu's exact nav class structure so those rules light back up (nav was DEAD since kill #1). Woo floats MyAccount-content 68% when its nav exists — reset. ============================================================================= */ .sd-acct__wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 34px; align-items: start; max-width: 1300px; margin: 0 auto; padding: 40px 20px 60px; } .sd-acct__side { position: sticky; top: var(--sd-sticky-top); } /* title spans both columns so nav card + content top-align (Jake 2026-08-14) */ .sd-acct__title { grid-column: 1 / -1; font-size: 1.5rem; font-weight: 800; color: #f2f5fa; margin: 0; } /* SD Plus (membership) nav icon: cc-account's icon set is menu-item-keyed and masks --ccr-icon over currentColor — the merged endpoint had none (solid square). Shield-plus, feather stroke style to match the family. */ /* Wishlist nav icon. cc-account's icon set is keyed by MENU-ITEM ID, so the new Wishlist item (added to menu 49964, 2026-08-15) renders without one — same gap SD Plus had. Targeted by HREF, not by ID, deliberately: menu-item IDs are per-site, and this has to work on staging AND prod. Heart matches the header icon; feather stroke style like the rest of the set. */ .sd-acct .jet-custom-nav__item-link[href*="/wishlist"] { --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%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); } .sd-acct .jet-custom-nav__item--ep-sd-membership .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%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cline x1='12' y1='8' x2='12' y2='14'/%3E%3Cline x1='9' y1='11' x2='15' y2='11'/%3E%3C/svg%3E"); } /* sd-membership's Cancel button ships off-palette magenta, 3px radius, and sits jammed against the table (Jake 2026-08-14) — quiet ghost in the family voice; danger color only on hover (cancel is not a CTA) */ .sd-acct .sd-mem-btn--ghost { background: transparent !important; border: 1px solid rgba(255, 255, 255, .22) !important; color: #dbe3f0 !important; border-radius: 10px !important; font-weight: 700; font-size: .8rem !important; letter-spacing: .06em; text-transform: uppercase; padding: 10px 20px !important; margin: 14px 0 26px !important; cursor: pointer; transition: border-color .18s ease, color .18s ease; } .sd-acct .sd-mem-btn--ghost:hover, .sd-acct .sd-mem-btn--ghost:focus { background: transparent !important; border-color: var(--ccr-accent) !important; color: var(--ccr-accent) !important; border-radius: 10px !important; } .sd-acct .woocommerce-MyAccount-content { float: none !important; width: 100% !important; } /* ---------- account ENDPOINT pages (Jake, 2026-08-16: "these need some love") The arc rebuilt the account shell + sidebar but never the inner endpoint content, so these were still wearing Woo defaults. ---------- */ /* The nav
  • s are display:list-item with list-style:disc — real bullets. On the desktop card they're invisible only because cc-account.css sets `overflow:hidden` on the list, which clips markers drawn outside the box. The mobile chip row has to scroll, so it can't clip, and the bullets showed up as "a random dot after each item" (Jake, 2026-08-16). Killed at the source for BOTH layouts, so no future overflow change can bring them back. */ body.woocommerce-account .sd-acct .jet-custom-nav, body.woocommerce-account .sd-acct .jet-custom-nav__item { list-style: none !important; } /* Woo notices put the .button FIRST in the DOM and `float: right` it, so the message text wraps AROUND the button — on a phone that split the sentence in half ("Confirm your email [BUTTON] address to check for past orders…"). Flex the notice instead: the copy is an anonymous flex item at order 0, so giving the button order 2 lands it after the text, never inside it. */ body.woocommerce-account .sd-acct .woocommerce-info, body.woocommerce-account .sd-acct .woocommerce-message { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; } body.woocommerce-account .sd-acct .woocommerce-info .button, body.woocommerce-account .sd-acct .woocommerce-message .button { float: none !important; order: 2; flex: 0 0 auto; margin: 0 !important; } @media (max-width: 767px) { /* stack it: copy full width, button on its own line beneath */ body.woocommerce-account .sd-acct .woocommerce-info, body.woocommerce-account .sd-acct .woocommerce-message { flex-direction: column; align-items: flex-start; } } /* Addresses: Woo renders the card heading as an

    , but cc-account.css styles `.woocommerce-Address-title h3` — a selector that has never matched anything. So the heading fell through to the Elementor KIT's global h2 (30px / 50px line-height), which on a phone wrapped "Billing address" onto two lines and dragged the Edit link into wrapping with it. (0,2,1) beats the kit's (0,1,1). */ .sd-acct .woocommerce-Address-title h2 { font-size: 1.15rem; line-height: 1.3; font-weight: 800; letter-spacing: .01em; color: #f2f5fa; margin: 0; } .sd-acct .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; } /* keep "Edit Billing address" intact — it may drop to its own line on a narrow card, but it must never split mid-phrase (which is what looked broken) */ .sd-acct .woocommerce-Address-title .edit { flex: 0 0 auto; white-space: nowrap; font-size: .8rem; font-weight: 700; } /*
    is italic by UA default — italic appears nowhere else in this design, and at --ccr-text-dim it was the least legible text on the page. The body prefix is REQUIRED: cc-account's own address rule is (0,2,2). */ body.woocommerce-account .sd-acct .woocommerce-Address address { font-style: normal; color: #dbe3f0; line-height: 1.6; } /* Buttons: cc-account.css paints every account-content button `linear-gradient(135deg, accent, accent-2)` !important — VIEW on Orders, "Confirm email address", form submits. Gradient is RAFFLE-ADVERTISING-ONLY (Jake, 2026-08-14), so flatten them to the family button. `.sd-acct` raises this above their (0,3,x); background-image:none is what actually kills the gradient. cc-raffles untouched. */ body.woocommerce-account .sd-acct .woocommerce-MyAccount-content .woocommerce-button, body.woocommerce-account .sd-acct .woocommerce-MyAccount-content .button, body.woocommerce-account .sd-acct .woocommerce-MyAccount-content button[type="submit"], body.woocommerce-account .sd-acct .woocommerce-form button[type="submit"] { background: var(--ccr-accent) !important; background-image: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; border-radius: 10px !important; } body.woocommerce-account .sd-acct .woocommerce-MyAccount-content .woocommerce-button:hover, body.woocommerce-account .sd-acct .woocommerce-MyAccount-content .button:hover, body.woocommerce-account .sd-acct .woocommerce-MyAccount-content button[type="submit"]:hover, body.woocommerce-account .sd-acct .woocommerce-form button[type="submit"]:hover { background: var(--ccr-blue) !important; background-image: none !important; color: #fff !important; border-radius: 10px !important; } .sd-acct__auth { max-width: 620px; margin: 0 auto; padding: 40px 20px 60px; } .sd-acct__auth .sd-acct__title { text-align: center; } /* ---------- logged-out: LOG IN / REGISTER tabs ---------- Ported from the retired JWB login template (39343), which carried this in an Elementor HTML widget (markup + style + script) — losing it was what made the native logged-out page read as "two cramped columns" instead of the designed single card. The panel IDs are re-applied in sd-account.php so cc-account.css's #cc-login-panel/#cc-register-panel card + gradient hairline still own the panel chrome; only the tab strip lives here. */ .cc-acct-tabs { display: flex; max-width: 580px; margin: 0 auto 6px; border-bottom: 1px solid rgba(255, 255, 255, .16); } .cc-acct-tabs .cc-acct-tab { flex: 1 1 0; text-align: center; background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; box-shadow: none; color: rgba(255, 255, 255, .55); -webkit-text-fill-color: rgba(255, 255, 255, .55); font: inherit; font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .85rem 1rem; margin: 0; cursor: pointer; user-select: none; transition: color .2s ease, border-color .2s ease; } .cc-acct-tabs .cc-acct-tab:hover { color: #fff; -webkit-text-fill-color: #fff; } .cc-acct-tabs .cc-acct-tab.is-active { color: #fff; -webkit-text-fill-color: #fff; border-bottom-color: #0177E3; } /* one panel at a time: Woo's 2-up grid collapses to a single full-width card */ .sd-acct__auth #customer_login { display: block; } .sd-acct__auth #customer_login .u-column1, .sd-acct__auth #customer_login .u-column2 { width: 100%; max-width: none; float: none; margin: 0; } /* the tab strip names each panel — Woo's own "Login"/"Register" h2s are noise (cc-account.css hid the JWB widgets' equivalents by their old selectors) */ .sd-acct__auth #cc-login-panel > h2, .sd-acct__auth #cc-register-panel > h2 { display: none; } /* Woo core draws its own bordered box around form.login / form.register (woocommerce.css, 1px #cfc8d8 + 20px padding). Inside the panel card that reads as a box-in-a-box; the JWB widget wrapper used to neutralise it. NOTE the body prefix is deliberate: `.sd-acct__auth form.login` would TIE woo's `.woocommerce form.login` at (0,2,1) and the winner would then depend on bundle concatenation order — the exact trap that broke the shop filters tonight. (0,3,1) settles it. */ body.woocommerce-account .sd-acct__auth form.login, body.woocommerce-account .sd-acct__auth form.register { border: 0; border-radius: 0; padding: 0; margin: 24px 0 0; } body.cc-acct-js #cc-register-panel { display: none; } /* NOTE: template 39343 also carried #cc-register-panel label,p,.woocommerce-privacy-policy-text,em { color/-webkit-text-fill-color: rgba(255,255,255,.4) } #cc-register-panel .required { color: #0177E3 } Those were NOT ported. Their own comment explains why they existed — "match register-form text color to the login form (login labels render at .4 white)" — i.e. they were a shim for the JWB context, where the login labels rendered at .4 white. Natively the login labels render at --ccr-text-dim (#9aa7bd) and the asterisk is --ccr-accent, so porting the shim MADE the mismatch it was written to fix: the register label rendered .4-white and its * blue while Log In stayed blue-grey/red (Jake, 2026-08-14). Both panels now inherit the same cc-account.css rules and match exactly. */ /* cc-account.css sets an explicit -webkit-text-fill-color on the REGISTER form's direct

    children (`.woocommerce-form-register > p`, dim) and nothing equivalent on the login form. Everything inside those

    s inherits it — and fill beats `color` — so the register panel silently diverged from the login panel in two places (Jake, 2026-08-14): the submit button rendered grey, and the required asterisk rendered dim instead of accent-red. Restate both. (Inherited values always lose to a direct declaration, so these stay plain.) */ .sd-acct .woocommerce-form-register button[name="register"] { -webkit-text-fill-color: #fff; } .sd-acct__auth .required { -webkit-text-fill-color: var(--ccr-accent); } /* ============================================================================= NO GRADIENT HAIRLINES ON ACCOUNT / THANK-YOU (Jake, 2026-08-14) cc-raffles paints a red→accent-2→blue 3px hairline across the top of its cards. In the finalist language the gradient is RAFFLE-ADVERTISING-ONLY, so it comes off every account and thank-you surface. cc-raffles files are left untouched (theme layer is authoritative for presentation on shared surfaces); each override carries an `html` prefix ON PURPOSE so it out-specifies the plugin rule outright instead of tying it and depending on bundle order. The sd-ty hero's own hairline was deleted at source further up this file. ============================================================================= */ body.ccr-account-auth .sd-acct__auth #cc-login-panel::before, body.ccr-account-auth .sd-acct__auth #cc-register-panel::before, /* thank-you: overview pills + order-details card (cc-thankyou.css) */ html body.woocommerce-order-received ul.woocommerce-order-overview::before, html body.woocommerce-order-received .woocommerce-order-details::before, /* ...and the JWB thank-you hero (21894780). Inert wherever the native sd-thankyou template renders, but PROD still serves the JWB thank-you until the arc replay — this is what draws the hairline there. Dies on its own. */ html body.woocommerce-order-received .elementor-element-21894780 .elementor-widget-wrap::before, /* account: sidebar nav card + dashboard cards (cc-account.css) */ html body.woocommerce-account .jet-custom-nav::before, html body.woocommerce-account .ccr-dash__card::before { content: none; } /* "Remember me": cc-account.css asks for inline-flex + align-items:center on this label, but Woo wraps it in p.form-row and the generic `body.woocommerce-account .woocommerce-form label` rule out-specifies it at (0,2,2) — so the flex never engaged, the box sat baseline-aligned and the text rendered ~2px above the checkbox centre (Jake, 2026-08-14). Restate at (0,3,2) so the row genuinely centres. */ body.woocommerce-account .sd-acct__auth label.woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 8px !important; } body.woocommerce-account .sd-acct__auth label.woocommerce-form-login__rememberme input[type="checkbox"] { margin: 0 !important; flex: 0 0 auto; } @media (max-width: 1024px) { .sd-acct__wrap { grid-template-columns: 1fr; gap: 22px; } /* min-width:0 is LOAD-BEARING: a grid item defaults to min-width:auto, so the side column sized itself to the full chip row (1180px) and the whole PAGE scrolled sideways instead of the chip row scrolling inside it. Caught in QA 2026-08-16 — doc scrollWidth was 1200 in a 375px viewport. */ .sd-acct__side { position: static; min-width: 0; } /* ---------- sidebar → horizontal chip scroller (Jake, 2026-08-16) ---------- Stacked, the 8-row nav card consumed the whole first screen on a phone and pushed endpoint content below the fold. Once the grid collapses the sidebar isn't a sidebar, so it becomes a scrollable chip row — same idiom as the shop toolbar. CSS-only: the markup contract (jet-menu classes) is shared with cc-account.css and must not change. Every rule needs !important + a .sd-acct step above cc-account's own: they own this nav at (0,2,1)–(0,4,1) with !important throughout. */ body.woocommerce-account .sd-acct .jet-custom-nav { display: flex !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 8px; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 2px 0 10px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.woocommerce-account .sd-acct .jet-custom-nav::-webkit-scrollbar { display: none; } body.woocommerce-account .sd-acct .jet-custom-nav__item { flex: 0 0 auto; } /* chip: the vertical rail (border-left: 3px) makes no sense on a pill, so it is replaced by a full border rather than left off */ body.woocommerce-account .sd-acct .jet-custom-nav__item-link { border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 99px !important; padding: .5rem .95rem !important; gap: .45rem; white-space: nowrap; background: rgba(255, 255, 255, .03) !important; } body.woocommerce-account .sd-acct .jet-custom-nav .jet-custom-nav__item .jet-custom-item-label { font-size: .82rem !important; } /* current chip: accent outline + tinted wash, replacing the rail + gradient sweep the desktop list uses */ body.woocommerce-account .sd-acct .jet-custom-nav__item.current-menu-item .jet-custom-nav__item-link, body.woocommerce-account .sd-acct .jet-custom-nav__item.ccr-active .jet-custom-nav__item-link { background: rgba(210, 64, 52, .16) !important; border-color: var(--ccr-accent) !important; } body.woocommerce-account .sd-acct .jet-custom-nav__item-link:hover { background: rgba(255, 255, 255, .07) !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; } .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; } } /* ============================================================ 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 s that selectWoo parks off-screen via .select2-hidden-accessible (1x1px, absolute, clipped). Our `body.woocommerce-checkout .form-row select { width:100% !important }` above out-ranks that (0,2,2 vs 0,1,0), so the invisible select became viewport-wide from x=355 and the page scrolled ~350px to the right into dead space (Jake). Confirmed as the winning declaration via the cascade probe before this fix. */ html body.woocommerce-checkout .form-row select.select2-hidden-accessible, html body.woocommerce-checkout select.select2-hidden-accessible { width: 1px !important; height: 1px !important; min-width: 0 !important; position: absolute !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; padding: 0 !important; border: 0 !important; } /* ---- PDP SECTION HEADINGS (2026-08-29) ---- Jake: "Description" should match the description's own white content h2s ("Key Specifications", "FAQ" -- 82,798 products carry them from the feed), not the blue DM Mono kicker. "Description" and "Additional Information" are real

    s now (document outline) styled exactly like those content h2s: same size clamp as the KICKER PARITY block, weight 500, white, no transform. The kicker register stays for labels elsewhere (// CATALOG, // FILTERS). */ .sd-pp h2.sd-pp__sechead { display: block; font-family: inherit; font-size: clamp(1.4rem, 4.8vw, 2rem); font-weight: 500; line-height: 1.2; letter-spacing: normal; text-transform: none; color: #fff; margin: 0 0 16px; } /* ---- A11Y REMEDIATION (backlog #17, 2026-09-01) ---- axe-core sweep fixes with no existing rule to extend. Woo's .show-password-input span renders under 24px on the my-account login (target-size); give it a real box. The checkout quiet-down rule (~L3056) gained body.woocommerce-account scope in the same pass. */ body.woocommerce-account .show-password-input { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 24px !important; min-height: 24px !important; } /* ---- AUTOFILL (2026-09-06) ---- Checkout/account fields are glass over a dark ground; give main.css cc-global-autofill-fix v2 the matching solids (sampled from the rendered page: form rows ~#10131b, payment-box inputs ~#07101a, login ~#0b111e). */ body.woocommerce-checkout { --sd-autofill-bg: #10131b; } body.woocommerce-checkout #payment { --sd-autofill-bg: #07101a; } body.woocommerce-account { --sd-autofill-bg: #0b111e; }