/* Minification failed. Returning unminified contents.
(637,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(638,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(639,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(640,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(641,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(642,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(652,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(659,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(667,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(673,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(674,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(675,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(679,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(684,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(688,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(697,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(717,17): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(763,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(783,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(784,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(796,28): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(803,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-muted'
(809,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(822,67): run-time error CSS1039: Token not allowed after unary operator: '-kw-muted'
(823,58): run-time error CSS1039: Token not allowed after unary operator: '-kw-muted'
(824,62): run-time error CSS1039: Token not allowed after unary operator: '-kw-muted'
(825,57): run-time error CSS1039: Token not allowed after unary operator: '-kw-muted'
(830,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(834,30): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(848,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(867,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(877,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(901,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(916,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(920,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1010,17): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1022,17): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1033,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1041,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1069,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1070,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1087,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1107,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1119,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-muted'
(1127,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1141,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1158,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(1159,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1173,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1177,27): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1190,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1191,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(1204,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1209,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1210,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1233,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(1238,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1239,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1243,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1244,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1272,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1313,17): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1314,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1324,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1346,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1351,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1360,17): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1383,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1402,11): run-time error CSS1030: Expected identifier, found '.'
(1402,28): run-time error CSS1031: Expected selector, found ')'
(1402,28): run-time error CSS1025: Expected comma or open brace, found ')'
(1410,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1433,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1470,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1489,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1502,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1529,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1558,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1562,30): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1575,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1653,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1663,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1668,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1723,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(1730,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1735,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1752,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1782,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1783,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1795,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1803,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1817,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(1829,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(1830,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(1838,28): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1839,24): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1843,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1844,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1861,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1862,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(1898,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(1908,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1913,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(1918,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2001,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2007,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2031,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2036,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2047,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2053,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-muted'
(2057,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2067,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2073,14): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2078,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(2084,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2096,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2097,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2106,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2107,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2115,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2116,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2120,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2137,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2141,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2145,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2146,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2151,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2152,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2161,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2164,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2177,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(2217,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2224,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2238,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2252,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2282,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2289,32): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2290,35): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2302,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-muted'
(2320,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2331,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2332,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2341,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2342,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2353,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2404,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2439,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2484,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-muted'
(2502,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2503,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2515,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2516,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2525,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2526,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2565,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2576,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2588,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2593,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2603,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2604,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2605,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2613,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2614,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2615,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2626,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2627,33): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(2636,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2643,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2652,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2653,30): run-time error CSS1039: Token not allowed after unary operator: '-kw-border'
(2658,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2659,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2660,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2668,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2669,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2670,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2688,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2699,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2707,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-black'
(2713,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2723,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2724,26): run-time error CSS1039: Token not allowed after unary operator: '-kw-red-dark'
(2725,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
(2733,20): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2734,22): run-time error CSS1039: Token not allowed after unary operator: '-kw-red'
(2735,15): run-time error CSS1039: Token not allowed after unary operator: '-kw-white'
 */
body {
    font-family: "Lato", "Helvetica Neu", Arial, Helvetica, sans-serif;
}

.main {
    padding-bottom:5px;
}


/* Header */
.delivery-msg {
    position: absolute;
    width: 100%;
    left: 0;
    top: 18px;
    text-align: center;
    margin: 0 auto;
    z-index: 1000;
}

    .delivery-msg a {
        color: #fff;
    }

        .delivery-msg a:hover {
            color: #fff;
        }

.search-area {
    margin: 8px;
    border-bottom: 1px solid #fff;
    padding: 7px 0;
    position: relative;
    z-index: 2000;
}

.search-area .fa-search {
    color: #fff;
    margin-right: 2px;
}

.search-area input {
    background-color: transparent;
    border: 0;
    color: #fff;
    font-size: 10pt;
    padding-left: 2px;
    width: 162px;
}

.search-area input:focus {
    outline: none;
}

.search-area ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #fff;
}
.search-area ::-moz-placeholder { /* Firefox 19+ */
    color: #fff;
}
.search-area :-ms-input-placeholder { /* IE 10+ */
    color: #fff;
}
.search-area :-moz-placeholder { /* Firefox 18- */
    color: #fff;
}

.shopping-cart {
    float: right;
    margin: 5px 0 0 35px;
    position: relative;
    z-index: 2000;
}

.shopping-cart a:hover, .shopping-cart a:focus {
    text-decoration: none;
}

.shopping-cart span {
    display: table;
    margin: -29px auto;
    font-weight: bold;
    font-size: 1.1em;
    color: #e2383f;
}

.social-icons {
    padding: 15px 20px 10px 0;
    position:relative;
    z-index:2000;
}

.social-icons a {
    margin-right: 8px;
}

    .social-icons a img {
        width: 30px;
    }

#subNavMobile nav {
    background: #fff;
    border-left: 1px outset darkgray;
}

.sub-menu {
    color: #000;
}

.sub-menu #nav-close {
    font-size: 1em !important;
    font-weight: 600 !important;
}

.sub-menu li a {
    color: #000;
}

.sub-menu li a:hover {
    color: #000;
}

.sub-menu .btn-primary {
    background-color: #e2383f;
    border-color: #bd2f35;
}

.sub-menu .btn {
    border-radius: 0;
}

.top-nav {
    font-weight: bold;
    margin-bottom: 15px;
    background-color: white;
    padding-top: 16px;
    padding-bottom: 16px
}

.rnd-link {
    background-color:transparent;
    color: #000;
    margin-right: 10px;
    border: 2px solid #e2383f;
    border-radius:18px;
    padding:5px;
    display:inline-block;
    width:120px;
    text-align:center;
}

    .rnd-link:hover, .rnd-link:focus, .rnd-link:active, .rnd-link.active {
        color: #fff;
        background-color: #e2383f;
        text-decoration: none;
    }

/* Views */
.banners {
    margin:0 auto 40px;
    width:100%;
}

.ken-gen [class*='col-'] {
    padding: 40px;
}

    .ken-gen [class*='col-']:first-child {
        border-right: 2px solid #d4d5d5;
    }

.paccar-links {
    text-align:center;
    margin-top:20px;
}

.paccar-links a {
    margin:0 15px;
}

.groupbuy-outer {
    padding: 8px 15px 8px 0;
}

.breadcrumb {
    /*background-color:#fff;*/
    background-color:transparent;
    /*color:#fff;*/
    /*text-transform:uppercase;*/
    padding-left:0;
    margin-bottom:0;
}

.breadcrumb a {
    color:#000;
    font-weight:normal;
}

    .breadcrumb > .active {
        color: #e2383f;
        font-weight: bold;
    }



/*.list-group-heading:first-child {
    border-top: 5px solid #e7e8e9;
}*/

.list-group-item:first-child {
     border-top-left-radius: 0; 
     border-top-right-radius: 0; 
}

.list-group-item:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

a.list-group-item, button.list-group-item {
    color: #000;
}

.list-group-heading {
    /*background-color: transparent !important;*/
    background-color: #dbdbdb;
}

.list-group-heading:hover {
    background-color: transparent !important;
    color: #e2383f;
}

.list-group-item {
    border: none;
    /*border-top:1px solid #e7e8e9;*/
    text-transform: uppercase;
    font-weight: bold;
}

a.list-group-item:hover {
    /*color: #e2383f;*/
    color: #fff;
    background-color: #e2383f !important;
}

.list-group a.selected {
    /*color: #e2383f;*/
    color: #fff;
    background-color: #e2383f !important;
}

.list-group-item .fa {
    display:none;
}

.cat-back-panel {
    background-image: url('/Areas/KENWORTH/Content/Images/cat-bg-115.jpg');
    background-repeat:no-repeat;
    padding-top: 15px;
}

    .cat-back-panel .breadcrumb a {
        color: #fff;
    }

.cat-accordion {
    background-color:#fff;
    padding:50px 0 0;
}

.categories-replace {
    margin-top:10px;
}

.catdiv {
    padding: 8px;
}

.catheader {
    display:none;
}

.cat-header {
    color:#fff;
    font-size:3em;
}

.catbody {
    border: none;
}

.sort-order {
    color:#fff;
}

.prod_det_col2 {
    background-color: transparent;
}

.PageHeading, .SubHeading {
    color: #e2383f;
    text-transform:uppercase;
}

.panel-heading {
    background-color: #e2383f !important;
    color:#fff !important;
}

.zsbtn {
    background-color: #e2383f;
    border-color: #e2383f;
    border-radius:0; 
}

.zsbtn:hover {
    background-color: #e2383f;
}

.proddiv {
    width:200px;
}

.prodname {
    text-align: left;
    font-size: 125%;
}

.prodname .price
{
    color:#e2383f;
    margin-top:10px;
}

.prodname .name
{
    padding:0px;
    color:#000;
}

.proddiv .prodimg {
    background-color: #f0f0f0;
}

.sub-menu .cart-item {
    border-bottom:1px solid #ddd;
}

.cart-item-itemtotal {
    color:#e2383f;
    font-weight:bold;
    font-size:11pt;
}

.cart-item-qty {
    font-size: 11pt;
    font-weight: bold;
}

.out-of-stock {
    text-transform:uppercase;
}

#subNavMobile nav {
    border-left: 1px outset #eee;
}

.btn-primary, .zsbtn, .panel-title {
    text-transform:uppercase;
    font-weight:bold;
}

    .btn-primary:active:focus {
        background-color: #e2383f;
        border-color: #e2383f;
    }

.item-controls .fa-trash {
    color:#e2383f;
}

.PageHeading {
    /*font-family:Impact,Arial;
    font-size:26pt;*/
    font-size:20pt;
}

.editshoppingcart {
    width:200px;
}

.subtotal {
    text-transform:uppercase;
    font-weight:bold;
}

.subtotal .pull-right {
    color:#e2383f;
}

/* Footer */
.find-dealer {
    background-image: url('/Areas/KENWORTH/Content/Images/bg-poly-black.png');
    color: #fff;
}

    .find-dealer [class*='col-'] {
        padding: 40px;
    }

    .find-dealer .rnd-link {
        color:#fff;
    }

    .find-dealer img {
        border: 10px solid #040707;
        border-radius:50px;
    }

footer {
    background-color: #040707;
    box-shadow: 0px 500px 0px 500px #040707;
    min-height: 50px;
    padding: 20px;
    color: #fff;
}

.footer-link {
    text-align:right;
}

.footer-link a {
    color: #fff;
    font-size: 85%;
    margin-left:8px;
}

.footer-link a:hover {
    color: #fff;
    text-decoration: none;
}


/* Bootstrap overrides */
.navbar-fixed-top .navbar {
    border-radius:0;
}

.navbar-default {
    background-color: #e2383f;
    border-color: #e2383f;
}

.navbar-brand {
    height: auto;
    margin-left:0 !important;
    padding: 15px 0;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-size: 10pt;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    margin-right: 5px;
    margin-bottom: 0;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-toggle .icon-bar {
    width: 24px;
    height: 4px;
    background-color: #fff !important;
}

.navbar-collapse li {
    border-bottom: 1px solid #bd2f35;
}

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}

    .row.display-flex > [class*='col-'] {
        flex-grow: 1;
    }


/* Different screen sizes */
@media (max-width:1000px) {
    .top-nav .col-sm-9 a {
        font-size: .8em;
        width: 90px;
    }

    footer {
        font-size:85%;  
    }
}

@media (max-width: 767px) {
    .navbar-brand {
        padding: 12px;
    }

    .banners {
        margin-bottom:0;
    }
    
    .shopping-cart {
        float: right;
        margin: 4px 12px 0 0;
    }

    .shopping-cart img {
        max-height: 40px;
    }

    .shopping-cart span {
        margin: -26px auto;
        font-size: 1em;
    }

    .search-area {
        margin: 0 15px;
        border-bottom: none;
        padding: 3px 0;
    }

    .social-icons {
        padding: 10px 0 0 0;
        text-align: center;
        border-top: 1px solid #bd2f35;
    }

    .ken-gen {
        margin:0 20px;
    }

        .ken-gen [class*='col-'] {
            padding: 20px;
        }

            .ken-gen [class*='col-']:first-child {
                border-right: none;
                border-bottom: 2px solid #d4d5d5;
            }

    .paccar-links img {
        max-width:60px;
    }

    .cat-back-panel {
        background-image: none;
        padding-top: 0;
    }

        .cat-back-panel .breadcrumb a {
            color: #000;
        }

    .cat-accordion {
        background-color: unset;
        padding: 0 15px;
    }

    .cat-header {
        display:none;
    }

    .sort-order {
        color:#000;
    }

    footer {
        text-align: center;
        padding:10px 0;
        font-size: 85%;
    }

    .footer-link {
        text-align:center;
    }

    .footer-link a {
        color: #fff;        
        margin-left:5px;
    }
}

@media (max-width: 320px) { /* iPhone 5 */
    .paccar-links img {
        max-width:48px;
    }

    footer {
        text-align: center;
        padding:10px 0;
        font-size: 72%;
    }
}

.progress-bar {
    background-color: #e2383f;
}

.modal-header {
    background-color: #fff;
    font-weight: bold !important;
    font-size: 24pt;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    color: black;
    font-family: 'Open Sans', sans-serif;
}

#ModalLoading .modal-header h2.h2white {
    font-weight: bold !important;
}

/* ==========================================================================
   KENWORTH — Redesign overrides
   Loads on top of Site.css via the area's wildcard CSS bundle. Every rule
   below either targets a brand-new "kw2-" class, or combines an existing
   class with its "kw2-" companion class so it wins over Site.css regardless
   of bundle file order. Site.css itself is intentionally left untouched.
   ========================================================================== */

:root {
    --kw-red: #D92027;
    --kw-red-dark: #D92027;
    --kw-black: #1a1a1a;
    --kw-white: #ffffff;
    --kw-border: #e5e5e5;
    --kw-muted: #6b6b6b;
}

/* ---------- Announcement bar ---------- */
.delivery-msg.kw2-announcement {
  position: static;
  width: 100%;
  top: auto;
  left: auto;
  z-index: 5;
  background: var(--kw-red);
  padding: 8px 16px;
  text-align: center;
  margin: 0;
}

.delivery-msg.kw2-announcement a {
  color: var(--kw-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.delivery-msg.kw2-announcement a:hover {
  color: var(--kw-white);
  text-decoration: underline;
}

/* ---------- Header / nav bar ---------- */
.navbar-default.kw2-navbar {
  background-color: var(--kw-white);
  border-color: var(--kw-border);
  border-bottom: 1px solid var(--kw-border);
}

.navbar-default.kw2-navbar .navbar-nav > li > a {
  color: var(--kw-black);
}

.navbar-default.kw2-navbar .navbar-nav > li > a:hover,
.navbar-default.kw2-navbar .navbar-nav > li > a:focus {
  color: var(--kw-red);
}

.navbar-toggle.kw2-nav-toggle .icon-bar {
  background-color: var(--kw-black) !important;
}

.navbar-toggle.kw2-nav-toggle:hover,
.navbar-toggle.kw2-nav-toggle:focus {
  background-color: transparent;
}

.navbar-collapse.kw2-navbar-collapse li {
  border-bottom: 1px solid var(--kw-border);
}

/* Header row layout: logo | search | cart | toggle, all in one line */
.navbar-header.kw2-navbar-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 28px;
}

.navbar-header.kw2-navbar-header .navbar-brand.kw2-logo {
  float: none;
  margin: 0 auto 0 0 !important;
  order: 1;
}
.alert-alert-info.KW2 {
    border-color: transparent!important;
    background-color: transparent!important;
    color: var(--kw-black)!important;
}

.navbar-header.kw2-navbar-header .search-area.kw2-search {
    float: none;
    order: 2;
    flex: 1 1 260px;
    max-width: 360px;
    margin: 0;
}

.navbar-header.kw2-navbar-header .shopping-cart.kw2-cart-btn {
  float: none;
  margin: 0;
  order: 3;
  display: flex;
  align-items: center;
}

.navbar-header.kw2-navbar-header .navbar-toggle.kw2-nav-toggle {
  float: none;
  margin: 0;
  order: 4;
}

/* Logo */
.navbar-brand.kw2-logo {
  padding: 10px 0;
}

.navbar-brand.kw2-logo img,
.navbar-brand.kw2-logo svg {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

.hide-md.navbar-brand.kw2-logo img,
.hide-md.navbar-brand.kw2-logo svg {
  height: 46px;
}

/* Cart icon */
.shopping-cart.kw2-cart-btn a.nav-expander-cart {
  display: inline-flex;
  align-items: center;
  color: var(--kw-black);
  text-decoration: none;
}

.kw2-cart-icon {
  position: relative;
  display: inline-flex;
}

.shopping-cart.kw2-cart-btn .kw2-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--kw-red);
  color: var(--kw-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Search box */
.search-area.kw2-search {
    display: flex;
    align-items: center;
    gap: 8px;
    /*  background: #f5f5f5;*/
    border: 1px solid var(--kw-black);
    padding: 8px 14px;
    margin: 8px;
    max-width: 320px;
}

.search-area.kw2-search .fa-search {
  color: var(--kw-muted);
  margin: 0;
}

.search-area.kw2-search input {
  background: transparent;
  color: var(--kw-black);
  border: 0;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  width: auto;
  padding-left: 0;
}

.search-area.kw2-search input:focus {
  outline: none;
}

.search-area.kw2-search ::-webkit-input-placeholder { color: var(--kw-muted); }
.search-area.kw2-search ::-moz-placeholder { color: var(--kw-muted); }
.search-area.kw2-search :-ms-input-placeholder { color: var(--kw-muted); }
.search-area.kw2-search :-moz-placeholder { color: var(--kw-muted); }

/* Desktop category row (below the main header) — the header itself has no
   social icons, matching the supplied design; social links live in the footer. */
.top-nav.kw2-toprow {
  background: var(--kw-white);
  font-weight: 400;
  padding: 14px 0;
  margin-bottom: 0;
  border-top: 1px solid var(--kw-border);
}

.kw2-toprow__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 38px;
}

.rnd-link.kw2-nav__link {
  background: transparent;
  border: none;
  color: var(--kw-black);
  width: auto;
  padding: 4px 2px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  margin-right: 0;
  text-align: left;
  position: relative;
}

.rnd-link.kw2-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--kw-red);
  transform: scaleX(0);
  transition: transform 0.15s ease;
}

.rnd-link.kw2-nav__link:hover,
.rnd-link.kw2-nav__link:focus,
.rnd-link.kw2-nav__link:active,
.rnd-link.kw2-nav__link.active {
  background: transparent;
  color: var(--kw-red);
  text-decoration: none;
}

.rnd-link.kw2-nav__link:hover::after,
.rnd-link.kw2-nav__link.active::after {
  transform: scaleX(1);
}

/* Desktop menu / submenu dropdown */
.kw2-nav-item {
  position: relative;
}

.kw2-nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 0;
  min-width: 140px;
  list-style: none;
  background: var(--kw-white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  z-index: 20;
  text-align: center;
}

.kw2-nav-item.kw2-has-sub:hover .kw2-nav__submenu {
  display: block;
}

.kw2-nav__submenu li a {
  display: block;
  padding: 9px 20px;
  font-size: 14px;
  color: var(--kw-black);
}

.kw2-nav__submenu li a:hover {
  color: var(--kw-red);
  background: #fafafa;
}

/* Mobile collapsed category list */
.kw2-nav-mobile {
  padding: 8px 0;
}

.kw2-nav-mobile .kw2-nav__link-mobile {
  display: block;
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Mobile menu shows only top-level categories (matches CaseIH's mobile menu) — subcategories are reached from the category page itself */
.kw2-nav__submenu-mobile {
  display: none;
}

/* ---------- Categories / product grid (KENWORTH override view) ----------
   Bordered cards — square image on a plain white background, name with
   red underline, price below. Product tiles AND category tiles share this
   look so the grid reads as one consistent style regardless of what it's
   showing. */
.kw2-catbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 20px 0 40px;
}

.proddiv.kw2-proddiv,
.catdiv.kw2-catdiv {
  width: 220px;
  padding: 0;
  margin: 0;
}

.kw2-proddivinner,
.kw2-catdivinner {
  display: block;
  box-sizing: border-box;
  background: #fff;
/*  border: 1px solid #ddd;*/
  border-radius: 6px;
  padding: 20px;
  overflow: visible;
  box-shadow: none;
  transition: none;
}

.kw2-proddivinner:hover,
.kw2-catdivinner:hover {
  box-shadow: none;
  transform: none;
}

.prodimg.kw2-prodimg {
  background-color: transparent;
  aspect-ratio: 1;
  border-radius: 0;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kw2-prodimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prodname.kw2-prodname {
  display: flex;
  flex-direction: column;
 /* align-items: flex-start;*/
  text-align: left;
  font-size: 100%;
  padding: 0;
}

.kw2-prodname .price.kw2-price {
    order: 2;
    align-self: stretch;
    color: var(--kw-black);
    font-weight: 700;
    font-size: 16px;
    margin: 10px 0 0;
    text-align: center;
}

.kw-product-card__price {
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 0;
    text-align: center;
    color: var(--kw-black);
}


.kw2-prodname .name.kw2-name {
  order: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0;
  color: var(--kw-black);
  font-size: 15px;
  line-height: 20px;
  /* 40px = 2 lines of text, 16px = gap reserved above the underline. Using
     height (not padding-bottom) keeps the gap reliable with -webkit-line-clamp,
     which can otherwise clip padding along with the truncated overflow. */
  height: 48px;
  margin-top: 6px;
  border-bottom: 2px solid var(--kw-red);
  border-radius:0px!important;
  text-align:center;
}

/* Category tile with an icon/image — same square-image treatment as a product card */
.kw2-catdiv:not(.kw2-catdiv--text) .kw2-catdivinner > a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: #f2f2f2;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
}

.kw2-catdiv:not(.kw2-catdiv--text) .kw2-catdivinner > a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cattilename.kw2-cattilename {
  text-align: left;
  padding: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--kw-black);
  border-bottom: 2px solid var(--kw-red);
  display: inline-block;
  padding-bottom: 4px;
}

/* Category tile with no icon — text-only fallback stays a flat tinted tile */
.catdivtext.kw2-catdiv--text .kw2-catdivinner {
  background: #f2f2f2;
  border-radius: 6px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.catdivtext.kw2-catdiv--text a {
  color: var(--kw-black);
  font-weight: 600;
  padding: 20px;
  display: block;
}

/* ---------- Category / Listing page — breadcrumb + sort bar (left-rail sidebar removed;
   category-to-category navigation now happens via the header's own menu/submenu) ---------- */
.kw2-category-page {
  padding: 24px 0 48px;
}

.kw2-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--kw-red);
}

.breadcrumb-replace.kw2-breadcrumb {
  margin: 0;
}

.breadcrumb-replace.kw2-breadcrumb .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 15px;
  color: var(--kw-muted);
}

/* Site.css sets .breadcrumb > .active to red (#e2383f) and links to normal
   weight; override both with higher specificity here rather than touching
   Site.css. */
.breadcrumb-replace.kw2-breadcrumb,
.breadcrumb-replace.kw2-breadcrumb .breadcrumb > .active {
  color: var(--kw-black);
  font-weight: 700;
}

.kw2-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.kw2-sort .control-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--kw-black);
  margin: 0;
}

/* The real <select id="sortOrder"> now only holds the value/fires the
   existing change handler — it's visually replaced by the custom
   FILTER button + dropdown below (matches category.html exactly). */
.kw2-sort__select-hidden {
  display: none;
}

.kw2-filter-wrap {
  position: relative;
  flex-shrink: 0;
}

.kw2-filter-btn {
  background: var(--kw-red-dark);
  color: var(--kw-white);
  border: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  padding: 12px 22px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kw2-filter-btn:hover {
  background: var(--kw-red);
}

.kw2-filter-btn:focus {
  outline: 2px solid var(--kw-red);
  outline-offset: 2px;
}

.kw2-filter-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  margin: 0;
  padding: 6px 0;
  min-width: 200px;
  list-style: none;
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  z-index: 30;
}

.kw2-filter-dropdown--open {
  display: block;
}

.kw2-filter-dropdown li {
  padding: 10px 18px;
  font-size: 14px;
  color: var(--kw-black);
  cursor: pointer;
}

.kw2-filter-dropdown li:hover {
  background: var(--kw-red);
  color: var(--kw-white);
}

/* Price-range quick filters — plain pill row instead of the old sidebar list */
.kw2-range-categories:empty {
  display: none;
}

.kw2-range-categories h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
}

.kw2-range-categories .list-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.kw2-range-categories .list-group-item.range-category {
  width: auto;
  border: 1px solid var(--kw-border);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  background: var(--kw-white);
  color: var(--kw-black);
}

.kw2-range-categories .list-group-item.range-category:hover {
  border-color: var(--kw-red);
  color: var(--kw-red);
}

@media (max-width: 600px) {
  .kw2-breadcrumb-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tighten the gap above Featured Products — legacy .banners class adds a 40px bottom margin */
.banners-outer .banners {
  margin-bottom: 0;
}

/* ---------- Featured Products (KENWORTH override view — "Driver Picks" style) ---------- */
.kw2-picks {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 48px;
  text-align: center;
}

.kw2-picks__title {
  font-size: 22px;
  font-weight: 700;
  margin-top:40px!important;
  margin-bottom:30px!important;
  color: var(--kw-black);
}

.kw2-picks__wrapper {
  position: relative;
}

.kw2-picks__outer {
  overflow: hidden;
}

.kw2-picks__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: flex-start;
}

/* Applied only when there are few enough items that the row can't overflow — safe to center */
.kw2-picks__grid--centered {
  justify-content: center;
}

.kw2-picks__grid::-webkit-scrollbar {
  display: none;
}

/* Mobile-only "Swipe to see more" hint under the Top Picks row */
@media (max-width: 768px) {
  .kw2-picks::after {
    content: "← Swipe to see more →";
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--kw-red);
    background: var(--kw-white);
    margin-top: 20px;
    padding: 12px;
    border-radius: 8px;
  }
}

.kw2-scroll-btn {
  background: transparent;
  border: none;
  color: var(--kw-black);
  font-size: 32px;
  line-height: 1;
  padding: 6px 8px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.kw2-scroll-btn.left {
  left: -80px;
}

.kw2-scroll-btn.right {
  right: -80px;
}

.kw2-product-card {
  display: block;
  flex: 0 0 calc((100% - 72px) / 4);
  color: var(--kw-black);
  text-decoration: none;
}

.kw2-product-card:hover {
  color: var(--kw-black);
  text-decoration: none;
}

.kw2-product-card__price {
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 0;
    text-align: center;
    color: var(--kw-black);
}

.kw2-product-card__image {
  aspect-ratio: 1;
  border-radius: 6px;
  margin-bottom: 14px;
  background: #f2f2f2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kw2-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kw2-product-card__name {
  font-size: 14px;
  margin: 0 0 4px;
  border-bottom: 2px solid var(--kw-red);
 /* display: inline-block;*/
  padding-bottom: 4px;
  min-height: 40px; /* reserve space for up to 2 lines so every card is the same height regardless of name length, keeping the scroll arrows centered on the image */
}

@media (max-width: 760px) {
  .kw2-product-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }

  .kw2-scroll-btn {
    display: none;
  }
}

/* ---------- Homepage dealer banner (between Featured Products and the footer) ---------- */
/* Site.css sets .main { padding-bottom: 40px } for the legacy layout — this banner is meant
   to sit flush against the footer, so cancel it here rather than in the shared stylesheet. */
.main:has(.kw-dealer-banner) {
  padding-bottom: 0;
}

.kw-dealer-banner {
  display: block;
  width: 100%;
  position: relative;
  color: var(--kw-white);
  text-decoration: none;
  background-image: url("/Areas/KENWORTH/Content/Images/IndexPageImage1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: clamp(160px, 26vw, 320px);
  margin-top: 24px;
}

@media (max-width: 767px) {
  .kw-dealer-banner {
    background-position: center center;
    height: clamp(140px, 45vw, 220px);
  }
}

/* ---------- Footer ---------- */
footer.kw2-footer {
  background-color: #101010;
  box-shadow: none;
  min-height: auto;
  padding: 0;
  color: var(--kw-white);
}

.kw2-footer__perks {
  max-width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 36px 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kw2-perk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 0;
}

.kw2-perk:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.kw2-perk__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--kw-red);
}

.kw2-perk__title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 2px;
  letter-spacing: 0.02em;
}

.kw2-perk__desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.rnd-link.kw2-footer__cta {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--kw-white);
  border-radius: 2px;
  width: auto;
  padding: 9px 22px;
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
  margin-top: 4px;
}

.rnd-link.kw2-footer__cta:hover,
.rnd-link.kw2-footer__cta:focus {
  background: rgba(255, 255, 255, 0.1);
  color: var(--kw-white);
}

.kw2-footer__main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr;
  gap: 32px;
  padding: 40px 24px;
}

.kw2-footer__col h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 16px;
}

.kw2-footer__col p,
.kw2-footer__col a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 10px;
}

.kw2-footer__col a:hover {
  color: var(--kw-white);
}

.kw2-footer__email {
  text-decoration: none;
}

.kw2-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.kw2-footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.kw2-footer__social a img {
  width: 16px;
}

.kw2-footer__social a:hover {
  background: var(--kw-red);
}

.kw2-footer__legal {
  border-top: 1px solid var(--kw-red);
  padding: 20px 24px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.kw2-footer__legal a {
  color: rgba(255, 255, 255, 0.55);
  margin: 0 6px;
}

.kw2-footer__legal a:hover {
  color: var(--kw-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .delivery-msg.kw2-announcement {
    padding: 6px 12px;
  }

  .delivery-msg.kw2-announcement a {
    font-size: 11px;
  }

  .shopping-cart.kw2-cart-btn .kw2-cart-count {
    top: -6px;
    right: -8px;
  }

  /* Mobile header: logo alone on its own row, then cart | search | menu
     toggle together on the row below, search filling the space between them. */
  .navbar-header.kw2-navbar-header {
    gap: 12px;
  }

  .navbar-header.kw2-navbar-header .navbar-brand.kw2-logo {
    flex-basis: 100%;
    order: 1;
  }

  .navbar-header.kw2-navbar-header .navbar-toggle.kw2-nav-toggle {
    order: 2;
    flex-shrink: 0;
  }

  .navbar-header.kw2-navbar-header .search-area.kw2-search {
    order: 3;
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  .navbar-header.kw2-navbar-header .shopping-cart.kw2-cart-btn {
    flex-shrink: 0;
    order: 4;
  }

  .kw2-footer__perks {
    grid-template-columns: repeat(2, 1fr);
  }

  .kw2-footer__main {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .kw2-footer__social {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .kw2-footer__perks {
    grid-template-columns: 1fr;
  }
}

/* ---------- Product Details (KENWORTH override view — Areas/KENWORTH/Views/Product/Details.cshtml) ----------
   The KENWORTH area has its own Details.cshtml (forked from the shared
   ~/Views/Product/Details.cshtml so this brand's PDP can be restyled without
   touching the common view every other area still uses). Markup, IDs, form
   names and JS hooks are unchanged — only these companion "kw-pdp-*" classes
   were added/renamed, matching the supplied product.html/page.css reference,
   so functionality (add to cart, quantity, SKU table, image zoom, etc.) is
   identical to the shared page. */

/* ---- Breadcrumb ---- */
.kw-pdp-breadcrumb-bar {
  border-bottom: 2px solid var(--kw-red);
  padding-bottom: 16px;
  margin-bottom: 8px;
}

/* Site.css sets .breadcrumb > .active to red (#e2383f) and links to normal
   weight; override both with higher specificity here rather than touching
   Site.css. Only the current/active page should be bold — parent links stay
   regular weight. */
.kw-pdp-breadcrumb-bar .breadcrumb a {
  color: var(--kw-black);
  font-weight: 400;
}

.kw-pdp-breadcrumb-bar .breadcrumb > .active {
  color: var(--kw-black);
  font-weight: 700;
}

/* Two-column gallery/info layout. The view no longer uses Bootstrap's
   ".row"/".col-sm-6" here at all (that fought with this grid/flex layout via
   float+width and produced a broken stacked page) — .kw-pdp-gallery and
   .kw-pdp-info are plain siblings laid out with flexbox that we fully own. */
.kw-pdp {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-top: 32px;
}

.kw-pdp-gallery,
.kw-pdp-info {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Gallery ---- */
.prod_det_img.kw-pdp-gallery__mainwrap {
  position: relative;
  text-align: center;
  margin-bottom: 16px;
}

.prod_det_img.kw-pdp-gallery__mainwrap .kw-pdp-gallery__main {
  display: block;
  width: 100%;
  aspect-ratio: 1;
 /* border: 1px solid var(--kw-border);*/
  background-color: #f6f6f6;
  object-fit: contain;
  max-width: 100%;
}

.kw-pdp-gallery__mainwrap .zoom-ctrl {
  z-index: 5;
}

.prod_det_views.kw-pdp-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  text-align: left;
}

.kw-pdp-gallery__thumb {
  display: block;
  width: 100%;
  max-width: 100% !important;
  aspect-ratio: 1;
  border: 1px solid var(--kw-border);
  background-color: #f6f6f6;
  object-fit: contain;
  cursor: pointer;
}

.kw-pdp-gallery__thumb.selected {
  border: 2px solid var(--kw-red);
}

/* ---- Info panel ---- */
.PageHeading.kw-pdp-heading {
  color: var(--kw-black);
  text-transform: none;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 12px;
}

/* Prominent price shown right under the product name, and the GST/tax note
   shown right after the description — these are now the ONLY visible price/
   tax summary on the page. The equivalent blocks further down (near the SKU
   table / Add to Cart) are hidden via .kw-pdp-price-dup/.kw-pdp-tax-dup below
   — kept in the DOM rather than removed, since ProductDetails.js reads
   .SubHeading's text (for Facebook/Google pixel tracking) whether it's
   visible or not, so hiding it doesn't affect that. */
p.kw-pdp-info__price {
  font-size: 22px;
  font-weight: 800;
  color: var(--kw-black);
  margin: 0 0 16px;
}

.kw-pdp-info__gst-note {
    display: block;
    color: #000000;
    font-size: 12px;
    margin: 16px 0;
}

.kw-pdp-price-dup,
.kw-pdp-tax-dup {
  display: none;
}

.prod-description.kw-pdp-info__desc {
  color: #000000;
  font-size: 15px;
  line-height: 1.6;
  margin-top: 0;
}

/* ---- Size / SKU table ---- */
.kw-size-table.zstable {
  margin-bottom: 20px;
  border: none !important;
}

.kw-size-table.zstable thead th {
  background-color: var(--kw-black);
  color: var(--kw-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none !important;
  padding: 14px 16px;
}

.kw-size-table.zstable tbody td {
  border: none !important;
  vertical-align: middle;
  color: var(--kw-black);
  font-weight: 700;
  padding: 12px 16px;
}

.kw-size-table.zstable tbody tr,
.kw-size-table.zstable tbody tr:nth-child(odd),
.kw-size-table.zstable tbody tr:nth-child(even) {
  background-color: var(--kw-white) !important;
}

.kw-size-table.zstable tr:hover {
  background-color: #f7f7f7 !important;
}

.kw-size-table.zstable tbody td:last-child {
  text-align: center;
}

.kw-size-table input[type="number"].ProductQuantity {
  width: 70px;
  border-radius: 2px;
  border: 1px solid var(--kw-border);
  text-align: center;
  font-weight: 400;
}

/* ---- Buttons ---- */
.prod_det_submit.kw-pdp-submit,
.divAddToCart.kw-pdp-addtocart {
  margin-top: 16px;
}

.zsbtn.kw-pdp-add-btn {
  background-color: var(--kw-red-dark);
  border-color: var(--kw-red-dark);
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

  .zsbtn.kw-pdp-add-btn:hover {
    background-color: var(--kw-red);
    border-color: var(--kw-red);
  }

.zsbtn.kw-pdp-customise-btn {
  background-color: var(--kw-black);
  border-color: var(--kw-black);
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ---- Related products ----
   Uses the same proddiv/proddivinner/prodimg/prodname/price/name markup as
   the shared/VUSHOP Details page (not the standalone "kw-product-card" grid
   used on the homepage), with the SAME "kw2-" companion classes already
   defined above for the Category page's product tiles (.kw2-catbody,
   .proddiv.kw2-proddiv, .kw2-prodimg, .kw2-prodname, etc.) — so this section
   automatically matches Category's product-tile styling with no new rules
   needed for the cards themselves. Only the section heading needs its own
   rule. */
.related-prod-title.kw2-related-title {
  background: var(--kw-black);
  color: var(--kw-white);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 10px 24px;
  margin: 40px -15px 0;
}

.related-products.kw2-related {
  border: none;
  margin: 0 0 24px;
  padding: 16px 0 24px;
}

@media (max-width: 860px) {
  .kw-pdp {
    flex-direction: column;
    gap: 32px;
  }
}

/* ==========================================================================
   CART / CHECKOUT PAGE — Areas/KENWORTH/Views/Cart/{Checkout,CartGrid,
   Address,AddressBilling}.cshtml
   CartGrid.cshtml and AddressBilling.cshtml are KENWORTH-only forks of the
   shared ~/Views/Cart/ versions (every other area still uses the shared
   files untouched). All markup, form field names/ids, onclick handlers and
   JS-read classes (.mobtable, .mobtablerow, .ItemName, .ItemQuantity,
   .ItemPrice, .js-billing, .addr_line1, etc. — see Scripts/Cart/Checkout.js)
   are unchanged; only these companion "kw2-" classes were added, so cart/
   checkout functionality (add/remove/edit qty, address autocomplete,
   billing toggle, promo codes, payment) is identical to the shared page.
   ========================================================================== */

.kw2-checkout-breadcrumb-bar {
  border-bottom: 2px solid var(--kw-red);
  padding-bottom: 16px;
  margin-bottom: 8px;
}

/* Areas/KENWORTH/Content/Site.css sets .breadcrumb > .active to red (#e2383f)
   and links to normal weight; override both with higher specificity here
   rather than touching Site.css. Only the current/active page should be
   bold — parent links stay regular weight. */
.kw2-checkout-breadcrumb-bar .breadcrumb a {
  color: var(--kw-black);
  font-weight: 400;
}

.kw2-checkout-breadcrumb-bar .breadcrumb > .active {
  color: var(--kw-black);
  font-weight: 700;
}

.PageHeading.kw2-cart-heading {
  color: var(--kw-black);
  text-transform: none;
  font-size: 26px;
  font-weight: 800;
  margin: 24px 0 16px;
}

/* ---- Cart items ----
   The legacy markup lays each item out as two stacked "display:table" blocks
   (image+name, then qty/price/total) rather than one row. These rules turn
   both the item and its two blocks into a single flex row without touching
   any class the item-count/analytics JS depends on. */
.kw2-cart {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

/* .cartgridtop (cart item rows) and the mobile-only spacer always take the
   full row on their own; everything after them (edit-cart button, address
   boxes, order summary) wraps onto the next line and flows side-by-side,
   matching the reference payment page's ".kw-checkout-panel" layout — no
   markup changes needed since they're already siblings under #CartGridTable. */
.cartgridtop,
.kw2-cart > .show-md {
  flex: 1 1 100%;
}

.mobtable.kw2-cart-items {
  border-top: none !important;
}

.mobtablerow.kw2-cart-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: none !important;
}

.kw2-cart-item__main,
.kw2-cart-item__aside {
  display: block;
  width: auto;
  padding: 0;
  float: none;
  border-bottom: none !important;
}

.kw2-cart-item__main {
  flex: 1 1 320px;
}

.kw2-cart-item__aside {
  flex: 1 1 260px;
}

.kw2-cart-item__main > div,
.kw2-cart-item__aside > div {
  display: block;
  width: auto;
}

.kw2-cart-item__main .mobtablerow,
.kw2-cart-item__aside .mobtablerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  border-bottom: none !important;
  width: auto;
}

.kw2-cart-item__remove {
  order: -1;
  flex-shrink: 0;
  padding-top: 2px;
}

.kw2-cart-item__remove .fa-trash {
  color: var(--kw-black);
  font-size: 16px;
  cursor: pointer;
}

.kw2-cart-item__remove .fa-trash:hover {
  color: var(--kw-red);
}

.kw2-cart-item__image-wrap {
  flex-shrink: 0;
}

.kw2-cart-item__image {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #f6f6f6;
 /* border: 1px solid var(--kw-border);*/
  border-radius: 4px;
}

.kw2-cart-item__info {
  min-width: 0;
}

.kw2-cart-item__info a {
  font-size: 14px;
  font-weight: 700;
  color: var(--kw-black);
}

.kw2-cart-item__info .smalltext {
  font-size: 12px;
  color: var(--kw-black);
}

.kw2-cart-item__meta span + span::before {
  content: "\00a0\00a0\00a0";
}

.kw2-cart-item__qty {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--kw-black);
  flex: 0 0 auto;
  white-space: nowrap;
}

.kw2-cart-item__qty .fa-pencil {
  color: var(--kw-muted);
}

.kw2-cart-item__qty .fa-pencil:hover {
  color: var(--kw-red);
}

.kw2-cart-item__price,
.kw2-cart-item__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  flex: 1 1 110px;
  color: var(--kw-black);
}

/* ---- Order summary ---- */
.pricefields.kw2-cart-summary {
  margin-top: 24px;
  color:var(--kw-black);
}

.pricefield.kw2-cart-summary__row {
  padding: 10px 0;
  border-bottom: 1px solid var(--kw-border);
  font-size: 14px;
}

.pricefield.kw2-cart-summary__row.kw2-cart-summary__row--total {
  font-weight: 800;
  color: var(--kw-black);
  font-size: 15px;
}

.editshoppingcart.kw2-editcart {
  flex: 0 0 auto;
  width: auto;
  float: none;
  padding: 0;
}

.editshoppingcart.kw2-editcart .btn.zsbtn {
  background: var(--kw-red-dark);
  border-color: var(--kw-red-dark);
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px 28px;
}

.editshoppingcart.kw2-editcart .btn.zsbtn:hover {
  background: var(--kw-red);
  border-color: var(--kw-red);
}

.addressfields.kw2-addressfields {
  flex: 0 1 220px;
  min-width: 220px;
  float: none;
  width: auto;
  background: var(--kw-white);
  border: 1px solid var(--kw-black);
  border-radius: 0;
  padding: 20px 24px;
  margin-bottom: 0;
  color: var(--kw-black);
}

.addressfields.kw2-addressfields b {
  display: block;
  font-size: 16px;
  font-weight: 700;
 /* margin-bottom: 12px;*/
}

.pricefields.kw2-cart-summary {
  flex: 1 1 240px;
  min-width: 220px;
  margin-left: auto;
}

.promocode.kw2-promocode {
  color: var(--kw-black);
}

.promocode.kw2-promocode input#txtPromoCode {
  color: var(--kw-black);
}

.promocode.kw2-promocode input.btn.zsbtn {
  background: var(--kw-red-dark);
  border-color: var(--kw-red-dark);
  border-radius: 2px;
}

.promocode.kw2-promocode input.btn.zsbtn:hover {
  background: var(--kw-red);
  border-color: var(--kw-red);
}

/* #CartGridTable is a flex row (see .kw2-cart above); force the freight
   warning onto its own full-width line so it sits below the promo code
   box instead of beside it, and swap Bootstrap's blue alert-info styling
   for a plain white/black look. */
.alert.alert-info.kw2-freight-warning {
  flex: 1 1 100%;
  background-color: var(--kw-white);
  font-weight:700;
  border:none!important;
  color: var(--kw-black);
  margin-top:0px!important;
}

/* ---- Shipping / billing forms ---- */
.kw2-shipping-form,
.kw2-billing-form {
  max-width: 830px;
}

.kw2-billing-toggle-row {
  margin-bottom: 24px !important;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kw-border);
}

.row.kw2-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 12px;
}

/* Bootstrap's .row clearfix (content:" "; display:table;) becomes a real flex item
   once .row is flexed here, adding stray space above/below each row's fields. */
.row.kw2-form-row::before,
.row.kw2-form-row::after {
  content: none;
  display: none;
}

.col-md-4.kw2-form-field,
.col-md-8.kw2-form-field,
.col-md-12.kw2-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  float: none;
  width: auto;
  flex: 1 1 220px;
  padding: 0;
  margin-top: 0 !important;
}

.col-md-12.kw2-form-field {
  /* takes the whole row so it can't share a line with the leftover empty .col-md-4 sibling */
  flex-basis: 100%;
}

.kw2-form-field label {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  color: var(--kw-black);
}

.kw2-form-field input.form-control,
.kw2-form-field select.form-control,
.kw2-form-field textarea.form-control {
  border-radius: 0;
  border-color: var(--kw-black);
  font-size: 13px;
  height: 34px;
  padding: 6px 10px;
  box-shadow: none;
}

.kw2-form-field textarea.form-control {
  height: auto;
}

.kw2-form-field input.form-control:focus,
.kw2-form-field select.form-control:focus,
.kw2-form-field textarea.form-control:focus {
  border-color: var(--kw-red);
  box-shadow: none;
}

.kw2-form-field .checkbox {
  margin: 0;
}

.kw2-form-field.kw2-checkbox-field {
  flex-direction: row;
  align-items: center;
}

.kw2-required-note {
  color: var(--kw-black);
}

/* ---- Shipping/billing accordion panels ---- */
.zsaccordion.kw2-accordion .panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  margin-bottom: 0;
}

/* Site.css's .zsaccordion .panel-default.selected / .panel-body rules paint a dark
   (#666) border on whichever panel is currently expanded — that's the "black line"
   under the heading. These win on specificity ties depending on bundle order, so
   override explicitly with !important. */
.zsaccordion.kw2-accordion .panel-default.selected {
  border-color: transparent !important;
}

.zsaccordion.kw2-accordion .panel-default.selected .panel-body {
  border-top-color: transparent !important;
}

.panel-heading.kw2-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 830px;
  background: transparent !important;
  color: var(--kw-black) !important;
  border-top: none;
  padding: 16px 0;
  cursor: pointer;
}

.panel-heading.kw2-panel-heading--billing {
    border-top: 1px solid var(--kw-black) !important;
    border-bottom: 1px solid var(--kw-black) !important;
}

.panel-heading.kw2-panel-heading::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: 12px;
  margin-bottom: 2px;
  border-style: solid;
  border-color: var(--kw-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.panel-default.selected .panel-heading.kw2-panel-heading::after {
  margin-bottom: -2px;
  transform: rotate(-135deg);
}

.panel-title.kw2-panel-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 18px;
  font-weight: 700;
  text-transform: none !important;
  color: var(--kw-black);
  margin: 0;
}

.panel-title.kw2-panel-title .kw2-required-note {
  font-size: 12px;
  font-weight: 400;
}

/* ---- Continue checkout button ---- */
.zsbtn.kw2-checkout-btn {
  background: var(--kw-red-dark);
  border-color: var(--kw-red-dark);
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px 36px;
}

.zsbtn.kw2-checkout-btn:hover {
  background: var(--kw-red);
  border-color: var(--kw-red);
}

/* ---- Payment details (Areas/KENWORTH/Views/Cart/PaymentDetails.cshtml) ----
   Forked from the shared page, following the same accordion-to-radio-list
   pattern CaseIH already uses for this page (Areas/CASEIH/Views/Cart/
   PaymentDetails.cshtml) — every payment-type partial, the "paymenttypeid"/
   ".in" mechanism Checkout.js reads to submit the order, and the
   SubmitKenworthOrder() button hookup are unchanged; only the accordion's
   look (now a flat radio list) and colours are Kenworth's own. */
.PageHeading.kw2-payment-heading {
  color: var(--kw-black);
  text-transform: none;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 20px;
  /* Site.css's .PaymentHeading sets border-bottom: 1px solid #ddd; override with
     higher specificity here rather than touching Site.css. */
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.kw2-payment-methods {
  margin-bottom: 20px;
}

/* Flat, borderless rows — every option's content (card fields, wallet button,
   etc.) stays visible at all times, matching the reference design exactly;
   only the radio indicates which one is selected. The .in class is still
   toggled by KwOnPaymentRadioChange() below purely so Checkout.js's
   $("#accordion").find(".in").attr("paymenttypeid") lookup keeps working for
   order submission — it no longer controls visibility. */
.panel.kw2-payment-option {
  display: flex !important;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.panel-heading.kw2-payment-option__label {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  gap: 14px;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  cursor: pointer;
}

.kw2-payment-radio {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--kw-black);
  margin: 0;
}

.panel-title.kw2-payment-option__title {
  display: none !important;
}

.panel-collapse.kw2-payment-option__content {
  display: flex !important;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  height: auto !important;
  background: transparent !important;
  border-top: none !important;
}

.panel-collapse.kw2-payment-option__content .panel-body {
  width: 100%;
  padding: 0 !important;
  /* Bootstrap's default ".panel-heading + .panel-collapse > .panel-body" rule adds its
     own full-width border-top; the flat radio-list design has no divider there. */
  border-top: none !important;
}

/* Card number / expiry / CVC are three separate always-visible Stripe Elements
   (see Checkout.cshtml) laid out inline, matching the Figma reference, instead
   of the combined 'card' Element which only shows "Card number" plus Stripe's
   Link autofill prompt until the shopper starts typing. */
.kw2-card-row {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  border-bottom: 1px solid var(--kw-black);
  padding-bottom: 14px;
}

.kw2-card-fields {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}

.kw2-card-field {
  flex: 0 0 auto;
}

.kw2-card-field iframe {
  width: 100% !important;
}

.kw2-card-field--number {
  flex: 0 0 340px;
}

.kw2-card-field--expiry {
  flex: 0 0 70px;
}

.kw2-card-field--cvc {
  flex: 0 0 60px;
}

.kw2-card-gateway-logo {
  flex: 0 0 auto;
  /*margin-left: auto;*/
  height: 32px !important;
}

.kw2-payment-footer {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kw2-payment-terms {
  color: var(--kw-muted);
}

.kw2-wallet-container {
  width: 100%;
}

.kw2-wallet-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kw2-wallet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--kw-black);
  color: var(--kw-white);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  min-width: 160px;
  height: 44px;
  cursor: pointer;
}

.zsbtn.kw2-place-order-btn {
  background: var(--kw-red-dark);
  border-color: var(--kw-red-dark);
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px 36px;
}

.zsbtn.kw2-place-order-btn:hover {
  background: var(--kw-red);
  border-color: var(--kw-red);
}

@media (max-width: 760px) {
  .kw2-cart-item__main,
  .kw2-cart-item__aside {
    flex: 1 1 100%;
  }

  .row.kw2-form-row {
    flex-direction: column;
    gap: 12px;
  }

  /* flex-basis:220px from the desktop rule would otherwise apply to height once the row goes column-direction */
  .col-md-4.kw2-form-field,
  .col-md-8.kw2-form-field {
    flex: 1 1 auto;
  }

  .addressfields.kw2-addressfields,
  .pricefields.kw2-cart-summary {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

/* "Added to cart" modal (Areas/KENWORTH/Views/Modals/ModalContinueShopping.cshtml) */
.kw2-cart-modal .modal-dialog {
  max-width: 460px;
}

.modal-content.kw2-cart-modal__content {
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
}

.modal-header.kw2-cart-modal__header {
  background-color: var(--kw-white) !important;
  border-bottom: none;
  text-align: center;
  padding: 20px 16px 8px;
}

.kw2-cart-modal__close {
  opacity: 0.6;
}

.modal-title.kw2-cart-modal__title {
  color: var(--kw-black) !important;
  font-size: 20px;
  font-weight: 800;
  text-transform: none;
}

.modal-body.kw2-cart-modal__body {
  text-align: center;
  padding: 8px 16px 24px;
}

.kw2-cart-modal__message {
  color: var(--kw-black);
  font-size: 15px;
}

.modal-footer.kw2-cart-modal__footer {
  background-color: var(--kw-white) !important;
  border-top: none;
  display: flex;
  gap: 14px;
  padding: 0 0 20px;
}

.btncheckout.kw2-cart-modal__btn {
  flex: 1 1 0%;
  margin: 0 !important;
  background: var(--kw-red-dark);
  border: 1px solid var(--kw-red-dark);
  color: var(--kw-white) !important;
  font-weight: 700;
  text-transform: none;
  border-radius: 2px;
  padding: 12px 16px;
}

.btncheckout.kw2-cart-modal__btn:hover {
  background: var(--kw-red);
  border-color: var(--kw-red);
  color: var(--kw-white) !important;
}

/* Size chart modal (Areas/KENWORTH/Views/Modals/ModalSizeChart.cshtml) */
.modal-content.kw2-sizechart-modal__content {
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
}

.modal-header.kw2-sizechart-modal__header {
  background-color: var(--kw-white) !important;
  border-bottom: 1px solid var(--kw-border);
  padding: 16px;
}

.kw2-sizechart-modal__close {
  opacity: 0.6;
}

.modal-title.kw2-sizechart-modal__title {
  color: var(--kw-black) !important;
  font-size: 20px;
  font-weight: 800;
  text-transform: none;
}

.modal-body.kw2-sizechart-modal__body {
  color: var(--kw-black);
  padding: 16px;
}

.modal-body.kw2-sizechart-modal__body table {
  width: 100%;
}

.modal-footer.kw2-sizechart-modal__footer {
  background-color: var(--kw-white) !important;
  border-top: 1px solid var(--kw-border);
  padding: 12px 16px;
}

.btn.kw2-sizechart-modal__btn {
  background: var(--kw-red-dark);
  border: 1px solid var(--kw-red-dark);
  color: var(--kw-white) !important;
  font-weight: 700;
  text-transform: none;
  border-radius: 2px;
  padding: 10px 20px;
}

.btn.kw2-sizechart-modal__btn:hover {
  background: var(--kw-red);
  border-color: var(--kw-red);
  color: var(--kw-white) !important;
}

/* Generic message/confirm modal (Areas/KENWORTH/Views/Modals/ModalMessage.cshtml) —
   shown by the shared ShowMessage()/ShowConfirm() helpers (ZincStoreCommon.js) for
   validation errors and other site-wide popups. Same small/centered/solid-red-button
   look as the "Added to cart" modal (.kw2-cart-modal). */
.kw2-message-modal .modal-dialog {
  max-width: 460px;
}

.modal-content.kw2-message-modal__content {
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
}

.modal-header.kw2-message-modal__header {
  background-color: var(--kw-white) !important;
  border-bottom: none;
  text-align: center;
  padding: 20px 16px 8px;
}

.kw2-message-modal__close {
  opacity: 0.6;
}

.kw2-message-modal__title {
  color: var(--kw-black) !important;
  font-size: 20px;
  font-weight: 800;
  text-transform: none;
}

.modal-body.kw2-message-modal__body {
  text-align: center;
  color: var(--kw-black);
  font-size: 15px;
  padding: 8px 16px 24px;
}

.modal-footer.kw2-message-modal__footer {
  background-color: var(--kw-white) !important;
  border-top: none;
  display: flex;
  gap: 14px;
  padding: 0 0 20px;
}

.btn.kw2-message-modal__btn {
  flex: 1 1 0%;
  margin: 0 !important;
  background: var(--kw-red-dark);
  border: 1px solid var(--kw-red-dark);
  color: var(--kw-white) !important;
  font-weight: 700;
  text-transform: none;
  border-radius: 2px;
  padding: 12px 16px;
}

.btn.kw2-message-modal__btn:hover {
  background: var(--kw-red);
  border-color: var(--kw-red);
  color: var(--kw-white) !important;
}