/* ============================================================
   Prowire v2 design layer
   Header, footer and product page. Loaded last (Head.cshtml), so it
   sits on top of bootstrap + styles.css + custom.css. New markup uses
   pw2-* classes; Nop components that are reused as-is (search box,
   main menu, header links, newsletter, tier prices...) are restyled
   here under a pw2-* parent so the rules never leak to other pages.
   Colors and type come from the Prowire USA design system.
   V3 (prowirev3) = copy of prowirev2 with black text; nav/footer stay steel.
   ============================================================ */

:root {
    --pw-blue: #e8590c;          /* header bar + primary buttons (white text passes AA) */
    --pw-blue-700: #c2410c;
    --pw-electric: #fd7e14;      /* logo blue, accents only */
    --pw-steel: #c2410c;         /* links */
    --pw-navy: #3d434b;          /* DCS-V3: category nav, footer, dark buttons in charcoal gray (Joey, 2026-09-26);
                                    white on it is 10:1 */
    --pw-navy-950: #2a2e33;      /* footer legal strip, one step darker than --pw-navy */
    --pw-tint: #fff1e6;
    --pw-page: #f8f9fa;
    --pw-border: #dee2e6;
    --pw-border-2: #ced4da;
    --pw-text: #000;             /* V3: black text (v2 uses #212529 / #343a40 and steel headings) */
    --pw-text-2: #000;
    --pw-ink: #000;              /* headings and titles that v2 colors steel blue */
    --pw-ink-1: #000;            /* order-ui.css body ink, used by the portal and order pages */
    --pw-ink-2: #000;
    --pw-muted: #6c757d;
    --pw-green: #198754;
    --pw-green-700: #146c43;
    --pw-amber: #ffc107;
    --pw-red: #cc0000;
    --pw-display: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
    --pw-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --pw-radius: 12px;
    --pw-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);
}

.pw2-container {
    width: 100%;
    max-width: 1328px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.pw2-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--pw-blue);
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0;
    border: 0;
    box-shadow: none;
}

.pw2-bar {
    background: var(--pw-blue);
    color: #fff;
}

.pw2-bar__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
}

.pw2-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 -8px 0 -10px;
    padding: 0;
    border: 0 !important;
    background: none !important;
    color: #fff;
    box-shadow: none !important;
}

.pw2-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .pw2-logo img {
        display: block;
        height: 40px;
        width: auto;
    }

.pw2-hlink {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.pw2-hlink__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

    .pw2-hlink__text small {
        font-size: 12px;
        color: #fee1d0;
    }

    .pw2-hlink__text strong {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 14px;
        font-weight: 700;
    }

.pw2-hlink:hover .pw2-hlink__text strong {
    text-decoration: underline;
}

/* Search: the stock Nop search box, restyled as a white pill with the button inside. */
.pw2-header .pw2-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible; /* the old .search-box{overflow:hidden} clipped the autocomplete list */
    background: none;
    border: 0;
    float: none;
}

.pw2-search #small-search-box-form {
    float: none;
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 4px 4px 4px 20px;
    box-sizing: border-box;
    background: #fff;
    border: 0;
    border-radius: 999px;
}

.pw2-search .search-box-text {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 38px;
    margin: 0;
    padding: 0 !important; /* the old theme adds 20px on top of the pill's own padding */
    border: 0 !important;
    outline: none;
    background: transparent;
    box-shadow: none !important;
    font-size: 15px;
    color: var(--pw-text);
}

.pw2-search .search-box-category {
    height: 38px;
    max-width: 170px;
    border: 0;
    border-left: 1px solid var(--pw-border);
    background: transparent;
    font-size: 13px;
    color: var(--pw-text-2);
    padding: 0 8px;
}

.pw2-search .search-box-button {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

    .pw2-search .search-box-button::after {
        content: "Search";
        text-transform: none;
    }

    .pw2-search .search-box-button svg {
        width: 17px;
        height: 17px;
        fill: #fff;
    }

    .pw2-search .search-box-button:hover {
        background: #000;
    }

.pw2-search .ui-autocomplete {
    top: 52px !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px 0;
    border: 0;
    border-radius: var(--pw-radius);
    background: #fff;
    box-shadow: var(--pw-shadow-lg);
    color: var(--pw-text);
    z-index: 1200;
}

/* Account: trigger + dropdown holding the stock HeaderLinks. */
.pw2-account {
    position: relative;
    flex-shrink: 0;
}

.pw2-account__menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 1100;
    width: 290px;
    padding: 8px;
    box-sizing: border-box;
    background: #fff;
    color: var(--pw-text);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    box-shadow: var(--pw-shadow-lg);
    text-align: left;
}

    /* hover bridge so the menu doesn't close while the pointer crosses the gap */
    .pw2-account__menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
    }

    /* caret under the trigger */
    .pw2-account__menu::after {
        content: "";
        position: absolute;
        top: -7px;
        right: 34px;
        width: 12px;
        height: 12px;
        background: #fff;
        border-left: 1px solid var(--pw-border);
        border-top: 1px solid var(--pw-border);
        transform: rotate(45deg);
    }

.pw2-account.is-open .pw2-account__menu {
    display: block;
}

/* Signed in: who you are */
.pw2-account__who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--pw-border);
}

.pw2-account__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 19px;
}

.pw2-account__id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

    .pw2-account__id strong {
        font-size: 15px;
        font-weight: 600;
        color: var(--pw-text);
    }

    .pw2-account__id small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12.5px;
        color: var(--pw-muted);
    }

.pw2-account__custno {
    margin-top: 3px;
    font-family: var(--pw-mono);
    font-size: 11.5px !important;
}

    .pw2-account__custno:empty {
        display: none;
    }

/* Guest: sign-in button + register line */
.pw2-account__signin {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 6px 6px 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .pw2-account__signin:hover {
        background: var(--pw-blue-700);
    }

.pw2-account__new {
    margin: 10px 0 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pw-border);
    text-align: center;
    font-size: 13px;
    color: var(--pw-muted);
}

    .pw2-account__new a {
        color: var(--pw-blue);
        font-weight: 600;
    }

/* Menu rows (the stock HeaderLinks list) */
.pw2-account .header-links-wrapper,
.pw2-account .header-links {
    position: static;
    display: block;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

    .pw2-account .header-links ul {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    }

    .pw2-account .header-links li {
        display: block;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        line-height: 1.3;
    }

    .pw2-account .header-links li a {
        display: flex !important;
        align-items: center;
        gap: 12px;
        height: auto !important;
        min-height: 0 !important;
        padding: 9px 10px !important;
        margin: 0 !important;
        border: 0;
        border-radius: 6px;
        background: none;
        color: var(--pw-text) !important;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3 !important;
        letter-spacing: 0;
        text-transform: none;
        text-decoration: none !important;
    }

        .pw2-account .header-links li a:hover {
            background: var(--pw-page);
            color: var(--pw-blue) !important;
        }

        .pw2-account .header-links li a > svg {
            display: none;
        }

        .pw2-account .header-links li a > svg.pw2-ico {
            display: block;
            flex: 0 0 18px;
            color: var(--pw-muted);
        }

        .pw2-account .header-links li a:hover > svg.pw2-ico {
            color: var(--pw-blue);
        }

    .pw2-account .header-links .logout-item {
        margin-top: 5px !important;
        padding-top: 5px !important;
        border-top: 1px solid var(--pw-border);
    }

    /* covered above the list: the sign-in button, the register line, the customer number */
    .pw2-account .header-links li:has(> .ico-login),
    .pw2-account .header-links li:has(> .ico-register),
    .pw2-account .header-links .support-ids,
    .pw2-account .header-links .networks {
        display: none !important;
    }

.pw2-account .header-selectors-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

    .pw2-account .header-selectors-wrapper:not(:empty) {
        margin-top: 6px;
        padding: 10px 6px 4px;
        border-top: 1px solid var(--pw-border);
    }

    .pw2-account .header-selectors-wrapper select {
        width: 100%;
    }

/* Cart */
.pw2-cart {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

    .pw2-cart .topcartlink {
        margin: 0;
        padding: 0;
        background: none;
    }

    .pw2-cart .ico-cart {
        position: relative;
        display: flex;
        align-items: center;
        padding: 4px;
        color: #fff !important;
        background: none;
        text-decoration: none;
    }

    .pw2-cart .cart-qty {
        position: absolute;
        top: -4px;
        right: -8px;
        min-width: 21px;
        height: 21px;
        padding: 0 5px;
        box-sizing: border-box;
        border-radius: 999px;
        background: var(--pw-amber);
        color: var(--pw-ink);
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Category nav: the admin-managed main menu on a navy bar. */
.pw2-nav {
    background: var(--pw-navy);
    color: #fff;
}

.pw2-nav__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
}

.pw2-nav .header-menu {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.pw2-nav .menu-container {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.pw2-nav .menu {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 0 -12px;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
}

.pw2-nav .menu > .menu__item {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.pw2-nav .menu > .menu__item > .menu__link,
.pw2-nav .menu > .menu__item > .menu__item-toggle > .menu__link {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    margin: 0;
    padding: 0 10px;
    color: #e9ecef !important;
    background: none;
    border: 0;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.pw2-nav .menu > .menu__item > .menu__item-toggle {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.pw2-nav .menu > .menu__item:hover > .menu__link,
.pw2-nav .menu > .menu__item:hover > .menu__item-toggle > .menu__link,
.pw2-nav .menu > .menu__item.menu-dropdown--active > .menu__item-toggle > .menu__link {
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
}

/* one line, always: the bar never wraps to a second row */
.pw2-nav .menu {
    flex-wrap: nowrap !important;
}

/* The eight menu items need ~1260px at full size. 1220-1319px wide: a compact size keeps
   them on one line. Narrower still, the bar hands over to the burger and its slide-out
   panel (the same one phones use) instead of wrapping. */
@media (min-width: 1220px) and (max-width: 1319px) {
    .pw2-nav .menu > .menu__item > .menu__link,
    .pw2-nav .menu > .menu__item > .menu__item-toggle > .menu__link {
        padding: 0 7px;
        font-size: 13px;
        letter-spacing: .02em;
    }
}

@media (max-width: 1219px) {
    .pw2-burger {
        display: flex;
    }

    .pw2-nav {
        background: none;
    }

    .pw2-nav__inner {
        min-height: 0;
    }

    .pw2-nav .menu-container {
        display: none;
    }
}

/* NEW badges (custom.css draws them absolutely, pinned to the link's top edge and hanging
   past it). In the v2 bar they sit inline after the label, centered, with room around them. */
.pw2-nav .promo-new-tags .menu > .menu__item > .menu__link.new-tag::after,
.pw2-nav .promo-new-tags .menu > .menu__item > .menu__link[href="/striped-wire"]::after,
.pw2-nav .promo-new-tags .menu > .menu__item > .menu__link[href="/bundle-calculator"]::after,
.pw2-nav .promo-new-tags .menu > .menu__item > .menu__link[href="/deutsch-kit-builder"]::after {
    position: static;
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 2px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--pw-electric);
    box-shadow: none;
    color: #fff;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    transform: none;
}

/* dropdown caret */
.pw2-nav .menu > .menu-dropdown > .menu__item-toggle > .menu__link::after {
    content: "";
    position: static;
    width: 7px;
    height: 7px;
    margin: -4px 0 0 2px;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    background: none;
    transform: rotate(45deg);
}

/* "Categories" gets the hamburger glyph, like an all-departments button */
.pw2-nav .menu > .menu-cat > .menu__item-toggle > .menu__link::before {
    content: "";
    width: 18px;
    height: 14px;
    background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
                linear-gradient(currentColor, currentColor) 0 6px / 100% 2px no-repeat,
                linear-gradient(currentColor, currentColor) 0 12px / 100% 2px no-repeat;
}

/* Dropdown panels (list template, and the Categories list + flyout) */
.pw2-nav .menu__list-view {
    top: 100% !important;
    min-width: 280px;
    padding: 8px 0;
    background: #fff;
    border: 0;
    border-radius: 0 0 var(--pw-radius) var(--pw-radius);
    box-shadow: var(--pw-shadow-lg);
}

    .pw2-nav .menu__list-view .menu__group,
    .pw2-nav .menu__list-view > .menu__item {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .pw2-nav .menu__list-view .menu__image-link,
    .pw2-nav .menu__list-view .menu__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 42px;
        padding: 0 20px;
        color: var(--pw-text) !important;
        font-family: inherit;
        font-size: 15px;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        text-decoration: none;
        background: none;
    }

        .pw2-nav .menu__list-view .menu__image-link:hover,
        .pw2-nav .menu__list-view .menu__link:hover,
        .pw2-nav .menu__list-view .menu__link--has-children-wrap:hover > .menu__image-link {
            color: var(--pw-blue-700) !important;
            background: var(--pw-tint);
        }

    .pw2-nav .menu__list-view .menu__link--has-children::after {
        content: "";
        width: 7px;
        height: 7px;
        margin-right: 2px;
        border-right: 2px solid #adb5bd;
        border-bottom: 2px solid #adb5bd;
        transform: rotate(-45deg);
        flex-shrink: 0;
    }

/* Categories: fixed 280px list; hovering a parent opens its children in a 560px panel beside it. */
.pw2-nav .menu-cat .menu__list-view {
    width: 280px !important;
    min-width: 280px !important;
    max-width: none;
    overflow-x: hidden;
    border: 0;
    background: #fff;
}

    .pw2-nav .menu-cat .menu__list-view.menu-box-active {
        width: 840px !important;
        min-width: 840px !important;
    }

    .pw2-nav .menu-cat .menu__list-view .menu__group {
        display: block;
        position: static;
    }

    /* old theme's triangle; the chevron on the link replaces it */
    .pw2-nav .menu-cat .menu__link--has-children span::after,
    .pw2-nav .menu-cat .menu__link--has-children::before {
        display: none;
    }

    .pw2-nav .menu-cat .menu__list-view .menu__group > .menu__image-link {
        width: 280px;
        max-width: 280px;
        box-sizing: border-box;
    }

    /* closed list: links fill the width beside the scrollbar (a long list scrolls), so the chevron
       is not hidden under it; the fixed 280px only matters while a flyout panel is open */
    .pw2-nav .menu-cat .menu__list-view:not(.menu-box-active) .menu__group > .menu__image-link {
        width: auto;
        max-width: none;
    }

    /* the old theme pins the label at 230px (min-width too), wider than the row leaves for it, which
       pushed the chevron past the list edge where it was clipped; let the label take what is left */
    .pw2-nav .menu-cat .menu__image-link span {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

.pw2-nav .menu-cat .sub-cat {
    top: 0;
    bottom: 0;
    left: 280px !important;
    width: 560px !important;
    height: auto !important;
    box-sizing: border-box;
}

.pw2-nav .sub-cat {
    padding: 20px 24px;
    background: #fff;
    border-left: 1px solid var(--pw-border);
    list-style: none;
}

    .pw2-nav .sub-cat .header-li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin: 0 0 10px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--pw-border);
    }

    .pw2-nav .sub-cat .m-h {
        margin: 0;
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 22px;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

    .pw2-nav .sub-cat .menu__link {
        min-height: 34px;
        padding: 0;
        color: #495057 !important;
        font-size: 14px;
        background: none !important;
    }

        .pw2-nav .sub-cat .menu__link:hover {
            color: var(--pw-blue-700) !important;
            text-decoration: underline;
        }

/* Category dropdown thumbnails (ProWire Theme > Category menu pictures adds .pw-menu-thumbs to the page): a small
   product photo on a light tile left of each name; hidden, and not downloaded (lazy), when the setting is off */
.pw-menu-thumb {
    display: none;
}

.pw-menu-thumbs .pw2-nav .pw-menu-thumb {
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 2px;
    box-sizing: border-box;
    object-fit: contain;
    background: #f4f6f8;
    border-radius: 6px;
    mix-blend-mode: multiply;
}

.pw-menu-thumbs .pw2-nav .pw-menu-thumb--sm {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    border-radius: 5px;
}

.pw-menu-thumbs .pw2-nav .menu-cat .menu__image-link {
    padding-left: 12px;
}

/* brand logos beside the flyout heading (ProWire Theme > Category menu logos); Shop all stays at the right */
.pw2-nav .sub-cat .header-li:has(.pw-menu-brands) {
    align-items: center;
}

.pw2-nav .sub-cat .pw-menu-brands {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: auto;
    min-width: 0;
}

    .pw2-nav .sub-cat .pw-menu-brands img {
        display: block;
        height: 24px;
        width: auto;
        max-width: 110px;
        object-fit: contain;
    }

.pw2-nav .sub-cat .pw-menu-sub {
    justify-content: flex-start;
    gap: 10px;
}

.pw-menu-thumbs .pw2-nav .sub-cat .pw-menu-sub {
    min-height: 36px;
}

.pw2-see-all {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pw-steel) !important;
    text-decoration: none;
    white-space: nowrap;
}

.pw2-nav__cta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------------ */
:is(.html-product-details-page, .html-category-page) .breadcrumb {
    margin: 0;
    padding: 16px 0 12px;
    background: none;
    border: 0;
}

    :is(.html-product-details-page, .html-category-page) .breadcrumb .container {
        max-width: 1328px;
        padding-left: 24px;
        padding-right: 24px;
    }

    :is(.html-product-details-page, .html-category-page) .breadcrumb ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 14px;
    }

    :is(.html-product-details-page, .html-category-page) .breadcrumb li {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    :is(.html-product-details-page, .html-category-page) .breadcrumb a {
        color: var(--pw-steel);
        font-weight: 600;
        text-decoration: none;
    }

        :is(.html-product-details-page, .html-category-page) .breadcrumb a:hover {
            text-decoration: underline;
        }

    :is(.html-product-details-page, .html-category-page) .breadcrumb .delimiter {
        color: #adb5bd;
        margin: 0 2px;
    }

    :is(.html-product-details-page, .html-category-page) .breadcrumb .current-item {
        color: var(--pw-muted);
        font-weight: 500;
    }

/* ------------------------------------------------------------
   Product page
   ------------------------------------------------------------ */
.pw2-pdp {
    padding-bottom: 24px;
}

    .pw2-pdp .product-details-page,
    .pw2-pdp .page-body {
        margin: 0;
        padding: 0;
    }

    .pw2-pdp .product-essential {
        margin: 0;
        padding: 0;
        border: 0;
    }

.pw2-pdp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 340px;
    gap: 32px;
    align-items: start;
}

/* The middle column carries the long content (description, specs); the gallery and the buy box
   stay in view on either side of it while it scrolls. */
@media (min-width: 1280px) {
    .pw2-pdp .pw2-pdp__grid > .pw2-pdp__gallery,
    .pw2-pdp .pw2-pdp__grid > .pw2-pdp__buy {
        position: sticky;
        top: 136px;
    }

    /* a pinned box taller than the window would hide its own bottom (Add to cart included) on short
       laptop screens; there it scrolls inside itself instead */
    .pw2-pdp .pw2-pdp__grid > .pw2-pdp__buy {
        max-height: calc(100vh - 152px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* Gallery: thumbnail rail on the left, big image on a light tile. */
.pw2-pdp .pw2-pdp__gallery {
    position: static;
    width: auto;
    margin: 0;
    float: none;
}

.pw2-pdp .picture-gallery {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-auto-flow: row dense;
    gap: 12px;
    margin: 0;
}

    .pw2-pdp .picture-gallery > * {
        grid-column: 1 / -1;
    }

    .pw2-pdp .picture-gallery > .picture {
        grid-column: 2;
    }

    .pw2-pdp .picture-gallery > .picture-thumbs {
        grid-column: 1;
    }

    .pw2-pdp .picture-gallery:has(.thumb-item:only-child) {
        grid-template-columns: minmax(0, 1fr);
    }

        .pw2-pdp .picture-gallery:has(.thumb-item:only-child) > .picture {
            grid-column: 1;
        }

        .pw2-pdp .picture-gallery:has(.thumb-item:only-child) > .picture-thumbs {
            display: none;
        }

.pw2-pdp .picture {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 !important; /* old theme pads the bottom 40px for the expand button, which is absolutely placed */
    overflow: hidden;
    background: #f4f5f7; /* same gray as the product tiles */
    border: 0;
    border-radius: var(--pw-radius);
}

    .pw2-pdp .picture > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .pw2-pdp .picture img {
        max-width: 86%;
        max-height: 86%;
        width: auto;
        height: auto;
        object-fit: contain;
        mix-blend-mode: multiply;
        position: static;
        transform: none;
    }

    .pw2-pdp .picture .clickable {
        right: 12px !important;
        bottom: 12px !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        border: 0 !important;
        border-radius: 999px;
        background: #fff !important;
        box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .12) !important;
        font-size: 13px;
        color: var(--pw-text);
    }

.pw2-pdp .picture-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 540px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

.pw2-pdp .picture-gallery .picture-thumbs .thumb-item { /* must out-rank styles.css's 100px thumbs */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin: 0;
    padding: 6px;
    box-sizing: border-box;
    background: #f4f5f7;
    border: 1px solid var(--pw-border);
    border-radius: 8px;
    cursor: pointer;
}

    .pw2-pdp .picture-gallery .picture-thumbs .thumb-item:hover {
        border-color: var(--pw-blue);
    }

    .pw2-pdp .picture-gallery .picture-thumbs .thumb-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

/* Info column */
.pw2-pdp .pw2-pdp__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
}

    .pw2-pdp .pw2-pdp__info > * {
        margin-top: 0;
        margin-bottom: 0;
    }

.pw2-pdp .product-name {
    margin: 0;
    padding: 0;
    border: 0;
}

    .pw2-pdp .product-name h1 {
        margin: 0;
        font-family: var(--pw-display);
        font-weight: 700;
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: -.01em;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

.pw2-pdp .additional-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    font-size: 13px;
    color: var(--pw-muted);
}

    .pw2-pdp .additional-details .value {
        font-family: var(--pw-mono);
        color: var(--pw-text);
    }

.pw2-pdp .short-description {
    font-size: 15px;
    line-height: 1.55;
    color: #495057;
}

.pw2-pdp .pw2-pdp__info .prices {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: none;
}

.pw2-pdp .pw2-pdp__info .product-price,
.pw2-pdp .pw2-pdp__info .non-discounted-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

    .pw2-pdp .pw2-pdp__info .product-price > span:first-child,
    .pw2-pdp .pw2-pdp__info .non-discounted-price > span {
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -.02em;
        color: var(--pw-ink);
    }

.pw2-pdp .price-uom {
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--pw-muted) !important;
}

.pw2-pdp .old-product-price {
    font-size: 14px;
    color: var(--pw-muted);
    text-decoration: line-through;
}

.pw2-pdp .tax-shipping-info {
    font-size: 12px;
    color: var(--pw-muted);
}

/* Volume pricing tiles (replaces the old table) */
.pw2-tiers__title {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pw-text-2);
}

.pw2-tiers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}

.pw2-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    background: #fff;
    border: 1px solid var(--pw-border-2);
    border-radius: 8px;
}

.pw2-tier__qty {
    font-size: 11px;
    color: var(--pw-muted);
}

.pw2-tier__price {
    font-family: var(--pw-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--pw-text);
}

.pw2-tier.is-active {
    border-color: var(--pw-blue);
    background: var(--pw-tint);
}

    .pw2-tier.is-active .pw2-tier__price {
        color: var(--pw-blue-700);
    }

.pw2-tiers__compat {
    display: none;
}

/* ---- Plugin injectors on the product page ----
   Their own <style> blocks load in the body after this sheet, so every rule here is
   scoped under .pw2-pdp to outrank them. Markup and behavior stay the plugins'. */

/* Mil-Spec "Configure as matched kit" + Deutsch "Configure in Deutsch Kit Builder" */
.pw2-pdp .matched-kit-button-wrapper,
.pw2-pdp .deutsch-kit-button-wrapper {
    margin: 0;
}

.pw2-pdp .matched-kit-or-divider,
.pw2-pdp .deutsch-kit-or-divider {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--pw-muted);
}

.pw2-pdp .product-matched-kit-button,
.pw2-pdp .product-deutsch-kit-button {
    height: 50px;
    border: 2px solid var(--pw-green);
    border-radius: 999px;
    background: #fff;
    color: var(--pw-green-700);
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.1;
}

    .pw2-pdp .product-matched-kit-button:hover,
    .pw2-pdp .product-matched-kit-button:focus,
    .pw2-pdp .product-deutsch-kit-button:hover,
    .pw2-pdp .product-deutsch-kit-button:focus {
        background: var(--pw-green);
        border-color: var(--pw-green);
        color: #fff;
    }

/* Striped-wire stripe picker (sits in the info column with the attributes) */
.pw2-pdp .swp-picker {
    margin: 0;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
}

.pw2-pdp .swp-title {
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.pw2-pdp .swp-opt {
    border: 1px solid var(--pw-border);
    border-radius: 10px;
}

    .pw2-pdp .swp-opt.swp-selected {
        border: 2px solid var(--pw-blue);
        background: var(--pw-tint);
    }

.pw2-pdp .swp-tiers {
    width: 100%;
}

    .pw2-pdp .swp-tiers td,
    .pw2-pdp .swp-tiers th {
        border-color: var(--pw-border);
        padding: 6px 10px;
    }

.pw2-pdp .swp-next-btn {
    border-radius: 999px;
    border-color: var(--pw-blue);
    background: var(--pw-blue);
}

    .pw2-pdp .swp-next-btn.swp-next-link {
        background: #fff;
        color: var(--pw-blue);
    }

.pw2-pdp .swp-alt a {
    color: var(--pw-steel);
    font-weight: 600;
}

.pw2-pdp .swp-mto,
.pw2-pdp .swp-spool {
    margin: 0;
}

/* "Need this wire with stripes?" offer on solid wire */
.pw2-pdp .swp-solid-cta {
    margin: 0;
    padding: 14px 16px;
    background: var(--pw-tint);
    border-radius: var(--pw-radius);
}

.pw2-pdp .swp-solid-btn {
    padding: 12px 16px;
    border: 2px solid var(--pw-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--pw-blue-700);
    font-size: 15px;
}

    .pw2-pdp .swp-solid-btn:hover {
        background: var(--pw-blue);
        color: #fff;
    }

.pw2-pdp .swp-solid-note {
    color: #495057;
}

/* Mil-Spec builder hosted on <insert>-KIT product pages (full width under the grid) */
.pw2-pdp .kit-configurator-embedded {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--pw-border);
}

    .pw2-pdp .kit-configurator-embedded .kit-embedded-heading h2 {
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 28px;
        letter-spacing: -.01em;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

.pw2-pdp .attributes {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--pw-border);
}

/* Buy box */
.pw2-pdp .pw2-pdp__buy {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    background: none;
    border: 0;
    position: static;
}

.pw2-pdp .wrap-overview-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 22px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    box-shadow: 0 .5rem 1rem rgba(17, 40, 72, .06);
}

    .pw2-pdp .wrap-overview-inner > * {
        margin-top: 0;
        margin-bottom: 0;
    }

.pw2-buy__label {
    display: block;
    font-size: 13px;
    color: var(--pw-muted);
}

.pw2-buy__amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pw-ink);
}

.pw2-buy__uom {
    font-size: 15px;
    font-weight: 400;
    color: var(--pw-muted);
}

/* Shipping line: just a link to the shipping page (the same-day promise lives in the header now) */
.pw2-pdp .product-estimate-shipping {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #495057;
}

    .pw2-pdp .product-estimate-shipping > svg {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin-top: 0;
        color: var(--pw-green);
    }

    .pw2-pdp .product-estimate-shipping p {
        margin: 0;
    }

        .pw2-pdp .product-estimate-shipping p::first-line {
            font-size: 15px;
            font-weight: 700;
            color: var(--pw-green-700);
        }

    .pw2-pdp .product-estimate-shipping strong {
        font-weight: 600;
    }

    .pw2-pdp .product-estimate-shipping a {
        color: var(--pw-steel);
        font-weight: 600;
    }

.pw2-pdp .availability {
    position: relative;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--pw-border);
}

    .pw2-pdp .availability .stock {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 8px;
        position: relative;
        font-size: 14px;
        font-weight: 600;
        color: var(--pw-green);
    }

        .pw2-pdp .availability .stock .label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }


        .pw2-pdp .availability .stock.out-of-stock {
            color: var(--pw-red);
        }

        .pw2-pdp .availability .stock .btn-link {
            margin: 0 !important;
            font-size: 13px;
            font-weight: 600;
            color: var(--pw-steel);
        }

/* Add to cart: pill quantity stepper + full-width pill button */
.pw2-pdp .add-to-cart {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.pw2-pdp .add-to-cart-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0;
}

    .pw2-pdp .add-to-cart-panel .qty-label {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--pw-text-2);
    }

.pw2-pdp .qty-wrapper {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto !important;
    align-items: stretch;
    height: 44px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pw-border-2);
    border-radius: 999px;
}

.pw2-pdp .qty-btn {
    width: 44px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: #fff;
    color: var(--pw-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

    .pw2-pdp .qty-btn:hover {
        background: var(--pw-page);
    }

.pw2-pdp .qty-input {
    width: 64px;
    height: 100% !important;
    line-height: normal;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--pw-border);
    border-right: 1px solid var(--pw-border);
    border-radius: 0;
    text-align: center;
    font-family: var(--pw-mono);
    font-size: 15px;
    color: var(--pw-ink);
    -moz-appearance: textfield;
    appearance: textfield;
}

    .pw2-pdp .qty-input::-webkit-outer-spin-button,
    .pw2-pdp .qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.pw2-pdp .qty-dropdown {
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--pw-border-2);
    border-radius: 999px;
}

.pw2-pdp .add-to-cart-button {
    flex: 1 1 100%;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .12s cubic-bezier(.2, 0, .1, 1);
}

    .pw2-pdp .add-to-cart-button:hover {
        background: var(--pw-blue-700);
    }

    .pw2-pdp .add-to-cart-button:active {
        transform: translateY(1px);
    }

.pw2-buy__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.pw2-textbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--pw-steel);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .pw2-textbtn:hover {
        color: var(--pw-blue-700);
        text-decoration: underline;
    }

.pw2-buy__trust {
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
    border-top: 1px solid var(--pw-border);
}

    .pw2-buy__trust a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        color: var(--pw-text-2) !important;
        font-size: 14px;
        text-decoration: none !important;
    }

        .pw2-buy__trust a::after {
            content: "›";
            margin-left: auto;
            font-size: 20px;
            line-height: 1;
            color: var(--pw-muted);
        }

        .pw2-buy__trust a:hover span {
            text-decoration: underline;
        }

    /* Security & Privacy note above Returns: text, not a link */
    .pw2-buy__trust .pw2-buy__secure {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 9px 0;
        font-size: 14px;
        color: var(--pw-text-2);
    }

        .pw2-buy__secure svg {
            flex-shrink: 0;
            margin-top: 1px;
        }

        .pw2-buy__secure strong {
            display: block;
            margin-bottom: 3px;
            color: var(--pw-text);
        }

        .pw2-buy__secure p {
            margin: 0 0 2px;
            font-size: 13px;
            line-height: 1.45;
            color: var(--pw-muted);
        }

            .pw2-buy__secure p b {
                font-weight: 600;
                color: var(--pw-text-2);
            }

/* Question card under the gallery */
.pw2-askbox {
    margin-top: 20px;
    padding: 18px 20px;
    background: var(--pw-page);
    border-radius: var(--pw-radius);
}

/* Caption under the product image where one photo stands in for a family of colours
   (ProWire Theme > Product page: image note). Deliberately quiet: it is a qualifier on
   the picture, not a selling point, and it must not compete with the price beside it. */
.pw2-image-note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--pw-muted);
}

/* Catalog paging: the busy overlay covers the whole product grid (thousands of px tall), so a
   spinner centred in it landed off-screen. Pin the spinner to the middle of the viewport instead. */
.products-container .ajax-products-busy {
    background-image: none;
}

    .products-container .ajax-products-busy::before {
        content: "";
        position: sticky;
        top: calc(50vh - 24px);
        display: block;
        height: 48px;
        background: url(../images/loading.gif) center no-repeat;
    }

.pw2-askbox__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--pw-ink);
}

    .pw2-askbox__title svg {
        color: var(--pw-blue);
    }

.pw2-askbox p {
    margin: 6px 0 12px;
    font-size: 13px;
    color: #495057;
}

.pw2-askbox__btn {
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .pw2-askbox__btn:hover {
        background: #000;
    }

/* Expandable cards in the middle column (Features & details, Product specification) */
.pw2-acc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.pw2-acc__item {
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
}

    .pw2-acc__item > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 20px;
        list-style: none;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        color: var(--pw-ink);
    }

        .pw2-acc__item > summary::-webkit-details-marker {
            display: none;
        }

        .pw2-acc__item > summary::after {
            content: "";
            flex-shrink: 0;
            width: 8px;
            height: 8px;
            margin-right: 4px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg) translateY(-2px);
            transition: transform .12s cubic-bezier(.2, 0, .1, 1);
        }

    .pw2-acc__item[open] > summary::after {
        transform: rotate(-135deg) translateY(-2px);
    }

    .pw2-acc__item > summary:hover {
        color: var(--pw-blue-700);
    }

    .pw2-acc__item > summary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .25rem rgba(253, 126, 20, .30);
        border-radius: var(--pw-radius);
    }

.pw2-acc__body {
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pw-text-2);
}

    /* Description headings. The description's own title is lifted out into the page h1
       (ProductDescriptionFormatter), and any other h1 becomes an h2, so h2 is the top level here. */
    .pw2-acc__body h2, .pw2-acc__body h3 {
        margin: 16px 0 8px;
        font-family: var(--pw-display);
        font-size: 19px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--pw-ink);
    }

        .pw2-acc__body > h2:first-child, .pw2-acc__body > h3:first-child {
            margin-top: 0;
        }

    .pw2-acc__body h4, .pw2-acc__body h5, .pw2-acc__body h6 {
        margin: 16px 0 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--pw-text);
    }

    .pw2-acc__body p {
        margin: 0 0 10px;
    }

    /* inline emphasis: medium weight instead of heavy bold */
    .pw2-acc__body strong, .pw2-acc__body b {
        font-weight: 600;
        color: var(--pw-text);
    }

    .pw2-acc__body ul,
    .pw2-acc__body ol {
        margin: 0 0 10px;
        padding-left: 20px;
    }

    .pw2-acc__body li {
        margin: 3px 0;
    }

    .pw2-acc__body a {
        color: var(--pw-blue);
        font-weight: 500;
        text-decoration: none;
    }

        .pw2-acc__body a:hover {
            text-decoration: underline;
        }

    /* Sections (ProductDescriptionFormatter): a gray label over each block, hairline between */
    .pw2-acc__body .d-sec {
        padding: 12px 0;
        border-top: 1px solid var(--pw-border);
    }

    .pw2-acc__body .d-label {
        margin: 0 0 8px;
        font-family: var(--pw-display);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--pw-muted);
    }

    .pw2-acc__body .d-sec > p:last-child,
    .pw2-acc__body .d-sec > ul:last-child {
        margin-bottom: 0;
    }

    .pw2-acc__body .d-sec ul {
        padding: 0;
        list-style: none;
    }

    .pw2-acc__body .d-sec li {
        position: relative;
        margin: 0 0 6px;
        padding-left: 14px;
        color: var(--pw-text);
    }

        .pw2-acc__body .d-sec li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .62em;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--pw-border-2);
        }

        /* "Label: part number" rows */
        .pw2-acc__body .d-sec li.d-kv {
            display: grid;
            grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
            gap: 12px;
            margin: 0;
            padding: 6px 0;
            border-bottom: 1px dashed var(--pw-border);
        }

            .pw2-acc__body .d-sec li.d-kv:last-child {
                border-bottom: 0;
            }

            .pw2-acc__body .d-sec li.d-kv::before {
                display: none;
            }

    .pw2-acc__body .d-k {
        color: var(--pw-muted);
        font-size: 13.5px;
    }

    /* part numbers read like the item number line */
    .pw2-acc__body .d-sec a {
        font-family: var(--pw-mono);
        font-size: 13px;
        font-weight: 400;
        white-space: nowrap;
    }

    /* Notes / Technical information: the same text on most products, so a quiet panel */
    .pw2-acc__body .d-sec--note {
        margin-top: 6px;
        padding: 12px 14px;
        border: 0;
        border-radius: 10px;
        background: var(--pw-page);
    }

        .pw2-acc__body .d-sec--note + .d-sec--note {
            margin-top: 8px;
        }

        .pw2-acc__body .d-sec--note li,
        .pw2-acc__body .d-sec--note p {
            font-size: 13px;
            color: var(--pw-text-2);
        }

        .pw2-acc__body .d-sec--note a {
            font-family: inherit;
            font-size: inherit;
            white-space: normal;
        }

    .pw2-acc__body img {
        max-width: 100%;
        height: auto;
    }

    .pw2-acc__body table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid var(--pw-border);
        font-size: 13px;
    }

        .pw2-acc__body table td,
        .pw2-acc__body table th {
            padding: 9px 12px;
            border: 0;
            text-align: left;
        }

        .pw2-acc__body table tr:nth-child(odd) {
            background: var(--pw-page);
        }

        /* key column of the two-column spec table only; pasted description tables keep their own */
        .pw2-acc__body .product-specs-box table td:first-child {
            width: 45%;
            font-weight: 600;
            color: var(--pw-muted);
        }

        /* Key/value tables written into a description read as one thing with the spec box above
           them, so they get the same key column. Matched on the row having exactly two cells
           (first-child and second-from-last at once): of the 107 tables pasted into descriptions
           only 15 are key/value, the rest being 48 single-column layout boxes and 44 data grids
           of 3 to 6 columns, and those must keep their own widths. */
        :is(.full-description, .category-description) table tr > td:first-child:nth-last-child(2) {
            width: 45%;
            font-weight: 600;
            color: var(--pw-muted);
        }

    /* Tables pasted into product and category descriptions (88 products, 45 categories). They are
       well-formed, but cells mix bare text with <p> / <div> wrappers: the wrappers brought a
       left alignment and a bottom margin, so wrapped cells drifted off their centred neighbours. */
    :is(.pw2-acc__body, .category-description) table td,
    :is(.pw2-acc__body, .category-description) table th {
        vertical-align: middle;
    }

        :is(.pw2-acc__body, .category-description) :is(td, th) > :is(p, div) {
            margin: 0 0 6px;
            font-size: inherit;
            line-height: inherit;
            text-align: inherit;
        }

            :is(.pw2-acc__body, .category-description) :is(td, th) > :is(p, div):last-child {
                margin-bottom: 0;
            }

    /* PDF links get a document icon. Legacy descriptions carry their own <img> of one, served from
       OrderTech's /content/ store, which is not in R2 and 404s here, so that image is hidden and the
       icon comes from the link itself. */
    :is(.pw2-acc__body, .category-description) img[src*="/pdf.png"]:not([src^="/Themes/"]) {
        display: none;
    }

    :is(.pw2-acc__body, .category-description) a[href$=".pdf" i]::before,
    :is(.pw2-acc__body, .category-description) img[src*="/pdf.png"] + a::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 6px;
        vertical-align: -3px;
        background: url("/Themes/DCS-V3/Content/images/pdf.png") no-repeat center / contain;
    }

    .pw2-acc__body .product-tags-box,
    .pw2-acc__body .product-specs-box {
        margin: 0;
        padding: 0;
        width: 100% !important;
        max-width: none !important; /* old theme caps the specs box at 60% */
    }

    .pw2-acc__body .table-wrapper {
        width: 100%;
        margin: 0;
    }

    .pw2-acc__body .product-tags-box {
        margin-top: 14px;
    }

/* Buy box on a light panel, like the reference layout */
.pw2-pdp .pw2-pdp__buy .wrap-overview-inner {
    background: var(--pw-page);
    border: 0;
    box-shadow: none;
}

.pw2-pdp .pw2-pdp__buy .qty-wrapper,
.pw2-pdp .pw2-pdp__buy .qty-btn {
    background: #fff;
}


/* Related parts (under the layout) */
.pw2-related__title {
    margin: 0 0 14px;
    font-family: var(--pw-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.pw2-related .nav-tabs {
    gap: 8px !important;
    border-bottom: 0 !important;
}

.pw2-related .nav-link {
    margin: 0 !important;
    padding: 9px 18px !important;
    border: 1px solid var(--pw-border-2) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--pw-text-2);
    font-size: 14px;
    font-weight: 600;
}

    .pw2-related .nav-link.active {
        border-color: var(--pw-ink) !important;
        background: var(--pw-navy) !important;
        color: #fff !important;
    }

.pw2-related .tab-content {
    padding: 20px 0 0;
}

/* Tabs: underline style */
.pw2-tabs {
    margin-top: 56px;
}

    .pw2-tabs .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 36px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--pw-border);
    }

    .pw2-tabs .nav-tabs .nav-item {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0;
    }

    .pw2-tabs .nav-link {
        width: auto !important;
        text-align: left;
        margin: 0 0 -1px;
        padding: 14px 0;
        white-space: nowrap;
        border: 0 !important;
        border-bottom: 3px solid transparent !important;
        border-radius: 0;
        background: none !important;
        color: #495057;
        font-size: 16px;
        font-weight: 500;
    }

        .pw2-tabs .nav-link:hover {
            color: var(--pw-ink);
        }

        .pw2-tabs .nav-link.active {
            color: var(--pw-ink);
            font-weight: 700;
            border-bottom-color: var(--pw-blue) !important;
        }

    .pw2-tabs .tab-content {
        padding: 28px 0;
    }

    .pw2-tabs .full-description {
        max-width: 80ch;
        font-size: 16px;
        line-height: 1.65;
        color: var(--pw-text-2);
    }

    .pw2-tabs table {
        width: 100%;
        max-width: 900px;
        border-collapse: collapse;
        border: 1px solid var(--pw-border);
        font-size: 14px;
    }

        .pw2-tabs table td,
        .pw2-tabs table th {
            padding: 12px 16px;
            border: 0;
            text-align: left;
        }

        .pw2-tabs table tr:nth-child(odd) {
            background: var(--pw-page);
        }

        .pw2-tabs table td:first-child {
            width: 260px;
            font-weight: 600;
            color: var(--pw-muted);
        }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.pw2-footer {
    margin-top: 64px;
    padding: 0;
    background: none;
    color: #ced4da;
    border: 0;
    text-align: left;
}

.pw2-promises {
    background: var(--pw-page);
    border-top: 1px solid var(--pw-border);
}

.pw2-promises__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding-top: 26px;
    padding-bottom: 26px;
}

.pw2-promise {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pw2-promise__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pw-tint);
    color: var(--pw-blue);
}

.pw2-promise strong {
    display: block;
    font-size: 15px;
    color: var(--pw-ink);
}

.pw2-promise small {
    display: block;
    font-size: 13px;
    color: var(--pw-muted);
}

.pw2-footer .pw2-footer__main {
    margin: 0;
    padding: 48px 0 0;
    background: var(--pw-navy);
}

.pw2-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 1.6fr);
    gap: 48px;
    padding-bottom: 36px;
}

.pw2-footer .pw2-footer__menus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
}

.pw2-footer .footer-menu {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    float: none;
    text-align: left;
}

.pw2-footer .footer-menu__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    cursor: default;
}

.pw2-footer .footer-menu__list {
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.pw2-footer .footer-menu__item {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #ced4da;
}

.pw2-footer .footer-menu__link {
    color: #ced4da !important;
    font-size: 14px;
    text-decoration: none;
}

    .pw2-footer .footer-menu__link:hover {
        color: #fff !important;
        text-decoration: underline;
    }

.pw2-footer__signup {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pw2-footer .newsletter {
    margin: 0;
    padding: 0;
    text-align: left;
}

    .pw2-footer .newsletter .title {
        margin: 0 0 12px;
        padding: 0;
        border: 0;
        background: none;
        font-family: var(--pw-display);
        font-weight: 700;
        font-size: 17px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #fff;
    }

.pw2-footer .newsletter-subscribe,
.pw2-footer .newsletter-email {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
}

.pw2-footer .newsletter-subscribe-text {
    flex: 1 1 200px;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--pw-text);
    font-size: 15px;
}

.pw2-footer .newsletter-subscribe-button {
    flex-shrink: 0;
    width: auto;
    height: 46px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .pw2-footer .newsletter-subscribe-button:hover {
        background: var(--pw-blue-700);
    }

.pw2-footer .newsletter .options {
    flex-basis: 100%;
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #ced4da;
}

.pw2-footer .newsletter-validation,
.pw2-footer .newsletter-result {
    font-size: 13px;
    color: #fff;
    margin-top: 6px;
}

.pw2-footer__label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-right: 4px;
}

.pw2-footer__social {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .pw2-footer__social .networks ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pw2-footer__social .networks a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        height: 40px;
        margin: 0 !important;
        border-radius: 50%;
        background: rgba(255, 255, 255, .1);
        color: #fff !important;
        font-size: 18px;
    }

        .pw2-footer__social .networks a:hover {
            background: rgba(255, 255, 255, .2);
        }

.pw2-footer__badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.pw2-footer__certs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.pw2-footer__iso {
    display: block;
    width: 283px;
    max-width: calc(100% - 24px);
    height: auto; /* keeps the 486x249 artwork's ratio */
    padding: 12px;
    box-sizing: content-box;
    background: #fff;
    border-radius: var(--pw-radius);
}

.pw2-footer__seal {
    display: block;
    width: 131px;
    height: 32px;
}

.pw2-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pw2-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    min-width: 50px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
    color: var(--pw-text);
    font-size: 11px;
    font-weight: 800;
}

.pw2-pay--visa {
    color: #1a1f71;
    font-size: 13px;
    font-weight: 900;
    font-style: italic;
}

.pw2-pay--mc i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #eb001b;
}

    .pw2-pay--mc i + i {
        margin-left: -6px;
        background: #f79e1b;
        opacity: .9;
    }

.pw2-pay--amex {
    background: #bc622e;
    color: #fff;
}

.pw2-pay--apple,
.pw2-pay--gpay {
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
}

.pw2-pay--apple {
    background: #000;
    color: #fff;
}

.pw2-pay--gpay {
    gap: 4px;
    color: #5f6368;
}

.pw2-cert {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.pw2-cert--mono,
.pw2-mono {
    font-family: var(--pw-mono);
    font-weight: 400;
    letter-spacing: 0;
}

.pw2-seal {
    height: 30px;
    width: auto;
    padding: 2px 4px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
}

.pw2-footer .pw2-footer__legal {
    margin: 0;
    padding: 0;
    background: var(--pw-navy-950);
    color: #adb5bd;
    font-size: 13px;
    border: 0;
}

.pw2-footer__legal-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.pw2-footer .pw2-footer__copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    text-align: left;
}

    .pw2-footer .pw2-footer__copy img {
        height: 22px;
        width: auto;
    }

.pw2-footer__legal-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.pw2-footer .pw2-footer__legal a {
    color: #adb5bd;
    text-decoration: none;
}

    .pw2-footer .pw2-footer__legal a:hover {
        color: #fff;
        text-decoration: underline;
    }

.pw2-footer .theme-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 0 16px;
    font-size: 12px;
    color: #adb5bd;
}

    .pw2-footer .theme-selector select {
        width: auto;
        height: 30px !important;
        padding: 0 28px 0 10px;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 999px;
        background-color: transparent;
        color: #fff;
        font-size: 12px;
    }

        .pw2-footer .theme-selector select option {
            color: var(--pw-text);
        }

.pw2-footer .footer-powered-by {
    margin: 0;
    padding: 0;
    color: #adb5bd;
}

@media (min-width: 768px) {
    .pw2-footer .footer-menu__title svg {
        display: none;
    }

    .pw2-footer .footer-menu__list {
        display: flex !important;
    }
}

/* ------------------------------------------------------------
   Category page
   ------------------------------------------------------------ */
.pw2-cat {
    padding-bottom: 24px;
}

    .pw2-cat .category-page,
    .pw2-cat .page-body {
        margin: 0;
        padding: 0;
    }

.pw2-cat__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 4px 0 22px;
}

    .pw2-cat__head h1 {
        margin: 0;
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -.01em;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

.pw2-cat__count {
    font-size: 15px;
    color: var(--pw-muted);
}

/* Subcategory tiles */
.pw2-subcats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 0 0 36px;
}

.pw2-subcat {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 12px 16px;
    box-sizing: border-box;
    background: var(--pw-page);
    border-radius: var(--pw-radius);
    color: var(--pw-text) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none !important;
    transition: background .12s cubic-bezier(.2, 0, .1, 1);
}

    .pw2-subcat:hover {
        background: var(--pw-tint);
        color: var(--pw-blue-700) !important;
    }

.pw2-subcat__img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
}

    .pw2-subcat__img img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.pw2-featured {
    margin: 0 0 36px;
}

    .pw2-featured > .title {
        margin: 0 0 16px;
        padding: 0;
        border: 0;
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 24px;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

/* Filter rail + results */
.pw2-cat__body.has-filters {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.pw2-cat__filter-toggle {
    display: none;
}

.pw2-cat__rail {
    position: sticky;
    top: 140px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding-right: 4px;
}

    .pw2-cat__rail .product-filters,
    .pw2-cat__rail .product-filter {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        width: auto;
        float: none;
    }

    .pw2-cat__rail .side-filter-title,
    .pw2-cat__rail .filter-title {
        margin: 0 0 6px;
        padding: 0;
        border: 0;
        background: none;
        font-family: var(--pw-display);
        font-weight: 700;
        font-size: 20px;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

    .pw2-cat__rail .accordion-item {
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--pw-border);
        border-radius: 0;
        background: none;
    }

    .pw2-cat__rail .accordion-button {
        padding: 14px 0;
        border: 0;
        background: none !important;
        box-shadow: none !important;
        font-size: 14px;
        font-weight: 700;
        color: var(--pw-ink) !important;
    }

    .pw2-cat__rail .accordion-body {
        padding: 0 0 14px;
    }

    .pw2-cat__rail .form-check {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 32px;
        margin: 0;
        padding: 0;
    }

    .pw2-cat__rail .form-check-input {
        float: none;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin: 0;
        border-radius: 4px;
        accent-color: var(--pw-blue);
        cursor: pointer;
    }

        .pw2-cat__rail .form-check-input:checked {
            background-color: var(--pw-blue);
            border-color: var(--pw-blue);
        }

    .pw2-cat__rail .form-check-label {
        font-size: 14px;
        color: var(--pw-text-2);
        cursor: pointer;
    }

    .pw2-cat__rail .attribute-square {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
    }

    .pw2-cat__rail .show-button {
        color: var(--pw-steel);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

/* Results toolbar (sort / page size / view mode) */
.pw2-cat .product-selectors {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 0 0 20px;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid var(--pw-border);
    background: none;
}

    .pw2-cat .product-selectors > div {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        float: none;
        font-size: 13px;
        color: var(--pw-muted);
    }

    .pw2-cat .product-selectors select {
        height: 38px !important;
        width: auto;
        padding: 0 34px 0 14px;
        border: 1px solid var(--pw-border-2);
        border-radius: 999px;
        background-color: #fff;
        font-size: 14px;
        color: var(--pw-text);
    }

    .pw2-cat .product-selectors .product-viewmode {
        margin-right: auto;
    }

    /* sorting, page size and view mode all switched off in admin: no empty bar */
    .pw2-cat .product-selectors:not(:has(> div)) {
        display: none;
    }

/* ------------------------------------------------------------
   Product grid + cards (category, search, related, homepage)
   ------------------------------------------------------------ */
.product-grid .item-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px 20px;
    margin: 0;
    padding: 0;
}

    .product-grid .item-grid::before,
    .product-grid .item-grid::after {
        display: none !important;
    }

    /* some grids (homepage products) wrap each tile in a Bootstrap .col sized by row-cols-*;
       inside the CSS grid the cell sets the width, so the column must not */
    .product-grid .item-grid.row {
        flex-wrap: wrap !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    .product-grid .item-grid > .col,
    .product-grid .item-grid > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

.product-grid .item-box,
.product-list .item-box {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    float: none !important;
    border: 0;
    background: none;
    box-shadow: none;
}

.pw2-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
}

.pw2-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto !important;
    margin: 0 0 12px;
    overflow: hidden;
    /* light gray tile so neighbouring products read as separate; the old theme forces white */
    background: #f4f5f7 !important;
    border-radius: var(--pw-radius);
}

    .pw2-card__media > a,
    .pw2-card__media .swiper,
    .pw2-card__media .swiper-slide {
        display: flex !important; /* old theme sets the link to display:block, which pins the image to the top */
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .pw2-card__media img {
        position: static;
        max-width: 82%;
        max-height: 82%;
        width: auto;
        height: auto;
        object-fit: contain;
        mix-blend-mode: multiply;
        transform: none;
        transition: transform .2s cubic-bezier(.2, 0, .1, 1);
    }

.pw2-card:hover .pw2-card__media img {
    transform: scale(1.04);
}

.pw2-card__media .swiper-pagination-bullet-active {
    background: var(--pw-blue);
}

.pw2-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.pw2-card__title {
    margin: 0;
    padding: 0;
    min-height: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

    .pw2-card__title a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.7em;
        color: var(--pw-text) !important;
        text-decoration: none;
    }

        .pw2-card__title a:hover {
            color: var(--pw-blue-700) !important;
            text-decoration: underline;
        }

.pw2-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 12px;
    color: var(--pw-muted);
}

    .pw2-card__meta .product-manufacturer {
        font-size: inherit;
        color: inherit;
    }

    .pw2-card__meta .sku {
        margin: 0;
        font-family: var(--pw-mono);
        font-size: inherit;
        color: var(--pw-text-2);
    }

.pw2-card__price {
    margin-top: 2px;
    line-height: 1.1;
}

    .pw2-card__price small {
        display: block;
        font-size: 12px;
        color: var(--pw-muted);
    }

    .pw2-card__price strong {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--pw-ink);
    }

.pw2-card__stock {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

    .pw2-card__stock::before {
        content: "";
        width: 8px;
        height: 8px;
        margin-top: .35em;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

    .pw2-card__stock.is-in {
        color: var(--pw-green);
    }

    .pw2-card__stock.is-out {
        color: var(--pw-red);
    }

.pw2-card .description {
    font-size: 13px;
    line-height: 1.45;
    color: var(--pw-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .pw2-card .description[data-short-description=none] {
        display: none;
    }

.pw2-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto 0 0;
    padding: 8px 0 0;
    border: 0;
    background: none;
}

/* quantity stacked over Add to cart at every width, the same order as the product page */
.pw2-card__buy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
}

    .pw2-card__buy .qty-wrapper {
        justify-content: space-between;
    }

    .pw2-card__buy .qty-input {
        flex: 1 1 auto !important;
        width: auto !important;
    }

.pw2-card .qty-wrapper {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto !important;
    height: 40px;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pw-border-2);
    border-radius: 999px;
}

.pw2-card .qty-btn {
    flex: 0 0 32px;
    width: 32px !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0;
    border: 0;
    background: #fff;
    color: var(--pw-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.pw2-card .qty-input {
    flex: 0 0 40px;
    width: 40px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-family: var(--pw-mono);
    font-size: 14px;
    -moz-appearance: textfield;
    appearance: textfield;
}

    .pw2-card .qty-input::-webkit-outer-spin-button,
    .pw2-card .qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.pw2-card .product-box-add-to-cart-button {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .pw2-card .product-box-add-to-cart-button:hover {
        background: var(--pw-blue-700);
    }

/* Add To Backorder: a backorderable item with no stock (product page and tiles), red like the live site */
.pw2-pdp .add-to-cart-button.add-to-backorder,
.pw2-card .product-box-add-to-cart-button.add-to-backorder {
    background: var(--pw-red);
}

    .pw2-pdp .add-to-cart-button.add-to-backorder:hover,
    .pw2-card .product-box-add-to-cart-button.add-to-backorder:hover {
        background: #a30000;
    }

/* Category tiles (Joey, 2026-09-28, Vevor-style). The "raised card" is a white rounded pseudo-element drawn just
   outside the tile, so nothing shifts when it shows:
   - mouse: at rest the tile is flat with an outline Add to cart; pointing into it raises the card and fills the button
   - touch: the card shows while a finger is down on the tile (.is-pressed, set in _Root.cshtml; cancelled when the
     touch turns into a scroll); buttons stay filled, there is no hover to fill them
   - every device: a successful Add to cart turns the button green "Added" and raises the card for ~1.5s (.is-added) */
.pw2-card {
    position: relative;
    isolation: isolate;
    overflow: visible; /* the old theme clips .product-item, which would hide the raised card */
    -webkit-tap-highlight-color: transparent;
}

    .pw2-card::before {
        content: "";
        position: absolute;
        inset: -12px;
        z-index: -1;
        border-radius: calc(var(--pw-radius) + 8px);
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .06);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 10px 32px rgba(0, 0, 0, .16);
        opacity: 0;
        transition: opacity .15s ease;
        pointer-events: none;
    }

    .pw2-card.is-pressed,
    .pw2-card.is-added {
        z-index: 2;
    }

        .pw2-card.is-pressed::before,
        .pw2-card.is-added::before {
            opacity: 1;
        }

/* phone grids have a 12px gap: keep the card inside half of it */
@media (max-width: 767px) {
    .pw2-card::before {
        inset: -6px;
        border-radius: calc(var(--pw-radius) + 4px);
    }
}

@media (hover: hover) and (pointer: fine) {
    .pw2-card:hover,
    .pw2-card:focus-within {
        z-index: 2;
    }

        .pw2-card:hover::before,
        .pw2-card:focus-within::before {
            opacity: 1;
        }

    .pw2-card .product-box-add-to-cart-button {
        background: #fff;
        color: var(--pw-ink);
        box-shadow: inset 0 0 0 1.5px var(--pw-ink);
        transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

    .pw2-card .product-box-add-to-cart-button.add-to-backorder {
        background: #fff;
        color: var(--pw-red);
        box-shadow: inset 0 0 0 1.5px var(--pw-red);
    }

    .pw2-card:hover .product-box-add-to-cart-button,
    .pw2-card:focus-within .product-box-add-to-cart-button {
        background: var(--pw-blue);
        color: #fff;
        box-shadow: none;
    }

        .pw2-card:hover .product-box-add-to-cart-button:hover {
            background: var(--pw-blue-700);
        }

    .pw2-card:hover .product-box-add-to-cart-button.add-to-backorder,
    .pw2-card:focus-within .product-box-add-to-cart-button.add-to-backorder {
        background: var(--pw-red);
    }

        .pw2-card:hover .product-box-add-to-cart-button.add-to-backorder:hover {
            background: #a30000;
        }
}

/* added to cart: green with a check, whatever the button's colour was (outranks the hover states above) */
.pw2-card .product-box-add-to-cart-button.is-added,
.pw2-card .product-box-add-to-cart-button.is-added:hover,
.pw2-card:hover .product-box-add-to-cart-button.is-added,
.pw2-card:focus-within .product-box-add-to-cart-button.is-added {
    background: var(--pw-green);
    color: #fff;
    box-shadow: none;
}

    .pw2-card .product-box-add-to-cart-button.is-added::before {
        content: "\2713";
        margin-right: 6px;
    }

/* Mil-Spec "Configure Kit" on kit tiles (plugin style sits in the body, so outrank it) */
.pw2-card .kit-configure-box-button {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-navy);
    color: #fff;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .pw2-card .kit-configure-box-button:hover,
    .pw2-card .kit-configure-box-button:focus {
        background: #000;
    }

/* List view */
.product-list .item-grid {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}

.product-list .pw2-card {
    flex-direction: row;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pw-border);
}

.product-list .pw2-card__media {
    flex: 0 0 160px;
    width: 160px;
    margin: 0;
}

.product-list .pw2-card__actions {
    max-width: 320px;
}

/* Pager */
.pw2-cat .pager,
.search-page .pager {
    margin: 36px 0 0;
}

    .pw2-cat .pager ul,
    .search-page .pager ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pw2-cat .pager li,
    .search-page .pager li {
        margin: 0;
        padding: 0;
    }

        .pw2-cat .pager li a,
        .pw2-cat .pager li span,
        .search-page .pager li a,
        .search-page .pager li span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 40px;
            padding: 0 12px;
            box-sizing: border-box;
            border: 1px solid var(--pw-border);
            border-radius: 999px;
            background: #fff;
            color: var(--pw-text);
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
        }

            .pw2-cat .pager li a:hover,
            .search-page .pager li a:hover {
                border-color: var(--pw-blue);
                color: var(--pw-blue-700);
            }

        .pw2-cat .pager li.current-page span,
        .search-page .pager li.current-page span {
            background: var(--pw-navy);
            border-color: var(--pw-ink);
            color: #fff;
        }

.pw2-cat .no-result {
    padding: 40px 0;
    text-align: center;
    font-size: 15px;
    color: var(--pw-muted);
}

/* Category description, after the products; long ones collapse */
.pw2-cat__about {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--pw-border);
}

.pw2-cat .category-description {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pw-text-2);
}

    .pw2-cat .category-description img {
        max-width: 100%;
        height: auto;
    }

    .pw2-cat .category-description table {
        max-width: 100%;
        border-collapse: collapse;
    }

    .pw2-cat .category-description td,
    .pw2-cat .category-description th {
        padding: 6px 12px;
        border-bottom: 1px solid var(--pw-border);
    }

.pw2-clamp {
    position: relative;
    max-height: 260px;
    overflow: hidden;
}

    .pw2-clamp:not(.is-open)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80px;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
    }

    .pw2-clamp.is-open {
        max-height: none;
    }

.pw2-clamp__toggle {
    margin-top: 12px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid var(--pw-navy);
    border-radius: 999px;
    background: #fff;
    color: var(--pw-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .pw2-clamp__toggle:hover {
        background: var(--pw-navy);
        color: #fff;
    }

@media (max-width: 991px) {
    .pw2-cat__body.has-filters {
        display: block;
    }

    .pw2-cat__filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        margin: 0 0 14px;
        padding: 0 18px;
        border: 1px solid var(--pw-navy);
        border-radius: 999px;
        background: #fff;
        color: var(--pw-ink);
        font-size: 14px;
        font-weight: 700;
    }

    .pw2-cat__rail {
        display: none;
        position: static;
        max-height: none;
        margin: 0 0 20px;
        padding: 0 16px 8px;
        border: 1px solid var(--pw-border);
        border-radius: var(--pw-radius);
    }

    .pw2-cat__body.filters-open .pw2-cat__rail {
        display: block;
    }
}

@media (max-width: 575px) {
    .pw2-cat__head h1 {
        font-size: 28px;
    }

    .pw2-subcats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pw2-subcat {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        min-height: 0;
        padding: 12px 8px;
        font-size: 13px;
        text-align: center;
    }

    .product-grid .item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }

    .pw2-card__price strong {
        font-size: 20px;
    }

    .pw2-card__buy {
        flex-direction: column;
        align-items: stretch;
    }

    .pw2-card .qty-wrapper {
        justify-content: space-between;
    }

    .pw2-card .qty-input {
        flex: 1 1 auto;
        width: auto !important;
    }

    .pw2-cat .product-selectors {
        justify-content: space-between;
    }

    .product-list .pw2-card__media {
        flex-basis: 110px;
        width: 110px;
    }
}

/* ------------------------------------------------------------
   Cart page (OrderSummary component inside Cart.cshtml)
   The component carries its own <style> in the body, after this sheet,
   so rules here are scoped under .pw2-cartpage to outrank it.
   ------------------------------------------------------------ */
.pw2-cartpage {
    padding-top: 12px;
    padding-bottom: 40px;
}

    .pw2-cartpage .shopping-cart-page,
    .pw2-cartpage .page-body {
        margin: 0;
        padding: 0;
    }

    .pw2-cartpage .cart-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 20px;
        padding: 0;
        border: 0;
    }

    .pw2-cartpage .cart-title {
        margin: 0;
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -.01em;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

    .pw2-cartpage .cart-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 32px;
        align-items: start;
        margin: 0;
    }

    .pw2-cartpage .cart-info {
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        float: none;
    }

    /* Saved-carts guest prompt */
    .pw2-cartpage .pw-save-cart {
        margin: 0 0 16px;
        padding: 12px 16px;
        background: var(--pw-tint);
        border: 0;
        border-radius: var(--pw-radius);
    }

        .pw2-cartpage .pw-save-cart .button-2 {
            height: 36px;
            padding: 0 16px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
        }

    /* Line items */
    .pw2-cartpage .cart-info > ul {
        max-height: none;
        overflow: visible;
        margin: 0;
        padding: 0 20px;
        list-style: none;
        background: #fff;
        border: 1px solid var(--pw-border);
        border-radius: var(--pw-radius);
    }

        .pw2-cartpage .cart-info > ul > li {
            display: grid;
            grid-template-columns: 96px minmax(0, 1fr) auto 110px 36px;
            align-items: center;
            gap: 20px;
            margin: 0;
            padding: 20px 0;
            border: 0;
            border-bottom: 1px solid var(--pw-border);
            background: none;
        }

            .pw2-cartpage .cart-info > ul > li:last-child {
                border-bottom: 0;
            }

    .pw2-cartpage .cs-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 96px;
        height: 96px;
        margin: 0;
        padding: 6px;
        box-sizing: border-box;
        background: var(--pw-page);
        border-radius: 10px;
    }

        .pw2-cartpage .cs-img a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .pw2-cartpage .cs-img img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            mix-blend-mode: multiply;
        }

    .pw2-cartpage .cs-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

        .pw2-cartpage .cs-info .product-name {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.35;
            color: var(--pw-text);
            text-decoration: none;
        }

            .pw2-cartpage .cs-info .product-name:hover {
                color: var(--pw-blue-700);
                text-decoration: underline;
            }

        .pw2-cartpage .cs-info .attributes {
            margin: 0;
            font-size: 13px;
            color: #495057;
        }

        .pw2-cartpage .cs-info .sku-wrapper {
            margin: 0;
        }

        .pw2-cartpage .cs-info .sku-number {
            font-family: var(--pw-mono);
            font-size: 12px;
            color: var(--pw-muted);
        }

        .pw2-cartpage .cs-info .product-unit-price {
            font-size: 13px;
            color: var(--pw-muted);
        }

            .pw2-cartpage .cs-info .product-unit-price::after {
                content: " each";
            }

    .pw2-cartpage .cs-quantity,
    .pw2-cartpage .subtotal,
    .pw2-cartpage .remove-from-cart {
        width: auto;
        margin: 0;
        padding: 0;
    }

    .pw2-cartpage .product-quantity {
        display: inline-flex;
        align-items: stretch;
        height: 40px;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--pw-border-2);
        border-radius: 999px;
    }

        .pw2-cartpage .product-quantity .quantity {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px !important;
            height: auto !important;
            margin: 0;
            padding: 0;
            border: 0;
            background: #fff;
            color: var(--pw-ink);
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            user-select: none;
        }

            .pw2-cartpage .product-quantity .quantity:hover {
                background: var(--pw-page);
            }

        .pw2-cartpage .product-quantity .qty-input {
            width: 64px !important;
            height: auto !important;
            margin: 0;
            padding: 0;
            border: 0;
            border-left: 1px solid var(--pw-border);
            border-right: 1px solid var(--pw-border);
            border-radius: 0;
            text-align: center;
            font-family: var(--pw-mono);
            font-size: 14px;
        }

    .pw2-cartpage .subtotal {
        text-align: right;
    }

    .pw2-cartpage .product-subtotal {
        font-size: 17px;
        font-weight: 800;
        color: var(--pw-ink);
    }

    .pw2-cartpage .remove-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: transparent;
        background-position: center;
    }

        .pw2-cartpage .remove-btn:hover {
            background-color: var(--pw-page);
        }

    .pw2-cartpage .td-title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

/* Order summary card */
.pw2-cart-side {
    position: sticky;
    top: 140px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pw2-cart-side__box {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    box-shadow: 0 .5rem 1rem rgba(17, 40, 72, .06);
}

.pw2-cart-side__title {
    margin: 0 0 12px;
    font-family: var(--pw-display);
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.pw2-cartpage .pw2-cart-side .footer-cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

    .pw2-cartpage .pw2-cart-side .footer-cart > * {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .pw2-cartpage .pw2-cart-side .footer-cart > hr {
        display: none;
    }

    .pw2-cartpage .pw2-cart-side .footer-cart .fs-3 {
        font-size: 24px !important;
        font-weight: 800;
        color: var(--pw-ink);
    }

.pw2-cartpage .cart-extra-rows {
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--pw-border);
}

.pw2-cartpage .cart-extra-row {
    font-size: 14px;
    color: var(--pw-text-2);
}

.pw2-cartpage .cart-extra-value a {
    color: var(--pw-steel);
}

.pw2-cartpage .cart-coupon-box .coupon-box {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

    .pw2-cartpage .cart-coupon-box .coupon-box .title {
        margin: 0 0 6px;
        padding: 0;
        border: 0;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        text-transform: none;
        color: var(--pw-text);
    }

    .pw2-cartpage .cart-coupon-box .coupon-box .hint {
        display: none;
    }

.pw2-cartpage .coupon-code {
    display: flex;
    gap: 8px;
}

    .pw2-cartpage .coupon-code .discount-coupon-code {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: 40px;
        padding: 0 14px;
        border: 1px solid var(--pw-border-2);
        border-radius: 999px;
        font-size: 14px;
    }

    .pw2-cartpage .coupon-code .apply-discount-coupon-code-button {
        flex: 0 0 auto;
        width: auto;
        height: 40px;
        padding: 0 16px;
        border: 1px solid var(--pw-navy);
        border-radius: 999px;
        background: #fff;
        color: var(--pw-ink);
        font-size: 13px;
        font-weight: 600;
        text-transform: none;
    }

        .pw2-cartpage .coupon-code .apply-discount-coupon-code-button:hover {
            background: var(--pw-navy);
            color: #fff;
        }

.pw2-cartpage #checkout {
    width: 100%;
    height: 54px;
    margin: 0;
    border: 0;
    border-radius: 999px !important;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: none;
}

    .pw2-cartpage #checkout:hover {
        background: var(--pw-blue-700);
    }

.pw2-cartpage .continue-shopping-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: auto;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--pw-steel);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
}

    .pw2-cartpage .continue-shopping-button:hover {
        text-decoration: underline;
    }

.pw2-cartpage .extra-info {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
    background: var(--pw-page);
    border: 0;
    border-radius: var(--pw-radius);
}

    .pw2-cartpage .extra-info .cart-page-sidebar__body {
        padding: 18px !important;
        font-size: 13px;
        line-height: 1.5;
        color: #495057;
    }

        .pw2-cartpage .extra-info .cart-page-sidebar__body p {
            margin: 0 0 8px;
        }

        .pw2-cartpage .extra-info .cart-page-sidebar__body em {
            font-style: normal;
        }

        .pw2-cartpage .extra-info .cart-page-sidebar__body .fw-bold {
            font-size: 14px;
            color: var(--pw-ink);
        }

@media (max-width: 991px) {
    .pw2-cartpage .cart-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .pw2-cart-side {
        position: static;
    }
}

@media (max-width: 640px) {
    .pw2-cartpage .cart-title {
        font-size: 28px;
    }

    .pw2-cartpage .cart-info > ul {
        padding: 0 14px;
    }

        .pw2-cartpage .cart-info > ul > li {
            position: relative;
            grid-template-columns: 72px minmax(0, 1fr) auto;
            grid-template-areas:
                "img info info"
                "img qty  subtotal";
            gap: 10px 14px;
            padding: 16px 0;
        }

    .pw2-cartpage .cs-img {
        grid-area: img;
        width: 72px;
        height: 72px;
        align-self: start;
    }

    .pw2-cartpage .cs-info {
        grid-area: info;
        padding-right: 40px;
    }

        .pw2-cartpage .cs-info .product-name {
            font-size: 15px !important;
            line-height: 1.35 !important;
        }

        .pw2-cartpage .cs-info .sku-number {
            font-size: 12px !important;
        }

    .pw2-cartpage .remove-from-cart {
        position: absolute;
        top: 10px;
        right: 0;
    }

    .pw2-cartpage .cs-quantity {
        grid-area: qty;
        text-align: left;
    }

    .pw2-cartpage .subtotal {
        grid-area: subtotal;
        align-self: center;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------
   Checkout (single-page FlowCheckout)
   The view keeps its layout and logic; its inline <style> loads after this
   sheet, so everything is scoped under .html-flow-checkout-page .flow-checkout.
   ------------------------------------------------------------ */
.html-flow-checkout-page .flow-checkout {
    max-width: 1328px;
    padding: 12px 24px 48px;
}

    .html-flow-checkout-page .flow-checkout > h1 {
        margin: 4px 0 22px;
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -.01em;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

    .html-flow-checkout-page .flow-checkout .flow-layout {
        gap: 32px;
    }

    .html-flow-checkout-page .flow-checkout .flow-section {
        margin-bottom: 20px;
        background: #fff;
        border: 1px solid var(--pw-border);
        border-radius: var(--pw-radius);
    }

    .html-flow-checkout-page .flow-checkout .flow-section-header {
        gap: 14px;
        padding: 16px 22px;
        background: none;
        border-bottom: 1px solid var(--pw-border);
    }

    .html-flow-checkout-page .flow-checkout .flow-section-number {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--pw-blue);
        font-family: var(--pw-display);
        font-size: 18px;
        font-weight: 800;
    }

    .html-flow-checkout-page .flow-checkout .flow-section-title {
        margin: 0;
        font-family: var(--pw-display);
        font-weight: 700;
        font-size: 21px;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

    .html-flow-checkout-page .flow-checkout .flow-section-body {
        padding: 20px 24px 24px;
    }

    .html-flow-checkout-page .flow-checkout .flow-field-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--pw-text-2);
    }

    .html-flow-checkout-page .flow-checkout input.flow-input,
    .html-flow-checkout-page .flow-checkout .flow-select {
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--pw-border-2);
        border-radius: 10px;
        font-size: 15px;
    }

    .html-flow-checkout-page .flow-checkout textarea.flow-input {
        padding: 10px 14px;
        border: 1px solid var(--pw-border-2);
        border-radius: 10px;
        font-size: 15px;
    }

        .html-flow-checkout-page .flow-checkout .flow-input:focus,
        .html-flow-checkout-page .flow-checkout .flow-select:focus {
            outline: none;
            border-color: var(--pw-electric);
            box-shadow: 0 0 0 .25rem rgba(253, 126, 20, .30);
        }

    .html-flow-checkout-page .flow-checkout input[type=radio],
    .html-flow-checkout-page .flow-checkout input[type=checkbox] {
        accent-color: var(--pw-blue);
    }

    .html-flow-checkout-page .flow-checkout .flow-method-item {
        border-radius: 10px;
    }

        .html-flow-checkout-page .flow-checkout .flow-method-item:hover {
            background: var(--pw-page);
        }

    .html-flow-checkout-page .flow-checkout .flow-btn-primary {
        border-radius: 999px;
        background: var(--pw-blue);
        font-family: var(--pw-display);
        font-size: 15px;
        letter-spacing: .04em;
    }

        .html-flow-checkout-page .flow-checkout .flow-btn-primary:hover {
            background: var(--pw-blue-700);
        }

    .html-flow-checkout-page .flow-checkout .flow-btn-secondary {
        border: 1px solid var(--pw-border-2);
        border-radius: 999px;
        background: #fff;
        color: var(--pw-text-2);
    }

        .html-flow-checkout-page .flow-checkout .flow-btn-secondary:hover {
            border-color: var(--pw-ink);
            color: var(--pw-ink);
        }

    .html-flow-checkout-page .flow-checkout .flow-btn-submit {
        min-height: 54px;
        padding: 0 44px;
        border-radius: 999px;
        background: var(--pw-blue);
        font-family: var(--pw-display);
        font-size: 20px;
        letter-spacing: .04em;
    }

        .html-flow-checkout-page .flow-checkout .flow-btn-submit:hover {
            background: var(--pw-blue-700);
        }

    /* Summary rail */
    .html-flow-checkout-page .flow-checkout .flow-rail-card {
        top: 140px; /* clears the sticky header; the view's own 16px sat under it */
        padding: 22px;
        border-color: var(--pw-border);
        border-radius: var(--pw-radius);
        box-shadow: 0 .5rem 1rem rgba(17, 40, 72, .06);
    }

        .html-flow-checkout-page .flow-checkout .flow-rail-card h2 {
            font-family: var(--pw-display);
            font-weight: 800;
            font-size: 22px;
            text-transform: uppercase;
            color: var(--pw-ink);
        }

    .html-flow-checkout-page .flow-checkout .flow-rail-edit {
        color: var(--pw-steel);
        font-weight: 600;
    }

    .html-flow-checkout-page .flow-checkout .flow-rail-item-name {
        color: var(--pw-text);
    }

    .html-flow-checkout-page .flow-checkout .flow-total-grand {
        border-top: 2px solid var(--pw-navy);
    }

        .html-flow-checkout-page .flow-checkout .flow-total-grand .flow-total-value {
            font-size: 24px;
            color: var(--pw-ink);
        }

@media (max-width: 640px) {
    .html-flow-checkout-page .flow-checkout {
        padding: 8px 16px 40px;
    }

        .html-flow-checkout-page .flow-checkout > h1 {
            font-size: 28px;
        }

        .html-flow-checkout-page .flow-checkout .flow-section-body {
            padding: 16px 14px 20px;
        }

        .html-flow-checkout-page .flow-checkout .flow-rail-card {
            position: static;
        }

        .html-flow-checkout-page .flow-checkout .flow-btn-submit {
            width: 100%;
        }
}

/* ------------------------------------------------------------
   Sign in / checkout as guest
   ------------------------------------------------------------ */
.html-login-page .login-page .page-title h1 {
    font-family: var(--pw-display);
    font-weight: 800;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.html-login-page .login-page .new-wrapper,
.html-login-page .login-page .returning-wrapper {
    background: #fff !important;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    box-shadow: 0 .5rem 1rem rgba(17, 40, 72, .06);
}

    .html-login-page .login-page .new-wrapper .title,
    .html-login-page .login-page .returning-wrapper .title,
    .html-login-page .login-page .new-wrapper h2,
    .html-login-page .login-page .returning-wrapper h2 {
        font-family: var(--pw-display);
        font-weight: 700;
        font-size: 22px;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

.html-login-page .login-page input[type=email],
.html-login-page .login-page input[type=text],
.html-login-page .login-page input[type=password] {
    min-height: 44px;
    border: 1px solid var(--pw-border-2);
    border-radius: 10px;
    font-size: 15px;
}

    .html-login-page .login-page input[type=email]:focus,
    .html-login-page .login-page input[type=text]:focus,
    .html-login-page .login-page input[type=password]:focus {
        border-color: var(--pw-electric);
        box-shadow: 0 0 0 .25rem rgba(253, 126, 20, .30);
    }

.html-login-page .login-page input[type=checkbox] {
    accent-color: var(--pw-blue);
}

.html-login-page .login-page .button-1,
.html-login-page .login-page .button-2,
.html-login-page .login-page .login-contents__button {
    min-height: 46px;
    border-radius: 999px !important;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.html-login-page .login-page .checkout-as-guest-button,
.html-login-page .login-page .login-button {
    border: 0;
    background: var(--pw-blue) !important;
    color: #fff !important;
}

    .html-login-page .login-page .checkout-as-guest-button:hover,
    .html-login-page .login-page .login-button:hover {
        background: var(--pw-blue-700) !important;
    }

.html-login-page .login-page .register-button {
    border: 2px solid var(--pw-navy) !important;
    background: #fff !important;
    color: var(--pw-ink) !important;
}

.html-login-page .login-page a {
    color: var(--pw-steel);
}

/* ------------------------------------------------------------
   Flyout (mini) cart
   Markup and behavior are the FlyoutShoppingCart component's; this only
   restyles it. Scoped by id so it outranks the old theme's rules.
   ------------------------------------------------------------ */
/* Dim the page behind the open cart. A click on the dimmed area lands on
   <body>, which ajaxcart's outside-click handler already treats as "close". */
body.flyout-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(17, 40, 72, .45);
}

#flyout-cart.flyout-cart {
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    background: #fff;
    border: 0;
    box-shadow: var(--pw-shadow-lg);
    color: var(--pw-text);
}

#flyout-cart .flyout-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    margin: 0;
    padding: 18px 20px;
    background: #fff;
    border-bottom: 1px solid var(--pw-border);
}

    #flyout-cart .flyout-cart-header h3 {
        margin: 0;
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 24px;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

    #flyout-cart .flyout-cart-header .close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--pw-text);
        font-size: 28px;
        line-height: 1;
        opacity: 1;
    }

        #flyout-cart .flyout-cart-header .close:hover {
            background: var(--pw-page);
        }

#flyout-cart .mini-shopping-cart {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: #fff;
}

#flyout-cart .items {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin: 0;
    padding: 0 20px;
    background: #fff;
}

#flyout-cart .item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
        "pic product"
        "pic qty";
    gap: 8px 14px;
    flex: 0 0 auto; /* .items is a fixed-height flex column: rows must not shrink, the list scrolls */
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    margin: 0;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--pw-border);
    background: none;
}

    #flyout-cart .item:last-child {
        border-bottom: 0;
    }

#flyout-cart .item .picture {
    grid-area: pic;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    background: var(--pw-page);
    border-radius: 10px;
}

    #flyout-cart .item .picture a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    #flyout-cart .item .picture img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

#flyout-cart .item .product {
    grid-area: product;
    min-width: 0;
    margin: 0;
    padding: 0 36px 0 0;
}

    #flyout-cart .item .product .name {
        margin: 0 0 2px;
    }

        #flyout-cart .item .product .name a {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.35;
            color: var(--pw-text);
            text-decoration: none;
        }

            #flyout-cart .item .product .name a:hover {
                color: var(--pw-blue-700);
            }

    #flyout-cart .item .product .attributes {
        font-size: 12px;
        color: #495057;
    }

#flyout-cart .flyout-availability {
    margin: 4px 0 0;
}

#flyout-cart .item-total-price {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--pw-ink);
}

/* qty: vertical up/down arrows -> horizontal pill [ - | n | + ] */
#flyout-cart .order-quantity-container {
    grid-area: qty;
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
}

#flyout-cart .order-quantity {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    flex-wrap: nowrap;
}

#flyout-cart .order-quantity-inner {
    width: auto !important;
    max-width: none;
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    height: 36px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pw-border-2);
    border-radius: 999px;
}

    #flyout-cart .order-quantity-inner .b-wrap {
        display: flex;
        width: auto;
        height: auto;
        margin: 0;
    }

        #flyout-cart .order-quantity-inner .b-wrap:has(.flyout-qty-down) {
            order: 0;
        }

        #flyout-cart .order-quantity-inner .b-wrap:has(.flyout-qty-input) {
            order: 1;
        }

        #flyout-cart .order-quantity-inner .b-wrap:has(.flyout-qty-up) {
            order: 2;
        }

#flyout-cart .order-quantity__side-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--pw-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

    #flyout-cart .order-quantity__side-button svg {
        display: none;
    }

    #flyout-cart .order-quantity__side-button.flyout-qty-up::before {
        content: "+";
    }

    #flyout-cart .order-quantity__side-button.flyout-qty-down::before {
        content: "\2212";
    }

    #flyout-cart .order-quantity__side-button:hover {
        background: var(--pw-page);
    }

#flyout-cart .flyout-qty-input {
    width: 52px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--pw-border);
    border-right: 1px solid var(--pw-border);
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    font-family: var(--pw-mono);
    font-size: 13px;
    -moz-appearance: textfield;
    appearance: textfield;
}

    #flyout-cart .flyout-qty-input::-webkit-outer-spin-button,
    #flyout-cart .flyout-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

#flyout-cart .item-delete-container {
    position: absolute;
    top: 12px;
    right: 0;
    margin: 0;
}

#flyout-cart .item-delete-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--pw-muted);
    cursor: pointer;
}

    #flyout-cart .item-delete-box:hover {
        background: var(--pw-page);
        color: var(--pw-red);
    }

    #flyout-cart .item-delete-box svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
        color: inherit;
    }

/* footer */
#flyout-cart .flyout-footer {
    flex: 0 0 auto;
    margin: 0;
    padding: 16px 20px 20px;
    background: #fff;
    border-top: 1px solid var(--pw-border);
}

#flyout-cart #flyout-subtotal.totals {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 0;
    font-size: 15px;
    color: var(--pw-text-2);
    text-align: left;
}

    #flyout-cart #flyout-subtotal.totals strong {
        font-size: 24px;
        font-weight: 800;
        color: var(--pw-ink);
    }

#flyout-cart .flyout-footer .buttons {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

    #flyout-cart .flyout-footer .buttons button {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 48px;
        margin: 0;
        padding: 0 12px;
        border-radius: 999px !important;
        font-family: var(--pw-display);
        font-size: 17px;
        font-weight: 700 !important;
        letter-spacing: .04em;
        text-transform: uppercase;
        box-shadow: none;
    }

    #flyout-cart .flyout-footer .buttons .cart-button {
        border: 2px solid var(--pw-navy);
        background: #fff;
        color: var(--pw-ink);
    }

        #flyout-cart .flyout-footer .buttons .cart-button:hover {
            background: var(--pw-navy);
            color: #fff;
        }

    #flyout-cart .flyout-footer .buttons .button-checkout {
        border: 0;
        background: var(--pw-blue) !important;
        color: #fff !important;
    }

        #flyout-cart .flyout-footer .buttons .button-checkout:hover {
            background: var(--pw-blue-700) !important;
        }

#flyout-cart .flyout-save-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--pw-muted);
    text-align: center;
}

#flyout-cart .no-data,
#flyout-cart .count {
    padding: 40px 20px;
    font-size: 15px;
    color: var(--pw-muted);
    text-align: center;
}

#flyout-cart .flyout-continue {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--pw-blue-700);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

    #flyout-cart .flyout-continue:hover {
        color: var(--pw-ink);
    }

/* Phones (Joey, 2026-09-28): the cart is a bottom sheet that fits its contents (up to 85% of the screen) instead of
   a full-screen page, with compact rows, so the page stays visible above it and Continue shopping is one tap. */
@media (max-width: 767px) {
    #flyout-cart.flyout-cart {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100% !important;
        max-width: none;
        height: auto;
        max-height: 85vh;
        max-height: 85dvh;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
    }

        #flyout-cart.flyout-cart.open {
            transform: translateY(0);
        }

    #flyout-cart .flyout-cart-header {
        padding: 10px 12px 10px 16px;
        border-radius: 18px 18px 0 0;
    }

        #flyout-cart .flyout-cart-header h3 {
            font-size: 19px;
        }

    #flyout-cart .items {
        padding: 0 16px;
    }

    /* one row per line: picture | name, stock, price; the qty stepper sits beside the price, bottom right */
    #flyout-cart .item {
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-areas: "pic product";
        gap: 0 12px;
        align-items: center;
        padding: 10px 0;
    }

    #flyout-cart .order-quantity-container {
        position: absolute;
        right: 0;
        bottom: 10px;
    }

    #flyout-cart .order-quantity-inner {
        height: 30px;
    }

    #flyout-cart .order-quantity__side-button {
        width: 28px;
    }

    #flyout-cart .flyout-qty-input {
        width: 42px;
    }

    #flyout-cart .item-delete-container {
        top: 4px;
    }

        #flyout-cart .item .picture {
            width: 52px;
            height: 52px;
            padding: 3px;
            border-radius: 8px;
        }

        #flyout-cart .item .product .name a {
            -webkit-line-clamp: 1;
            font-size: 13.5px;
        }

    #flyout-cart .flyout-availability {
        margin: 2px 0 0;
    }

    #flyout-cart .item-total-price {
        margin-top: 2px;
        font-size: 15px;
    }

    #flyout-cart .flyout-footer {
        padding: 12px 16px calc(10px + env(safe-area-inset-bottom));
    }

    #flyout-cart #flyout-subtotal.totals {
        margin: 0 0 10px;
        font-size: 14px;
    }

        #flyout-cart #flyout-subtotal.totals strong {
            font-size: 20px;
        }

    #flyout-cart .flyout-footer .buttons button {
        height: 44px;
        font-size: 15px;
    }

    #flyout-cart .flyout-continue {
        margin-top: 4px;
    }

    #flyout-cart .flyout-save-hint {
        display: none; /* the sheet is kept short; the hint is on the cart page itself */
    }

    #flyout-cart .no-data {
        padding: 24px 16px;
    }
}

/* ------------------------------------------------------------
   Grouped product: one buy card per associated product
   ------------------------------------------------------------ */
.pw2-grouped__top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.pw2-grouped__jump {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--pw-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .pw2-grouped__jump:hover {
        background: var(--pw-blue-700);
    }

.pw2-grouped .overview-buttons:not(:has(*)) {
    display: none;
}

.pw2-options {
    margin-top: 48px;
}

.pw2-options__title {
    margin: 0 0 16px;
    font-family: var(--pw-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.pw2-grouped .product-variant-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.pw2-option {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
    margin: 0;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
}

.pw2-option__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    background: var(--pw-page);
    border-radius: 10px;
}

    .pw2-option__media img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.pw2-option__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
}

    .pw2-option__info .variant-name {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--pw-text);
    }

    .pw2-option__info .variant-description {
        font-size: 14px;
        color: #495057;
    }

    .pw2-option__info .additional-details {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
        margin: 0;
        font-size: 12px;
        color: var(--pw-muted);
    }

        .pw2-option__info .additional-details .value {
            font-family: var(--pw-mono);
            color: var(--pw-text);
        }

    .pw2-option__info .availability {
        margin: 0;
        padding: 0;
        border: 0;
    }

        .pw2-option__info .availability .stock {
            font-size: 13px;
            font-weight: 600;
            color: var(--pw-green);
        }

            .pw2-option__info .availability .stock.out-of-stock {
                color: var(--pw-red);
            }

.pw2-option__buy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

    .pw2-option__buy .prices {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

        .pw2-option__buy .prices .product-price,
        .pw2-option__buy .prices .non-discounted-price {
            display: flex;
            align-items: baseline;
            gap: 6px;
        }

            .pw2-option__buy .prices .product-price > span:first-child {
                font-size: 22px;
                font-weight: 700;
                color: var(--pw-ink);
            }

    .pw2-option__buy .pw2-tiers__grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }

    .pw2-option__buy .product-estimate-shipping {
        display: none; /* one shipping policy note is enough; it's on the trust list above */
    }

@media (max-width: 991px) {
    .pw2-grouped__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .pw2-option {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .pw2-option__media {
        width: 88px;
        height: 88px;
    }

    .pw2-option__buy {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------------------
   Homepage
   ------------------------------------------------------------ */
.pw2-home {
    padding: 20px 0 24px;
}

    .pw2-home .page-body {
        margin: 0;
        padding: 0;
    }

/* Hero: category rail + slider */
.pw2-hero {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

    .pw2-hero:not(:has(.pw2-hero__rail)) {
        grid-template-columns: minmax(0, 1fr);
    }

.pw2-hero__rail {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    background: var(--pw-page);
    border-radius: var(--pw-radius);
}

    .pw2-hero__rail ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pw2-hero__rail li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 40px;
        padding: 0 18px;
        color: var(--pw-text) !important;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none !important;
    }

        .pw2-hero__rail li a svg {
            flex-shrink: 0;
            color: #adb5bd;
        }

        .pw2-hero__rail li a:hover {
            background: #fff;
            color: var(--pw-blue-700) !important;
        }

            .pw2-hero__rail li a:hover svg {
                color: var(--pw-blue-700);
            }

.pw2-hero__all {
    margin: auto 18px 4px;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid var(--pw-border);
    background: none;
    color: var(--pw-steel);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

    .pw2-hero__all:hover {
        color: var(--pw-blue-700);
    }

.pw2-hero__slider {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--pw-radius);
    background: var(--pw-page);
}

    .pw2-hero__slider .container-sm,
    .pw2-hero__slider .container {
        max-width: none;
        padding: 0;
    }

    .pw2-hero__slider .swiper,
    .pw2-hero__slider .nop-slider {
        margin: 0;
        border-radius: var(--pw-radius);
    }

    .pw2-hero__slider .swiper-button-next,
    .pw2-hero__slider .swiper-button-prev {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50%;
        background: #fff !important;
        box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .14);
        opacity: 1;
        color: var(--pw-ink) !important;
    }

        .pw2-hero__slider .swiper-button-next::after,
        .pw2-hero__slider .swiper-button-prev::after {
            font-size: 16px;
            font-weight: 700;
        }

    .pw2-hero__slider .swiper-pagination-bullet-active {
        background: var(--pw-blue);
    }

    /* the slide's call-to-action, when a slide has one */
    .pw2-hero__slider .btn,
    .pw2-hero__slider .button-1 {
        border-radius: 999px;
        background: var(--pw-blue);
        border-color: var(--pw-blue);
        font-family: var(--pw-display);
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

/* Section heads */
.pw2-home__section,
.pw2-home .product-grid {
    margin-top: 48px;
}

.pw2-home__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0 0 18px;
}

    .pw2-home__head h2,
    .pw2-home .product-grid > .title,
    .pw2-home .product-grid .title strong {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: -.01em;
        text-transform: uppercase;
        color: var(--pw-ink);
        text-align: left;
    }

    .pw2-home .product-grid > .title {
        margin-bottom: 18px;
    }

    .pw2-home__head span {
        font-size: 15px;
        color: var(--pw-muted);
    }

    .pw2-home__head a {
        font-size: 14px;
        font-weight: 700;
        color: var(--pw-steel) !important;
        text-decoration: none;
    }

        .pw2-home__head a:hover {
            text-decoration: underline;
        }

/* Configurator cards */
.pw2-tools {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pw2-tools--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pw2-tool {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    color: var(--pw-text) !important;
    text-decoration: none !important;
    transition: box-shadow .2s cubic-bezier(.2, 0, .1, 1), transform .2s cubic-bezier(.2, 0, .1, 1);
}

    .pw2-tool:hover {
        box-shadow: 0 .5rem 1rem rgba(17, 40, 72, .12);
        transform: translateY(-2px);
    }

.pw2-tool__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: var(--pw-page);
}

    .pw2-tool__img img {
        max-width: 70%;
        max-height: 80%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.pw2-tool__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 18px;
}

    .pw2-tool__body strong {
        font-family: var(--pw-display);
        font-weight: 700;
        font-size: 20px;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

    .pw2-tool__body small {
        font-size: 13px;
        line-height: 1.45;
        color: #495057;
    }

    .pw2-tool__body strong::after {
        content: " →";
        color: var(--pw-blue);
    }

/* Image tiles (kit series, striped wire) */
.pw2-tiles {
    display: grid;
    gap: 16px;
}

.pw2-tiles--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pw2-tiles--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pw2-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--pw-text) !important;
    text-decoration: none !important;
}

.pw2-tile__img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--pw-page);
    border-radius: var(--pw-radius);
}

    .pw2-tile__img img {
        max-width: 76%;
        max-height: 76%;
        object-fit: contain;
        mix-blend-mode: multiply;
        transition: transform .2s cubic-bezier(.2, 0, .1, 1);
    }

.pw2-tile:hover .pw2-tile__img img {
    transform: scale(1.05);
}

.pw2-tile__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-ink);
}

.pw2-tile:hover .pw2-tile__name {
    color: var(--pw-blue-700);
}

@media (max-width: 991px) {
    .pw2-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .pw2-hero__rail {
        display: none; /* the burger menu carries the categories on small screens */
    }

    .pw2-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pw2-tiles--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pw2-home {
        padding-top: 12px;
    }

    .pw2-home__section,
    .pw2-home .product-grid {
        margin-top: 36px;
    }

    .pw2-home__head h2,
    .pw2-home .product-grid > .title,
    .pw2-home .product-grid .title strong {
        font-size: 24px;
    }

    .pw2-tools {
        grid-template-columns: minmax(0, 1fr);
    }

    .pw2-tool {
        flex-direction: row;
    }

    .pw2-tool__img {
        flex: 0 0 110px;
        height: auto;
        min-height: 110px;
    }

    .pw2-tiles--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pw2-tiles--4 {
        gap: 12px;
    }
}

/* ------------------------------------------------------------
   Customer portal (My account pages: _ColumnsTwo + CustomerNavigation)
   The page bodies already use the pw-* components from order-ui.css
   (cards, fields, pills, order rows); they pick up the v2 tokens from
   :root above. This restyles the shell around them: a sidebar nav card
   beside the content, and v2 headings. Plugin account pages (BOMs,
   invoices, saved cards, RFQ...) share the same shell.
   ------------------------------------------------------------ */
.html-account-page .columns-wrapper {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 28px 0 64px;
}

    .html-account-page .columns-wrapper > .side-2,
    .html-account-page .columns-wrapper > .center-2 {
        float: none;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .html-account-page .columns-wrapper > .side-2 {
        position: sticky;
        top: 140px;
    }

        .html-account-page .columns-wrapper > .side-2::after {
            content: none;
        }

.html-account-page .block-account-navigation {
    float: none;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
}

    .html-account-page .block-account-navigation .title {
        margin: 0;
        padding: 10px 12px 8px;
        border: 0;
        background: none;
        color: var(--pw-muted);
        font-family: var(--pw-display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .html-account-page .block-account-navigation .listbox {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    .html-account-page .block-account-navigation .list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .html-account-page .block-account-navigation .list li {
            margin: 0;
            padding: 0;
            border: 0;
            background: none;
        }

            .html-account-page .block-account-navigation .list li a {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 9px 12px;
                border: 0;
                border-radius: 8px;
                background: none;
                color: var(--pw-text-2);
                font-size: 14px;
                font-weight: 500;
                line-height: 1.3;
                text-decoration: none;
            }

                .html-account-page .block-account-navigation .list li a::before,
                .html-account-page .block-account-navigation .list li a::after {
                    content: none;
                }

                .html-account-page .block-account-navigation .list li a:hover {
                    background: var(--pw-page);
                    color: var(--pw-blue);
                }

                .html-account-page .block-account-navigation .list li a .nav-icon {
                    width: 18px;
                    height: 18px;
                    color: var(--pw-muted);
                    opacity: 1;
                }

                .html-account-page .block-account-navigation .list li a:hover .nav-icon {
                    color: var(--pw-blue);
                }

            .html-account-page .block-account-navigation .list li.active a {
                background: var(--pw-tint);
                box-shadow: inset 3px 0 0 var(--pw-blue);
                color: var(--pw-blue);
                font-weight: 600;
            }

                .html-account-page .block-account-navigation .list li.active a .nav-icon {
                    color: var(--pw-blue);
                }

/* Headings: same voice as the category pages */
.html-account-page .center-2 .page-title {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
}

.html-account-page .center-2 .page-title h1,
.html-account-page .center-2 .pw-page h1,
.html-account-page .center-2 .pw-page-head h1 {
    margin: 0;
    font-family: var(--pw-display);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.html-account-page .center-2 .pw-page-head {
    margin-bottom: 20px;
}

    .html-account-page .center-2 .pw-page-head .page-title {
        margin: 0;
    }

.html-account-page .center-2 .pw-page {
    padding-bottom: 0;
}

/* Cards and fields on the v2 radius / palette */
.html-account-page .pw-card,
.html-account-page .pw-section {
    border-radius: var(--pw-radius);
}

.html-account-page .pw-card-title {
    font-family: var(--pw-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.html-account-page .inputs input[type="text"],
.html-account-page .inputs input[type="email"],
.html-account-page .inputs input[type="tel"],
.html-account-page .inputs input[type="password"],
.html-account-page .inputs select {
    background-color: #fff;
}

@media (max-width: 991.98px) {
    .html-account-page .columns-wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px 0 48px;
    }

        .html-account-page .columns-wrapper > .side-2 {
            position: static;
            max-width: none;
            margin: 0;
        }

    /* The old theme hid the list behind its title with no script to open it, so the nav was
       unreachable on phones. Here it is a row of pills that scrolls sideways. */
    .html-account-page .block-account-navigation {
        padding: 0;
        border: 0;
        background: none;
    }

        .html-account-page .block-account-navigation .title {
            display: none;
        }

        .html-account-page .block-account-navigation .listbox {
            display: block !important;
            overflow-x: auto;
            margin: 0 -16px;
            padding: 0 16px 4px;
            scrollbar-width: none;
        }

        .html-account-page .block-account-navigation .list {
            flex-direction: row;
            gap: 8px;
            width: max-content;
        }

            .html-account-page .block-account-navigation .list li a {
                gap: 8px;
                padding: 8px 14px;
                border: 1px solid var(--pw-border);
                border-radius: 999px;
                background: #fff;
                white-space: nowrap;
                font-size: 13.5px;
            }

            .html-account-page .block-account-navigation .list li.active a {
                border-color: var(--pw-blue);
                box-shadow: none;
            }

    .html-account-page .center-2 .page-title h1,
    .html-account-page .center-2 .pw-page h1,
    .html-account-page .center-2 .pw-page-head h1 {
        font-size: 26px;
    }
}

/* ------------------------------------------------------------
   Account tools: BOMs and saved carts (Prowire.Bom / Prowire.SavedCarts)
   Both build on order-ui.css's pw-* parts plus the BOM spreadsheet table
   (.pw-rows--grid). The plugin sheets come before this one in the CSS
   bundle, so equal specificity wins here. The public shared-cart page
   (_ColumnsOne, guests) gets the same treatment.
   ------------------------------------------------------------ */
.html-shared-cart-page .center-1 {
    width: 100%;
    max-width: 1328px;
    margin: 0 auto;
    padding: 28px 24px 64px;
    box-sizing: border-box;
}

.html-shared-cart-page .page-title {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

    .html-shared-cart-page .page-title h1 {
        margin: 0;
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 32px;
        line-height: 1.05;
        letter-spacing: -.01em;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

.html-shared-cart-page .pw-shared-by {
    margin: 6px 0 0;
    color: var(--pw-muted);
    font-size: 14px;
}

/* Page heads */
.html-account-page .pw-bom-head {
    align-items: flex-end;
    padding-bottom: 0;
    margin-bottom: 20px;
    border-bottom: 0;
}

.html-account-page .pw-bom-back,
.html-account-page .pw-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    color: var(--pw-blue);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

    .html-account-page .pw-bom-back:hover,
    .html-account-page .pw-back:hover {
        text-decoration: underline;
    }

.html-account-page .pw-bom-reference {
    font-size: 14px;
}

/* Notes */
:is(.html-account-page, .html-shared-cart-page) .pw-note {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.45;
}

:is(.html-account-page, .html-shared-cart-page) .pw-note--info {
    background: var(--pw-tint);
    border-color: #fde0cf;
    color: #a8450b;
}

:is(.html-account-page, .html-shared-cart-page) .pw-empty {
    padding: 28px 20px;
    border-radius: var(--pw-radius);
    text-align: center;
    font-size: 14px;
}

/* Buttons: the v2 pill, not order-ui's teal block */
:is(.html-account-page, .html-shared-cart-page) .pw-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

    :is(.html-account-page, .html-shared-cart-page) .pw-btn-primary:hover {
        background: var(--pw-blue-700);
        color: #fff;
    }

:is(.html-account-page, .html-shared-cart-page) .pw-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--pw-border-2);
    border-radius: 999px;
    background: #fff;
    color: var(--pw-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

    :is(.html-account-page, .html-shared-cart-page) .pw-btn-secondary:hover {
        border-color: var(--pw-blue);
        background: #fff;
        color: var(--pw-blue);
    }

    :is(.html-account-page, .html-shared-cart-page) .pw-btn-secondary.pw-btn-danger:hover {
        border-color: var(--pw-red);
        color: var(--pw-red);
    }

/* Search / page-size toolbar */
.html-account-page .pw-toolbar {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
}

    .html-account-page .pw-toolbar label {
        color: var(--pw-muted);
        font-size: 13px;
        font-weight: 600;
    }

    .html-account-page .pw-toolbar input,
    .html-account-page .pw-toolbar select {
        height: 38px;
        padding: 0 12px;
        border: 1px solid var(--pw-border-2);
        border-radius: 8px;
        background: #fff;
        font-size: 14px;
    }

        .html-account-page .pw-toolbar input:focus,
        .html-account-page .pw-toolbar select:focus {
            outline: 0;
            border-color: var(--pw-blue);
            box-shadow: 0 0 0 3px rgba(232, 89, 12, .15);
        }

/* Spreadsheet table: same ruled cells, v2 card corners and header */
:is(.html-account-page, .html-shared-cart-page) .pw-rows--grid {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    background: #fff;
}

    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid th {
        padding: 11px 14px;
        background: var(--pw-page);
        border-bottom: 1px solid var(--pw-border);
        border-right: 1px solid var(--pw-border);
        color: var(--pw-muted);
        font-family: var(--pw-display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

        :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid th .pw-sort {
            font: inherit;
            color: inherit;
            letter-spacing: inherit;
            text-transform: inherit;
        }

            :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid th .pw-sort:hover {
                color: var(--pw-blue);
            }

    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid td {
        padding: 12px 14px;
        border-bottom: 1px solid #e9ecef;
        border-right: 1px solid #e9ecef;
        font-size: 14px;
    }

    /* the cells carry the rules, so the corners have to be rounded on them too */
    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid thead tr:first-child > :first-child {
        border-top-left-radius: calc(var(--pw-radius) - 1px);
    }

    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid thead tr:first-child > :last-child {
        border-top-right-radius: calc(var(--pw-radius) - 1px);
    }

    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid tbody tr:last-child > :first-child {
        border-bottom-left-radius: calc(var(--pw-radius) - 1px);
    }

    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid tbody tr:last-child > :last-child {
        border-bottom-right-radius: calc(var(--pw-radius) - 1px);
    }

    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid tbody tr:nth-child(even) {
        background: #fbfcfd;
    }

    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid tbody tr:hover {
        background: var(--pw-tint);
    }

    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid .pw-money {
        color: var(--pw-text);
        font-weight: 700;
    }

:is(.html-account-page, .html-shared-cart-page) .pw-bom-name,
:is(.html-account-page, .html-shared-cart-page) .pw-link-strong {
    color: var(--pw-blue);
    font-weight: 600;
    text-decoration: none;
}

    :is(.html-account-page, .html-shared-cart-page) .pw-bom-name:hover,
    :is(.html-account-page, .html-shared-cart-page) .pw-link-strong:hover {
        text-decoration: underline;
    }

/* Pager */
.html-account-page .pw-pager__btn {
    border-radius: 8px;
}

    .html-account-page .pw-pager__btn.is-current {
        background: var(--pw-blue);
        border-color: var(--pw-blue);
        color: #fff;
    }

/* Saved-cart pages use nop's own button-1 / button-2; bring them in line with the pills */
:is(.saved-carts-page, .saved-cart-details-page, .saved-cart-share-page, .shared-cart-page, .bom-list-page, .bom-details-page) :is(button, a).button-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

    :is(.saved-carts-page, .saved-cart-details-page, .saved-cart-share-page, .shared-cart-page, .bom-list-page, .bom-details-page) :is(button, a).button-1:hover {
        background: var(--pw-blue-700);
        color: #fff;
    }

    :is(.saved-carts-page, .saved-cart-details-page, .saved-cart-share-page, .shared-cart-page, .bom-list-page, .bom-details-page) :is(button, a).button-1:disabled {
        background: var(--pw-border-2);
        cursor: not-allowed;
    }

:is(.saved-carts-page, .saved-cart-details-page, .saved-cart-share-page, .shared-cart-page, .bom-list-page, .bom-details-page) :is(button, a).button-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--pw-border-2);
    border-radius: 999px;
    background: #fff;
    color: var(--pw-text);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    text-decoration: none;
}

    :is(.saved-carts-page, .saved-cart-details-page, .saved-cart-share-page, .shared-cart-page, .bom-list-page, .bom-details-page) :is(button, a).button-2:hover {
        border-color: var(--pw-blue);
        color: var(--pw-blue);
    }

/* Subtotal + actions under a cart's lines */
:is(.saved-cart-details-page, .shared-cart-page) .pw-cart-subtotal {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0 4px;
}

    :is(.saved-cart-details-page, .shared-cart-page) .pw-cart-subtotal .label {
        color: var(--pw-muted);
        font-family: var(--pw-display);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    :is(.saved-cart-details-page, .shared-cart-page) .pw-cart-subtotal .value {
        margin: 0;
        color: var(--pw-text);
        font-family: var(--pw-display);
        font-size: 28px;
        font-weight: 800;
    }

:is(.saved-cart-details-page, .shared-cart-page) .pw-cart-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
}

/* product links inside the line tables: blue, underline on hover only */
:is(.html-account-page, .html-shared-cart-page) .pw-rows--grid td a:not(.pw-glyph-btn):not(.pw-configurator-link) {
    color: var(--pw-blue);
    text-decoration: none;
}

    :is(.html-account-page, .html-shared-cart-page) .pw-rows--grid td a:not(.pw-glyph-btn):not(.pw-configurator-link):hover {
        text-decoration: underline;
    }

@media (max-width: 767.98px) {
    .html-shared-cart-page .center-1 {
        padding: 16px 16px 48px;
    }

    .html-shared-cart-page .page-title h1 {
        font-size: 26px;
    }
}

/* ------------------------------------------------------------
   Footer pages: topics (Terms, Privacy, Shipping, Returns, FAQs,
   Sales Tax Exemption, FSAE...) and Contact us
   Topic bodies are pasted HTML from the old site, so this styles the
   container and the common elements and leaves authored markup alone.
   ------------------------------------------------------------ */
:is(.html-topic-page, .html-contact-page) .center-1 {
    width: 100%;
    max-width: 1328px;
    margin: 0 auto;
    padding: 28px 24px 64px;
    box-sizing: border-box;
}

:is(.html-topic-page, .html-contact-page) .page.topic-page,
.html-contact-page .page.contact-page {
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

:is(.html-topic-page, .html-contact-page) .page-title {
    margin: 0 0 24px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--pw-border);
    background: none;
    text-align: left;
}

    :is(.html-topic-page, .html-contact-page) .page-title h1 {
        margin: 0;
        font-family: var(--pw-display);
        font-weight: 800;
        font-size: 36px;
        line-height: 1.05;
        letter-spacing: -.01em;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

/* Readable measure for long policy text */
.html-topic-page .topic-page .page-body {
    max-width: 860px;
    color: var(--pw-text);
    font-size: 15px;
    line-height: 1.65;
}

    .html-topic-page .topic-page .page-body :is(p, li, span, div, td) {
        line-height: inherit;
    }

    .html-topic-page .topic-page .page-body p {
        margin: 0 0 12px;
    }

    /* the old theme justifies topic text, which opens rivers of space in short lines */
    .html-topic-page .topic-page .page-body :is(p, li, div) {
        text-align: left;
    }

    .html-topic-page .topic-page .page-body :is(h2, h3) {
        margin: 28px 0 10px;
        font-family: var(--pw-display);
        font-weight: 600;
        font-size: 20px;
        line-height: 1.15;
        text-transform: none;
        color: var(--pw-ink);
    }

    .html-topic-page .topic-page .page-body :is(h4, h5, h6) {
        margin: 20px 0 8px;
        font-size: 16px;
        font-weight: 700;
        color: var(--pw-text);
    }

    .html-topic-page .topic-page .page-body :is(ul, ol) {
        margin: 0 0 14px;
        padding-left: 22px;
    }

    .html-topic-page .topic-page .page-body li {
        margin: 0 0 4px;
    }

    .html-topic-page .topic-page .page-body a {
        color: var(--pw-blue);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .html-topic-page .topic-page .page-body img {
        max-width: 100%;
        height: auto;
    }

    /* Two topics (Shipping Policy, FAQs) carry a copy of the old OrderTech site footer inside their
       body, pasted along with the page. The real footer is right below; hide the duplicate. */
    .html-topic-page .topic-page #footerContainer {
        display: none !important;
    }

    /* Old-site wrappers set fixed widths and their own fonts */
    .html-topic-page .topic-page :is(#textOnlyPageBody, #bodyHTML, #bodyHTMLBox) {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: inherit !important;
        font-size: inherit !important;
    }

/* Contact us: details card beside the form */
.pw2-contact {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.pw2-contact__info {
    padding: 22px 24px;
    background: var(--pw-page);
    border-radius: var(--pw-radius);
    font-size: 15px;
    line-height: 1.6;
}

    .pw2-contact__info .topic-block,
    .pw2-contact__info .topic-block-body {
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .pw2-contact__info :is(p, div) {
        margin: 0 0 8px;
    }

    .pw2-contact__info :is(h2, h3, h4) {
        margin: 12px 0 6px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.35;
    }

    .pw2-contact__info a {
        color: var(--pw-blue);
    }

.pw2-contact__main > .container-sm {
    max-width: none;
    margin: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
}

.pw2-contact__main .fieldset,
.pw2-contact__main .form-fields {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.pw2-contact__main .inputs {
    margin: 0 0 14px;
    text-align: left;
}

    .pw2-contact__main .inputs :is(input, textarea) {
        width: 100%;
        max-width: none;
        border: 1px solid var(--pw-border-2);
        border-radius: 8px;
        background: #fff;
        font-size: 15px;
    }

        .pw2-contact__main .inputs :is(input, textarea):focus {
            outline: 0;
            border-color: var(--pw-blue);
            box-shadow: 0 0 0 3px rgba(232, 89, 12, .15);
        }

.pw2-contact__main .buttons {
    margin: 6px 0 0;
    padding: 0;
    text-align: left;
}

.pw2-contact__main .contact-us-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 32px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .pw2-contact__main .contact-us-button:hover {
        background: var(--pw-blue-700);
        color: #fff;
    }

.html-contact-page .result {
    padding: 18px 20px;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    background: #f0fdf4;
    color: var(--pw-green-700);
    font-size: 15px;
}

@media (max-width: 767.98px) {
    :is(.html-topic-page, .html-contact-page) .center-1 {
        padding: 16px 16px 48px;
    }

    :is(.html-topic-page, .html-contact-page) .page-title h1 {
        font-size: 28px;
    }

    .pw2-contact {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* ------------------------------------------------------------
   Header same-day countdown (Widgets.ProwireTheme plugin)
   The pill takes the place (and the amber) of the old lightning bolt.
   Outside the countdown window (after 12:50 PM, weekends, holidays) it shows text only.
   ------------------------------------------------------------ */
.pw2-ship:has(.pw2-cutoff) .pw2-ship__static {
    display: none;
}

.pw2-cutoff {
    display: contents;
}

.pw2-cutoff__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 78px;
    height: 30px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #ffc107;
    color: #1a1a1a;
    font-family: var(--pw-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* no timer outside the countdown window: just the "Ships same day / before 1PM (MST)" text */
.pw2-cutoff:not(.is-counting) .pw2-cutoff__pill {
    display: none;
}

/* ------------------------------------------------------------
   Cart: Saved Carts guest prompt (Prowire.SavedCarts plugin)
   ------------------------------------------------------------ */
/* The old theme's .button-2 makes these block boxes with a fixed height and a 17px line box, so the
   label sat at the top of the pill. Centre it and give both the same height. */
.pw-save-cart--guest a.button-2 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1 !important;
    white-space: nowrap;
    vertical-align: middle;
}

/* Signed-in version: Save this cart / Share this cart. The plugin colours them green and amber to
   stay clear of the blue commerce buttons; here they are outlined pills, which already read as
   secondary next to the solid blue Checkout, with icons so the two are told apart at a glance. */
.pw-save-cart:not(.pw-save-cart--guest) {
    margin: 16px 0;
    padding: 14px 16px;
    gap: 10px 12px;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
}

.pw-save-cart--guest {
    padding: 14px 16px;
    border: 0;
    border-radius: var(--pw-radius);
    background: var(--pw-tint);
}

.pw-save-cart .pw-btn-save-cart-open,
.pw-save-cart .pw-btn-share-cart-open,
.pw-save-cart .pw-btn-save-cart-share,
.pw-cart-actions .pw-btn-share,
.pw-save-cart--guest a.button-2.pw-btn-guest-register {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box;
    border: 1px solid var(--pw-border-2) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--pw-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
}

    .pw-save-cart .pw-btn-save-cart-open:hover,
    .pw-save-cart .pw-btn-share-cart-open:hover,
    .pw-save-cart .pw-btn-save-cart-share:hover,
    .pw-cart-actions .pw-btn-share:hover,
    .pw-save-cart--guest a.button-2.pw-btn-guest-register:hover {
        border-color: var(--pw-blue) !important;
        color: var(--pw-blue) !important;
    }

    /* bookmark glyph for Save; Share already carries its own svg */
    .pw-save-cart .pw-btn-save-cart-open::before {
        content: "";
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        background: currentColor;
        -webkit-mask: 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='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: 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='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") no-repeat center / contain;
    }

/* primary actions: Save (in the form) and guest Sign in, as the theme's blue pill */
.pw-save-cart .pw-btn-save-cart-confirm,
.pw-save-cart--guest a.button-2.pw-btn-guest-signin {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 22px !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pw-blue) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    cursor: pointer;
}

    .pw-save-cart .pw-btn-save-cart-confirm:hover,
    .pw-save-cart--guest a.button-2.pw-btn-guest-signin:hover {
        background: var(--pw-blue-700) !important;
        color: #fff !important;
    }

/* Cancel reads as a quiet text action, not a third button */
.pw-save-cart .pw-btn-save-cart-cancel {
    height: 40px !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: none !important;
    color: var(--pw-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: underline;
    cursor: pointer;
}

.pw-save-cart .pw-save-cart-hint {
    color: var(--pw-muted);
    font-size: 13px;
    line-height: 1.4;
}

.pw-save-cart .pw-save-cart-form:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1 1 100%;
    padding-top: 12px;
    border-top: 1px solid var(--pw-border);
}

    .pw-save-cart .pw-save-cart-form input[type="text"] {
        flex: 1 1 200px;
        height: 40px;
        padding: 0 12px;
        border: 1px solid var(--pw-border-2);
        border-radius: 8px;
        background: #fff;
        font-size: 14px;
    }

        .pw-save-cart .pw-save-cart-form input[type="text"]:focus {
            outline: 0;
            border-color: var(--pw-blue);
            box-shadow: 0 0 0 3px rgba(232, 89, 12, .15);
        }

/* The plugin clones the prompt above the items so long carts show it without scrolling. On a short
   cart that just sandwiches one or two lines between two identical banners, so the copy only shows
   from four lines up. */
.cart-info:not(:has(> ul > li:nth-child(4))) > .pw-save-cart--top {
    display: none;
}

/* ------------------------------------------------------------
   Header "EN / USD" preferences panel (Components/CurrencySelector)
   Prices convert up to checkout; checkout is always USD.
   ------------------------------------------------------------ */
.pw2-currency {
    position: relative;
    flex-shrink: 0;
}

.pw2-currency__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    text-align: left;
}

    .pw2-currency__trigger:hover,
    .pw2-currency.is-open .pw2-currency__trigger {
        border-color: rgba(255, 255, 255, .55);
    }

    .pw2-currency__trigger .pw2-hlink__text small {
        font-size: 12px;
        opacity: .9;
    }

    .pw2-currency__trigger .pw2-hlink__text strong {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 15px;
    }

.pw2-currency__flag {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 17px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.pw2-currency__menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 1100;
    width: 340px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    color: var(--pw-text);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    box-shadow: var(--pw-shadow-lg);
    text-align: left;
}

    /* caret under the trigger */
    .pw2-currency__menu::before {
        content: "";
        position: absolute;
        top: -7px;
        right: 28px;
        width: 12px;
        height: 12px;
        background: #fff;
        border-left: 1px solid var(--pw-border);
        border-top: 1px solid var(--pw-border);
        transform: rotate(45deg);
    }

.pw2-currency.is-open .pw2-currency__menu {
    display: block;
}

.pw2-currency__intro {
    margin: 0 0 14px;
    color: var(--pw-muted);
    font-size: 13.5px;
    line-height: 1.45;
}

/* bordered box: small label over the select, like the reference */
.pw2-currency__field {
    display: block;
    position: relative;
    margin: 0 0 12px;
    padding: 8px 14px 6px;
    border: 1px solid var(--pw-border-2);
    border-radius: 10px;
    cursor: pointer;
}

    .pw2-currency__field:focus-within {
        border-color: var(--pw-blue);
        box-shadow: 0 0 0 3px rgba(232, 89, 12, .15);
    }

.pw2-currency__label {
    display: block;
    color: var(--pw-muted);
    font-size: 12.5px;
}

.pw2-currency__field select {
    display: block;
    width: 100%;
    height: 28px;
    padding: 0 24px 0 0;
    border: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212529' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px;
    color: var(--pw-text);
    font-size: 15px;
    appearance: none;
    -webkit-appearance: none;
    outline: 0;
    cursor: pointer;
}

/* currency listbox with flags (drives the hidden select) */
.pw2-currency__field select[hidden] {
    display: none;
}

.pw2-curpick {
    position: relative;
}

.pw2-curpick__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pw-text);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    outline: 0;
}

.pw2-curpick__value,
.pw2-curpick__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .pw2-curpick__value > span,
    .pw2-curpick__opt > span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pw2-curpick__value b,
    .pw2-curpick__opt b {
        font-weight: 600;
    }

.pw2-curpick__list {
    display: none;
    position: absolute;
    left: -15px;
    right: -15px;
    top: calc(100% + 8px);
    z-index: 2;
    max-height: 300px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: 10px;
    box-shadow: var(--pw-shadow-lg);
}

.pw2-curpick.is-open .pw2-curpick__list {
    display: block;
}

.pw2-curpick__opt {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14.5px;
    cursor: pointer;
    outline: 0;
}

    .pw2-curpick__opt:hover,
    .pw2-curpick__opt:focus {
        background: var(--pw-page);
    }

    .pw2-curpick__opt[aria-selected="true"] {
        background: rgba(232, 89, 12, .08);
        color: var(--pw-blue);
    }

.pw2-currency__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin: 16px 0 0;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

    .pw2-currency__submit:hover {
        background: var(--pw-blue-700);
    }

.pw2-currency__note {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff8e6;
    color: #6b4a00;
    font-size: 12.5px;
    line-height: 1.45;
}

.pw2-currency__updated {
    margin: 8px 2px 0;
    color: var(--pw-muted);
    font-size: 12px;
}

/* "Charged in USD" notes on the cart (non-USD prices) and at checkout */
.pw2-usd-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff8e6;
    color: #6b4a00;
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    .pw2-currency__trigger .pw2-hlink__text {
        display: none;
    }

    .pw2-currency__menu {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 64px;
        width: auto;
    }

        .pw2-currency__menu::before {
            display: none;
        }
}

/* ------------------------------------------------------------
   Homepage "Most popular categories" rail heading + "All categories" panel
   ------------------------------------------------------------ */
.pw2-hero__rail-title {
    margin: 0;
    padding: 14px 16px 8px;
    font-family: var(--pw-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw2-allcats {
    width: min(1100px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 0;
    border-radius: var(--pw-radius);
    box-shadow: var(--pw-shadow-lg);
    color: var(--pw-text);
    background: #fff;
}

    .pw2-allcats::backdrop {
        background: rgba(16, 24, 40, .45);
    }

.pw2-allcats__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--pw-border);
    background: #fff;
}

    .pw2-allcats__head h2 {
        margin: 0;
        font-family: var(--pw-display);
        font-size: 26px;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

.pw2-allcats__close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--pw-page);
    color: var(--pw-text);
    cursor: pointer;
}

    .pw2-allcats__close:hover {
        background: var(--pw-border);
    }

.pw2-allcats__body {
    columns: 4 220px;
    column-gap: 28px;
    padding: 18px 24px 28px;
}

.pw2-allcats__group {
    break-inside: avoid;
    margin: 0 0 20px;
}

.pw2-allcats__top {
    display: block;
    margin: 0 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pw-border);
    font-family: var(--pw-display);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pw-ink);
    text-decoration: none;
}

.pw2-allcats ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pw2-allcats li a {
    display: block;
    padding: 3px 0;
    color: var(--pw-text);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}

    .pw2-allcats li a:hover,
    .pw2-allcats__top:hover {
        color: var(--pw-blue);
    }

.pw2-allcats__sub {
    margin: 0 0 4px 12px !important;
    padding-left: 10px !important;
    border-left: 1px solid var(--pw-border);
}

    .pw2-allcats__sub a {
        font-size: 13px !important;
        color: var(--pw-muted) !important;
    }

/* Category descriptions: same voice as product descriptions (the cleanup gives them the same
   structure: h2 headings, h6 labels, medium-weight emphasis) */
.category-description h1,
.category-description h2,
.category-description h3 {
    margin: 18px 0 8px;
    font-family: var(--pw-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    color: var(--pw-ink);
}

.category-description h4,
.category-description h5 {
    margin: 14px 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pw-text);
}

.category-description h6 {
    margin: 18px 0 8px;
    font-family: var(--pw-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.category-description strong,
.category-description b {
    font-weight: 600;
}

.category-description a {
    color: var(--pw-blue);
}

@media (max-width: 767.98px) {
    .pw2-allcats {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .pw2-allcats__body {
        columns: 1;
    }
}

/* ------------------------------------------------------------
   Special-order items (no price): "Price on request" + Contact us for pricing
   ------------------------------------------------------------ */
.pw2-special-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 10px 0 6px;
}

.pw2-special-price__label {
    font-family: var(--pw-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw2-special-price__value {
    font-family: var(--pw-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--pw-ink);
}

.pw2-special-order {
    margin: 4px 0 14px;
    padding: 16px;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    background: var(--pw-page);
}

.pw2-special-order__title {
    margin-bottom: 4px;
    font-family: var(--pw-display);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.pw2-special-order p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--pw-text-2);
}

.pw2-special-order__btn {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

    .pw2-special-order__btn:hover {
        background: var(--pw-blue-700);
    }

.pw2-card__price--request strong {
    font-size: 17px;
}

.pw2-card .pw2-card__request {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--pw-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--pw-blue);
    font-family: var(--pw-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

    .pw2-card .pw2-card__request:hover {
        background: var(--pw-blue);
        color: #fff;
    }

.pw2-inquiry__lead {
    margin: 0 0 14px;
    color: var(--pw-text-2);
}

/* ------------------------------------------------------------
   Header: customer number in the account trigger, cart number beside the cart
   ------------------------------------------------------------ */
.pw2-account__greet-custno:empty {
    display: none;
}

.pw2-account__greet:has(.pw2-account__greet-custno:not(:empty)) .pw2-account__greet-text {
    display: none;
}

/* the count badge stays on the icon when the cart number sits to its right */
.pw2-cart .cart-qty {
    left: 21px;
    right: auto;
}

.pw2-cartno {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    line-height: 1.15;
    color: #fff;
    text-align: left;
    white-space: nowrap;
}

    .pw2-cartno[hidden] {
        display: none;
    }

    .pw2-cartno small {
        font-size: 12px;
        opacity: .9;
    }

    .pw2-cartno strong {
        font-size: 15px;
        font-weight: 700;
    }

.pw2-cart .ico-cart > svg {
    flex-shrink: 0;
}

/* phones: no room beside the icon, so the number sits in small type just under it */
@media (max-width: 767px) {
    .pw2-cartno {
        position: absolute;
        top: calc(100% - 2px);
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
    }

        .pw2-cartno small {
            display: none;
        }

        .pw2-cartno strong {
            font-size: 10.5px;
            font-weight: 600;
            opacity: .95;
        }
}

/* ------------------------------------------------------------
   Sign in and registration (pw2-auth)
   ------------------------------------------------------------ */
.pw2-auth {
    padding-top: 36px;
    padding-bottom: 56px;
}

.pw2-auth__card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    box-shadow: var(--pw-shadow-lg);
}

.pw2-auth__main {
    padding: 40px 44px;
}

.pw2-auth__title,
.pw2-auth .page-title h1 {
    margin: 0 0 6px;
    font-family: var(--pw-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.pw2-auth__lead {
    margin: 0 0 24px;
    color: var(--pw-muted);
    font-size: 15px;
}

    .pw2-auth__lead a {
        color: var(--pw-blue);
        font-weight: 600;
    }

.pw2-auth__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pw2-auth__field label,
.pw2-auth__label-row label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pw-text);
}

.pw2-auth__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pw2-auth__forgot {
    font-size: 13.5px;
    color: var(--pw-blue);
}

.pw2-auth .form-control,
.pw2-auth--register .registration-page input[type=text],
.pw2-auth--register .registration-page input[type=email],
.pw2-auth--register .registration-page input[type=tel],
.pw2-auth--register .registration-page input[type=password],
.pw2-auth--register .registration-page select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--pw-border-2);
    border-radius: 10px;
    background-color: #fff;
    font-size: 15px;
    color: var(--pw-text);
    box-shadow: none;
}

    .pw2-auth .form-control:focus,
    .pw2-auth--register .registration-page input:focus,
    .pw2-auth--register .registration-page select:focus {
        border-color: var(--pw-blue);
        box-shadow: 0 0 0 3px rgba(232, 89, 12, .15);
        outline: 0;
    }

.pw2-auth__password {
    position: relative;
}

    .pw2-auth__password .form-control {
        padding-right: 48px;
    }

    .pw2-auth__password .password-eye {
        right: 12px;
    }

.pw2-auth__remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

    .pw2-auth__remember input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--pw-blue);
    }

    .pw2-auth__remember label {
        margin: 0;
    }

.pw2-auth__submit,
.pw2-auth--register .register-next-step-button {
    height: 50px;
    margin-top: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

    .pw2-auth__submit:hover,
    .pw2-auth--register .register-next-step-button:hover {
        background: var(--pw-blue-700);
    }

.pw2-auth .message-error {
    padding: 10px 14px;
    border-radius: 10px;
    background: #fdecec;
    color: #b42318;
    font-size: 14px;
}

    .pw2-auth .message-error:empty,
    .pw2-auth .validation-summary-valid {
        display: none;
    }

.pw2-auth .field-validation-error {
    display: block;
    margin-top: 4px;
    color: #b42318;
    font-size: 13px;
}

/* the dark panel: new-customer pitch, or guest checkout */
.pw2-auth__side {
    display: flex;
    flex-direction: column;
    padding: 40px 36px;
    background: var(--pw-navy);
    color: #fff;
}

.pw2-auth__side-title {
    margin: 0 0 6px;
    font-family: var(--pw-display);
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
}

.pw2-auth__side-text,
.pw2-auth__side-text p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
}

.pw2-auth__perks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 4px 0 24px;
    padding: 0;
    list-style: none;
}

    .pw2-auth__perks li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .pw2-auth__perks svg {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        padding: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        color: #fff;
    }

    .pw2-auth__perks span {
        font-size: 14px;
        line-height: 1.4;
        color: rgba(255, 255, 255, .82);
    }

    .pw2-auth__perks strong {
        display: block;
        font-size: 15px;
        color: #fff;
    }

.pw2-auth__side-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.pw2-auth__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    font-family: var(--pw-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.pw2-auth__btn--light {
    border: 0;
    background: #fff;
    color: var(--pw-navy);
}

    .pw2-auth__btn--light:hover {
        background: var(--pw-page);
        color: var(--pw-navy);
    }

.pw2-auth__btn--ghost {
    border: 2px solid rgba(255, 255, 255, .7);
    background: transparent;
    color: #fff;
}

    .pw2-auth__btn--ghost:hover {
        border-color: #fff;
        color: #fff;
    }

/* registration: stock nop fieldsets restyled as cards, labels above the inputs */
.pw2-auth--register .page-title {
    max-width: 1100px;
    margin: 0 auto 20px;
    text-align: left;
}

.pw2-register {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.pw2-register__side {
    position: sticky;
    top: 20px;
    border-radius: var(--pw-radius);
}

.pw2-auth--register .fieldset {
    margin: 0 0 16px;
    padding: 22px 24px 8px;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    background: #fff;
}

    .pw2-auth--register .fieldset .title {
        margin: 0 0 16px;
        padding: 0;
        border: 0;
        font-family: var(--pw-display);
        font-size: 19px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

.pw2-auth--register .form-fields {
    display: grid;
    width: auto;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.pw2-auth--register .inputs {
    position: relative;
    margin: 0 0 16px;
    text-align: left;
    white-space: normal;
}

    .pw2-auth--register .inputs label {
        display: block;
        width: auto;
        margin: 0 0 6px;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        color: var(--pw-text);
    }

    .pw2-auth--register .inputs .required {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        color: #d92d20;
    }

    /* checkboxes, consent lines and custom attributes run the full width */
    .pw2-auth--register .inputs.reversed,
    .pw2-auth--register .inputs.accept-consent,
    .pw2-auth--register .inputs:has(> input[type=checkbox]),
    .pw2-auth--register .inputs:has(.attributes) {
        grid-column: 1 / -1;
    }

    .pw2-auth--register .inputs:has(> input[type=checkbox]) {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .pw2-auth--register .inputs:has(> input[type=checkbox]) label {
            order: 2;
            margin: 0;
            font-weight: 400;
        }

    .pw2-auth--register .inputs .read {
        order: 3;
        color: var(--pw-blue);
        font-size: 14px;
        cursor: pointer;
    }

    .pw2-auth--register .inputs input[type=checkbox] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--pw-blue);
    }

.pw2-auth--register .buttons {
    margin: 8px 0 0;
    padding: 0;
    text-align: left;
}

.pw2-auth--register .register-next-step-button {
    min-width: 260px;
    padding: 0 32px;
}

@media (max-width: 991px) {
    .pw2-register {
        grid-template-columns: minmax(0, 1fr);
    }

    /* on one column the pitch would sit under the Register button; the sign-in page carries it */
    .pw2-register__side {
        display: none;
    }
}

@media (max-width: 767px) {
    .pw2-auth {
        padding-top: 20px;
        padding-bottom: 32px;
    }

    .pw2-auth__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .pw2-auth__main,
    .pw2-auth__side {
        padding: 26px 20px;
    }

    .pw2-auth__title,
    .pw2-auth .page-title h1 {
        font-size: 28px;
    }

    .pw2-auth--register .form-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .pw2-auth--register .fieldset {
        padding: 18px 16px 4px;
    }

    .pw2-auth--register .register-next-step-button {
        width: 100%;
        min-width: 0;
    }
}

/* ------------------------------------------------------------
   Search autocomplete dropdown (pw2-ac)
   ------------------------------------------------------------ */
.pw2-search .ui-autocomplete {
    padding: 6px;
    border: 1px solid var(--pw-border);
    list-style: none;
}

    .pw2-search .ui-autocomplete .see-all-results-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 4px;
        padding: 8px 10px 10px;
        border-bottom: 1px solid var(--pw-border);
    }

.pw2-ac__head {
    font-family: var(--pw-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw2-search .ui-autocomplete .see-all-results-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pw-blue);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

    .pw2-search .ui-autocomplete .see-all-results-link:hover {
        text-decoration: underline;
    }

.pw2-search .ui-autocomplete .pw2-ac__item {
    margin: 0;
    padding: 0;
    border: 0;
}

    .pw2-search .ui-autocomplete .pw2-ac__item > a {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--pw-text);
        text-decoration: none;
        cursor: pointer;
    }

        .pw2-search .ui-autocomplete .pw2-ac__item > a:hover,
        .pw2-search .ui-autocomplete .pw2-ac__item > a.ui-state-active {
            margin: 0;
            border: 0;
            background: var(--pw-page);
            color: var(--pw-text);
        }

.pw2-ac__img {
    display: grid;
    place-items: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--pw-page);
}

    .pw2-ac__img img {
        width: 100% !important;
        height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.pw2-ac__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.pw2-ac__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

    .pw2-ac__name mark {
        padding: 0;
        background: none;
        color: inherit;
        font-weight: 700;
    }

.pw2-ac__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pw2-ac__sku {
    font-family: var(--pw-mono);
    font-size: 12.5px;
    color: var(--pw-muted);
}

.pw2-ac__price {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-ink);
    white-space: nowrap;
}

.pw2-ac__price--na {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pw-muted);
}

/* ------------------------------------------------------------
   Homepage on phones: category chips under the slider, swipeable rows
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    /* the rail comes back as a row of chips below the slider */
    .pw2-hero__rail {
        display: block;
        order: 2;
        padding: 0;
        background: none;
    }

    .pw2-hero__slider {
        order: 1;
    }

    .pw2-hero__rail-title {
        padding: 0 0 8px;
    }

    .pw2-hero__rail ul {
        display: flex;
        gap: 8px;
        margin: 0;
        padding: 0 0 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

        .pw2-hero__rail ul::-webkit-scrollbar {
            display: none;
        }

    .pw2-hero__rail li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

        .pw2-hero__rail li a {
            min-height: 38px;
            padding: 0 14px;
            border: 1px solid var(--pw-border-2);
            border-radius: 999px;
            background: #fff;
            font-size: 14px;
            white-space: nowrap;
        }

            .pw2-hero__rail li a svg {
                display: none;
            }

    .pw2-hero__all {
        margin: 10px 0 0;
        padding: 0;
        border: 0;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .pw2-hero {
        gap: 14px;
    }

    /* swipe instead: the arrows sat on top of the banner image */
    .pw2-hero__slider .swiper-button-next,
    .pw2-hero__slider .swiper-button-prev {
        display: none;
    }

    .pw2-home__head {
        align-items: baseline;
    }

        .pw2-home__head > span {
            display: none;
        }

    /* Build it for me: one swipeable row of compact cards */
    .pw2-tools,
    .pw2-tools--3 {
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

        .pw2-tools::-webkit-scrollbar {
            display: none;
        }

    .pw2-tool {
        flex: 0 0 78%;
        flex-direction: row;
        scroll-snap-align: start;
    }

    .pw2-tool__img {
        flex: 0 0 92px;
        min-height: 92px;
    }

    .pw2-tool__body {
        padding: 12px 14px;
    }

        .pw2-tool__body strong {
            font-size: 17px;
        }

        .pw2-tool__body small {
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

    /* product rows (Superseal): swipe sideways instead of a two-column wall */
    .pw2-home .home-page-product-grid .item-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px;
        margin: 0 -16px !important;
        padding: 0 16px 6px;
        overflow-x: auto !important; /* beats the grid's overflow: visible !important on .item-grid.row */
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

        .pw2-home .home-page-product-grid .item-grid::-webkit-scrollbar {
            display: none;
        }

        .pw2-home .home-page-product-grid .item-grid > .col {
            flex: 0 0 62% !important;
            width: 62% !important;
            max-width: none !important;
            padding: 0 !important;
            scroll-snap-align: start;
        }

    /* rubber boots: three small squares across */
    .pw2-tiles--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

        .pw2-tiles--3 .pw2-tile__name {
            font-size: 14px;
        }
}

/* the old theme sizes every span in a row to 50% and pads links with !important; undo that here */
.pw2-search .ui-autocomplete .pw2-ac__item > a {
    padding: 8px 10px !important;
    border-bottom: 0 !important;
    border-radius: 10px !important;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3 !important;
}

    .pw2-search .ui-autocomplete .pw2-ac__item > a:hover,
    .pw2-search .ui-autocomplete .pw2-ac__item > a:focus,
    .pw2-search .ui-autocomplete .pw2-ac__item > a.ui-state-focus,
    .pw2-search .ui-autocomplete .pw2-ac__item > a.ui-state-active {
        background: var(--pw-page) !important;
        font-weight: 500;
    }

.pw2-search .ui-autocomplete a span.pw2-ac__img {
    flex: 0 0 56px;
    width: 56px;
}

.pw2-search .ui-autocomplete a span.pw2-ac__body {
    flex: 1 1 auto;
    width: auto;
}

.pw2-search .ui-autocomplete a .pw2-ac__body span {
    flex: 0 1 auto;
    width: auto;
}

.pw2-search .ui-autocomplete img {
    display: block;
    min-width: 0;
    margin: 0;
}

/* wider than the search field on desktop, so names don't wrap into three lines */
@media (min-width: 992px) {
    .pw2-search .ui-autocomplete {
        width: max(100%, 540px) !important;
    }
}

/* ------------------------------------------------------------
   Mobile menu panel (burger): steel head, menu rows, account links
   ------------------------------------------------------------ */
.mobile-menu-panel {
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: 88%;
    background: #fff;
    box-shadow: 8px 0 32px rgba(16, 24, 40, .25);
}

.mobile-menu-overlay {
    background: rgba(16, 24, 40, .5);
}

@media (min-width: 992px) {
    .mobile-menu-panel,
    .mobile-menu-overlay {
        display: none;
    }
}

.mobile-menu-panel .pw2-mnav__head {
    display: block;
    padding: 18px 18px 20px;
    border: 0;
    background: var(--pw-navy);
    color: #fff;
}

.pw2-mnav__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pw2-mnav__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.pw2-mnav__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
    text-align: left;
}

    .pw2-mnav__who strong {
        font-family: var(--pw-display);
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .pw2-mnav__who small,
    .mobile-menu-panel .pw2-mnav__who .mobile-cust-ref {
        margin: 0;
        font-size: 13px;
        color: rgba(255, 255, 255, .8);
        white-space: normal;
    }

        .mobile-menu-panel .pw2-mnav__who .mobile-cust-ref:empty {
            display: none;
        }

.mobile-menu-panel .pw2-mnav__head .mobile-menu-close {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-self: flex-start;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.pw2-mnav__auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.mobile-menu-panel .pw2-mnav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    margin-top: 16px;
    border-radius: 999px;
    font-family: var(--pw-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.pw2-mnav__auth .pw2-mnav__btn {
    margin-top: 0;
}

.mobile-menu-panel .pw2-mnav__btn--light {
    background: #fff;
    color: var(--pw-navy);
}

.mobile-menu-panel .pw2-mnav__btn--ghost {
    border: 2px solid rgba(255, 255, 255, .7);
    color: #fff;
}

/* menu rows */
.mobile-menu-panel .mobile-menu-body {
    padding: 6px 0;
}

.mobile-menu-panel .mobile-menu-item {
    margin: 0;
    border-bottom: 1px solid var(--pw-border);
}

.mobile-menu-panel .mobile-menu-link-wrap {
    min-height: 52px;
    padding: 0 8px 0 18px;
}

.mobile-menu-panel .mobile-menu-link {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-height: 52px;
    font-size: 16px;
    font-weight: 600;
    color: var(--pw-text);
}

.mobile-menu-panel .mobile-submenu-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    color: var(--pw-muted);
}

    .mobile-menu-panel .mobile-submenu-toggle::before {
        content: "";
        width: 9px;
        height: 9px;
        margin-top: -4px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease, margin .2s ease;
    }

.mobile-menu-panel .mobile-menu-item.open > .mobile-menu-link-wrap .mobile-submenu-toggle::before {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.mobile-menu-panel .mobile-menu-item.open > .mobile-menu-link-wrap .mobile-menu-link {
    color: var(--pw-blue);
}

.mobile-menu-panel .mobile-submenu {
    padding: 4px 0 8px;
    background: var(--pw-page);
}

    .mobile-menu-panel .mobile-submenu .mobile-menu-item {
        border: 0;
    }

    .mobile-menu-panel .mobile-submenu .mobile-menu-link-wrap {
        min-height: 42px;
        padding-left: 30px;
    }

    .mobile-menu-panel .mobile-submenu .mobile-menu-link {
        min-height: 42px;
        font-size: 15px;
        font-weight: 500;
        color: var(--pw-text-2);
    }

    .mobile-menu-panel .mobile-submenu .mobile-submenu .mobile-menu-link-wrap {
        padding-left: 44px;
    }

/* footer: account links (signed in) or Contact us (guest; sign-in and register are in the head) */
.mobile-menu-panel .mobile-menu-footer {
    margin-top: auto;
    padding: 14px 18px 28px;
    border-top: 0;
    background: #fff;
}

.mobile-menu-panel .header-links > ul {
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
}

.mobile-menu-panel .header-links > ul > li:has(> .ico-register),
.mobile-menu-panel .header-links > ul > li:has(> .ico-login) {
    display: none;
}

.mobile-menu-panel .mobile-menu-footer .header-links > ul > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    color: var(--pw-text) !important;
}

    .mobile-menu-panel .mobile-menu-footer .header-links > ul > li > a svg {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        color: var(--pw-muted);
    }

.mobile-menu-panel .mobile-menu-footer .header-links > ul > .logout-item {
    margin-top: 6px;
    border-top: 1px solid var(--pw-border);
}

    .mobile-menu-panel .mobile-menu-footer .header-links > ul > .logout-item > a,
    .mobile-menu-panel .mobile-menu-footer .header-links > ul > .logout-item > a svg {
        color: #b3261e !important;
    }

.mobile-menu-panel .networks {
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--pw-border);
}

    .mobile-menu-panel .networks ul {
        gap: 10px;
        margin: 0;
        padding: 0;
    }

        .mobile-menu-panel .networks ul li a {
            display: grid !important;
            place-items: center;
            width: 38px !important;
            height: 38px;
            margin: 0;
            border-radius: 50%;
            background: var(--pw-page);
        }

            .mobile-menu-panel .networks ul li a svg {
                width: 18px;
                height: 18px;
            }

/* ------------------------------------------------------------
   Homepage intro under the slider (ProWire Theme plugin, pw2_home_intro)
   ------------------------------------------------------------ */
.pw2-intro {
    margin: 28px 0 0;
    padding: 22px 26px;
    border-left: 4px solid var(--pw-blue);
    border-radius: var(--pw-radius);
    background: var(--pw-page);
}

    .pw2-intro p {
        max-width: 1100px;
        margin: 0;
        font-size: 16px;
        line-height: 1.65;
        color: var(--pw-text-2);
    }

        .pw2-intro p + p {
            margin-top: 12px;
        }

    .pw2-intro strong {
        font-weight: 700;
        color: var(--pw-ink);
    }

/* the page's H1, kept quiet: a small eyebrow line over the paragraph, like "Most popular categories".
   Still real, visible text, so it counts; the bold lead-in below carries the visual weight. */
.pw2-intro__title {
    margin: 0 0 8px;
    font-family: var(--pw-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pw-muted);
}

.pw2-intro__body a {
    color: var(--pw-blue);
    font-weight: 600;
    text-decoration: none;
}

    .pw2-intro__body a:hover {
        text-decoration: underline;
    }

.pw2-intro__body ul,
.pw2-intro__body ol {
    margin: 8px 0 0;
    padding-left: 20px;
    color: var(--pw-text-2);
}

@media (max-width: 767px) {
    .pw2-intro {
        margin-top: 20px;
        padding: 16px 16px 16px 18px;
    }

        .pw2-intro p {
            font-size: 15px;
            line-height: 1.6;
        }

        .pw2-intro__title {
            font-size: 13px;
        }
}

/* ------------------------------------------------------------
   Price Breaks table (prowireusa layout, v2/v3 styling, active-row highlight); product pages and,
   via .pw2-breaks-host, the striped-wire and Deutsch kit configurators
   ------------------------------------------------------------ */
:is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks__title {
    margin: 18px 0 8px;
    padding: 0;
    border: 0;
}

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks__title h3 {
        margin: 0;
        padding: 0;
        border: 0;
        font-family: var(--pw-display);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

:is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks {
    margin: 0 0 18px;
}

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks .title {
        display: none;
    }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks .table-wrapper {
        overflow: hidden;
        border: 1px solid var(--pw-border);
        border-radius: 10px;
    }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks table {
        width: 100%;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14.5px;
    }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks thead th {
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid var(--pw-border);
        background: var(--pw-page);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-align: center;
        text-transform: uppercase;
        color: var(--pw-muted);
    }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody td {
        padding: 9px 12px;
        border: 0;
        border-top: 1px solid var(--pw-border);
        background: #fff !important;
        box-shadow: none !important;
        font-family: var(--pw-mono);
        text-align: center;
        color: var(--pw-text);
        transition: background .15s ease;
    }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr:first-child td {
        border-top: 0;
    }

    /* the break the entered quantity falls in, like the old tier pills */
    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-active td {
        background: var(--pw-tint) !important;
        color: var(--pw-blue-700);
    }

        :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-active td:first-child {
            box-shadow: inset 3px 0 0 var(--pw-blue) !important;
        }

    /* packaging label ("Bagged" / "Spooled") on packaged products: a word, not a number */
    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody td.item-package {
        font-family: var(--pw-display);
        font-weight: 400;
        color: var(--pw-muted);
    }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-active td.item-package {
        color: var(--pw-muted);
    }

    /* the full factory spool row: a green tag in the quantity cell and a light green row (the entered
       quantity's blue highlight still wins when it is the same row) */
    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-factory-spool td {
        background: #e3f4ea !important;
        color: #146c43;
    }

        :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-factory-spool td:first-child {
            box-shadow: inset 3px 0 0 var(--pw-green) !important;
        }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-factory-spool td.item-package .pw2-breaks__spool {
        margin-left: 0;
    }

    /* no PKG column: the tag floats on the line between Quantity and Price so every number stays in line
       with the rows above; where the table is narrower than 420px (phones), it sits under the quantity */
    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-factory-spool td.item-quantity {
        position: relative;
    }

    /* the table width decides (not the window): the layout changes its width at several breakpoints */
    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks .table-wrapper {
        container: pw2breaks / inline-size;
    }

    @container pw2breaks (min-width: 420px) {
        :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-factory-spool td.item-quantity > .pw2-breaks__spool {
            position: absolute;
            top: 50%;
            left: 100%;
            z-index: 1;
            margin: 0;
            padding: 1px 7px;
            font-size: 10.5px;
            transform: translate(-50%, -50%);
        }
    }

    @container pw2breaks (max-width: 419.98px) {
        :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-factory-spool td.item-quantity > .pw2-breaks__spool {
            display: table;
            margin: 4px auto 0;
        }
    }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks tbody tr.is-factory-spool.is-active td {
        background: var(--pw-tint) !important;
    }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks .pw2-breaks__spool {
        display: inline-block;
        margin-left: 8px;
        padding: 2px 8px;
        border: 1px solid #b7e0c6;
        border-radius: 999px;
        background: #e6f5ec;
        color: var(--pw-green);
        font-family: var(--pw-display);
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: .03em;
        text-transform: uppercase;
        white-space: nowrap;
        vertical-align: middle;
    }

    :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks .pw2-breaks__spool-note {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 8px 2px 0;
        font-family: var(--pw-mono);
        font-size: 14px;
        color: var(--pw-text);
    }

        :is(.pw2-pdp, .pw2-breaks-host) .pw2-breaks .pw2-breaks__spool-note .pw2-breaks__spool {
            margin-left: 0;
        }

/* ------------------------------------------------------------
   My account navigation on phones: one collapsible card instead of sideways pills
   ------------------------------------------------------------ */
.pw2-acctnav__toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .html-account-page .block-account-navigation {
        overflow: hidden;
        border: 1px solid var(--pw-border);
        border-radius: var(--pw-radius);
        background: #fff;
    }

    .pw2-acctnav__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        border: 0;
        background: #fff;
        color: var(--pw-text);
        text-align: left;
        cursor: pointer;
    }

    .pw2-acctnav__label {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

        .pw2-acctnav__label small {
            font-family: var(--pw-display);
            font-size: 12.5px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--pw-muted);
        }

        .pw2-acctnav__label strong {
            font-size: 17px;
            font-weight: 700;
            color: var(--pw-ink);
        }

    .pw2-acctnav__chev {
        flex: 0 0 auto;
        color: var(--pw-muted);
        transition: transform .2s ease;
    }

    .block-account-navigation.is-open .pw2-acctnav__chev {
        transform: rotate(180deg);
    }

    /* the list: hidden until opened, then full-width rows */
    .html-account-page .block-account-navigation .listbox {
        display: none !important;
        margin: 0;
        padding: 0;
        overflow: visible;
        border-top: 1px solid var(--pw-border);
    }

    .html-account-page .block-account-navigation.is-open .listbox {
        display: block !important;
    }

    .html-account-page .block-account-navigation .list {
        flex-direction: column;
        gap: 0;
        width: auto;
        margin: 0;
        padding: 4px 0;
    }

        .html-account-page .block-account-navigation .list li a {
            position: relative;
            gap: 12px;
            min-height: 48px;
            padding: 0 40px 0 16px;
            border: 0;
            border-radius: 0;
            background: none;
            font-size: 15px;
            font-weight: 500;
            white-space: normal;
            color: var(--pw-text);
        }

            /* chevron at the end of every row */
            .html-account-page .block-account-navigation .list li a::after {
                content: "";
                display: block;
                position: absolute;
                right: 18px;
                top: 50%;
                width: 8px;
                height: 8px;
                margin-top: -4px;
                border-top: 2px solid var(--pw-border-2);
                border-right: 2px solid var(--pw-border-2);
                transform: rotate(45deg);
            }

            .html-account-page .block-account-navigation .list li a .nav-icon {
                width: 20px;
                height: 20px;
                color: var(--pw-muted);
            }

        .html-account-page .block-account-navigation .list li.active a {
            border: 0;
            background: var(--pw-tint);
            box-shadow: inset 3px 0 0 var(--pw-blue);
            color: var(--pw-blue-700);
            font-weight: 700;
        }

            .html-account-page .block-account-navigation .list li.active a .nav-icon {
                color: var(--pw-blue);
            }
}

/* ------------------------------------------------------------
   Tables scroll sideways when wider than the screen (wrapper added by _Root.cshtml)
   ------------------------------------------------------------ */
.pw2-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

    .pw2-table-scroll > table {
        margin-bottom: 0;
    }

@media (max-width: 767px) {
    /* on phones, cells keep their content on one line so a wide table scrolls instead of
       squeezing every column into a sliver of wrapped words */
    .pw2-table-scroll > table th,
    .pw2-table-scroll > table td,
    .pw-scroll > table th,
    .pw-scroll > table td {
        white-space: nowrap;
    }

    /* BOM tables (Prowire.Bom, already inside their own .pw-scroll box): the long description and
       stock-status cells keep wrapping at the widths bom.css gives them */
    .pw-scroll > .bom-lines td.bom-col-desc,
    .pw-scroll > .bom-lines td.bom-col-stock,
    .pw-scroll > .bom-lines td.bom-col-note {
        white-space: normal;
    }

    .pw-scroll {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* descriptions keep wrapping: long spec sentences in a cell read better wrapped than scrolled */
    .full-description .pw2-table-scroll > table td,
    .category-description .pw2-table-scroll > table td {
        white-space: normal;
        min-width: 90px;
    }
}

/* ------------------------------------------------------------
   Order history + invoice history rows (.pw-order-row) on phones: one line per row,
   facts in fixed columns lined up down the list, the list scrolls sideways like a table
   ------------------------------------------------------------ */
.html-account-page .pw-order-row .pw-fact--empty {
    display: none; /* desktop: no empty "PO #" box (phones show it, for aligned columns) */
}

@media (max-width: 767px) {
    .html-account-page .pw-order-rows {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border: 1px solid var(--pw-border);
        border-radius: var(--pw-radius);
        background: #fff;
    }

    .html-account-page .pw-order-rows > .pw-order-row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0 14px;
        width: max-content;
        min-width: 100%;
        margin: 0;
        padding: 12px 14px;
        border: 0;
        border-bottom: 1px solid var(--pw-border);
        border-radius: 0;
        box-shadow: none;
    }

        .html-account-page .pw-order-rows > .pw-order-row:last-child {
            border-bottom: 0;
        }

        .html-account-page .pw-order-rows > .pw-order-row:nth-child(even) {
            background: var(--pw-page);
        }

        .html-account-page .pw-order-row > .pw-fact,
        .html-account-page .pw-order-row > .pw-fact--empty {
            display: block;
            flex: 0 0 124px;
            min-width: 0;
        }

            .html-account-page .pw-order-row > .pw-fact:first-child {
                flex-basis: 118px;
            }

        .html-account-page .pw-order-row .pw-fact-value {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: normal;
        }

        .html-account-page .pw-order-row .pw-fact-value--lg {
            font-size: 16px;
        }

        .html-account-page .pw-order-row .pw-summary-actions {
            flex: 0 0 auto;
            flex-wrap: nowrap;
            margin-left: 0;
        }
}

/* ------------------------------------------------------------
   Addresses: a spreadsheet table like Saved Carts / BOMs (scrolls sideways on phones)
   ------------------------------------------------------------ */
.html-address-list-page .pw-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* the old card rows' flex layout does not apply to table rows */
.pw-addr-table .pw-addr-row {
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

    .pw-addr-table .pw-addr-row:hover {
        border: 0;
        box-shadow: none;
    }

.pw-addr-table td {
    vertical-align: top;
}

.pw-addr-table .pw-addr-type {
    width: 1%;
    white-space: nowrap;
}

    .pw-addr-table .pw-addr-type .pw-addr-default-flag {
        margin-left: 4px;
    }

.pw-addr-table .pw-addr-who span,
.pw-addr-table .pw-addr-meta span {
    display: block;
}

.pw-addr-table .pw-addr-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--pw-text);
}

.pw-addr-table .pw-addr-company {
    font-size: 13.5px;
    color: var(--pw-text-2);
}

.pw-addr-table .pw-addr-nickname {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--pw-muted);
}

.pw-addr-table td.pw-addr-lines {
    min-width: 220px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pw-text-2);
}

.pw-addr-table td.pw-addr-meta {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pw-muted);
}

/* the action cell: set-default button, edit, delete / lock, one line */
.pw-addr-table td.pw-addr-actions {
    display: table-cell;
    width: 1%;
    margin: 0;
    white-space: nowrap;
}

.pw-addr-actions__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.pw-addr-table .pw-addr-row.is-default td {
    background: var(--pw-tint);
}

.pw-addr-table .pw-addr-row[aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
}

@media (max-width: 767px) {
    /* phones: the table scrolls; the address and contact cells keep wrapping at a readable width */
    .pw-scroll > .pw-addr-table td.pw-addr-lines {
        min-width: 200px;
        white-space: normal;
    }

    .pw-scroll > .pw-addr-table td.pw-addr-meta {
        white-space: nowrap;
    }

    .html-address-list-page .pw-page-head .add-address-button {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------
   "Replace or add?" dialog when loading a saved cart or BOM (_Root.cshtml)
   ------------------------------------------------------------ */
.pw2-loadcart {
    position: fixed;
    inset: 0;
    height: fit-content;
    margin: auto;
    width: min(460px, calc(100vw - 32px));
    padding: 24px;
    border: 0;
    border-radius: var(--pw-radius);
    box-shadow: var(--pw-shadow-lg);
    color: var(--pw-text);
    background: #fff;
}

    .pw2-loadcart::backdrop {
        background: rgba(16, 24, 40, .45);
    }

.pw2-loadcart__title {
    margin: 0 0 8px;
    font-family: var(--pw-display);
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--pw-ink);
}

.pw2-loadcart__text {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--pw-text-2);
}

.pw2-loadcart__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pw2-loadcart__btn {
    height: 46px;
    border-radius: 999px;
    font-family: var(--pw-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

.pw2-loadcart__btn--primary {
    border: 0;
    background: var(--pw-blue);
    color: #fff;
}

    .pw2-loadcart__btn--primary:hover {
        background: var(--pw-blue-700);
    }

.pw2-loadcart__btn--secondary {
    border: 2px solid var(--pw-blue);
    background: #fff;
    color: var(--pw-blue);
}

    .pw2-loadcart__btn--secondary:hover {
        background: var(--pw-tint);
    }

.pw2-loadcart__cancel {
    align-self: center;
    margin-top: 2px;
    padding: 6px 12px;
    border: 0;
    background: none;
    font-size: 14px;
    color: var(--pw-muted);
    cursor: pointer;
}

    .pw2-loadcart__cancel:hover {
        color: var(--pw-text);
        text-decoration: underline;
    }

/* saved cart number badge on the saved cart page */
.pw-badge--number {
    font-family: var(--pw-mono);
}

/* Order history: the order number is the link to the order's details page */
.pw-order-row a.pw-order-link {
    color: var(--pw-blue);
    text-decoration: none;
}

    .pw-order-row a.pw-order-link:hover {
        color: var(--pw-blue-700);
        text-decoration: underline;
    }

/* ------------------------------------------------------------
   Product pills under the price (ProWire Theme > Product pills)
   ------------------------------------------------------------ */
.pw2-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 4px;
}

.pw2-pill {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

/* product pills on tiles: smaller, and wrapping within the card */
.pw2-card .pw2-pills--tile {
    gap: 4px;
    margin: 6px 0 2px;
}

    .pw2-card .pw2-pills--tile .pw2-pill {
        padding: 1px 7px;
        font-size: 11px;
    }

/* the factory spool on a tile: the same green as the Price Breaks tag on the product page */
.pw2-pill.pw2-pill--spool {
    border-color: #b7e0c6;
    background: #e6f5ec;
    color: var(--pw-green);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ------------------------------------------------------------
   Highlighted text in descriptions: the off-yellows some descriptions were written with (gold
   250,197,28 and near-yellows) shown as standard highlighter yellow, like the other 168
   ------------------------------------------------------------ */
[style*="250, 197, 28"],
[style*="250,197,28"],
[style*="251, 247, 25"],
[style*="251,247,25"],
[style*="253, 255, 50"],
[style*="253,255,50"],
[style*="255, 255, 128"],
[style*="255,255,128"] {
    background-color: #ffff00 !important;
}

/* ------------------------------------------------------------
   Topic pages (Return Policy, Shipping Policy, ...): headings stay semi-bold even when the text wraps
   them in <strong>; type="a" / type="i" lists keep their letters and numerals (the theme sets decimal on every list)
   ------------------------------------------------------------ */
    .html-topic-page .topic-page .page-body :is(h2, h3, h4) :is(strong, b) {
        font-weight: inherit;
    }

.topic-page .page-body ol[type="a"],
.topic-page .page-body ol[type="a"] > li {
    list-style-type: lower-alpha;
}

.topic-page .page-body ol[type="i"],
.topic-page .page-body ol[type="i"] > li {
    list-style-type: lower-roman;
}

/* ------------------------------------------------------------
   Folded tubing choice on product tiles (ProWire Theme plugin, zone ProductBoxAddinfoMiddle): the
   required "Tubing shipping" attribute, above the tile's Add to cart
   ------------------------------------------------------------ */
.pw2-card .pw2-foldship {
    margin: 0 0 10px;
    padding: 9px 10px;
    border: 1px solid #f0d68a;
    border-radius: 8px;
    background: #fff8e1; /* light yellow: stands out on the grey tiles */
    text-align: left;
}

    .pw2-card .pw2-foldship.is-missing {
        border-color: var(--pw-red);
        background: #fff5f5;
    }

.pw2-card .pw2-foldship__prompt {
    float: none;
    width: auto;
    margin: 0 0 3px;
    padding: 0;
    border: 0;
    font-family: var(--pw-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pw-navy); /* steel blue in both themes */
}

.pw2-card .pw2-foldship__req {
    color: var(--pw-red);
}

.pw2-card .pw2-foldship__note {
    margin: 0 0 6px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--pw-muted);
}

.pw2-card .pw2-foldship__option {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--pw-text);
    cursor: pointer;
}

    .pw2-card .pw2-foldship__option input {
        flex-shrink: 0;
        margin: 2px 0 0;
        accent-color: var(--pw-blue);
    }

.pw2-card .pw2-foldship__error {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-red);
}

/* ------------------------------------------------------------
   Product attributes in the product page buy box (e.g. the folded-tubing "Tubing shipping" choice): a light
   card with the question and its note on top and the options stacked full width (the old theme floats
   dt/dd side by side, which squeezed long option text into a narrow column)
   ------------------------------------------------------------ */
.pw2-pdp .attributes {
    margin: 4px 0 14px;
    padding: 11px 12px;
    border: 1px solid #f0d68a;
    border-radius: 10px;
    background: #fff8e1; /* in the grey buy box: light yellow, like the tiles */
}

    .pw2-pdp .attributes dl,
    .pw2-pdp .attributes dt,
    .pw2-pdp .attributes dd {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* another rule lays description lists out as a two-column grid; attributes stack instead */
    .pw2-pdp .attributes dl {
        display: block !important;
    }

    .pw2-pdp .attributes dd + dt {
        margin-top: 12px !important;
    }

    .pw2-pdp .attributes .text-prompt {
        display: inline;
        margin: 0;
        font-family: var(--pw-display);
        font-size: 15px;
        font-weight: 600;
        color: var(--pw-navy); /* steel blue in both themes */
    }

    .pw2-pdp .attributes .required {
        margin-left: 3px;
        color: var(--pw-red);
    }

    .pw2-pdp .attributes .attribute-description {
        margin: 3px 0 8px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--pw-muted);
    }

    .pw2-pdp .attributes .option-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

        .pw2-pdp .attributes .option-list li {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            float: none !important;
            width: auto !important;
            margin: 0 !important;
        }

            .pw2-pdp .attributes .option-list li input {
                flex-shrink: 0;
                margin: 3px 0 0;
                accent-color: var(--pw-blue);
            }

            .pw2-pdp .attributes .option-list li label {
                display: inline;
                width: auto;
                margin: 0;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.45;
                color: var(--pw-text);
                cursor: pointer;
            }

/* ------------------------------------------------------------
   "All categories" panel on phones: each family collapses to one row with a count and a chevron;
   tapping the chevron opens its subcategories (desktop keeps the full columns)
   ------------------------------------------------------------ */
.pw2-allcats__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pw2-allcats__toggle {
    display: none;
}

    /* the family heading keeps its full-width underline on desktop */
    .pw2-allcats__row .pw2-allcats__top {
        flex: 1 1 auto;
    }

@media (max-width: 767.98px) {
    .pw2-allcats__group {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--pw-border);
        break-inside: auto;
    }

    .pw2-allcats__row {
        min-height: 48px;
    }

    .pw2-allcats__row .pw2-allcats__top {
        flex: 1 1 auto;
        margin: 0;
        padding: 12px 0;
        border: 0;
    }

    .pw2-allcats__toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        height: 34px;
        padding: 0 10px;
        border: 1px solid var(--pw-border);
        border-radius: 999px;
        background: #fff;
        color: var(--pw-ink);
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
    }

        .pw2-allcats__toggle svg {
            transition: transform .2s ease;
        }

    .pw2-allcats__group.is-open .pw2-allcats__toggle {
        background: var(--pw-tint);
        border-color: #fbd1b9;
    }

        .pw2-allcats__group.is-open .pw2-allcats__toggle svg {
            transform: rotate(180deg);
        }

    .pw2-allcats__group > ul {
        display: none;
        margin: 0 0 12px;
        padding-left: 12px;
    }

    .pw2-allcats__group.is-open > ul {
        display: block;
    }
}

/* ------------------------------------------------------------
   Tile "As low as" + the Price Breaks popover (table from the ProWire Theme plugin, styled by the
   .pw2-breaks rules via .pw2-breaks-host)
   ------------------------------------------------------------ */
.pw2-card .pw2-card__breaks {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .pw2-card .pw2-card__breaks small {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: var(--pw-blue);
        text-decoration: underline dotted;
        text-underline-offset: 3px;
    }

    .pw2-card .pw2-card__breaks[aria-expanded="true"] small svg {
        transform: rotate(180deg);
    }

    .pw2-card .pw2-card__breaks:focus-visible {
        outline: 2px solid var(--pw-blue);
        outline-offset: 3px;
        border-radius: 4px;
    }

.pw2-breaks-pop {
    position: absolute;
    z-index: 1050;
    max-width: calc(100vw - 24px);
    padding: 10px 12px 12px;
    border: 1px solid var(--pw-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}

    .pw2-breaks-pop[hidden] {
        display: none;
    }

    .pw2-breaks-pop .pw2-breaks__title {
        margin: 0 0 8px;
    }

    .pw2-breaks-pop .pw2-breaks {
        margin: 0;
    }

    .pw2-breaks-pop table {
        font-size: 13.5px;
    }

    .pw2-breaks-pop thead th,
    .pw2-breaks-pop tbody td {
        padding: 7px 10px;
    }

.pw2-breaks-pop__loading {
    padding: 14px 6px;
    font-size: 13.5px;
    color: var(--pw-muted);
    text-align: center;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1279px) {
    .pw2-pdp__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pw2-pdp .pw2-pdp__gallery {
        grid-row: span 2;
    }

    /* the buy box sits right under the main price now, so the repeat would just stutter */
    .pw2-buy__price {
        display: none;
    }
}

@media (max-width: 1099px) {
    .pw2-ship,
    .pw2-hlink--track,
    .pw2-hlink--help {
        display: none;
    }

    .pw2-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pw2-promises__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .pw2-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pw2-bar__inner {
        flex-wrap: wrap;
        gap: 6px 12px;
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 12px;
    }

    .pw2-burger {
        display: flex;
    }

    .pw2-logo {
        margin-right: auto;
    }

        .pw2-logo img {
            height: 30px;
        }

    .pw2-hlink__text {
        display: none;
    }

    .pw2-account__trigger {
        width: 44px;
        height: 44px;
        justify-content: center;
    }

    .pw2-header .pw2-search {
        order: 10;
        flex-basis: 100%;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
    }

    .pw2-search #small-search-box-form {
        height: 44px;
        padding-left: 16px;
    }

    .pw2-search .search-box-button {
        padding: 0 14px;
    }

        .pw2-search .search-box-button::after {
            content: none;
        }

    /* the desktop nav collapses; the burger opens the mobile panel that MainMenu renders */
    .pw2-nav {
        background: none;
    }

    .pw2-nav__inner {
        min-height: 0;
    }

    .pw2-nav .menu-container,
    .pw2-nav__cta {
        display: none;
    }

    .pw2-pdp__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .pw2-pdp .pw2-pdp__gallery {
        grid-row: auto;
    }

    .pw2-pdp .picture-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

        .pw2-pdp .picture-gallery > .picture {
            grid-column: 1;
        }

        .pw2-pdp .picture-gallery > .picture-thumbs {
            grid-column: 1;
            flex-direction: row;
            max-height: none;
            overflow-x: auto;
        }

    .pw2-pdp .product-name h1 {
        font-size: 26px;
    }

    :is(.html-product-details-page, .html-category-page) .breadcrumb {
        padding: 12px 0 8px;
    }

        :is(.html-product-details-page, .html-category-page) .breadcrumb .container {
            padding-left: 16px;
            padding-right: 16px;
        }

        :is(.html-product-details-page, .html-category-page) .breadcrumb ul {
            gap: 2px 4px;
            font-size: 13px;
            line-height: 1.5;
        }

        :is(.html-product-details-page, .html-category-page) .breadcrumb li {
            margin: 0;
            padding: 0;
        }

    .pw2-pdp .picture-gallery .picture-thumbs .thumb-item {
        width: 60px;
        height: 60px;
    }

    .pw2-tabs .nav-tabs {
        gap: 24px;
    }

    .pw2-tabs table td:first-child {
        width: 40%;
    }

    .pw2-promises__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .pw2-footer .pw2-footer__main {
        padding-top: 8px;
    }

    .pw2-footer .pw2-footer__menus {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .pw2-footer .footer-menu {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .pw2-footer .footer-menu__title {
        margin: 0;
        padding: 16px 0;
        cursor: pointer;
    }

    .pw2-footer .footer-menu__list {
        display: none;
        padding-bottom: 16px;
    }

    .pw2-footer .footer-menu--active .footer-menu__list {
        display: flex;
    }

    .pw2-footer__badges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* V3: black body text. Bootstrap and the old theme sheets set their own grays (#212529 etc.) */
:root {
    --bs-body-color: #000;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-heading-color: #000;
}

body {
    color: #000;
}

/* ------------------------------------------------------------
   Homepage "Most popular categories" on phones/tablets: layout picked on the ProWire Theme configure
   page (.pw2-hero__rail--tiles / --grid / --list; --pills keeps the original chip row above)
   ------------------------------------------------------------ */
.pw2-hero__rail-pic,
.pw2-hero__more {
    display: none;
}

@media (max-width: 991px) {
    .pw2-hero__rail--tiles ul,
    .pw2-hero__rail--grid ul {
        display: grid;
        gap: 8px;
        padding: 0;
        overflow: visible;
    }

    .pw2-hero__rail--tiles li a,
    .pw2-hero__rail--grid li a,
    .pw2-hero__rail--list li a {
        white-space: normal;
    }

    /* two-column text tiles */
    .pw2-hero__rail--grid ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .pw2-hero__rail--grid li a {
            min-height: 48px;
            padding: 8px 10px 8px 12px;
            border-radius: 10px;
            font-size: 13.5px;
            line-height: 1.25;
        }

            .pw2-hero__rail--grid li a svg {
                display: block;
            }

    /* picture tiles: 3 across on phones (first 9, a full square), 5 across on tablets (all 10) */
    .pw2-hero__rail--tiles ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

        .pw2-hero__rail--tiles li:nth-child(n+10) {
            display: none;
        }

        .pw2-hero__rail--tiles li a {
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0;
            height: 100%;
            min-height: 0;
            padding: 0;
            overflow: hidden;
            border-radius: 12px;
            font-size: 12.5px;
            line-height: 1.25;
        }

    .pw2-hero__rail--tiles .pw2-hero__rail-pic {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        padding: 8px;
        background: #fff;
        border-bottom: 1px solid var(--pw-border);
    }

        .pw2-hero__rail--tiles .pw2-hero__rail-pic img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    .pw2-hero__rail--tiles li a span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 7px 6px 8px;
        text-align: center;
        background: var(--pw-page);
        flex: 1 1 auto;
    }

    /* short list: rows like the desktop rail, first five until "Show more" */
    .pw2-hero__rail--list ul {
        display: block;
        padding: 0;
        overflow: visible;
        border: 1px solid var(--pw-border-2);
        border-radius: 12px;
        background: #fff;
    }

        .pw2-hero__rail--list li + li {
            border-top: 1px solid var(--pw-border);
        }

        .pw2-hero__rail--list li a {
            min-height: 46px;
            padding: 0 14px;
            border: 0;
            border-radius: 0;
            background: none;
        }

            .pw2-hero__rail--list li a svg {
                display: block;
            }

    .pw2-hero__rail--list:not(.is-expanded) li:nth-child(n+6) {
        display: none;
    }

    .pw2-hero__rail--list .pw2-hero__more {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 10px 16px 0 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--pw-blue);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .pw2-hero__rail--list.is-expanded .pw2-hero__more svg {
        transform: rotate(180deg);
    }
}

@media (min-width: 600px) and (max-width: 991px) {
    .pw2-hero__rail--tiles ul {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

        .pw2-hero__rail--tiles li:nth-child(n+10) {
            display: block;
        }

    .pw2-hero__rail--grid ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------
   Sign in: space above the captcha, captcha aligned with the fields, and the Sign in button pinned to
   the bottom of the panel so it lines up with "Create an account" (captcha on or off)
   ------------------------------------------------------------ */
.html-login-page .pw2-auth__main {
    display: flex;
    flex-direction: column;
}

.html-login-page .pw2-auth__form {
    flex: 1 1 auto;
}

.html-login-page .pw2-auth__form .captcha-box {
    margin: 10px 0 8px;
    text-align: left;
}

    .html-login-page .pw2-auth__form .captcha-box > div {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

.html-login-page .pw2-auth__form .pw2-auth__submit {
    margin-top: auto;
}

.html-login-page .pw2-auth__main .external-authentication:not(:has(*)) {
    display: none;
}

/* ------------------------------------------------------------
   Homepage "Build it for me" on phones: three picture tiles side by side, the same look as the
   "Most popular categories" tiles (replaces the swipeable row)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .pw2-home__section .pw2-tools,
    .pw2-home__section .pw2-tools--3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

        .pw2-home__section .pw2-tools .pw2-tool {
            flex-direction: column;
            border-radius: 12px;
        }

            .pw2-home__section .pw2-tools .pw2-tool:hover {
                transform: none;
            }

        .pw2-home__section .pw2-tools .pw2-tool__img {
            flex: none;
            height: auto;
            min-height: 0;
            aspect-ratio: 1 / 1;
            padding: 8px;
            background: #fff;
            border-bottom: 1px solid var(--pw-border);
        }

            .pw2-home__section .pw2-tools .pw2-tool__img img {
                max-width: 100%;
                max-height: 100%;
            }

        .pw2-home__section .pw2-tools .pw2-tool__body {
            flex: 1 1 auto;
            justify-content: center;
            padding: 7px 6px 8px;
            background: var(--pw-page);
            text-align: center;
        }

            .pw2-home__section .pw2-tools .pw2-tool__body strong {
                font-family: inherit;
                font-size: 12.5px;
                font-weight: 600;
                line-height: 1.25;
                text-transform: none;
                color: var(--pw-text);
            }

                .pw2-home__section .pw2-tools .pw2-tool__body strong::after {
                    content: none;
                }

            .pw2-home__section .pw2-tools .pw2-tool__body small {
                display: none;
            }
}

/* ------------------------------------------------------------
   Manufacturer logos: tiles, product page, homepage "Brands we carry" row
   ------------------------------------------------------------ */
.pw2-card__meta .product-manufacturer--logo {
    display: inline-flex;
    align-items: center;
    height: 22px;
}

    .pw2-card__meta .product-manufacturer--logo img {
        display: block;
        width: auto;
        max-width: 96px;
        height: auto;
        max-height: 22px;
        object-fit: contain;
    }

.pw2-pdp__mfr {
    display: flex;
    align-items: center;
    height: 34px;
    margin: 6px 0 2px;
}

    .pw2-pdp__mfr img {
        display: block;
        width: auto;
        max-width: 150px;
        height: auto;
        max-height: 34px;
        object-fit: contain;
    }

.pw2-brands__track {
    display: flex;
    overflow-x: auto;
    padding: 6px 0 10px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

    .pw2-brands__track::-webkit-scrollbar {
        display: none;
    }

    .pw2-brands__track:focus-visible {
        outline: 2px solid var(--pw-blue);
        outline-offset: 2px;
        border-radius: 8px;
    }

.pw2-brands__list {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .pw2-brands__list li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 170px;
        height: 72px;
        padding: 0 22px;
    }

    .pw2-brands__list img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 52px;
        object-fit: contain;
    }

@media (max-width: 767px) {
    .pw2-brands__list li {
        width: 128px;
        height: 56px;
        padding: 0 14px;
    }

    .pw2-brands__list img {
        max-height: 40px;
    }
}

/* ------------------------------------------------------------
   Product page: MIL QPL sourcing note under "AS9120B & ISO 9001 certified"
   ------------------------------------------------------------ */
.pw2-buy__trust .pw2-buy__qpl {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--pw-border);
    border-radius: 10px;
    background: var(--pw-page);
}

    .pw2-buy__trust .pw2-buy__qpl img {
        flex: 0 0 auto;
        width: auto;
        max-width: 84px;
        height: auto;
        max-height: 30px;
        margin-top: 2px;
        object-fit: contain;
    }

    .pw2-buy__trust .pw2-buy__qpl p {
        margin: 0;
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--pw-muted);
    }

/* ------------------------------------------------------------
   Manufacturer: logo, plus the brand name beside a parent company's logo (EATON | Souriau)
   ------------------------------------------------------------ */
.pw2-mfg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pw2-mfg__brand {
    padding-left: 7px;
    border-left: 1px solid var(--pw-border-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pw-text);
    white-space: nowrap;
}

.pw2-mfg--text {
    font-size: 12.5px;
    color: var(--pw-muted);
}

.pw2-pdp__mfr .pw2-mfg {
    gap: 10px;
}

.pw2-pdp__mfr .pw2-mfg__brand {
    padding-left: 10px;
    font-size: 15px;
}

.pw2-pdp__mfr .pw2-mfg--text {
    font-size: 14px;
}

.pw2-buy__trust .pw2-buy__qpl .pw2-mfg {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

    .pw2-buy__trust .pw2-buy__qpl .pw2-mfg img {
        max-width: 84px;
        max-height: 30px;
    }

    .pw2-buy__trust .pw2-buy__qpl .pw2-mfg__brand {
        padding-left: 0;
        border-left: 0;
        font-size: 11.5px;
    }

/* tiles: item number on its own line above the manufacturer logo */
.pw2-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* tiles: no empty second line under one-line titles; bigger item number */
.pw2-card .pw2-card__title,
.pw2-card .pw2-card__title a {
    height: auto !important; /* the old theme fixes the link at 40px (two lines), with a more specific selector */
    min-height: 0;
    margin-bottom: 0;
}

/* homepage rows: titles keep their two clamped lines so every card's price and button line up */
.home-page-product-grid .pw2-card .pw2-card__title a {
    min-height: 2.4em;
    min-height: 2lh;
}

.pw2-card__meta .sku {
    font-size: 14px;
}

/* ------------------------------------------------------------
   Category filters: "Clear all filters" (rail) and "Clear all" beside the phone Filters button
   ------------------------------------------------------------ */
.pw2-filters__bar {
    display: flex;
    justify-content: flex-end;
}

.pw2-filters__clear {
    margin: 0 0 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--pw-blue);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

    .pw2-filters__clear[hidden] {
        display: none;
    }

.pw2-cat__filter-bar {
    display: none;
}

.pw2-cat__filter-count:empty {
    display: none;
}

@media (max-width: 991px) {
    .pw2-cat__filter-bar {
        display: flex;
        align-items: center;
        gap: 14px;
    }

        .pw2-cat__filter-bar .pw2-filters__clear {
            margin: 0;
        }
}

.pw2-filters__clear.is-idle {
    color: var(--pw-muted);
    text-decoration: none;
    cursor: default;
    opacity: .7;
}

/* ------------------------------------------------------------
   Address check (Piyovi): corrected vs entered address before saving
   ------------------------------------------------------------ */
.pw-addr-check {
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid #e3e7ec;
    border-left: 5px solid #ffe600;
    border-radius: 0 12px 12px 0;
    background: #f6f7f9;
    font-size: 14px;
    color: #333;
}

    .pw-addr-check[hidden] {
        display: none;
    }

.pw-addr-check__title {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 15px;
    color: #111;
}

.pw-addr-check__body p {
    margin: 0 0 10px;
}

.pw-addr-check__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.pw-addr-check__card {
    display: block;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--pw-border-2);
    border-radius: 10px;
    background: #fff;
    line-height: 1.5;
}

    .pw-addr-check__card strong {
        display: block;
        margin-bottom: 2px;
        font-size: 12px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--pw-muted);
    }

.pw-addr-check__card--pick {
    border-color: #eeba9c;
    cursor: pointer;
}

.pw-addr-check__card--typed {
    color: var(--pw-muted);
}

.pw-addr-check__card mark {
    padding: 0 2px;
    border-radius: 3px;
    background: #fff176;
    color: inherit;
}

.pw-addr-check__note {
    margin: 10px 0 0 !important;
    font-size: 13px;
    color: var(--pw-muted);
}

.pw-addr-check__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* ------------------------------------------------------------
   Address form: one column in US order (city / state / ZIP on one line); "validation in progress" line
   ------------------------------------------------------------ */
.pw-addr-us {
    max-width: 560px;
}

.pw-af-row {
    display: grid;
    gap: 0 14px;
}

.pw-af-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pw-af-row--csz {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr);
}

    .pw-af-row > .inputs {
        min-width: 0;
    }

        .pw-af-row > .inputs select,
        .pw-af-row > .inputs input {
            width: 100%;
            max-width: 100%;
        }

@media (max-width: 575px) {
    .pw-af-row--csz {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

        .pw-af-row--csz .pw-addr-city {
            grid-column: 1 / -1;
        }
}

.pw-addr-check__wait {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pw-blue);
}

    .pw-addr-check__wait[hidden] {
        display: none;
    }

.pw-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -3px;
    animation: pw-spin .7s linear infinite;
}

@keyframes pw-spin {
    to {
        transform: rotate(360deg);
    }
}

/* account pages lay the partial out two-up (order-ui.css): the US layout is one column with its own rows */
.pw-address-form .edit-address.pw-addr-us {
    display: block;
}

/* required marker right after the label text ("City *") instead of pinned to the far right of the box */
.pw-addr-us .inputs > .required {
    display: none;
}

.pw-addr-us .inputs:has(> .required) > label::after {
    content: " *";
    color: #d92d20;
    font-weight: 700;
}

/* made to order (striped wire): lead time badge on product page, cart, mini cart, checkout, configurator */
.pw-mto-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0;
    padding: 2px 9px;
    border: 1px solid #f5d7c6;
    border-radius: 999px;
    background: #fcf3ee;
    color: #8f481f;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
}

    .pw-mto-badge svg {
        flex: 0 0 auto;
    }

.pw2-buy__trust .pw2-buy__qpl p strong {
    color: var(--pw-text);
    font-weight: 700;
}

/* ── Track my order (Piyovi plugin's branded tracking page at /track) ── */

/* the header link only fits beside the search box on wide screens; below that it lives in the account menu */
@media (max-width: 1359px) {
    .pw2-hlink--track {
        display: none;
    }
}

.pw2-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    margin: 18px 0 6px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--pw-border);
    border-left: 5px solid var(--pw-blue);
    border-radius: var(--pw-radius);
}

.pw2-track__intro {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.pw2-track__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pw-tint);
    color: var(--pw-blue);
}

.pw2-track__title {
    margin: 0;
    font-family: var(--pw-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.pw2-track__text {
    margin: 2px 0 0;
    color: var(--pw-muted);
    font-size: 14px;
}

.pw2-track__form {
    display: flex;
    gap: 8px;
    flex: 0 1 560px;
}

    .pw2-track__form input {
        flex: 1 1 0;
        min-width: 0;
        height: 42px;
        padding: 0 12px;
        border: 1px solid var(--pw-border);
        border-radius: 8px;
        font-size: 15px;
    }

        .pw2-track__form input:focus {
            outline: 2px solid var(--pw-blue);
            outline-offset: -1px;
            border-color: var(--pw-blue);
        }

.pw2-track__btn {
    flex: none;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--pw-blue);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

    .pw2-track__btn:hover {
        background: #cf540d;
    }

@media (max-width: 899px) {
    .pw2-track {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
    }

    .pw2-track__form {
        flex-basis: auto;
        flex-wrap: wrap;
    }

        .pw2-track__form input {
            flex: 1 1 100%;
        }

    .pw2-track__btn {
        flex: 1 1 100%;
    }
}

/* My Orders: Track button, shipments "Track shipments" link, per-line status on order details */
.pw-track-link {
    margin-left: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pw-line-track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f5f1ee;
    color: #495057;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

    .pw-line-track::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .pw-line-track:hover {
        text-decoration: underline;
    }

.pw-line-track--intransit,
.pw-line-track--outfordelivery {
    background: var(--pw-tint);
    color: var(--pw-blue);
}

.pw-line-track--delivered {
    background: #e7f5ee;
    color: var(--pw-green);
}

.pw-line-track--exception {
    background: #fdecec;
    color: var(--pw-red);
}

/* ── My Orders list as a table (desktop), with the delivery pill column ── */
.pw-order-head {
    display: none;
}

@media (min-width: 768px) {
    .pw-order-rows--table {
        gap: 0;
        background: #fff;
        border: 1px solid var(--pw-border);
        border-radius: var(--pw-radius);
        overflow: hidden;
    }

    .pw-order-rows--table > .pw-order-head,
    .pw-order-rows--table > .pw-order-row {
        display: grid;
        grid-template-columns: minmax(120px, 1.1fr) minmax(100px, 1fr) 96px 124px 100px minmax(190px, 1.7fr) 170px;
        align-items: center;
        gap: 0 18px;
        padding: 14px 20px;
    }

    .pw-order-rows--table > .pw-order-head {
        padding-top: 11px;
        padding-bottom: 11px;
        background: var(--pw-page);
        border-bottom: 1px solid var(--pw-border);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #475467;
    }

    .pw-order-rows--table > .pw-order-row {
        border: 0;
        border-bottom: 1px solid var(--pw-border);
        border-radius: 0;
        box-shadow: none;
        transition: background .12s ease;
    }

        .pw-order-rows--table > .pw-order-row:last-child {
            border-bottom: 0;
        }

        .pw-order-rows--table > .pw-order-row:hover {
            background: #f7faff;
            box-shadow: none;
        }

        /* the header row names the columns; every cell keeps its place, an empty PO shows a dash */
        .pw-order-rows--table > .pw-order-row .pw-fact-label {
            display: none;
        }

        .html-account-page .pw-order-rows--table > .pw-order-row .pw-fact--empty {
            display: block;
        }

            .pw-order-rows--table > .pw-order-row .pw-fact--empty .pw-fact-value {
                color: #98a2b3;
            }

        .pw-order-rows--table > .pw-order-row .pw-fact-value--lg {
            font-size: 17px;
            font-weight: 600;
        }

        /* fixed slots (return | track | PDF) so the Track buttons and PDF icons line up down the list
           whether or not a row has them */
        .pw-order-rows--table > .pw-order-row .pw-summary-actions {
            display: grid;
            grid-template-columns: auto 68px 36px;
            justify-content: end;
            align-items: center;
            gap: 8px;
            margin-left: 0;
        }

            .pw-order-rows--table > .pw-order-row .pw-summary-actions > .pw-track-btn {
                grid-column: 2;
                margin: 0;
            }

            .pw-order-rows--table > .pw-order-row .pw-summary-actions > .pw-file-btn {
                grid-column: 3;
                margin: 0;
            }

            .pw-order-rows--table > .pw-order-row .pw-summary-actions > :not(.pw-track-btn):not(.pw-file-btn) {
                grid-column: 1;
            }
}

@media (max-width: 767px) {
    .html-account-page .pw-order-row > .pw-fact--delivery {
        flex-basis: 200px;
    }
}

/* delivery pill */
.pw-fact--delivery .pw-fact-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.pw-dpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: #f5f1ee;
    color: #475467;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

    .pw-dpill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

a.pw-dpill:hover {
    text-decoration: none;
    filter: brightness(.96);
}

.pw-dpill--loading {
    color: #98a2b3;
    font-weight: 600;
}

    .pw-dpill--loading::before {
        animation: pw-dpill-pulse 1s ease-in-out infinite alternate;
    }

@keyframes pw-dpill-pulse {
    to { opacity: .25; }
}

.pw-dpill--intransit,
.pw-dpill--labelcreated,
.pw-dpill--outfordelivery,
.pw-dpill--readyforpickup {
    background: var(--pw-tint);
    color: var(--pw-blue);
}

.pw-dpill--delivered,
.pw-dpill--pickedup {
    background: #e7f5ee;
    color: var(--pw-green);
}

.pw-dpill--exception {
    background: #fdecec;
    color: var(--pw-red);
}

.pw-dpill--preparing {
    background: #fff6e0;
    color: #9a6700;
}

.pw-dpill-detail {
    padding-left: 10px;
    font-size: 12.5px;
    color: var(--pw-muted);
    white-space: nowrap;
}

.pw-dpill-none {
    color: #98a2b3;
}

/* ── Header bar: wider than the page grid so the logo sits further left and the search box keeps room for
   its placeholder ("Enter part number or description") beside Track order / Contact us / Account ── */
@media (min-width: 768px) {
    .pw2-bar > .pw2-bar__inner {
        max-width: 1680px;
        padding-left: 16px;
        padding-right: 20px;
        gap: 18px;
    }
}

@media (min-width: 1100px) {
    .pw2-header .pw2-search {
        min-width: 350px;
    }
}

@media (min-width: 1360px) {
    .pw2-header .pw2-search {
        min-width: 380px;
    }
}

/* narrower desktops: the Search button shows just its magnifier so the hint keeps its room */
@media (min-width: 768px) and (max-width: 1279px) {
    .pw2-header .pw2-search .search-box-button {
        padding: 0 16px;
    }

        .pw2-header .pw2-search .search-box-button::after {
            content: none;
        }
}

/* Contact us gives way before the search box does (it is also in the footer and the account menu) */
@media (max-width: 1279px) {
    .pw2-hlink--help {
        display: none;
    }
}

/* Product page buy box: the quantity stepper full width over Add to cart, the site-wide pattern (.pw-buy) */
.pw2-pdp .add-to-cart-panel {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
}

    .pw2-pdp .add-to-cart-panel .qty-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .pw2-pdp .add-to-cart-panel .qty-wrapper {
        display: flex;
        width: 100% !important;
    }

    .pw2-pdp .add-to-cart-panel .qty-input {
        flex: 1 1 auto;
        width: auto;
        border-left-color: #1d2939;
        border-right-color: #1d2939;
    }

    .pw2-pdp .add-to-cart-panel .qty-dropdown {
        width: 100%;
    }

    /* in the column the button keeps its own height (flex-basis 100% had squashed it) and matches Save to BOM */
    .pw2-pdp .add-to-cart-panel .add-to-cart-button {
        flex: 0 0 auto;
        height: 46px;
        font-size: 17px;
    }

/* Save to BOM on the product page: same width as Add to cart */
.pw2-pdp .pw2-buy__actions .pw-bom-btn {
    flex: 1 1 100%;
}

/* ── Phones: menu, a full-size logo and the account / currency / cart icons on the first row; "Order now ·
   Ships Monday" on its own line under them, centred (the countdown pill is left out); then the search.
   The account menu opens as a full-width panel so it never runs off the left edge ── */
@media (max-width: 767px) {
    .pw2-bar > .pw2-bar__inner {
        gap: 4px 8px;
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 10px;
    }

    .pw2-logo {
        margin-left: 4vw;
        margin-right: auto;
    }

        .pw2-logo img {
            height: 30px;
        }

    .pw2-header .pw2-ship {
        display: flex;
        order: 9;
        flex: 0 0 100%;
        justify-content: center;
        margin: 4px 0 2px;
    }

        .pw2-header .pw2-ship .pw2-hlink__text:not(.pw2-ship__static),
        .pw2-header .pw2-ship:not(:has(.pw2-cutoff)) .pw2-ship__static {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            gap: 6px;
            line-height: 1.2;
        }

            .pw2-header .pw2-ship .pw2-hlink__text small {
                font-size: 12px;
            }

            .pw2-header .pw2-ship .pw2-hlink__text strong {
                font-size: 13px;
            }

        /* compact countdown pill; still hidden outside the countdown window by the base rule */
        .pw2-header .pw2-ship .pw2-cutoff__pill {
            min-width: 0;
            height: 22px;
            padding: 0 6px;
            border-radius: 4px;
            font-size: 14px;
        }

    .pw2-account__trigger {
        width: 40px;
        height: 44px;
    }

    .pw2-account {
        position: static;
    }

    .pw2-account__menu {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 58px;
        width: auto;
    }

        .pw2-account__menu::after {
            display: none;
        }
}

/* ------------------------------------------------------------
   Configurators in the theme's type: Deutsch Kit Builder (#deutsch-kit-app / .kit-builder-page), Mil-Spec
   (#kit-configurator-app, also injected on kit product pages) and Striped Wire (.swc-page). Their own inline
   styles use a generic slate look; "body" in front of each selector outranks those without touching the
   plugins' layout or logic.
   ------------------------------------------------------------ */
body :is(.kit-builder-page, .kit-configurator-page, .swc-page) .page-title {
    margin: 8px 0 14px;
    padding: 0 14px;
    text-align: left;
}

    body .swc-page .page-title {
        padding: 0;
    }

    body :is(.kit-builder-page, .kit-configurator-page, .swc-page) .page-title h1 {
        margin: 0;
        font-family: var(--pw-display);
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -.01em;
        line-height: 1.1;
        text-transform: uppercase;
        text-align: left;
        color: #000;
    }

/* step labels ("Step 1: Series", "What would you like to do?") and Striped Wire's step titles */
body :is(#deutsch-kit-app, #kit-configurator-app) .kit-step-label,
body .swc-page .swc-step-title {
    font-family: var(--pw-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #000;
}

    body :is(#deutsch-kit-app, #kit-configurator-app) .kit-step-label small {
        font-family: system-ui, sans-serif;
        font-size: 13px;
        font-weight: 400;
        text-transform: none;
        color: var(--pw-muted);
    }

body .swc-page .swc-step-title .swc-step-num {
    background: var(--pw-blue);
    font-family: system-ui, sans-serif;
}

body .swc-page .swc-step-title .swc-chosen,
body .swc-page .swc-change {
    font-family: system-ui, sans-serif;
    text-transform: none;
}

body .swc-page .swc-step-title .swc-chosen {
    color: var(--pw-blue);
}

/* card and section headings */
body :is(#deutsch-kit-app, #kit-configurator-app) :is(.kit-guide-heading, .kit-path-heading, .kit-build-mode-title),
body :is(#deutsch-kit-app, #kit-configurator-app) .kit-step > h2,
body .swc-page .swc-preview h2 {
    font-family: var(--pw-display);
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #000;
}

body :is(#deutsch-kit-app, #kit-configurator-app) .kit-guide-heading { font-size: 19px; }
body :is(#deutsch-kit-app, #kit-configurator-app) .kit-step > h2,
body .swc-page .swc-preview h2 { font-size: 22px; }

body :is(#deutsch-kit-app, #kit-configurator-app) :is(.kit-guide-desc, .kit-step > p) {
    font-size: 14px;
    color: #475467;
}

/* buttons: theme pills */
body :is(#deutsch-kit-app, #kit-configurator-app) :is(.kit-guide-btn, .finder-use-btn, .kit-pinout-download-btn, .kit-path-finder-btn, .kit-bom-btn) {
    padding: 10px 22px;
    border: 1px solid var(--pw-blue);
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    body :is(#deutsch-kit-app, #kit-configurator-app) :is(.kit-guide-btn, .finder-use-btn, .kit-pinout-download-btn, .kit-path-finder-btn, .kit-bom-btn):hover {
        border-color: var(--pw-blue-700, #cf540d);
        background: var(--pw-blue-700, #cf540d);
    }

body :is(#deutsch-kit-app, #kit-configurator-app) :is(.kit-guide-btn-outline, .finder-use-btn-secondary, .kit-bom-btn) {
    background: #fff;
    color: var(--pw-blue);
}

    body :is(#deutsch-kit-app, #kit-configurator-app) :is(.kit-guide-btn-outline, .finder-use-btn-secondary, .kit-bom-btn):hover {
        background: var(--pw-tint);
        color: var(--pw-blue);
    }

/* selections in the theme blue */
body :is(#deutsch-kit-app, #kit-configurator-app) .kit-swatch.selected,
body :is(#deutsch-kit-app, #kit-configurator-app) .kit-mode-card.kit-mode-selected,
body .swc-page .swc-opt.swc-selected {
    border-color: var(--pw-blue);
    background: var(--pw-tint);
}

body .swc-page .swc-opt:hover {
    border-color: var(--pw-blue);
}

body :is(#deutsch-kit-app, #kit-configurator-app) .kit-swatch span,
body .swc-page .swc-opt .swc-label {
    font-weight: 600;
    color: #1d2939;
}

@media (max-width: 767px) {
    body :is(.kit-builder-page, .kit-configurator-page, .swc-page) .page-title h1 {
        font-size: 24px;
    }

    body :is(#deutsch-kit-app, #kit-configurator-app) .kit-step-label,
    body .swc-page .swc-step-title {
        font-size: 15px;
    }
}

/* ------------------------------------------------------------
   Wire Bundle Calculator (#bundle-calc-app) in the theme's look: its inline styles are an off-white / green
   palette keyed on the app id, so "body #bundle-calc-app" outranks them. Layout untouched.
   ------------------------------------------------------------ */
body .bundle-calc-page .page-title {
    max-width: 900px; /* the calculator's own width, so the title lines up with it */
    margin: 8px auto 6px;
    text-align: left;
}

    body .bundle-calc-page .page-title h1 {
        margin: 0;
        font-family: var(--pw-display);
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -.01em;
        line-height: 1.1;
        text-transform: uppercase;
        text-align: left;
        color: #000;
    }

body #bundle-calc-app .bc-card {
    border-color: var(--pw-border);
    border-radius: var(--pw-radius);
}

body #bundle-calc-app :is(.bc-tile, .bc-config-bar, .bc-info-note, .bc-debug) {
    background: var(--pw-page);
}

body #bundle-calc-app .bc-tile {
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
}

body #bundle-calc-app .bc-tile-value {
    font-family: var(--pw-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--pw-navy);
}

body #bundle-calc-app :is(.bc-lbl, .bc-st, .bc-legend-title, .bc-filler-title) {
    font-family: var(--pw-display);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #475467;
}

body #bundle-calc-app .bc-lbl { font-size: 13px; }
body #bundle-calc-app .bc-st { font-size: 16px; color: #000; }

body #bundle-calc-app :is(.bc-card, .bc-lower, .bc-stats, .bc-table th, .bc-table td, #bc-canvas, .bc-hs-item) {
    border-color: var(--pw-border);
}

/* buttons: theme pills */
body #bundle-calc-app .bc-btn {
    padding: 8px 18px;
    border: 1px solid var(--pw-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--pw-blue);
    font-family: var(--pw-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    body #bundle-calc-app .bc-btn:hover { background: var(--pw-tint); }

body #bundle-calc-app .bc-btn-sm { padding: 5px 12px; font-size: 13px; }

body #bundle-calc-app .bc-btn-primary {
    background: var(--pw-blue);
    color: #fff;
}

    body #bundle-calc-app .bc-btn-primary:hover { border-color: var(--pw-blue-700, #cf540d); background: var(--pw-blue-700, #cf540d); }

body #bundle-calc-app .bc-btn-danger { border-color: var(--pw-red); color: var(--pw-red); }
    body #bundle-calc-app .bc-btn-danger:hover { background: #fdecec; }

body #bundle-calc-app :is(.bc-btn-success, .bc-add-bottom) { border-color: var(--pw-blue); color: var(--pw-blue); }

body #bundle-calc-app .bc-empty-add {
    border-color: var(--pw-blue);
    background: var(--pw-tint);
    color: var(--pw-blue);
    font-family: var(--pw-display);
    font-size: 16px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

body #bundle-calc-app .bc-slot-btn { border-color: var(--pw-border-2, #cfd6de); border-radius: 999px; }
body #bundle-calc-app .bc-slot-btn.bc-slot-filled { border-color: var(--pw-blue); color: var(--pw-blue); }

body #bundle-calc-app :is(select.bc-select, input.bc-input) {
    border-color: var(--pw-border-2, #cfd6de);
    border-radius: 8px;
}

    body #bundle-calc-app :is(select.bc-select, input.bc-input):focus {
        outline: 2px solid var(--pw-blue);
        outline-offset: -1px;
        border-color: var(--pw-blue);
    }

/* mode switch: theme blue for the chosen mode */
body #bundle-calc-app .bc-mode-bar { border-color: var(--pw-border-2, #cfd6de); border-radius: 999px; }
body #bundle-calc-app .bc-mode-btn { font-weight: 600; }
body #bundle-calc-app .bc-mode-btn.bc-mode-sel { background: var(--pw-blue); color: #fff; }

/* heat shrink suggestions */
body #bundle-calc-app .bc-hs-item { border-radius: var(--pw-radius); }
body #bundle-calc-app .bc-hs-item:hover { border-color: var(--pw-blue); }
body #bundle-calc-app .bc-hs-img { background: var(--pw-page); }
body #bundle-calc-app .bc-hs-size { color: var(--pw-navy); font-weight: 700; }
body #bundle-calc-app .bc-hs-use { background: var(--pw-tint); color: var(--pw-blue); }
body #bundle-calc-app :is(.bc-hs-link, .bc-stat-adjusted) { color: var(--pw-steel); }

@media (max-width: 767px) {
    body .bundle-calc-page .page-title h1 { font-size: 24px; }
    body #bundle-calc-app .bc-mode-bar { border-radius: 12px; }
}

/* Price breaks: a packaging swatch (bag / spool picture) with its word under it (ProWire Theme > Price break packaging) */
.pw2-pkg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.pw2-pkg__img {
    display: block;
    flex: none;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.pw2-pkg__label {
    font-size: 12px;
    line-height: 1.1;
    color: var(--pw-muted);
}

/* rows with a swatch: tighter padding so the table stays compact */
.pw2-breaks table:has(.pw2-pkg) tbody td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* a swatch makes the row taller: keep quantity / price / ext. price centred on it */
.pw2-breaks table :is(td, th) {
    vertical-align: middle !important;
}

/* Image pills under the product image (ProWire Theme > Image pills): picture left, rich text right */
.pw2-imgpills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 0;
}

.pw2-imgpill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--pw-border);
    border-radius: 10px;
    background: var(--pw-page);
    font-size: 14px;
    line-height: 1.35;
    color: var(--pw-text);
}

.pw2-imgpill__img {
    flex: none;
    width: auto;
    max-width: 64px;
    height: 36px;
    object-fit: contain;
}

.pw2-imgpill__text {
    min-width: 0;
}

    .pw2-imgpill__text > :first-child { margin-top: 0; }
    .pw2-imgpill__text > :last-child { margin-bottom: 0; }
    .pw2-imgpill__text p { margin: 0 0 4px; }

/* image pills placed under the price breaks: smaller text, tighter */
.pw2-imgpills--prices {
    gap: 6px;
    margin: 10px 0 0;
}

    .pw2-imgpills--prices .pw2-imgpill {
        gap: 8px;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 12.5px;
        line-height: 1.3;
    }

    .pw2-imgpills--prices .pw2-imgpill__img {
        max-width: 44px;
        height: 22px;
    }

/* plain-text notes in the buy box, between stock and quantity (image pills placed as "buy box text") */
.pw2-buytexts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 12px;
}

.pw2-buytext {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--pw-text);
}

.pw2-buytext__img {
    flex: none;
    height: 18px;
    width: auto;
    max-width: 36px;
    object-fit: contain;
}

.pw2-buytext__text > :last-child { margin-bottom: 0; }
.pw2-buytext__text p { margin: 0; }

/* Topic page building blocks (policy pages written in the admin editor): lead line, callout, spec table */
.html-topic-page .topic-page .page-body .pw2-lead {
    margin: -8px 0 18px;
    font-size: 17px;
    color: var(--pw-muted);
}

    .html-topic-page .topic-page .page-body .pw2-lead strong {
        color: var(--pw-text);
    }

.html-topic-page .topic-page .page-body .pw2-callout {
    margin: 16px 0 18px;
    padding: 18px 22px;
    border-left: 5px solid var(--pw-blue);
    border-radius: var(--pw-radius);
    background: var(--pw-tint);
    text-align: center;
}

    .html-topic-page .topic-page .page-body .pw2-callout strong {
        display: block;
        font-family: var(--pw-display);
        font-size: 30px;
        font-weight: 800;
        letter-spacing: .02em;
        line-height: 1.1;
        color: var(--pw-navy);
    }

    .html-topic-page .topic-page .page-body .pw2-callout span {
        display: block;
        margin-top: 4px;
        font-size: 14px;
        color: #475467;
    }

.html-topic-page .topic-page .page-body .pw2-spec-table {
    width: 100%;
    margin: 8px 0 18px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    overflow: hidden;
    font-size: 14.5px;
}

    .html-topic-page .topic-page .page-body .pw2-spec-table :is(th, td) {
        padding: 12px 14px;
        border-bottom: 1px solid var(--pw-border);
        text-align: left;
        vertical-align: top;
    }

    .html-topic-page .topic-page .page-body .pw2-spec-table tr:last-child td {
        border-bottom: 0;
    }

    .html-topic-page .topic-page .page-body .pw2-spec-table th {
        background: var(--pw-page);
        font-family: var(--pw-display);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #475467;
    }

    .html-topic-page .topic-page .page-body .pw2-spec-table td:first-child {
        width: 30%;
        white-space: nowrap;
    }

.html-topic-page .topic-page .page-body .pw2-contact-note {
    margin-top: 22px;
    padding: 14px 18px;
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-radius);
    background: var(--pw-page);
}

@media (max-width: 600px) {
    .html-topic-page .topic-page .page-body .pw2-spec-table td:first-child {
        white-space: normal;
    }
}

/* image pill set to "Plain text": no box, just the picture and text */
.pw2-imgpill.pw2-imgpill--plain {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* Header AS9120B / ISO 9001 badge: a white chip at the far right of the bar, only where the bar has room for it
   beside a full search box (narrower screens see it in the footer) */
.pw2-iso {
    display: none;
}

@media (min-width: 1536px) {
    .pw2-iso {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: 46px;
        padding: 3px 8px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 8px;
    }

        .pw2-iso img {
            display: block;
            height: 40px;
            width: auto;
        }
}

/* ── DCS-V3: light gray header bar like deutschconnectorstore.com (Joey, 2026-09-26): full-colour logo, dark text
   and icons; orange stays on the search button and accents, the category bar and footer are charcoal ── */
.pw2-bar {
    background: #efefef;
    color: #212529;
    border-bottom: 1px solid #dcdcdc;
}

    .pw2-bar .pw2-burger,
    .pw2-bar .pw2-hlink,
    .pw2-bar .pw2-hlink svg,
    .pw2-bar .ico-cart,
    .pw2-bar .ico-cart svg,
    .pw2-bar .currency-selector,
    .pw2-bar .currency-selector *,
    .pw2-bar .pw2-currency__trigger,
    .pw2-bar .pw2-currency__trigger *,
    .pw2-bar .pw2-cartno,
    .pw2-bar .pw2-cartno * {
        color: #212529 !important;
    }

        .pw2-bar .pw2-hlink__text small {
            color: #5f6670;
        }

    .pw2-bar .pw2-search #small-search-box-form {
        border: 1px solid #d0d5dd;
    }

    .pw2-bar .pw2-search .search-box-button {
        background: var(--pw-blue);
    }

        .pw2-bar .pw2-search .search-box-button:hover {
            background: var(--pw-blue-700);
        }

    .pw2-bar .pw2-iso {
        border: 1px solid #dcdcdc;
    }

/* DCS logo is wider than ProWire's: on phones it gives up the side margin and a little height so the account,
   currency and cart icons stay on the first row */
@media (max-width: 767px) {
    .pw2-logo {
        margin-left: 2vw;
        min-width: 0;
        flex-shrink: 1;
    }

        .pw2-logo img {
            height: auto;
            max-height: 30px;
            max-width: 100%;
        }
}

/* "What's in this kit" (Views/Product/_KitContents.cshtml): a compact grid under the price breaks, one row per
   part with its own price and a small stepper + Add */
.pw2-kit {
    margin: 18px 0 6px;
}

.pw2-kit__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 8px;
}

    .pw2-kit__head h3 {
        margin: 0;
        font-family: var(--pw-display);
        font-size: 18px;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--pw-ink);
    }

    .pw2-kit__head small {
        font-size: 12.5px;
        color: var(--pw-muted);
    }

.pw2-kit__note {
    margin: -2px 0 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #475467;
}

.pw2-kit__wrap {
    border: 1px solid var(--pw-border);
    border-radius: 10px;
    overflow: hidden;
}

    /* long bills of material (more than 7 parts): the list scrolls in its box, headings stay put */
    .pw2-kit__wrap--scroll {
        max-height: 440px;
        overflow: auto; /* both axes: the site's table wrapper (_Root.cshtml) then leaves this table alone, so the headings pin to this box */
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

        .pw2-kit__wrap--scroll .pw2-kit__table thead th {
            position: sticky;
            top: 0;
            z-index: 1;
        }

.pw2-kit__more {
    margin: 6px 2px 0;
    font-size: 12px;
    color: var(--pw-muted);
}

.pw2-kit__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 13px;
}

    .pw2-kit__table th {
        padding: 7px 8px;
        background: #f4f6f8;
        border-bottom: 1px solid var(--pw-border);
        font-size: 11.5px;
        font-weight: 600;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #475467;
        white-space: nowrap;
    }

    .pw2-kit__table td {
        padding: 6px 8px;
        border-bottom: 1px solid #eef0f3;
        vertical-align: middle;
    }

    .pw2-kit__table tbody tr:last-child td {
        border-bottom: 0;
    }

    .pw2-kit__table tbody tr:hover td {
        background: var(--pw-tint);
    }

.pw2-kit__pic {
    width: 44px;
}

    .pw2-kit__pic img {
        display: block;
        width: 36px;
        height: 36px;
        object-fit: contain;
        border-radius: 6px;
        background: #f4f6f8;
        mix-blend-mode: multiply;
    }

.pw2-kit__part {
    min-width: 0;
}

.pw2-kit__sku {
    display: block;
    font-family: var(--pw-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pw-steel) !important;
    text-decoration: none !important;
}

    .pw2-kit__sku:hover {
        text-decoration: underline !important;
    }

.pw2-kit__name {
    display: block;
    font-size: 11.5px;
    color: var(--pw-muted);
    line-height: 1.3;
}

.pw2-kit__qty {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--pw-tint);
    color: var(--pw-blue-700);
    font-size: 12px;
    font-weight: 600;
}

.pw2-kit__price {
    font-weight: 700;
    white-space: nowrap;
}

.pw2-kit__stock {
    display: block;
    font-size: 11px;
    color: var(--pw-green-700);
    white-space: nowrap;
}

.pw2-kit__stock--out {
    color: #b54708;
}

.pw2-kit__buycol {
    text-align: right;
    white-space: nowrap;
}

.pw2-kit__buy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pw2-kit__step {
    display: inline-flex;
    align-items: stretch;
    height: 28px;
    border: 1px solid var(--pw-border-2);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

    .pw2-kit__step button {
        width: 22px;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: #fff;
        color: #344054;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
    }

        .pw2-kit__step button:hover {
            background: #f4f6f8;
        }

    .pw2-kit__step input {
        width: 30px;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-left: 1px solid var(--pw-border-2);
        border-right: 1px solid var(--pw-border-2);
        border-radius: 0;
        text-align: center;
        font-size: 12.5px;
        -moz-appearance: textfield;
    }

        .pw2-kit__step input::-webkit-outer-spin-button,
        .pw2-kit__step input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.pw2-kit__add {
    height: 28px;
    min-width: 0;
    margin: 0;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: var(--pw-blue);
    color: #fff;
    font-family: var(--pw-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

    .pw2-kit__add:hover {
        background: var(--pw-blue-700);
    }

/* narrow columns and phones: tighter cells so a row stays one line of controls */
@media (max-width: 1279px), (max-width: 575px) {
    .pw2-kit__table th,
    .pw2-kit__table td {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width: 575px) {
    .pw2-kit__table th,
    .pw2-kit__table td {
        padding-left: 3px;
        padding-right: 3px;
    }

    .pw2-kit__sku {
        overflow-wrap: anywhere;
    }

    .pw2-kit__pic {
        width: 38px;
    }

        .pw2-kit__pic img {
            width: 30px;
            height: 30px;
        }

    .pw2-kit__step button {
        width: 20px;
    }

    .pw2-kit__step input {
        width: 26px;
    }

    .pw2-kit__add {
        padding: 0 8px;
    }
}

/* Buy box "Genuine components": an expandable summary of the counterfeit-prevention policy (P-831) */
.pw2-genuine {
    margin: 4px 0 0;
}

    .pw2-genuine summary {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--pw-steel);
        cursor: pointer;
        list-style: none;
    }

        .pw2-genuine summary::-webkit-details-marker {
            display: none;
        }

        .pw2-genuine summary::after {
            content: "";
            width: 6px;
            height: 6px;
            margin-left: 2px;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(45deg) translateY(-2px);
            transition: transform .15s ease;
        }

    .pw2-genuine[open] summary::after {
        transform: rotate(-135deg) translateY(-1px);
    }

    .pw2-genuine summary:hover {
        text-decoration: underline;
    }

    .pw2-genuine ul {
        margin: 6px 0 6px;
        padding: 0 0 0 16px;
        list-style: disc;
    }

        .pw2-genuine ul li {
            display: list-item;
            margin: 0 0 4px;
            padding: 0;
            border: 0;
            font-size: 12.5px;
            line-height: 1.4;
        }

    .pw2-genuine p {
        font-size: 12px;
        line-height: 1.4;
        color: #475467;
    }

/* ── Related parts tabs: chips with an icon and a count (Joey picked option D, 2026-09-28). Each tab is a light chip
   with its own outline, so the closed ones read as choices; the open one is tinted with a brand-colour outline. The
   icon and the count badge are added by the script in ProductTemplate.Simple.cshtml (the count is the products in
   that tab). The row scrolls sideways on a phone when the chips don't fit. ── */
.pw2-related.pw2-tabs .nav-tabs,
.pw2-related .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 0 2px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: none;
    border: 0 !important;
}

    .pw2-related .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .pw2-related .nav-tabs .nav-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .pw2-related.pw2-tabs .nav-link,
    .pw2-related .nav-link {
        display: inline-flex !important;
        align-items: center;
        gap: 7px;
        margin: 0 !important;
        padding: 8px 12px !important;
        border: 1px solid var(--pw-border) !important;
        border-radius: 9px !important;
        background: #f8f9fa !important;
        color: #1d2939 !important;
        font-size: 14.5px;
        font-weight: 600;
        white-space: nowrap;
    }

        .pw2-related .nav-link:hover {
            border-color: var(--pw-blue) !important;
        }

        .pw2-related .pw2-tab__icon {
            display: block;
            flex: 0 0 18px;
            width: 18px;
            height: 18px;
            color: #6c757d;
        }

        /* an uploaded tab picture runs larger than the built-in line icons (Joey, 2026-09-28: +20%, then +20% again) */
        .pw2-related .pw2-tab__icon--img {
            flex-basis: 26px;
            width: 26px;
            height: 26px;
            object-fit: contain;
            border-radius: 3px;
        }

        .pw2-related .pw2-tab__count {
            min-width: 20px;
            padding: 1px 7px;
            border-radius: 999px;
            background: var(--pw-green); /* green count badges (Joey, 2026-09-28) */
            color: #fff;
            font-size: 11.5px;
            font-weight: 700;
            line-height: 1.5;
            text-align: center;
        }

        .pw2-related.pw2-tabs .nav-link.active,
        .pw2-related .nav-link.active {
            background: var(--pw-tint) !important;
            border-color: var(--pw-blue) !important;
            color: var(--pw-blue-700) !important;
        }

            .pw2-related .nav-link.active .pw2-tab__icon {
                color: var(--pw-blue);
            }

            .pw2-related .nav-link.active .pw2-tab__count {
                background: var(--pw-green-700);
                color: #fff;
            }

        .pw2-related .nav-link:focus-visible {
            outline: 2px solid var(--pw-blue);
            outline-offset: 1px;
        }

/* Phones: a tab's products swipe left to right in one row instead of stacking down the page (same pattern as the
   home page product rows); each card snaps into place with the next one peeking in */
@media (max-width: 767px) {
    .pw2-related .product-grid .item-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px;
        margin: 0 -16px !important;
        padding: 0 16px 6px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

        .pw2-related .product-grid .item-grid::-webkit-scrollbar {
            display: none;
        }

        .pw2-related .product-grid .item-grid > .item-box {
            flex: 0 0 62% !important;
            width: 62% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            scroll-snap-align: start;
        }
}

/* phones: the buy box moved below the Related parts tabs keeps a little room above it */
@media (max-width: 767px) {
    .pw2-pdp__buy--after-tabs {
        margin-top: 20px;
    }
}

/* phones: the buy controls under the price (mockup C): quantity and Add to cart side by side, Save to BOM full
   width under them */
@media (max-width: 767px) {
    .pw2-mbuy {
        margin: 12px 0 4px;
    }

        .pw2-mbuy .add-to-cart,
        .pw2-mbuy .add-to-cart-panel {
            margin: 0;
        }

        .pw2-mbuy .add-to-cart-panel {
            flex-direction: row !important;
            align-items: stretch;
            gap: 8px;
        }

            .pw2-mbuy .add-to-cart-panel .qty-wrapper {
                flex: 0 0 42%;
                width: 42% !important;
                height: 46px;
            }

                .pw2-mbuy .add-to-cart-panel .qty-btn {
                    flex: 0 0 38px;
                    width: 38px;
                    min-width: 0;
                }

                .pw2-mbuy .add-to-cart-panel .qty-input {
                    flex: 1 1 0;
                    width: 0;
                    min-width: 0;
                }

            .pw2-mbuy .add-to-cart-panel .add-to-cart-button {
                flex: 1 1 auto;
                width: auto;
                min-width: 0;
                height: 46px;
                margin: 0;
                font-size: 16px;
            }

        .pw2-mbuy .pw2-buy__actions {
            margin: 8px 0 0;
        }

            .pw2-mbuy .pw2-buy__actions .pw-bom-btn {
                width: 100%;
            }
}

/* phones: AS9120B / Genuine / Returns as three badges under Save to BOM (mockup A); the buy box's own copies hide */
.pw2-mtrust {
    display: none;
}

@media (max-width: 767px) {
    .pw2-mbuy .pw2-mtrust {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 10px 0 0;
    }

    .pw2-mtrust__badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 58px;
        margin: 0;
        padding: 8px 4px;
        border: 1px solid #cfe8d9;
        border-radius: 10px;
        background: #f4faf6;
        color: #1d2939 !important;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none !important;
        cursor: pointer;
    }

        .pw2-mtrust__badge svg {
            width: 22px;
            height: 22px;
        }

        .pw2-mtrust__badge.is-open {
            border-color: #198754;
            background: #e8f5ee;
        }

    .pw2-mtrust__more {
        margin: 8px 0 0;
        padding: 10px 12px;
        border-radius: 10px;
        background: #f8f9fa;
        font-size: 13px;
        line-height: 1.45;
        color: #344054;
    }

        .pw2-mtrust__more strong {
            color: #000;
        }

        .pw2-mtrust__more ul {
            margin: 6px 0;
            padding-left: 18px;
            list-style: disc;
        }

            .pw2-mtrust__more ul li {
                display: list-item;
                margin: 0 0 4px;
                padding: 0;
                border: 0;
            }

        .pw2-mtrust__more p {
            margin: 0;
            font-size: 12.5px;
        }

    .pw2-buy__trust .pw2-trust--mdup {
        display: none !important;
    }
}

/* phones: stock line and Shipping details under the item number; four trust badges (AS9120B, Security, Genuine,
   Returns); the emptied lower buy box hides */
@media (max-width: 767px) {
    .pw2-mbuy .pw2-mtrust {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

        .pw2-mbuy .pw2-mtrust__badge {
            font-size: 11.5px;
            padding: 8px 2px;
        }

    .pw2-mstock {
        margin: 6px 0 4px;
    }

        .pw2-mstock .availability,
        .pw2-mstock .product-estimate-shipping {
            margin: 0 0 6px;
            padding: 0;
            border: 0;
        }

    .pw2-mtrust__more p {
        margin: 0 0 4px;
    }

    .pw2-pdp__buy.pw2-pdp__buy--memptied {
        display: none !important;
    }
}