/* protrax category contsec banner */
.category-contsec-banner {
    /*padding: 10% 15%;*/
    position: relative;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    /*margin-bottom: 75px;*/
    z-index: 1;
}
.category-contsec-banner:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.7;
    z-index: -1;
}

.d-icon-add:before {
	content: "\3d";
	font-family: "ReadyTheme Icons";
	font-size: 32px;
	height: 37px;
	left: 10px;
	margin-top: 0;
	position: absolute;
	top: 29%;
	width: 40px;
}
.healthWarning {
    border: 1px solid #cecfd1;
    margin: 20px 0;
    padding: 20px 35px;
    display: inline-block;
    text-align: center;

}

.madeinusabach {
    width: 60px;
    height: 60px;
    position: absolute;
    top: -15px;
    left: -10px;
    z-index: 50;
}

#js-SRCH .madeinusabach {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 50;
}

.t-new-products .madeinusabach,
.t-featured-products .madeinusabach {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 5px;
    z-index: 100;
}

.madeinusabach svg {
    width: 100%;
    height: 100%;
}
.x-no-ship {
    color: #e52725;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    border-radius: 3px;
    background-color: #ffcdcc;
}
.x-ship {
    color: green;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    border-radius: 3px;
    background-color: #d7ffbd;
}
.ship {
    font-size: 15px;
}
.no-ship {
    font-size: 15px;
}
.exclamation {
    padding-left: 15px;
    padding-right: 5px;
}
.check {
    padding-left: 15px;
    padding-right: 5px;
}
.icons {
    margin-bottom: -4px;
}
@media screen and (max-width: 420px){
    .no-ship {
        font-size: 13px;
    }
    .exclamation {
        padding-left: 5px;
    }
    .ship {
        font-size: 13px;
    }
    .check {
        padding-left: 5px;
    }
}
@media screen and (max-width: 1018px) and (min-width: 766px){
    .no-ship {
        font-size: 13px;
    }
    .exclamation {
        padding-left: 5px;
    }
}

/* Review form stars (tgr_form). Markup is 5,4,3,2,1 so row-reverse shows them 1..5 and the "~" selectors light up the lower stars. */
/* Lives here and not in main-styles.css: main-styles.css is linked by a fixed path, so branch versions of it are never served. */
.tgr_rating:not(.x-facet-set) {
    display: inline-flex;
    flex-direction: row-reverse;
}

.tgr_rating:not(.x-facet-set) > input {
    display: none;
}

.tgr_rating:not(.x-facet-set) > label {
    font-size: 20px;
    color: #b2b2b2;
    cursor: pointer;
    padding: 0 2px;
}

.tgr_rating:not(.x-facet-set) > input:checked ~ label, .tgr_rating:not(.x-facet-set) > label:hover, .tgr_rating:not(.x-facet-set) > label:hover ~ label {
    color: #FFD700;
}

.tgr_rating:not(.x-facet-set) > input:checked + label:hover, .tgr_rating:not(.x-facet-set) > input:checked ~ label:hover, .tgr_rating:not(.x-facet-set) > label:hover ~ input:checked ~ label, .tgr_rating:not(.x-facet-set) > input:checked ~ label:hover ~ label {
    color: #FFED85;
}

/* === pp-proportion-tighten-2026-11-10 (reversible; remove this block to roll back) === */
/* custom-style loads BEFORE main-styles.css, so these overrides use !important
   to win the cascade. Desktop header+nav was ~248px vs typical 120-140px header
   and Pit Products ~152-159px. Layout and .pp-category-title 24px are preserved. */
html {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

@media (max-width: 59.9em) {
    h1,
    h2 {
        font-size: 27px !important;
    }
}
@media (max-width: 47.9em) {
    h1,
    h2 {
        font-size: 24px !important;
    }
}

.pp-category-intro .pp-category-title,
.pp-category-intro .pp-category-subtitle {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
}

.t-site-header__top-navigation p {
    margin-bottom: 0 !important;
}
.t-site-header__message {
    line-height: 1.3 !important;
}
.t-site-header__top-navigation font {
    font-size: inherit !important;
}

.t-site-header__masthead {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.t-site-header__search-form .c-form-input,
.t-site-header__search-form .c-button {
    height: 44px !important;
}

@media (min-width: 60em) {
    .x-transfigure-navigation .c-navigation__link {
        font-size: 15px !important;
        padding: 12px 16px !important;
    }
}
/* === end pp-proportion-tighten-2026-11-10 === */
/* === pp-wallet-buttons-2026-11-10 (reversible; remove this block to roll back) === */
/* custom-style loads BEFORE main-styles.css, so these overrides use !important.
   Mobile checkout MivaPay wallet buttons: PayPal+Venmo share one SDK iframe
   and cannot be split with CSS. Make Google Pay and Apple Pay the same full
   row width and 48px height, with even gaps. The Apple Pay container is only
   sized when a button is present, so Android/Chrome do not get a blank gap. */
@media (max-width: 767px) {
    #epmivapay-button-container,
    #googlepay-epmivapay-button-container,
    #applepay-epmivapay-button-container {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }
    #epmivapay-button-container,
    #googlepay-epmivapay-button-container {
        margin-bottom: 10px !important;
    }
    #applepay-epmivapay-button-container {
        margin-bottom: 0 !important;
    }
    #googlepay-epmivapay-button-container {
        height: 48px !important;
        min-height: 48px !important;
    }
    #googlepay-epmivapay-button-container .gpay-button-fill,
    #googlepay-epmivapay-button-container .gpay-button,
    #googlepay-epmivapay-button-container button {
        width: 100% !important;
        max-width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
    }
    #applepay-epmivapay-button-container:has(apple-pay-button),
    #applepay-epmivapay-button-container:has(.apple-pay-button),
    #applepay-epmivapay-button-container:has([class*="apple-pay"]) {
        height: 48px !important;
        min-height: 48px !important;
        margin-bottom: 10px !important;
    }
    #applepay-epmivapay-button-container apple-pay-button,
    #applepay-epmivapay-button-container .apple-pay-button,
    #applepay-epmivapay-button-container [class*="apple-pay"] {
        --apple-pay-button-width: 100%;
        --apple-pay-button-height: 48px;
        --apple-pay-button-border-radius: 4px;
        width: 100% !important;
        max-width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        display: block !important;
        box-sizing: border-box !important;
    }
}
/* === end pp-wallet-buttons-2026-11-10 === */

/* === pp-cart-amazon-empty-2026-11-12 (reversible; remove this block to roll back) ===
   Hides the "Have an Amazon account?" heading only when no Amazon Pay button follows it
   (heading immediately followed by br + hr). If an Amazon button ever renders, the heading shows again. */
:is(#js-BASK,#js-OCST,#js-ORDL) hr.c-keyline + p.u-text-bold:has(+ br + hr.c-keyline),
:is(#js-BASK,#js-OCST,#js-ORDL) hr.c-keyline + p.u-text-bold:has(+ br + hr.c-keyline) + br,
:is(#js-BASK,#js-OCST,#js-ORDL) hr.c-keyline + p.u-text-bold:has(+ br + hr.c-keyline) + br + hr.c-keyline {
    display: none !important;
}
/* === end pp-cart-amazon-empty-2026-11-12 === */

/* === pp-bask-shipestimate-button-2026-11-13 (reversible; remove this block to roll back) ===
   The cart-page Estimate Shipping modal uses a plain .c-button, whose default
   background (#c0c0c0 white text) is the same as .c-button:disabled, so Calculate
   looks frozen even though it works. Make Calculate and Recalculate look like
   active Pit Posse red buttons, show a clear Calculating state, and keep rates
   visible in the scrolling modal. */
[data-hook="shipping-estimate-form"] [data-hook="calculate-shipping-estimate"],
[data-hook="shipping-estimate-form"] [data-hook="shipping-estimate-recalculate"] {
    background-color: #e81d25;
    border-color: #e81d25;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
}
[data-hook="shipping-estimate-form"] [data-hook="calculate-shipping-estimate"]:hover,
[data-hook="shipping-estimate-form"] [data-hook="calculate-shipping-estimate"]:focus,
[data-hook="shipping-estimate-form"] [data-hook="shipping-estimate-recalculate"]:hover,
[data-hook="shipping-estimate-form"] [data-hook="shipping-estimate-recalculate"]:focus {
    background-color: #c40810;
    border-color: #c40810;
    color: #fff;
}
[data-hook="shipping-estimate-form"][data-status="processing"] [data-hook="calculate-shipping-estimate"],
[data-hook="shipping-estimate-form"] [data-hook="calculate-shipping-estimate"]:disabled,
[data-hook="shipping-estimate-form"][data-status="processing"] [data-hook="calculate-shipping-estimate"]:hover,
[data-hook="shipping-estimate-form"] [data-hook="calculate-shipping-estimate"]:disabled:hover {
    background-color: #8a8a8a;
    border-color: #8a8a8a;
    color: #fff;
    cursor: wait;
    opacity: 1;
}
.c-mini-modal__element-subject:has([data-hook="shipping-estimate-form"]) {
    overflow: visible;
}
[data-hook="shipping-estimate-results"] {
    margin-top: 0.75rem;
}
[data-hook="shipping-estimate-results"] table {
    width: 100%;
}
/* === end pp-bask-shipestimate-button-2026-11-13 === */

/* === pp-express-layout-2026-11-13 (reversible; remove this block to roll back) ===
   Side-cart panel scrolls on short windows. Checkout / Edit Cart order is in
   the mini-basket template (above the express buttons). Tidy the express
   section on the cart page and in the side cart: even 8px gaps, 48px buttons,
   full-width Apple Pay, compact PayPal message / "Powered by PayPal", and an
   "Or pay with" label. On iOS, Google Pay and Apple Pay sit in one row. */
/* The theme overlay (.x-mini-basket) is already position:fixed; top/bottom:0.
   Do not force height:100vh or scroll the overlay: on iOS 100vh is taller than
   the visible viewport, and the item list is a flex child with overflow-y:auto,
   so a tall footer (Checkout + express buttons) shrinks the list to 0.
   Scroll the drawer (.x-mini-basket__content) as one panel instead. */
#mini_basket_inner.x-mini-basket,
.x-mini-basket[data-hook="mini-basket"] {
    height: auto;
    max-height: none;
    overflow: hidden;
}
.x-mini-basket__content {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
}
.x-mini-basket__content > header,
.x-mini-basket__list,
.x-mini-basket__footer {
    flex: 0 0 auto;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

.x-mini-basket__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 12px;
    width: 100%;
}
.x-mini-basket__cta .c-button {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Compact side-cart estimator results */
.pp-mb-ship__results {
    margin: 0.25rem 0 0.15rem;
    font-size: 0.75rem;
}
.pp-mb-ship__table th,
.pp-mb-ship__table td {
    padding: 0.15rem 0.2rem;
    font-size: 0.75rem;
    line-height: 1.25;
}
.pp-mb-ship__recalc-wrap { margin: 0.2rem 0 0; }
.pp-mb-ship__note { margin: 0.2rem 0 0; font-size: 0.6875rem; }

/* "Or pay with" above express buttons (side cart + cart/checkout pages) */
.pp-mb-express::before,
#js-BASK #epmivapay-button-container::before,
#js-OCST #epmivapay-button-container::before,
#js-ORDL #epmivapay-button-container::before {
    content: "Or pay with";
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 8px;
    line-height: 1.2;
}
.pp-mb-express #epmivapay-button-container::before {
    content: none !important;
    display: none !important;
}

/* Shared express-button tidy: full width, 48px, 8px gaps */
#epmivapay-button-container,
#googlepay-epmivapay-button-container,
#applepay-epmivapay-button-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}
#googlepay-epmivapay-button-container {
    height: 48px !important;
    min-height: 48px !important;
}
#googlepay-epmivapay-button-container .gpay-button-fill,
#googlepay-epmivapay-button-container .gpay-button,
#googlepay-epmivapay-button-container button,
#googlepay-epmivapay-button-container iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
}
#applepay-epmivapay-button-container:has(apple-pay-button),
#applepay-epmivapay-button-container:has(.apple-pay-button),
#applepay-epmivapay-button-container:has([class*="apple-pay"]) {
    height: 48px !important;
    min-height: 48px !important;
}
#applepay-epmivapay-button-container apple-pay-button,
#applepay-epmivapay-button-container .apple-pay-button,
#applepay-epmivapay-button-container [class*="apple-pay"] {
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 48px;
    --apple-pay-button-border-radius: 4px;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Compact PayPal Pay Later message and "Powered by PayPal" */
[data-pp-message],
#epmivapay-credit-container,
.pp-mb-express [data-pp-message] {
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    max-height: 28px;
    overflow: hidden;
}
[data-pp-message] iframe {
    max-height: 24px !important;
}
#epmivapay-button-container [class*="powered"],
#epmivapay-button-container [class*="Powered"],
#epmivapay-button-container .paypal-powered-by,
.pp-mb-express [class*="powered"] {
    margin: 2px 0 6px !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: center;
}
#epmivapay-button-container iframe[title*="PayPal"]:not([title*="Message"]) {
    /* PayPal funding buttons stay in their SDK iframe; do not shrink below usable height */
    max-width: 100% !important;
}

/* iOS: put Google Pay and Apple Pay on one row when both are present */
@supports (-webkit-touch-callout: none) {
    #googlepay-epmivapay-button-container:has(+ #applepay-epmivapay-button-container:has(apple-pay-button, .apple-pay-button, [class*="apple-pay"])),
    #googlepay-epmivapay-button-container + #applepay-epmivapay-button-container:has(apple-pay-button, .apple-pay-button, [class*="apple-pay"]) {
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        display: inline-block !important;
        vertical-align: top !important;
        margin-bottom: 8px !important;
    }
    #googlepay-epmivapay-button-container:has(+ #applepay-epmivapay-button-container:has(apple-pay-button, .apple-pay-button, [class*="apple-pay"])) {
        margin-right: 8px !important;
    }
    #googlepay-epmivapay-button-container + #applepay-epmivapay-button-container:has(apple-pay-button, .apple-pay-button, [class*="apple-pay"]) apple-pay-button,
    #googlepay-epmivapay-button-container + #applepay-epmivapay-button-container:has(apple-pay-button, .apple-pay-button, [class*="apple-pay"]) .apple-pay-button,
    #googlepay-epmivapay-button-container + #applepay-epmivapay-button-container:has(apple-pay-button, .apple-pay-button, [class*="apple-pay"]) [class*="apple-pay"] {
        --apple-pay-button-width: 100%;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}
/* === end pp-express-layout-2026-11-13 === */