/* 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 {
    display: inline-flex;
    flex-direction: row-reverse;
}

.tgr_rating > input {
    display: none;
}

.tgr_rating > label {
    font-size: 20px;
    color: #b2b2b2;
    cursor: pointer;
    padding: 0 2px;
}

.tgr_rating > input:checked ~ label, .tgr_rating > label:hover, .tgr_rating > label:hover ~ label {
    color: #FFD700;
}

.tgr_rating > input:checked + label:hover, .tgr_rating > input:checked ~ label:hover, .tgr_rating > label:hover ~ input:checked ~ label, .tgr_rating > 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 === */