/*
 * Site frame (public refresh, Oct 2026): design tokens, type, the boxed page,
 * the dark top bar (WebSlides menu in views/common/nav.html) and the footer
 * (templates/footer.html.twig).
 *
 * Loaded after style.min.css and overrides it; style.min.css is a gulp build
 * that is not rebuilt here. Design source: docs/design/2026-10-public-refresh.
 */

:root {
    --pp-red: #a32512;
    --pp-red-hover: #8a1f0f;
    --pp-red-link-hover: #7d1c0d;
    --pp-red-on-bar: #d4402a;         /* brand red, lifted to show on the dark bar */
    --pp-tint: #fdf8f7;
    --pp-tint-border: #e3c5c0;
    --pp-bar: #242424;
    --pp-bar-divider: #3a3a3a;
    --pp-bar-outline: #4a4a4a;        /* outlined controls on the top bar */
    --pp-bar-outline-hover: #8a8a8a;
    --pp-bar-control-h: 36px;         /* every right-side top-bar control */
    --pp-page: #ececea;
    --pp-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06);
    --pp-heading: #1a1a1a;
    --pp-text: #2b2b2b;
    --pp-text-2: #4a4a4a;
    --pp-muted: #5c5c5c;
    --pp-line: #e6e6e6;
    --pp-line-2: #ececea;
    --pp-input: #c8c8c8;
    --pp-band: #f6f6f4;
    --pp-panel: #f9f9f7;
    --pp-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pp-radius: 4px;
    --pp-radius-card: 6px;
    --pp-container: 1200px;
    --pp-header-h: 64px;     /* desktop top bar */
    --pp-header-h-m: 60px;   /* WebSlides mobile header */
}

/* ---------- Page & type ---------- */

html, body {
    scroll-padding-top: calc(var(--pp-header-h) + 16px);
}

body {
    background: var(--pp-page);
    color: var(--pp-text);
    font-family: var(--pp-font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pp-font);
    color: var(--pp-heading);
}
h1 { font-size: 32px; line-height: 1.2; font-weight: 300; }
h2 { font-size: 24px; line-height: 1.25; font-weight: 300; }
h3 { font-size: 17px; line-height: 1.35; font-weight: 600; }
h4, h5, h6 { font-weight: 600; }

a { color: var(--pp-red); }
a:hover, a:focus { color: var(--pp-red-link-hover); }

/* The full-window Background Gallery sits behind the page; with it off or
   still loading the page colour shows through. */
#backgroundGallery { background-color: var(--pp-page); }

/* ---------- Boxed page ---------- */

#wrapper {
    width: auto;
    max-width: calc(var(--pp-container) + 48px);
    margin: 0 auto;
    /* The fixed bar is exactly --pp-header-h tall: the boxed page starts
       right under it. */
    padding: var(--pp-header-h) 24px 0;
}

#shadowContainer {
    display: flow-root;   /* contain the views' floats (the footer used to clear them) */
    background: #fff;
    -webkit-box-shadow: var(--pp-shadow);
    box-shadow: var(--pp-shadow);
}

/* ---------- Buttons & focus ---------- */

.btn { border-radius: var(--pp-radius); }

.btn-primary {
    background-color: var(--pp-red);
    border-color: var(--pp-red);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary:active:focus {
    background-color: var(--pp-red-hover);
    border-color: var(--pp-red-hover);
    color: #fff;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: 2px solid var(--pp-red);
    outline-offset: 1px;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.wsmenu a:focus-visible {
    outline: 2px solid var(--pp-red);
    outline-offset: 1px;
}

/* ---------- Top bar (WebSlides menu) ---------- */

#mainNav .headerfull,
#mainNav .wsmenu > .wsmenu-list,
.wsmobileheader {
    background-color: var(--pp-bar);
}

#mainNav .headerfull {
    height: auto;
    box-shadow: none;
}

#mainNav .wsmenu {
    font-family: var(--pp-font);
    border-left: 0;
}

/* WebSlides' red is #d7412e; use the brand red everywhere it shows. */
#mainNav .wsmenu > .wsmenu-list > li > a.active,
#mainNav .wsmenu > .wsmenu-list > li > ul.sub-menu > li:hover > a,
#mainNav .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li:hover > a {
    background-color: var(--pp-red);
    color: #fff;
}
#mainNav .wsmenu > .wsmenu-list > li > .wsshoptabing > .wsshopwp > .wstabitem > li.wsshoplink-active > a {
    border-left-color: var(--pp-red);
}

/* Machines mega menu: "See all <category>" above the subcategory images. */
#mainNav .wstheading a.ws-see-all {
    display: inline-block;
    padding: 4px 0 8px;
    color: var(--pp-red);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
}
#mainNav .wstheading a.ws-see-all:hover { color: var(--pp-red-link-hover); text-decoration: underline; }

/* Section labels inside a dropdown (Site Admin). */
#mainNav .wsmenu > .wsmenu-list > li > ul.sub-menu > li.ws-menu-heading {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-muted);
    cursor: default;
}
#mainNav .wsmenu > .wsmenu-list > li > ul.sub-menu > li.ws-menu-heading ~ li.ws-menu-heading {
    margin-top: 4px;
    border-top: 1px solid var(--pp-line);
}

/* Signed-out links */
#mainNav .wsmenu > .wsmenu-list > li > a.navlink {
    color: #e8e8e8;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
#mainNav .wsmenu > .wsmenu-list > li > a.navlink:hover { color: #fff; }

/* Log in: red button */
#mainNav #login_box > a#logmein {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pp-red);
    color: #fff;
    border-radius: var(--pp-radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
#mainNav #login_box > a#logmein:hover { background: var(--pp-red-hover); }
#mainNav #login_box > a#logmein i { color: #fff; }

/* Language & currency */
#translate_box > a,
#currency_box > a {
    color: #e8e8e8;
    cursor: pointer;
}
/* The language's short code; shown only in the full signed-in desktop bar. */
#translate_box .lang_code { display: none; }

@media only screen and (min-width: 992px) {
    #mainNav .wsmain {
        width: 100%;
        max-width: var(--pp-container);
        padding: 0 24px;
        float: none;
        margin: 0 auto;
    }

    /* One flex row: logo + menus on the left; search, login-as, cart,
       language, currency and log in/out on the right. */
    #mainNav .wsmenu { width: 100%; float: none; }
    /* Top-level items stretch to the full bar height so each one's hover box
       reaches the bar's bottom edge, where its menu opens (see below). */
    #mainNav .wsmenu > .wsmenu-list {
        display: flex;
        align-items: stretch;
        height: var(--pp-header-h);
        column-gap: 2px;
    }
    #mainNav .wsmenu > .wsmenu-list::before {   /* spacer between the two groups */
        content: "";
        display: block;
        order: 5;
        flex: 1 1 0;
    }
    #mainNav .wsmenu > .wsmenu-list > li {
        float: none;
        display: flex;
        align-items: center;
    }
    #mainNav .wsmenu > .wsmenu-list > li.hoverless { display: contents; }
    #mainNav .wsmenu > .wsmenu-list > li.hoverless > .clearfix { display: none; }
    #mainNav .wsmenu > .wsmenu-list > li.ws-search  { order: 10; }
    #mainNav .wsmenu > .wsmenu-list > li.ws-loginas { order: 11; }
    #mainNav .wsmenu > .wsmenu-list > li.ws-cart    { order: 12; }
    #mainNav #currency_box                          { order: 13; }
    #mainNav #translate_box                         { order: 14; }
    #mainNav .wsmenu > .wsmenu-list > li#login_box  { order: 15; }

    #menu-logo {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        align-self: center;
        margin: 0 16px 0 0;
    }
    #menu-logo img {
        height: 40px;
        width: auto;
        display: block;
        border-radius: 3px;
    }

    /* Menus open flush with the bottom of the bar, which is also the bottom
       of every (stretched) top-level item: no gap for the pointer to fall
       through on its way down, which used to close the :hover menus.
       fade-down.css also swings them in from rotateX(-75deg) over .3s; while
       folded they are a quarter of their height, so a quick pointer missed
       them. Fade only. */
    #mainNav .wsmenu > .wsmenu-list > li > ul.sub-menu,
    #mainNav .wsmenu > .wsmenu-list > li > .wsshoptabing,
    #mainNav .wsmenu > .wsmenu-list > li > .wsmegamenu {
        top: 100%;
        margin-top: 0;
        -webkit-transform: none;
        transform: none;
        /* Closing lingers .3s (fade after .15s, then hidden), so a pointer
           cutting diagonally across the bar outside the trigger - e.g. down
           to the Machines mega-menu's category column, which starts left of
           its trigger - reaches the menu before it goes. */
        -webkit-transition: opacity .15s ease .15s, visibility 0s linear .3s;
        transition: opacity .15s ease .15s, visibility 0s linear .3s;
    }
    #mainNav .wsmenu > .wsmenu-list > li:hover > ul.sub-menu,
    #mainNav .wsmenu > .wsmenu-list > li:hover > .wsshoptabing,
    #mainNav .wsmenu > .wsmenu-list > li:hover > .wsmegamenu {
        -webkit-transition: opacity .15s ease, visibility 0s;
        transition: opacity .15s ease, visibility 0s;
        z-index: 1001;   /* above a sibling's lingering menu */
    }
    /* ...but once the pointer is on another top-level item, the others
       close at once (a lingering mega-menu under the pointer would win the
       hover back). */
    #mainNav .wsmenu > .wsmenu-list:has(> li:not(.hoverless):hover) > li:not(:hover) > ul.sub-menu,
    #mainNav .wsmenu > .wsmenu-list:has(> li:not(.hoverless):hover) > li:not(:hover) > .wsshoptabing,
    #mainNav .wsmenu > .wsmenu-list:has(> li:not(.hoverless):hover) > li:not(:hover) > .wsmegamenu {
        -webkit-transition: none;
        transition: none;
    }

    /* Logged-in two-line items ("Shop For / Machines") */
    #mainNav .wsmenu > .wsmenu-list > li > .navtext {
        padding: 10px 8px;
        border-radius: var(--pp-radius);
    }
    #mainNav .wsmenu > .wsmenu-list > li:hover > a {
        background-color: var(--pp-bar-divider);
    }
    #mainNav .wsmenu > .wsmenu-list > li:hover > a.navtext i { color: #fff; }

    #mainNav .wsmenu > .wsmenu-list > li > a.navlink {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 12px;
        background: none;
    }

    #mainNav .wsmenu > .wsmenu-list > li.wsmenuitem > a {
        line-height: 44px;
        padding: 0 10px;
        border-radius: var(--pp-radius);
    }

    /* ---- Right-side cluster: search, Login As, cart, currency, language,
       log in/out. One family of --pp-bar-control-h outlined controls,
       centred on the bar, 8px apart (6px margin + the list's 2px gap). ---- */
    #mainNav .wsmenu > .wsmenu-list > li.ws-loginas,
    #mainNav .wsmenu > .wsmenu-list > li.ws-cart,
    #mainNav .wsmenu > .wsmenu-list > li#login_box,
    #translate_box, #currency_box {
        margin: 0 0 0 6px;
    }
    #translate_box, #currency_box {
        float: none;
        align-self: center;
    }
    #mainNav .ws-search-toggle,
    #mainNav .ws-loginas #login_as input,
    #mainNav .wsmenu > .wsmenu-list > li.ws-cart > a,
    #translate_box > a,
    #currency_box > a,
    #mainNav #login_box > a#logmeout {
        box-sizing: border-box;
        height: var(--pp-bar-control-h);
        border: 1px solid var(--pp-bar-outline);
        border-radius: var(--pp-radius);
        background: none;
        color: #e8e8e8;
        font-size: 14px;
        line-height: normal;
    }
    #mainNav .ws-search-toggle:hover,
    #mainNav .ws-search-open .ws-search-toggle,
    #mainNav .ws-loginas #login_as input:focus,
    #translate_box > a:hover,
    #currency_box > a:hover,
    #mainNav .wsmenu > .wsmenu-list > li#login_box:hover > a#logmeout {
        border-color: var(--pp-bar-outline-hover);
        background: none;
        color: #fff;
    }
    /* Icon-only controls are square. */
    #mainNav .wsmenu > .wsmenu-list > li.ws-cart > a,
    #mainNav #login_box > a#logmeout {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--pp-bar-control-h);
        padding: 0;
    }
    /* Cart: the same square, filled red (WebSlides' a.active). */
    #mainNav .wsmenu > .wsmenu-list > li.ws-cart > a {
        border-color: var(--pp-red);
        background-color: var(--pp-red);
        color: #fff;
    }
    #mainNav .wsmenu > .wsmenu-list > li.ws-cart:hover > a {
        border-color: var(--pp-red-hover);
        background-color: var(--pp-red-hover);
    }
    #mainNav .wsmenu > .wsmenu-list > li.ws-cart > a > i,
    #mainNav #login_box > a#logmeout > i { line-height: 1; font-size: 15px; color: inherit; }

    #mainNav #login_box > a#logmein {
        height: var(--pp-bar-control-h);
        line-height: var(--pp-bar-control-h);
        padding: 0 16px;
    }

    #translate_box > a,
    #currency_box > a {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 10px;
        white-space: nowrap;
        text-decoration: none;
    }
    #translate_box > .dropdown-menu,
    #currency_box > .dropdown-menu { right: 0; left: auto; }

    #login_as_box { padding-right: 0; }
    #login_as { width: 150px; }
    #mainNav .ws-loginas #login_as input {
        display: block;
        width: 100%;
        padding: 0 10px;
        box-shadow: none;
    }
    #mainNav .ws-loginas #login_as input::placeholder {
        color: #9e9e9e;
        font-weight: 400;
    }
    #mainNav .wsmenu > .wsmenu-list > li.ws-search,
    #mainNav .wsmenu > .wsmenu-list > li.ws-loginas { flex-shrink: 0; }

    /* Machine Search: an icon button; the input opens in place over the bar
       to its left (directives.js navSearchToggle), so the row never reflows. */
    #mainNav .wsmenu > .wsmenu-list > li.ws-search { position: relative; }
    #mainNav .ws-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--pp-bar-control-h);
        padding: 0;
        font-size: 15px;
        cursor: pointer;
    }
    #mainNav .ws-search #part_search_box {
        display: none;
        position: absolute;
        top: 50%;
        right: 100%;
        width: 260px;
        margin: 0 4px 0 0;
        padding: 0;
        float: none;
        transform: translateY(-50%);
        z-index: 3;
    }
    #mainNav .ws-search.ws-search-open #part_search_box { display: block; }
    #mainNav .ws-search #part_search_box input { box-shadow: 0 2px 10px rgba(0,0,0,.35); }
    /* Signed in (currency shown) the bar is full: language as icon + code. */
    #mainNav li.hoverless:has(#currency_box:not(.ng-hide)) #translate_box .max_lang { display: none; }
    #mainNav li.hoverless:has(#currency_box:not(.ng-hide)) #translate_box .lang_code { display: inline; }
    /* The impersonated customer's name sits just above the Login As input,
       out of flow, so the input centres on the row like every other control. */
    #mainNav .wsmenu > .wsmenu-list > li.ws-loginas { position: relative; }
    #mainNav .ws-loginas .user {
        position: absolute;
        bottom: calc(50% + 17px);
        left: 0;
        right: 0;
        font-size: 11px;
        color: #9e9e9e;
        line-height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Acting as a customer: the name is bright and the input outlined red,
       so the state is hard to miss. */
    #mainNav .ws-loginas #login_as_box.ws-acting .user { color: #fff; font-weight: 600; }
    #mainNav .ws-loginas #login_as_box.ws-acting #login_as input { border-color: var(--pp-red-on-bar); }

    /* The menu holding the current page: a red underline on its trigger. */
    #mainNav .wsmenu > .wsmenu-list > li.ws-current > a.navtext {
        box-shadow: inset 0 -2px 0 var(--pp-red-on-bar);
    }

    #mainNav .ws-drawer-label { display: none; }
}

/* Below a full 1200px bar the signed-in menus are crowded: tighten them. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #mainNav .wsmain { padding: 0 12px; }
    #menu-logo { margin-right: 8px; }
    #menu-logo img { height: 30px; }
    #login_as { width: 96px; }
    #mainNav .wsmenu > .wsmenu-list > li > .navtext { padding: 12px 4px; }
    #mainNav .wsmenu > .wsmenu-list > li.wsmenuitem > a { padding: 0 8px; }
    #translate_box > a, #currency_box > a { padding: 0 6px; }
}

/* ---------- Quote bar (views/quoteBar.html: cart and checkout headers) ---------- */

/* Name box takes the room; the Save buttons stay together on one line and
   drop under the box as a pair only when the row is too narrow. */
#quoteBar .quote-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
#quoteBar .quote-bar > .form-group { margin-bottom: 0; }
#quoteBar .quote-bar-name { flex: 1 1 200px; min-width: 0; }
#quoteBar .quote-bar-actions { flex: 0 0 auto; display: flex; gap: 8px; }

/* ---------- Mobile (WebSlides drawer) ---------- */

@media only screen and (max-width: 991px) {
    #wrapper { padding: var(--pp-header-h-m) 0 0; }
    html, body { scroll-padding-top: calc(var(--pp-header-h-m) + 16px); }

    .wsmobileheader > .smllogo img { border-radius: 3px; }
    #mainNav .ws-search-toggle { display: none; }   /* the drawer shows the input */

    /* Drawer order: language/currency, then Search and Cart (the things
       reached for most), the menus, and Log out last. */
    #mainNav .wsmenu > .wsmenu-list { display: flex; flex-direction: column; }
    #mainNav .wsmenu > .wsmenu-list > li.hoverless   { order: -3; }
    #mainNav .wsmenu > .wsmenu-list > li.ws-search   { order: -2; }
    #mainNav .wsmenu > .wsmenu-list > li.ws-cart     { order: -1; }
    #mainNav .wsmenu > .wsmenu-list > li#login_box   { order: 99; }
    #mainNav .ws-search #part_search_box { float: none; width: auto; padding: 8px 16px; }
    #mainNav .ws-search #part_search_box input { width: 100%; }

    /* The drawer draws its own expand arrow; drop the label's chevron. */
    #mainNav .wsmenu > .wsmenu-list > li > a.navtext .fa-chevron-down { display: none; }

    #mainNav .wsmenu > .wsmenu-list > li.ws-current > a.navtext {
        box-shadow: inset 3px 0 0 var(--pp-red-on-bar);
    }
    #mainNav #login_box > a#logmeout .ws-drawer-label { margin-left: 10px; }

    #nav_login_as_box.ws-acting .user { color: #fff; font-weight: 600; }
    #nav_login_as_box.ws-acting #login_as input { border-color: var(--pp-red-on-bar); }
    #mainNav #login_box > a#logmein {
        margin: 12px 16px;
        padding: 0 16px;
        line-height: 44px;
        justify-content: center;
    }
}

@media (max-width: 700px) {
    /* style.css padded the page 75px to clear the fixed header when the
       banner was hidden; #wrapper clears it now. */
    #page-wrapper { padding: 24px 16px; }
}

/* ---------- Footer ---------- */

#site-footer {
    margin-top: 48px;
    background: var(--pp-bar);
    color: #c9c9c9;
    font-size: 14px;
    /* Above the fixed Background Gallery (z-index 0) but below #wrapper
       (z-index 10), which holds modals such as SweetAlert's. */
    position: relative;
    z-index: 1;
}
#site-footer a { color: #c9c9c9; text-decoration: none; }
#site-footer a:hover, #site-footer a:focus { color: #fff; }

#site-footer .site-footer-cols {
    max-width: var(--pp-container);
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}
#site-footer .site-footer-brand,
#site-footer nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#site-footer .site-footer-brand { gap: 14px; }
#site-footer nav { gap: 10px; }
#site-footer .site-footer-brand p { margin: 0; line-height: 1.55; }
#site-footer .site-footer-brand img { width: 94px; height: 40px; display: block; }
#site-footer a.site-footer-phone { font-size: 20px; font-weight: 600; color: #fff; }
#site-footer h3 {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    border: 0;
}
#site-footer nav a { word-break: break-word; }

#site-footer .site-footer-legal { border-top: 1px solid var(--pp-bar-divider); }
#site-footer .site-footer-legal > div {
    max-width: var(--pp-container);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #a8a8a8;
}

@media print {
    #site-footer { display: none; }
}