body { background-color: #000; background-image: url(../images/MMX-website-background.jpg); background-position: top center; background-repeat: repeat-x; font-family: "Open Sans", Arial, sans-serif; color: #c7c7c7; } .compunixSlider .slick-slide { max-height: 350px; overflow: hidden; } .headerPayPal { display: none; } #onsite-payment-method-options .alternative-payment-methods { width: 285px !important; margin: 0; padding: 0; display: inline-block; height: 40px; overflow: hidden; margin-bottom: -15px; padding-left: 0.5em; } #onsite-payment-method-options .alternative-payment-methods .alternative-payment-button { width: 285px; } .homepage-product-add { background-color: #ffffff; border-radius: 6px; border: 1px solid #ff0000; margin: 0px 1px 12px 1px; color: #454545; font-size: 10pt; padding: 0px 4px 0px 4px; min-height: 300px; max-height: 340px; height: 360px; } .homepage-product-add img{ padding: 8px 0px 12px 0px; } .homepage-product-add a, .homepage-product-add a:visited{ color: #bb0000; text-decoration: none; } .homepage-product-add a:hover{ color: #ff0000; text-decoration: none; } h1.homepage { font-family: 'Arial Black', Helvetica, sans-serif; float: left; width: 100%; text-indent:0px; display: block; color: #ffffff; text-decoration: none; font-size: 11pt; font-weight: bold; margin: 12px 0px 12px 0px; line-height: 14px; border-bottom: solid 1px #830000; font-style: normal; } h1.homepage span { color: #ff0000; } .product-image { text-align: center; display: block; margin-left: auto; margin-right: auto; } main { color: #c7c7c7; } .featured-product { display: flex; flex-direction: column; /* Stack children vertically */ height: 100%; /* Important: makes it fill the parent height */ /* Optional: add min-height if cards look too short */ /* min-height: 450px; */ } .featured-product > * { /* Optional: prevent shrinking if needed */ flex-shrink: 0; } /* Target the button's wrapper div and push it down */ .featured-product > div:last-child { /* or give it a class like .button-wrapper */ margin-top: auto; /* This pushes it to the bottom */ text-align: center; /* Already have this, but good to keep */ } /* Reduce horizontal spacing between products in the grid */ .featured-product, .homepage-product-add, .col-xs-4, .col-md-4 { /* targets your column classes */ padding-left: 2px !important; /* was 15px → reduce as desired, e.g. 5px–10px */ padding-right: 2px !important; } /* Optional: Also tighten vertical spacing inside each product block if needed */ .homepage-product-add { margin-bottom: 15px; /* reduce from default ~30px if there's extra vertical gap */ } /* Custom Linked Compunix CSS */ /*--- APSC/BOOTSTRAP RESET (c. 1/2026) ----------------------------------------------------*/ /*--- general/common --------------*/ html {font-size:1rem} body {min-width:18rem;line-height:1} .container {width:auto;max-width:1600px;padding:0} /*--- paragraph text ---*/ p, .form-text {line-height:1.4;margin:0 0 1rem} /*--- links ---*/ a {transition:color .2s} a:hover, a:focus {text-decoration:none;outline:revert !important;outline-offset:revert !important} p a, .page-links a {font-weight:bold} /*--- forms --------------*/ legend {border:0;font-size:1rem;font-weight:bold;margin:0} label, .checkbox-label {font-weight:bold;margin:0 0 .5em} input:focus {outline:revert !important} .form-control {height:auto;box-shadow:none;line-height:1} .form-control:focus {box-shadow:none} input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {outline-offset:revert} .form-group {} .form-group label {} .entry-feedback-wrapper {margin-bottom:.5em} .form-label-prefix, .form-label-suffix, .form-validation-message, .form-description {font-size:.75rem} .form-description {margin-top:.5em} /*--- buttons --------------*/ .btn {line-height:1} .btn-link {font-weight:bold} /*--- account --------------*/ #PageContent_pnlAddress {margin:2rem 0} table, .table {color:#454545} .address-wrap {line-height:1.2;margin-bottom:2rem} .address-wrap > div {margin-bottom:1rem} /*--- site header --------------*/ .header-row {background-color:transparent;box-shadow:none;margin:0} .header-row::before, .header-row::after {display:none} /*--- logo ---*/ .header-row .logo {display:block;width:fit-content} .header-row .logo img {display:block;max-height:none} /*--- paypal & APSC ---*/ .headerPayPal, .APSCtagline {display:none} /*--- nav group --------------*/ nav {background-color:transparent;box-shadow:none} .navbar-default {background-color:transparent} /*--- inner wrapper ---*/ .navbar-default::before, .navbar-default::after {display:none} .navbar-brand {display:none !important} .navbar-collapse.in {overflow-y:visible} /*--- collapse wrapper ---*/ .navbar-toggle:hover, .navbar-toggle:focus {outline:revert} /*--- toggle ---*/ /*--- menu ---*/ .navbar-default .navbar-nav > li > a {text-shadow:none} /*--- search ------*/ .navbar-form {border:0;box-shadow:none} .search-wrap {} .search-form-group {position:relative} .search-wrap label {position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%)} .search-form-group input.form-control.search-box {font-size:1rem} /*--- tSearch results ---*/ #tsearch_results {top:calc(100% + .5rem);left:0;right:0;margin:0} /*--- mmy --------------*/ .vehicle-selector {} .MMY_TopNavContainer {background-color:transparent;border:0} /*--- input group wrapper ---*/ .MMY_TopNavContainer .row {margin:0} /*--- labels ---*/ .MMY_TopNavContainer label {position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%)} /*--- notices ---*/ .notices {margin:0 clamp(.5rem, 2vw, 1rem) 1rem} /*--- paypal ---*/ .paypal-payment-methods {padding:0;margin:0 0 1rem} .paypal-payment-methods img {width:12.5rem} /*--- breadcrumb ---*/ .breadcrumb {padding:0} .breadcrumb a {font-weight:bold} /*--- main content area --------------*/ .main-content-wrapper {padding:0;margin:0 0 1rem} main {padding:2rem clamp(.5rem, 2vw, 1rem)} /*--- footer --------------*/ .footer-wrapper {background-color:transparent} .footer-heading {text-shadow:none} .footer-wrapper .copyright a {font-weight:bold} /*--- sort --------------*/ #ISearch3PageControlForm {margin:0 0 1rem} div#pagecontrols {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem;background-color:transparent !important;margin:0} div#pagecontrols::before, div#pagecontrols::after {display:none} div#pagecontrols > div {display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;width:auto;padding:0} #ISearch3PageControlForm label {margin:0} /*--- view style-----*/ #ISearch3PageControlForm fieldset {display:flex;gap:.5rem 1rem;width:auto;padding:0} #ISearch3PageControlForm legend {position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%)} #ISearch3PageControlForm fieldset label {display:flex;align-items:center;gap:.25rem} #ISearch3PageControlForm fieldset input {margin:0} /*@media (min-width:768px) { #ISearch3PageControlForm {margin-left:-15px} }*/ /*--- filters --------------*/ #filterholder {margin-bottom:1rem} @media (min-width:768px) { /*--- toggle ---*/ .filterToggle {display:none} } /*--- active filters ---*/ .crumbs {list-style:none;gap:.25rem;padding:0} .crumbs .crumb {margin:0} .crumbs .crumb i {margin:0 0 0 .5em} /*--- sidebar ---*/ #ISearch3FilterForm, .filtercontainer {background-color:transparent} .filtercontainer {} .filtercontainer .filtertitle {padding:0;margin:0 0 .5em} .filtercontainer .filterlist {background-color:transparent;border-radius:0;white-space:normal;margin:0} .filtercontainer:not(#ISearch3PriceSlider-Container) .filterlist {padding:0} .filtercontainer:not(#ISearch3PriceSlider-Container):not(#ISearch3TextBoxContainer) .filterlist {display:flex;flex-direction:column;gap:.2rem;padding-right:.5rem} /*--- filter item ---*/ .filtercontainer:not(#ISearch3PriceSlider-Container):not(#ISearch3TextBoxContainer) .filterlist .singlefilter {display:flex;align-items:start;gap:.5rem} .filtercontainer .filterlist input[type="checkbox"] {margin:0} .filtercontainer .productcount {margin-left:auto} /*--- price ---*/ #ISearch3PriceSlider-Container label {position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%)} #ISearch3PriceSlider-Container input {width:auto;max-width:calc(100% - 3rem);position:relative} /*--- search ---*/ #ISearch3TextBoxContainer label {position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%)} /*--- category search ---*/ .filtertitlecontainer button {width:1.5em;height:1.5em;padding:.25em;overflow:hidden} .filtertitlecontainer button::before {display:block;height:200%} .filtertitlecontainer label {position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%)} /*--- product listing --------*/ #productholder {margin-right:0} .product-listing {} .product-listing.grid .single-product-layout a:hover {background-color:transparent;border:0} .regular-price {color:#767676} /*--- product page --------------*/ .product-page {margin:0 0 2rem} .product-page-top {padding:0;background-color:transparent} /*--- fitment needed --- .productFitmentNeeded a {font-weight:bold}*/ /*--- add button ---*/ .add-to-wishlist, .add-to-cart {box-shadow:none} /*--- share ---*/ .sharethis-inline-share-buttons {display:block !important} /*--- email ---*/ .email-a-friend-wrap {display:block !important;width:auto} /*--- kit options ------------*/ .kit-add-to-cart-form {margin:0 0 2rem} /*--- related products ------------*/ .related-products {margin-top:2rem} /* --- COMMON VALUES ---------------------------------------------- THEME COLORS ------------ logo red = #ff0000 (minimum contrast against black but not white) action red (darker) = #ed0000 (minimum contrast against black or white) hover variant = #ff3434 (lighter; only adequate contrast against dark/black) darker red = #830000 (borders) NEUTRAL COLORS ------------ text on light background = #454545 semi-opaque black = rgba(0,0,0,.3) (backgrounds) BOX STYLING ------------ border radius = .25rem responsive padding = clamp(.5rem, 2vw, 1rem) opaque background box ------------ background-color:rgba(0,0,0,.6);border:1px solid #830000; */ /*--- GENERAL/COMMON ELEMENTS ----------------------------------------------------------------*/ /* body {background:url(../images/mmx-header-background-50.avif) no-repeat top center / clamp(0px, 70vw, 38rem) auto, #000 url(../images/mmx-page-background-45.avif) repeat-x top center / clamp(0px, 300vw, 1920px) auto;font-family:'Arial', sans-serif;color:#fff} ---*/ /*--- links ---*/ a {color:#ed0000} a:hover, a:focus {color:#ff6464} /*--- breadcrumb ---*/ .breadcrumb {color:#fff;margin:0 clamp(.5rem, 2vw, 1rem) 1rem} /*--- headings ------------------------------*/ h1, h2, h3, h4, .group-header {line-height:1.1;font-weight:bold;margin:0 0 1em} h1, h1.product-page-header {padding:0 0 .25em;font-size:1.125rem;border-bottom:solid 1px #830000;font-style:italic} h2, .checkout-page .checkout-header {font-size:1.25rem} h3 {font-size:1rem} /*--- group heading (usually

?) ---*/ .group-header {padding:0;border:0;font-size:1.25rem;color:#fff} /*--- misc. text ---*/ .text-success {color:#4f9b51} /*--- MODAL/DIALOG ------------------------------------------------------------*/ .modal-content {border-radius:.25rem} /*--- switch link ---*/ .switch-mini-link {color:#ed0000} /*--- FORMS ------------------------------------------------------------*/ .form-text, legend {color:#fff} label {} .form-label-prefix-required, .form-label-suffix-required, .form-validation-message .has-error {color:#ff6464} .form-label-prefix-optional, .form-label-suffix-optional, .form-description {color:#bdbdbd} .form-control, input, textarea, select {padding:.6em;border:0;color:#454545;border-radius:.25rem} .form-control-feedback {top:.2em} .popover {color:#454545} input[type="radio"], input[type="checkbox"] {accent-color:#ed0000;scale:1.1;margin-top:0} label input[type="radio"], label input[type="checkbox"] {margin-right:.25em} /*--- BUTTONS --------------*/ button, input[type="button"], .btn {padding:.65em 1em;border:0;border-radius:.25rem;font-weight:bold;color:#454545;transition:background-color .2s, color .2s} button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, .btn:hover, .btn:focus {color:#000} /*--- primary ---*/ .btn-primary {background-color:#ed0000;color:#fff} .btn-primary:hover, .btn-primary:focus {background-color:#e00101;color:#fff} /*--- success ---*/ .btn-success, .btn-success:hover, .btn-success:focus {color:#fff} /*--- link style ---*/ .btn-link {color:#ed0000} .btn-link:hover, .btn-link:focus {color:#ff3434} /*--- LIGHT BACKGROUND AREAS ----------------------------------------------*/ .product-page, .order-details, .shipping-estimator {background-color:#fff;color:#454545} .modal-content, .order-details {color:#454545} /*--- group heading ---*/ .product-page .group-header, .modal-content .group-header, .order-details .group-header {color:#454545} /*--- link hover ---*/ .product-page a, .minicart-wrap a {} .product-page a:hover, .product-page a:focus, .minicart-wrap a:hover, .minicart-wrap a:focus {color:#830000} /*--- inputs & buttons ---*/ .product-page input:not([type="checkbox"]):not([type="radio"]), .product-page textarea, .product-page .btn-default, .kit-add-to-cart-form input:not([type="checkbox"]):not([type="radio"]), .kit-add-to-cart-form .btn-default, .minicart-wrap .btn-default, .order-details input:not([type="checkbox"]):not([type="radio"]), .order-details textarea, .order-details .btn-default {box-shadow:inset 0 0 0 1px #454545} .product-page .form-text, .modal-content .form-text, .order-details .form-text {color:#454545} /*--- CALLOUT BANNER --------------*/ .callout-banner {display:block;width:fit-content;border:1px solid#830000;border-radius:.25rem;margin:0 auto 1rem;overflow:hidden} .callout-banner img {max-width:calc(100% + 2px);margin:-1px} /*--- HEADER ----------------------------------------------------------------*/ /*--- top group --------------------*/ .header-row {display:flex;align-items:center;gap:0 clamp(.5rem, 3vw, 1rem);padding:0 clamp(.5rem, 2vw, 1rem) 0 .5rem} @media (max-width:767px) { .header-row {padding-left:4rem} } @media (min-width:768px) { .header-row {display:grid;grid-template-columns:auto 1fr;justify-items:end;gap:.75rem 0;padding-top:.25rem;padding-bottom:.25rem} } /*--- logo ---*/ .header-row .logo-wrap {grid-row:1/5;width:auto;padding:0} .header-row .logo {padding:.5rem;transition:opacity .2s} .header-row .logo:hover, .header-row .logo:focus {opacity:.8} .header-row .logo img {display:block;max-height:none;width:10rem} @media (min-width:768px) { .header-row .logo img {width:clamp(8.5rem, 1vw, 16rem);width:16rem} } /*--- utility links ---*/ .header-row .user-links {display:flex;flex-wrap:wrap;justify-content:center;margin:0 0 0 auto} .header-row .user-links li {margin:0} .header-row .user-links a {display:block;padding:.35em .5em;font-size:.875rem} /*--- vehicle toggle ---*/ .header-row .user-links .vehicle-link {display:none !important} @media (max-width:767px) { /*--- utility links ---*/ .header-row .user-links a:not(:hover):not(:focus) {color:#fff} } /*--- phone ---*/ .header-row .phone {display:flex;gap:.1em;font-size:.9rem;font-weight:bold;font-style:italic;color:#fff} .header-row .phone span {color:#ff0000} /*--- tagline ---*/ .header-row .tagline {font-size:1.25rem;font-weight:900;font-style:italic} .header-row .tagline b {color:#ff0000;font-weight:900} /*--- link group ---*/ .header-row .header-links {list-style:none;display:flex;flex-wrap:wrap;align-items:center;padding:0;background-color:rgba(0,0,0,.6);border:1px solid#830000;border-radius:.25rem;margin:0} .header-row .header-links li {} .header-row .header-links a {display:block;padding:.5em .75em;font-size:.875rem;position:relative} .header-row .header-links a:not(:hover), .header-row .header-links a:not(:focus) {} .header-row .header-links li:nth-child(-n+4) a::after {display:block;width:1em;height:1em;border-radius:50%;background-color:#ed0000;font-size:.4em;position:absolute;top:calc(50% - .5em);right:-.5em;content:""} .header-row .header-links li:nth-last-child(-n+5) a {padding:.5em} .header-row .header-links img {width:1.5rem} @media (min-width:768px) and (max-width:850px) { /*--- flex line break ---*/ .header-row .header-links {justify-content:end} .header-row .header-links::after {order:-1;flex:100%;content:""} .header-row .header-links li:nth-child(1) {order:-5} .header-row .header-links li:nth-child(2) {order:-4} .header-row .header-links li:nth-child(3) {order:-3} .header-row .header-links li:nth-child(4) {order:-2} .header-row .header-links li:nth-child(5) {order:-1} } @media (max-width:767px) { /*--- phone, tagline, link group ---*/ .header-row .phone, .header-row .header-links, .header-row .tagline {display:none} } /*--- NAV ---------------------------------------------------------------------*/ @media (min-width:768px) { nav {padding:0 .5rem;background-color:#ed0000;border-radius:.25rem;margin:0 clamp(.5rem, 2vw, 1rem) 1rem} .navbar-default {display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:1rem} } /*--- menu toggle ---*/ .navbar-toggle {background-color:rgba(0,0,0,.5);border-color:#ed0000 !important;position:absolute;top:clamp(-3.4rem, -10vw, -2.5rem);left:clamp(.5rem, 2vw, 1rem);margin:0} .navbar-toggle .icon-bar {background-color:#fff !important} .navbar-toggle:hover, .navbar-toggle:focus {background-color:rgba(255,255,255,.1) !important;border-color:#ed0000} /*--- menu ----------*/ .navbar-collapse {padding:0;background-color:#222;border:0;box-shadow:none} /*--- wrapper ---*/ .navbar-collapse .navbar-nav {margin:0} /*---