/**
 * custom-ux.css — Signify Dark Child Theme
 * Website Frontend Manager — noelindustriesllc.com
 *
 * All UX CSS overrides live here, organized by page/section.
 * Mobile-first: use min-width breakpoints.
 * Test at: 375px, 768px, 1280px.
 *
 * Avoid !important unless overriding Elementor inline styles (document when used).
 * Use Elementor CSS variables where possible: var(--e-global-color-primary), etc.
 */


/* ═══════════════════════════════════════════════════════════════
   GLOBAL / SITEWIDE
═══════════════════════════════════════════════════════════════ */

/* Global styles that apply across all pages go here */


/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════════ */

/* ── Header logo + compact header row ───────────────────────────
   Applied: 2026-07-14 (sitewide since go-live) — brand representation
   in the site header (Site Suggestions 2026-07-13 #4 / Zach request).
   Logo = custom_logo theme mod, attachment 21663 (transparent 284×160
   export of Site Design/assets/logo.png). */
#masthead .custom-logo-link { display: inline-block; line-height: 0; }
#masthead img.custom-logo {
    max-height: 80px; /* source PNG is 160px tall — stays retina-sharp */
    width: auto;
}

/* One compact row: logo left, nav beside it (was: branding stacked
   above the menu inside ~285px of black padding) */
#masthead .site-header-main { padding: 14px 0; }
#masthead .site-header-main .wrapper {
    display: flex;
    align-items: center;
    /* logo and nav sit together on the left (Zach 2026-07-14),
       not pushed to opposite edges */
    justify-content: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
#masthead .site-branding { margin: 0; }
/* Text branding is already visually hidden (clipped) but its empty
   containers still add ~84px of header height — drop them when the
   logo is present */
#masthead .site-identity { display: none; }
#masthead .site-header-menu,
#masthead .menu-wrapper {
    margin: 0;
    padding: 0;
    border: none;
}

@media (max-width: 760px) {
    #masthead img.custom-logo { max-height: 56px; }
    #masthead .site-header-main { padding: 10px 0; }
    #masthead .site-header-main .wrapper { gap: 16px; }
}


/* ── Mobile UX v1: compact sticky header ────────────────────────
   Staged: 2026-07-16 — Site Suggestions 2026-07-16, suggestion #3.
   The mobile header block cost ~280px of the first screen and
   scrolled away, taking menu + (new) cart icon with it. */
@media (max-width: 760px) {
    /* Fixed, not sticky: a theme ancestor's overflow kills sticky
       (verified on staging 2026-07-16). Body padding compensates. */
    #masthead,
    body.absolute-header #masthead {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 998;
        background: #070707;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    body { padding-top: 57px; }
    body.admin-bar #masthead { top: 46px; }
    body.admin-bar { padding-top: 103px; }
    #masthead img.custom-logo { max-height: 38px; }
    /* One explicit 57px row: the theme adds auto margins + stray
       padding around the branding on mobile (measured 120px tall) */
    #masthead .site-header-main {
        padding: 0;
        height: 57px;
        display: flex;
        align-items: center;
    }
    #masthead .site-header-main .wrapper { flex: 1 1 auto; justify-content: space-between; align-items: center; }
    #masthead .site-branding { margin: 0 !important; padding: 0 !important; }
    #masthead .site-header-menu { margin: 0 !important; padding: 0 !important; }
    #masthead .custom-logo-link { line-height: 0 !important; font-size: 0; height: auto !important; }
    button#menu-toggle { padding: 8px 0 8px 6px; }
    #masthead .menu-toggle-wrapper { display: flex; align-items: center; gap: 2px; }
    /* Drawer taller than the screen must scroll inside the fixed
       header; theme gives the slide-in panel no side padding */
    #masthead .menu-inside-wrapper {
        max-height: calc(100vh - 62px);
        overflow-y: auto;
        padding: 0 20px 28px;
    }
}

/* ── Mobile UX v1: menu toggle icon ─────────────────────────────
   The theme draws the hamburger with an icon font that is not
   loading (renders as a missing-glyph box). Replace with an inline
   SVG; the label gets the display face. */
button#menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
}
button#menu-toggle::before {
    content: '' !important; /* overrides the theme's icon-font glyph */
    display: inline-block;
    width: 22px;
    height: 16px;
    font-size: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16'%3E%3Cg stroke='%23F5F5F5' stroke-width='2'%3E%3Cline x1='0' y1='1' x2='22' y2='1'/%3E%3Cline x1='0' y1='8' x2='22' y2='8'/%3E%3Cline x1='0' y1='15' x2='14' y2='15'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
button#menu-toggle[aria-expanded="true"]::before,
button#menu-toggle.toggled-on::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16'%3E%3Cg stroke='%23F5F5F5' stroke-width='2'%3E%3Cline x1='4' y1='1' x2='18' y2='15'/%3E%3Cline x1='18' y1='1' x2='4' y2='15'/%3E%3C/g%3E%3C/svg%3E");
}
button#menu-toggle::after,
button#menu-toggle .menu-label::before,
button#menu-toggle .menu-label::after { content: none !important; }
button#menu-toggle .menu-label {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F5F5F5;
}

/* ── Mobile UX v1: header cart icon + live count ────────────────
   Suggestion #3: no cart access existed outside the menu drawer.
   Markup from ni_header_cart_icon(); count via cart fragments so
   WPFC-cached pages stay correct. Mobile only — the desktop menu
   already has a Cart link. */
.ni-head-cart { display: none; }
@media (max-width: 760px) {
    /* Rendered at body level, then relocated by script into the
       header's .menu-toggle-wrapper — visible only once it lands
       there, so it can never float loose or overlap the toggle. */
    #masthead .ni-head-cart {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: #F5F5F5;
    }
    .ni-head-cart-count {
        position: absolute;
        top: 1px;
        right: 1px;
        min-width: 17px;
        height: 17px;
        border-radius: 9px;
        background: #CC1515;
        color: #fff;
        font-family: 'IBM Plex Mono', 'Courier New', monospace;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }
    .ni-head-cart-count[data-count="0"] { display: none; }
}

/* ── Mobile UX v1: menu drawer contents ─────────────────────────
   Suggestion #2. Extras markup from ni_drawer_extras() renders
   inside #site-navigation after the page links; flex order puts
   search + shop-all + categories first. Phone widths only — the
   desktop menu stays the plain horizontal row. */
.ni-drawer-extras { display: none; }
@media (max-width: 760px) {
    #site-navigation { display: flex; flex-direction: column; }
    #site-navigation .ni-drawer-extras { display: block; order: -1; padding: 16px 0 6px; }

    .ni-drawer-search {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #1C1C1C;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 2px;
        padding: 0 6px 0 14px;
        margin-bottom: 14px;
    }
    .ni-drawer-search input[type="search"] {
        flex: 1;
        height: 46px;
        background: none;
        border: none;
        color: #F5F5F5;
        font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
        font-size: 16px; /* 16px stops iOS zoom-on-focus */
        outline: none;
        box-shadow: none;
    }
    .ni-drawer-search button {
        background: none;
        border: none;
        color: #909090;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ni-drawer-shopall {
        display: block;
        text-align: center;
        background: #CC1515;
        color: #fff !important;
        border-radius: 2px;
        padding: 14px 0;
        font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-decoration: none !important;
        margin-bottom: 18px;
    }
    .ni-drawer-label {
        font-family: 'IBM Plex Mono', 'Courier New', monospace;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #E01C1C;
        margin: 0 0 2px;
    }
    ul.ni-drawer-cats { list-style: none; margin: 0; padding: 0; }
    ul.ni-drawer-cats a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        text-decoration: none !important;
    }
    .ni-drawer-cat-name {
        font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #F5F5F5;
    }
    .ni-drawer-cat-side { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
    .ni-drawer-cat-from {
        font-family: 'IBM Plex Mono', 'Courier New', monospace;
        font-size: 11px;
        color: #909090;
    }
    .ni-drawer-cat-from .woocommerce-Price-amount { color: inherit; }
    .ni-drawer-cat-arrow { color: #CC1515; font-family: 'Oswald', Arial, sans-serif; font-size: 16px; }

    /* Page links (Home / Contact / Shop / Cart / My account) below
       the categories: readable Barlow rows, 44px+ tap targets */
    #masthead #primary-menu li a {
        display: block;
        font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
        font-size: 16px;
        color: #B8B8B8;
        padding: 12px 0;
    }
    #masthead #primary-menu li.current-menu-item > a { color: #E01C1C; }
}


/* ═══════════════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════════════ */

/* ── Home page layout at go-live (2026-07-14) ───────────────────
   Hero renders above #content (header-media.php override); commerce
   sections render from post_content shortcodes. Kill the theme's
   91px content-wrapper top pad and the "Noel Industries" entry
   header on the front page — the hero H1 is the page H1 now. */
.home #content > .wrapper { padding-top: 0; }
.home .entry-header { display: none; }

/* The commerce sections render inside .entry-content on the homepage,
   so the theme's content-link styles (underline, link color) bleed
   into our cards. Reset them. !important needed: the theme's
   dark-scheme entry-content selectors outrank ours. */
.entry-content .ni-sec-head a,
.entry-content .ni-cat-card,
.entry-content .ni-cat-card span,
.entry-content .ni-prod-name a,
.entry-content .ni-prod-btn,
.entry-content .ni-hero2-btn {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.entry-content .ni-cat-name,
.entry-content .ni-prod-name a { color: #F5F5F5 !important; }
.entry-content .ni-prod-name a:hover { color: #E01C1C !important; }
.entry-content .ni-cat-from { color: #F5F5F5 !important; }
.entry-content .ni-prod-btn { color: #fff !important; }
.entry-content .ni-sec-head a { color: #E01C1C !important; }
.entry-content .ni-sec-head a:hover { color: #F5F5F5 !important; }

/* ── Hero v2: merchandising hero (photo + copy + red CTA) ───────────
   Applied: 2026-07-14, LIVE on the front page since go-live.
   Source: Site Suggestions 2026-07-13 report, suggestion #1 ("Replace
   the splash hero with a merchandising hero") — visual spec from
   mockups/homepage-after.html (.hero block).
   Markup: ni_hero_v2_markup() in functions-ux.php, rendered by the
   template-parts/header/header-media.php override on the front page.
   Supersedes the retired 2026-02-27 typewriter/particle hero. */

.ni-hero2 {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 640px;
    background-color: #0C0C0C;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    /* Full-bleed even when rendered inside a boxed content wrapper
       (staging preview page); computes to ~0 when the parent is
       already full-width (front-page template override). */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}

/* Readability scrim — near-black over the left column where the copy
   sits, fading out toward the photo on the right */
.ni-hero2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(7, 7, 7, 0.96) 0%,
        rgba(7, 7, 7, 0.88) 34%,
        rgba(7, 7, 7, 0.42) 62%,
        rgba(7, 7, 7, 0.15) 100%);
}

.ni-hero2-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 72px 48px;
}

/* Kicker — mono, brand-red, uppercase */
.ni-hero2-kicker {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #E01C1C;
    margin: 0 0 18px;
}

/* Headline — instant render (no typewriter), red accent periods */
.ni-hero2-title {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(2.75rem, 6vw, 4.75rem); /* 44px → 76px */
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #F5F5F5;
    margin: 0 0 22px;
}
.ni-hero2-dot { color: #CC1515; }

/* Value proposition */
.ni-hero2-sub {
    font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.1875rem); /* 16px → 19px */
    line-height: 1.55;
    color: #B8B8B8;
    max-width: 560px;
    margin: 0 0 34px;
}
.ni-hero2-sub strong { color: #CDD2D8; font-weight: 600; }

/* CTA row */
.ni-hero2-cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.ni-hero2-btn {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px 34px;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, box-shadow 0.2s ease;
}
.ni-hero2-btn:hover,
.ni-hero2-btn:focus { text-decoration: none; outline: none; }
.ni-hero2-btn:focus-visible { outline: 2px solid #E01C1C; outline-offset: 3px; }

.ni-hero2-btn--solid {
    background: #CC1515;
    color: #fff;
    box-shadow: 0 0 24px rgba(204, 21, 21, 0.35);
}
.ni-hero2-btn--solid:hover,
.ni-hero2-btn--solid:focus {
    background: #E01C1C;
    color: #fff;
    box-shadow: 0 0 28px rgba(224, 28, 28, 0.45);
}

.ni-hero2-btn--ghost {
    border: 1px solid #8C9198;
    color: #CDD2D8;
    background: rgba(12, 12, 12, 0.5);
}
.ni-hero2-btn--ghost:hover,
.ni-hero2-btn--ghost:focus {
    border-color: #CDD2D8;
    color: #F5F5F5;
    background: rgba(12, 12, 12, 0.7);
}

/* Mobile ≤760px — photo re-centers, copy over a slightly deeper scrim,
   CTAs stack full-width */
@media (max-width: 760px) {
    .ni-hero2 { min-height: 560px; background-position: center; }
    .ni-hero2::before {
        background: linear-gradient(90deg,
            rgba(7, 7, 7, 0.94) 0%,
            rgba(7, 7, 7, 0.82) 45%,
            rgba(7, 7, 7, 0.55) 100%);
    }
    .ni-hero2-inner { padding: 56px 20px; }
    .ni-hero2-sub { margin-bottom: 28px; }
    .ni-hero2-cta-row { flex-direction: column; align-items: stretch; }
}


/* ═══════════════════════════════════════════════════════════════
   SHOP PAGE (WooCommerce archive)
═══════════════════════════════════════════════════════════════ */

/* ── Shop v2: card grid + category chips ────────────────────────
   Staged: 2026-07-15 — Site Suggestions 2026-07-15, suggestions #1
   (Barn2 table → merchandised card grid) and #3 (category chips).
   Markup: native WooCommerce loop (table disabled via the
   wc_product_table_use_table_layout filter in functions-ux.php)
   plus ni_shop_category_chips / ni_loop_badge / ni_loop_cat_kicker.
   Visual spec: Site Suggestions 2026-07-15 mockups/shop-after.html. */

/* Category chips — Oswald uppercase, red active state */
.ni-shop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
}
.ni-shop-chips a {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B8B8B8;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    padding: 9px 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ni-shop-chips a:hover,
.ni-shop-chips a:focus {
    border-color: #B2B5BA;
    color: #F5F5F5;
    text-decoration: none;
}
.ni-shop-chips a.ni-chip-on {
    background: #CC1515;
    border-color: #CC1515;
    color: #fff;
}

/* Result count + sort row above the grid */
.woocommerce-result-count {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666666;
}
.woocommerce-ordering select {
    font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #B8B8B8;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    padding: 8px 12px;
}

/* Product card grid. !important overrides WooCommerce's float/width
   columns layout, which the grid replaces entirely. Covers the shop
   archive, category archives, and the PDP related-products row. */
.post-type-archive-product ul.products,
.tax-product_cat ul.products,
.single-product ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0 0 48px !important;
    padding: 0 !important;
    list-style: none;
}
.post-type-archive-product ul.products::before,
.post-type-archive-product ul.products::after,
.tax-product_cat ul.products::before,
.tax-product_cat ul.products::after,
.single-product ul.products::before,
.single-product ul.products::after { display: none; } /* Woo clearfix breaks grid */

.post-type-archive-product ul.products li.product,
.tax-product_cat ul.products li.product,
.single-product ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.post-type-archive-product ul.products li.product:hover,
.tax-product_cat ul.products li.product:hover,
.single-product ul.products li.product:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

/* The product link wraps image + kicker + title + price. Flexing it
   lets the price's margin-top:auto push to the card bottom, so
   prices and buttons align across a row regardless of title length. */
ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > a:first-of-type {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* White image well — contain, not crop: catalog photos are a mix of
   square studio shots and phone photos */
ul.products li.product a img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    margin: 0 !important;
    display: block;
}

/* Badge chips (Best Seller / New) over the photo */
.ni-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: #CC1515;
    border-radius: 2px;
    padding: 4px 9px;
}
.ni-badge--new { background: #303030; color: #CDD2D8; }

/* Hide Woo's default sale flash inside cards (clashes with badges);
   sale price styling below still shows the discount */
ul.products li.product span.onsale { display: none; }

/* Category kicker on the card */
.ni-loop-cat {
    display: block;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #666666;
    padding: 14px 16px 0;
}

/* Product name */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.3;
    color: #F5F5F5;
    margin: 6px 0 0 !important;
    padding: 0 16px !important;
}
ul.products li.product a,
ul.products li.product a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    color: #F5F5F5;
}

/* Price — pushed to the bottom edge of the text area */
ul.products li.product .price {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600;
    color: #F5F5F5 !important;
    margin: auto 0 0 !important;
    padding: 10px 16px 0 !important;
    display: block;
}
ul.products li.product .price del { color: #666666; font-size: 15px; }
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .price .woocommerce-Price-amount { color: inherit; }

/* Buy button — brand red, full card width */
ul.products li.product .button,
ul.products li.product a.button {
    display: block;
    margin: 12px 16px 16px !important;
    background: #CC1515 !important; /* theme buttons are purple/green */
    color: #fff !important;
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 11px 10px;
    border: none;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}
ul.products li.product .button:hover,
ul.products li.product a.button:hover {
    background: #E01C1C !important;
    color: #fff !important;
}
/* "N products in cart" style links Woo appends after ajax add */
ul.products li.product .added_to_cart {
    display: block;
    padding: 0 16px 14px;
    font-size: 13px;
    color: #E01C1C;
}

/* Responsive: 3-up below 1080, 2-up below 760 with scrollable chips */
@media (max-width: 1080px) {
    .post-type-archive-product ul.products,
    .tax-product_cat ul.products,
    .single-product ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .post-type-archive-product ul.products,
    .tax-product_cat ul.products,
    .single-product ul.products { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ni-badge { font-size: 9px; padding: 3px 7px; letter-spacing: 0.08em; }
    .ni-shop-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        margin-bottom: 18px;
    }
    ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product h2 { font-size: 14px !important; padding: 0 11px !important; }
    .ni-loop-cat { padding: 10px 11px 0; }
    ul.products li.product .price { font-size: 17px !important; padding: 8px 11px 0 !important; }
    ul.products li.product .button,
    ul.products li.product a.button { margin: 10px 11px 12px !important; font-size: 12px; }
}


/* ── Mobile UX v1: slim title band + breadcrumb + touch polish ──
   Staged: 2026-07-16 — Site Suggestions 2026-07-16, suggestions #3
   (dead-space title band) and #7 (touch targets). The Oswald title
   face applies at all widths (07-15 report #4); the compaction is
   mobile-only. */

/* Page titles: Oswald instead of the theme's Playfair serif */
.woocommerce-products-header__title.page-title,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-account h1.entry-title {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.woocommerce-products-header__title.page-title::after { content: '.'; color: #CC1515; }
/* The shop page's description block is empty markup cruft */
.woocommerce-products-header .page-description { display: none; }

/* Breadcrumbs: mono, one line, ellipsized on phones */
.woocommerce-breadcrumb {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #666666;
}
.woocommerce-breadcrumb a { color: #909090; text-decoration: none; border-bottom: none; }
.woocommerce-breadcrumb a:hover { color: #F5F5F5; }

@media (max-width: 760px) {
    /* First product card was 482px down: compact the band */
    #content > .wrapper { padding-top: 12px; }
    .woocommerce-products-header__title.page-title {
        font-size: 30px;
        text-align: left;
        margin: 4px 0 14px;
        padding: 0;
    }
    .woocommerce-cart h1.entry-title,
    .woocommerce-checkout h1.entry-title,
    .woocommerce-account h1.entry-title { font-size: 30px; }
    .woocommerce-breadcrumb {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
        padding: 6px 0;
        margin-bottom: 2px;
    }

    /* Chip row clips mid-chip with no affordance: right-edge fade */
    .ni-shop-chips {
        -webkit-mask-image: linear-gradient(90deg, #000 91%, transparent);
        mask-image: linear-gradient(90deg, #000 91%, transparent);
    }

    /* 44px tap targets (loop buttons measured 34px) */
    ul.products li.product .button,
    ul.products li.product a.button { padding-top: 13px; padding-bottom: 13px; }
    .woocommerce-ordering select { min-height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT PAGE (WooCommerce single product)
═══════════════════════════════════════════════════════════════ */

/* ── PDP v2: buy box rebuild ────────────────────────────────────
   Staged: 2026-07-15 — Site Suggestions 2026-07-15, suggestion #2.
   Content hooks (kicker, stock line, fitment helper, payments,
   trust bullets) in functions-ux.php. Visual spec: Site Suggestions
   2026-07-15 mockups/product-after.html. */

/* Product title — Oswald, replaces the theme-default serif */
.single-product .entry-title {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* Category kicker above the title area */
.ni-pdp-kicker {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #E01C1C;
    margin: 0 0 6px;
}

/* Price — Oswald white (was orange serif). The inner
   .woocommerce-Price-amount span carries the theme's red — force
   inherit down the chain. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-variation-price .price {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 600;
    color: #F5F5F5 !important;
}
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product span.price .woocommerce-Price-amount,
.woocommerce div.product p.price bdi,
.woocommerce div.product span.price bdi {
    color: inherit !important;
}
.woocommerce div.product .price del { color: #666666; font-size: 20px; }
.woocommerce div.product .price ins { text-decoration: none; }

/* Stock + ships-from line */
.ni-pdp-stock {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3FBF5A;
    margin: 4px 0 14px;
}

/* Fitment module — the variations table gets the boxed, red-edged
   treatment so "pick your boat" reads as the step it is */
.woocommerce div.product form.cart table.variations {
    display: block;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid #CC1515;
    border-radius: 3px;
    padding: 16px 18px;
    margin: 6px 0 4px;
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
}
.woocommerce div.product form.cart table.variations tr + tr { margin-top: 14px; }
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations th.label label {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #B2B5BA;
    margin: 0 0 8px;
}
.woocommerce div.product form.cart table.variations select {
    width: 100%;
    max-width: 100%;
    font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    color: #F5F5F5;
    background: #1C1C1C;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    padding: 12px 14px;
}
.woocommerce div.product form.cart .reset_variations {
    font-size: 12px;
    color: #909090;
}

/* Fitment helper sentence (inside the form, above the button) */
.ni-fitment-help {
    font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13.5px;
    color: #909090;
    margin: 10px 0 14px;
    max-width: 480px;
}

/* Quantity + Add to Cart row */
.woocommerce div.product form.cart .quantity .qty {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    color: #F5F5F5;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 16px;
    height: 52px;
    width: 74px;
    text-align: center;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
    background: #CC1515 !important; /* theme default renders purple */
    color: #fff !important;
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: none;
    border-radius: 2px;
    padding: 15px 34px;
    height: 52px;
    transition: background-color 0.2s ease;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: #E01C1C !important;
    color: #fff !important;
}
/* Disabled state (no boat brand picked yet) read as broken at Woo's
   default ~50% fade. Keep it near-bright; ni-mobile-ux.js turns a
   tap on it into a scroll-to-fitment instead of the browser alert.
   (Mobile UX v1, suggestion #7.) */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: 0.9 !important;
    background: #CC1515 !important;
    color: #fff !important;
    cursor: pointer;
}

/* Payment methods line */
.ni-pdp-pay {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666666;
    margin: 14px 0 0;
}

/* Trust bullets — 2-column grid with red square markers */
ul.ni-pdp-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 18px;
    list-style: none;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
ul.ni-pdp-trust li {
    font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #B8B8B8;
    margin: 0;
    padding-left: 18px;
    position: relative;
}
ul.ni-pdp-trust li::before {
    content: '\25A0'; /* small red square */
    color: #CC1515;
    font-size: 9px;
    position: absolute;
    left: 0;
    top: 4px;
}

/* Tabs + section headings — Oswald instead of the theme serif */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs .panel h2,
.single-product .related > h2,
.single-product section.related h2:first-of-type,
.single-product .up-sells > h2 {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #E01C1C; }

@media (max-width: 760px) {
    ul.ni-pdp-trust { grid-template-columns: 1fr; }
    .woocommerce div.product p.price,
    .woocommerce div.product span.price { font-size: 26px !important; }
}


/* ── Mobile UX v1: sticky buy bar ───────────────────────────────
   Staged: 2026-07-16 — Site Suggestions 2026-07-16, suggestion #1.
   Add to Cart sat 1,770px down the page with no way back. Markup
   from ni_sticky_atc_bar(); ni-mobile-ux.js toggles --on whenever
   the real button is off-screen. Mobile only. */
.ni-sticky-atc { display: none; }
@media (max-width: 760px) {
    .ni-sticky-atc {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 997;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(12, 12, 12, 0.97);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        transform: translateY(110%);
        transition: transform 0.25s ease;
    }
    .ni-sticky-atc--on { transform: none; }
    .ni-sticky-atc__price {
        display: block;
        font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
        font-size: 19px;
        font-weight: 600;
        color: #F5F5F5;
        white-space: nowrap;
    }
    .ni-sticky-atc__price .woocommerce-Price-amount { color: inherit; }
    .ni-sticky-atc__stock {
        display: block;
        font-family: 'IBM Plex Mono', 'Courier New', monospace;
        font-size: 9.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #3FBF5A;
    }
    .ni-sticky-atc__btn {
        flex: 1;
        height: 46px;
        background: #CC1515;
        color: #fff;
        border: none;
        border-radius: 2px;
        font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }
    /* Keep the page end + chat bubble clear of the bar */
    .single-product .ni-footer .ni-footer-inner { padding-bottom: 96px; }
    .single-product .chaty-widget,
    .single-product #chaty-widget-0 { bottom: 84px !important; } /* Chaty positions inline */
}

/* Fitment-box highlight when the sticky bar / disabled button
   routes the shopper to "pick your boat first" */
.ni-flash { animation: ni-flash 1.3s ease; }
@keyframes ni-flash {
    0%, 55% { box-shadow: 0 0 0 3px rgba(224, 28, 28, 0.75); }
    100%    { box-shadow: 0 0 0 3px rgba(224, 28, 28, 0); }
}

/* ── Mobile UX v1: 3D viewer behind a View-in-3D control ────────
   Suggestion #1 (dead zone): the 3D viewer block loads a ~350px
   near-black model between gallery and buy box on mobile. Hidden
   until asked for; desktop unchanged. Button markup from
   ni_view3d_button(), removed by JS when a product has no viewer. */
.ni-view3d { display: none; }
@media (max-width: 760px) {
    .single-product .modelViewerBlock { display: none !important; }
    body.single-product.ni-3d-open .modelViewerBlock { display: block !important; }
    .ni-view3d {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 2px;
        color: #F5F5F5;
        font-family: 'IBM Plex Mono', 'Courier New', monospace;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 11px 16px;
        margin: 2px 0 14px;
    }
}

/* ── Mobile UX v1: gallery zoom trigger ─────────────────────────
   Suggestion #8: the trigger is literally the 🔍 emoji served as an
   image from s.w.org. Proper SVG magnifier on a dark disc. */
.woocommerce-product-gallery__trigger img.emoji { display: none !important; }
.woocommerce-product-gallery__trigger {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(12, 12, 12, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='6.5' stroke='%23F5F5F5' stroke-width='2'/%3E%3Cline x1='13.6' y1='13.6' x2='19' y2='19' stroke='%23F5F5F5' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── Mobile UX v1: product meta (SKU / categories / tags) ───────
   Suggestion #8: was a block of underlined links. Compact mono;
   tags hidden on phones. */
.single-product .product_meta {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #666666;
}
.single-product .product_meta a {
    color: #909090;
    text-decoration: none;
    border-bottom: none;
}
.single-product .product_meta a:hover { color: #F5F5F5; }
@media (max-width: 760px) {
    .single-product .product_meta .tagged_as { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   CART PAGE
═══════════════════════════════════════════════════════════════ */

/* ── Mobile UX v1: cart page rebrand (block cart, CSS only) ─────
   Staged: 2026-07-16 — Site Suggestions 2026-07-16, suggestion #5.
   The cart missed the v2 revamp: serif title, sad-face icon, small
   text link, pre-revamp "New in store" widget with gray buttons.
   Title face is handled in the title-band block above. */

/* Empty state: Oswald headline, no sad face, red CTA button */
.wc-block-cart__empty-cart__title {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
/* !important: the block styles ship the icon with equal specificity */
.woocommerce-cart .with-empty-cart-icon::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
}
.wp-block-woocommerce-empty-cart-block > p.has-text-align-center a {
    display: inline-block;
    background: #CC1515;
    color: #fff !important;
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 14px 36px;
    border-radius: 2px;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background-color 0.2s ease;
}
.wp-block-woocommerce-empty-cart-block > p.has-text-align-center a:hover { background: #E01C1C; }
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator { display: none; }
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    text-transform: uppercase;
}

/* "New in store" product grid → v2 card treatment */
.wc-block-grid__product {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    padding-bottom: 14px;
}
.wc-block-grid__product-link { text-decoration: none !important; border-bottom: none !important; }
.wc-block-grid__product-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}
.wc-block-grid__product-title {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #F5F5F5 !important;
    text-decoration: none !important;
    padding: 0 12px;
}
.wc-block-grid__product-price {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600;
    color: #F5F5F5 !important;
}
.wc-block-grid__product-price .woocommerce-Price-amount { color: inherit !important; }
.wc-block-grid__products .wp-block-button__link,
.wc-block-grid__products .add_to_cart_button {
    background: #CC1515 !important;
    color: #fff !important;
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 2px;
    padding: 12px 18px;
}
.wc-block-grid__products .wp-block-button__link:hover,
.wc-block-grid__products .add_to_cart_button:hover { background: #E01C1C !important; }

/* Filled cart: primary action button to brand red */
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-components-button:not(.is-link) {
    background: #CC1515 !important;
    color: #fff !important;
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
}
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-components-button:not(.is-link):hover { background: #E01C1C !important; }


/* ═══════════════════════════════════════════════════════════════
   CHECKOUT PAGE
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   MY ACCOUNT PAGE
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */

/* ── Mobile UX v1: real sitewide footer ─────────────────────────
   Staged: 2026-07-16 — Site Suggestions 2026-07-16, suggestion #4.
   Theme footer was a bare copyright line. Markup from
   ni_site_footer(); the theme's #site-generator is hidden and its
   copyright line lives in our footer instead. */
/* The copyright line was #colophon's only content; hiding the whole
   footer element also removes the empty black band it leaves */
#colophon { display: none; }

.ni-footer {
    background: #070707;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ni-footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 44px 48px 36px;
}
.ni-footer-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    gap: 28px 64px;
}
.ni-footer-h {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E01C1C;
    margin: 0 0 10px;
}
.ni-footer-col a {
    display: block;
    font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14.5px;
    color: #B8B8B8;
    padding: 5px 0;
    text-decoration: none;
    border-bottom: none;
}
.ni-footer-col a:hover { color: #F5F5F5; text-decoration: none; }
.ni-footer-trust {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B2B5BA;
    margin: 26px 0 6px;
}
.ni-footer-pay {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #666666;
    margin: 0;
}
.ni-footer-copy {
    font-size: 12.5px;
    color: #666666;
    margin: 14px 0 0;
}
.ni-footer-copy a { color: #909090; text-decoration: none; border-bottom: none; }

@media (max-width: 760px) {
    .ni-footer-inner { padding: 30px 20px 26px; }
    .ni-footer-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
    .ni-footer-col a { padding: 6px 0; } /* comfortable tap rows */
}

/* ── Mobile UX v1: Chaty chat bubble ────────────────────────────
   Suggestion #6: the "Contact us" pill + bubble sat on top of the
   buy buttons. Collapse the persistent pill on phones (the bubble
   itself stays — the fitment helper copy points at it); the
   product-page bottom offset lives in the sticky-buy-bar block. */
@media (max-width: 760px) {
    .chaty .on-hover-text { display: none !important; } /* the "Contact us" pill */
    /* Theme back-to-top button: another broken icon-font glyph, and
       it stacks with the chat bubble + sticky buy bar on phones */
    a#scrollup.backtotop { display: none !important; }
}


/* ── Homepage v2: commerce sections (categories + best sellers) ─────
   Applied: 2026-07-14
   Source: Site Suggestions 2026-07-13 report, suggestion #2 ("Put
   commerce on the homepage") — visual spec from
   mockups/homepage-after.html (.sec-head/.cat-grid/.prod-grid).
   Markup: ni_home_categories_markup() / ni_best_sellers_markup() in
   functions-ux.php ([ni_home_categories] / [ni_best_sellers]).
──────────────────────────────────────────────────────────────────── */

.ni-sec {
    background: #0C0C0C;
    /* full-bleed background inside a boxed wrapper (same pattern as
       .ni-hero2); ~0 when the parent is already full-width */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.ni-sec-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 64px 48px;
}

/* Section head — Oswald H2 with red underline bar, mono view-all link */
.ni-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.ni-sec-head h2 {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.375rem); /* 28px → 38px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #F5F5F5;
    margin: 0;
    padding: 0;
}
.ni-sec-head h2::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    background: #CC1515;
    margin-top: 10px;
}
.ni-sec-head a {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 13px;
    color: #E01C1C;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.ni-sec-head a:hover { color: #F5F5F5; text-decoration: none; }

/* Category grid — 6 tiles, red border on hover */
.ni-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ni-cat-card {
    display: block;
    position: relative;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.ni-cat-card:hover,
.ni-cat-card:focus { border-color: #CC1515; text-decoration: none; }
.ni-cat-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: #fff;
}
/* Tiles flagged 'contain' in the PHP config: square source photos were
   losing the top/bottom of the product to the 4:3 crop — show the full
   photo, letterboxed on the card background */
.ni-cat-card img.ni-fit-contain {
    object-fit: contain;
    background: #141414;
}
/* White letterbox for white-background product shots */
.ni-cat-card img.ni-fit-contain.ni-bg-white { background: #fff; }
.ni-cat-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
}
.ni-cat-name {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 19px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #F5F5F5;
}
.ni-cat-from {
    /* Match the Best Sellers price styling (Oswald semibold, white) —
       scaled down one step for the secondary tile context */
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #F5F5F5;
    white-space: nowrap;
}
.ni-cat-from .woocommerce-Price-amount { color: inherit; }
.ni-cat-arrow { color: #CC1515; font-size: 20px; line-height: 1; }

/* Best sellers grid — 4 product cards, white image wells */
.ni-prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ni-prod-card {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.ni-prod-card:hover { border-color: rgba(255, 255, 255, 0.12); }
.ni-prod-imgwrap {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: #fff;
}
.ni-prod-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ni-prod-info { padding: 16px 16px 18px; }
.ni-prod-name {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 12px;
    padding: 0;
    line-height: 1.3;
}
.ni-prod-name a { color: #F5F5F5; text-decoration: none; }
.ni-prod-name a:hover { color: #E01C1C; text-decoration: none; }
.ni-prod-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.ni-prod-price {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #F5F5F5;
}
.ni-prod-price .woocommerce-Price-amount { color: inherit; }
/* WooCommerce prints an a11y "Price range: X through Y" span — keep it
   for screen readers, hide it visually */
.ni-prod-price .screen-reader-text {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px; height: 1px;
    overflow: hidden;
}
.ni-prod-btn {
    font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #CC1515;
    color: #fff;
    padding: 9px 14px;
    border-radius: 2px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.ni-prod-btn:hover,
.ni-prod-btn:focus { background: #E01C1C; color: #fff; text-decoration: none; }

/* Mobile ≤760px */
@media (max-width: 760px) {
    .ni-sec-inner { padding: 52px 20px; }
    .ni-cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ni-cat-cap { padding: 12px 12px; flex-wrap: wrap; }
    .ni-cat-name { font-size: 15px; }
    .ni-cat-from { font-size: 14px; }
    .ni-prod-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ni-prod-name { font-size: 15px; }
    .ni-prod-price { font-size: 17px; }
}