/** Shopify CDN: Minification failed
Line 869:22 Expected ":"
**/
/* No !important. It beat even inline styles, so any section that set its own heading
size silently rendered at 2.2rem instead — the Instagram banner asks for 26px and
the Nick's Recommendations banner for 18px, and both had 35px titles spilling out of
their fixed-height bars on mobile. Sections that state a size now keep it; the rest
still land on 2.2rem. */
h2 {
font-size: 2.2rem;
}
.header__row {
display: flex;
}
.header__row .header__columns {
flex: 1;
}
.section.page-width-content,
.section.section--page-width,
div[class*="cps-grid-template"],
div[class*="cps-header-template"],
div.fcd-section-wrapper,
.shopify-section .icon-text-wrapper-template,
#insta-feed,
div[class*="recommendations-grid-template"],
div[class*=icon-text-wrapper] {
padding-left: 20px;
padding-right: 20px;
}
div.header__underlay-open,
div.header__underlay-open::after {
background: none !important;
box-shadow: none !important;
}
div.mega-menu.section div.mega-menu__grid {
background: #fff !important;
}
.section.page-width-content {
display: flex;
flex-direction: column;
}
.button {
transition: all 0.3s ease-in-out;
}
select,
div.spice-spa-addon-product-wrapper .spice-addon-group-dropdownBox .spice-addon-group-heading {
border-radius: var(--style-border-radius-inputs);
border: var(--style-border-width-inputs) solid var(--style-input-border-color);
padding: 12px 30px 12px 20px;
max-width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.5em;
cursor: pointer;
line-height: 0.8;
}
select:focus,
selec:focus-visible {
outline: none;
border-color: var(--color-accent-bright);
}
div.header-search__field svg {
width: 26px;
height: 26px;
}
input.search-input.header-search__input {
padding: 0;
}
header-component .header__row .header__columns.spacing-style {
padding: 0;
grid-gap: 0;
}
header-component .header__row .header__columns.spacing-style .menu-list__link {
padding: 1em 0;
}
/* 1.1 left zero headroom below the glyphs — .announcement-bar__slide clips at
overflow:hidden with a height that tracks this line-height exactly, so
descenders (g, y, p, q) got cut off. 1.3 gives them room inside the line box
itself rather than requiring slack in the container. */
aside.announcement-bar .announcement-bar__text {
line-height: 1.3;
}
aside.announcement-bar .announcement-bar__text a {
text-decoration: none;
font-weight: 500 !important;
}
aside.announcement-bar .announcement-bar__text a {
font-weight: 500;
padding: var(--);
}
div.garage-content div.garage-item {
background-color: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0 5px 10px;
border-radius: 7px;
}
div.garage-content div.garage-item span.remove-model {
margin: 0;
padding: 10px;
}
header-menu .header-menu__inner nav overflow-list {
display: flex;
align-items: stretch;
justify-content: stretch;
width: 100%;
}
div.garage-content .add-vehicle.button {
background: var(--button-background-color);
padding: var(--button-padding-block) var(--button-padding-inline);
color: var(--button-color);
line-height: 1;
}
.cm_tabs div.cm_tab-content {
padding: 0;
}
div.cm_vehicle-widget_button-container {
margin-right: 0;
flex: auto;
width: auto;
min-width: inherit;
}
/* The slotted items are flex children of the shadow , not of
the host, so stretch has to land there. Fill the shadow list to the host width,
then let each top-level item grow to share it equally (no empty space on the right). */
header-menu .header-menu__inner nav overflow-list::part(list) {
width: 100%;
}
/* Spread the items across the bar, inset from the edges rather than pinned to them.
The inset and gap step down as the viewport narrows so the space goes back to the
items and Shop by Brand stays out of the More overflow for as long as it fits. */
header-menu .header-menu__inner nav overflow-list::part(list) {
justify-content: space-between;
column-gap: 8px;
padding-inline: 12px;
}
@media screen and (min-width: 1400px) {
header-menu .header-menu__inner nav overflow-list::part(list) {
column-gap: 12px;
padding-inline: 32px;
}
}
@media screen and (min-width: 1700px) {
header-menu .header-menu__inner nav overflow-list::part(list) {
column-gap: 16px;
padding-inline: 100px;
}
}
/* Items must not grow. overflow-list decides what fits by dropping the "More" button
into the row and seeing which item wraps, and growing items expand to fill the row
exactly — so there was never room for that button and the last item, Shop by Brand,
wrapped into the overflow every time. At their natural widths the eleven come to
1131px against a 1870px bar, which fits with room to spare. */
header-menu .header-menu__inner nav overflow-list .menu-list__list-item:not([slot='overflow']):not([slot='more']) {
flex: 0 0 auto;
justify-content: center;
}
.header_row .header__column[data-testid="header-bottom-center"] {
padding-top: 0;
padding-bottom: 0;
width: 100%;
flex: 1;
}
/* The centre column centres its child, so header-menu shrank to its content and the
nav measured 1111px on some passes and the full 1870px on others — overflow-list
reached a different verdict each time, which is why Shop by Brand came and went.
Stretching header-menu pins it to the column width so the measurement is stable. */
.header__row--bottom .header__column--center {
width: 100%;
}
.header__row--bottom .header__column--center > header-menu {
flex: 1 1 auto;
width: 100%;
}
/* header-menu is a flex container and __inner is a flex item, so it shrank to its
content and handed overflow-list 1145px of the 1870 the column had already been
given. That is where the width was being lost, and why the nav kept flipping
between fitting and not: at ~1145 the eleven items plus the More button do not
fit, at 1870 they do. */
.header__row--bottom .header-menu__inner,
.header__row--bottom .header-menu__inner > nav.menu-list {
flex: 1 1 auto;
width: 100%;
}
.cm_icon_garage__background {
width: 24px;
height: 24px;
background-color: var(--palette-color1) !important;
background-image: none !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.66667%2050.0001H5C5.91917%2050.0001%206.66667%2049.2526%206.66667%2048.3335V24.1668H43.3333V48.3335C43.3333%2049.2526%2044.0808%2050.0001%2045%2050.0001H48.3333C49.2525%2050.0001%2050%2049.2526%2050%2048.3335V11.0826C50%2010.0185%2049.3308%209.05012%2048.3358%208.67179L25.9142%200.167621C25.325%20-0.0565452%2024.6758%20-0.0565452%2024.0867%200.167621L1.66417%208.67262C0.669167%209.05012%200%2010.0193%200%2011.0835V48.3343C0%2049.2535%200.7475%2050.0001%201.66667%2050.0001ZM6.66667%2022.5001V15.0001C6.66667%2014.541%207.04%2014.1668%207.5%2014.1668H42.5C42.96%2014.1668%2043.3333%2014.541%2043.3333%2015.0001V22.5001H6.66667ZM1.66667%2011.0826C1.66667%2010.7068%201.90333%2010.3643%202.255%2010.231L24.6767%201.72596C24.885%201.64679%2025.1142%201.64679%2025.3225%201.72596L47.7442%2010.231C48.0958%2010.3643%2048.3325%2010.7068%2048.3325%2011.0826V48.3335H44.9992V15.0001C44.9992%2013.6218%2043.8775%2012.5001%2042.4992%2012.5001H7.5C6.12167%2012.5001%205%2013.6218%205%2015.0001V48.3335H1.66667V11.0826Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M40.8334%2033.3333C40.8334%2031.955%2039.7118%2030.8333%2038.3334%2030.8333H37.5001C36.6951%2030.8333%2035.9859%2031.2217%2035.5284%2031.8142L34.4359%2028.9C34.1251%2028.0725%2033.4242%2027.4825%2032.5618%2027.3208C31.2534%2027.0767%2028.5301%2026.6667%2025.0001%2026.6667C21.4701%2026.6667%2018.7467%2027.0767%2017.4392%2027.3208C16.5759%2027.4817%2015.8751%2028.0717%2015.5642%2028.9L14.4717%2031.8142C14.0142%2031.2217%2013.3051%2030.8333%2012.5001%2030.8333H11.6667C10.2884%2030.8333%209.16675%2031.955%209.16675%2033.3333C9.16675%2034.5625%2010.0601%2035.5817%2011.2309%2035.7892L10.7842%2036.0567C9.78675%2036.6558%209.16675%2037.75%209.16675%2038.915V44.1667C9.16675%2044.7808%209.50425%2045.3125%2010.0001%2045.6017V47.5C10.0001%2048.8783%2011.1217%2050%2012.5001%2050H15.0001C16.3784%2050%2017.5001%2048.8783%2017.5001%2047.5V45.8333H32.5001V47.5C32.5001%2048.8783%2033.6217%2050%2035.0001%2050H37.5001C38.8784%2050%2040.0001%2048.8783%2040.0001%2047.5V45.6017C40.4959%2045.3125%2040.8334%2044.7808%2040.8334%2044.1667V38.915C40.8334%2037.7508%2040.2134%2036.6558%2039.2159%2036.0567L38.7692%2035.7892C39.9401%2035.5817%2040.8334%2034.5625%2040.8334%2033.3333ZM17.1251%2029.4858C17.2284%2029.2092%2017.4601%2029.0133%2017.7442%2028.96C18.9967%2028.7258%2021.6042%2028.3333%2025.0001%2028.3333C28.3959%2028.3333%2031.0034%2028.7258%2032.2568%2028.96C32.5401%2029.0125%2032.7717%2029.2092%2032.8751%2029.4858L34.6301%2034.1667H15.3692L17.1251%2029.4858ZM10.8334%2033.3333C10.8334%2032.8733%2011.2067%2032.5%2011.6667%2032.5H12.5001C12.9601%2032.5%2013.3334%2032.8733%2013.3334%2033.3333V34.1667H11.6667C11.2067%2034.1667%2010.8334%2033.7933%2010.8334%2033.3333ZM15.8334%2047.5C15.8334%2047.96%2015.4601%2048.3333%2015.0001%2048.3333H12.5001C12.0401%2048.3333%2011.6667%2047.96%2011.6667%2047.5V45.8333H15.8334V47.5ZM37.5001%2048.3333H35.0001C34.5401%2048.3333%2034.1667%2047.96%2034.1667%2047.5V45.8333H38.3334V47.5C38.3334%2047.96%2037.9601%2048.3333%2037.5001%2048.3333ZM39.1667%2044.1667H10.8334V38.915C10.8334%2038.3333%2011.1434%2037.7858%2011.6426%2037.4858L14.3976%2035.8333H35.6026L38.3576%2037.4858C38.8567%2037.785%2039.1667%2038.3333%2039.1667%2038.915V44.1667ZM38.3334%2034.1667H36.6667V33.3333C36.6667%2032.8733%2037.0401%2032.5%2037.5001%2032.5H38.3334C38.7934%2032.5%2039.1667%2032.8733%2039.1667%2033.3333C39.1667%2033.7933%2038.7934%2034.1667%2038.3334%2034.1667Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M40.8333%2015.8333H9.16659C8.70575%2015.8333%208.33325%2016.2067%208.33325%2016.6667C8.33325%2017.1267%208.70575%2017.5%209.16659%2017.5H40.8333C41.2941%2017.5%2041.6666%2017.1267%2041.6666%2016.6667C41.6666%2016.2067%2041.2941%2015.8333%2040.8333%2015.8333Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M40.8333%2019.1667H9.16659C8.70575%2019.1667%208.33325%2019.54%208.33325%2020C8.33325%2020.46%208.70575%2020.8333%209.16659%2020.8333H40.8333C41.2941%2020.8333%2041.6666%2020.46%2041.6666%2020C41.6666%2019.54%2041.2941%2019.1667%2040.8333%2019.1667Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M35.0001%2037.5H15.0001C14.5392%2037.5%2014.1667%2037.8725%2014.1667%2038.3333C14.1667%2038.7942%2014.5392%2039.1667%2015.0001%2039.1667H35.0001C35.4609%2039.1667%2035.8334%2038.7942%2035.8334%2038.3333C35.8334%2037.8725%2035.4609%2037.5%2035.0001%2037.5Z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.66667%2050.0001H5C5.91917%2050.0001%206.66667%2049.2526%206.66667%2048.3335V24.1668H43.3333V48.3335C43.3333%2049.2526%2044.0808%2050.0001%2045%2050.0001H48.3333C49.2525%2050.0001%2050%2049.2526%2050%2048.3335V11.0826C50%2010.0185%2049.3308%209.05012%2048.3358%208.67179L25.9142%200.167621C25.325%20-0.0565452%2024.6758%20-0.0565452%2024.0867%200.167621L1.66417%208.67262C0.669167%209.05012%200%2010.0193%200%2011.0835V48.3343C0%2049.2535%200.7475%2050.0001%201.66667%2050.0001ZM6.66667%2022.5001V15.0001C6.66667%2014.541%207.04%2014.1668%207.5%2014.1668H42.5C42.96%2014.1668%2043.3333%2014.541%2043.3333%2015.0001V22.5001H6.66667ZM1.66667%2011.0826C1.66667%2010.7068%201.90333%2010.3643%202.255%2010.231L24.6767%201.72596C24.885%201.64679%2025.1142%201.64679%2025.3225%201.72596L47.7442%2010.231C48.0958%2010.3643%2048.3325%2010.7068%2048.3325%2011.0826V48.3335H44.9992V15.0001C44.9992%2013.6218%2043.8775%2012.5001%2042.4992%2012.5001H7.5C6.12167%2012.5001%205%2013.6218%205%2015.0001V48.3335H1.66667V11.0826Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M40.8334%2033.3333C40.8334%2031.955%2039.7118%2030.8333%2038.3334%2030.8333H37.5001C36.6951%2030.8333%2035.9859%2031.2217%2035.5284%2031.8142L34.4359%2028.9C34.1251%2028.0725%2033.4242%2027.4825%2032.5618%2027.3208C31.2534%2027.0767%2028.5301%2026.6667%2025.0001%2026.6667C21.4701%2026.6667%2018.7467%2027.0767%2017.4392%2027.3208C16.5759%2027.4817%2015.8751%2028.0717%2015.5642%2028.9L14.4717%2031.8142C14.0142%2031.2217%2013.3051%2030.8333%2012.5001%2030.8333H11.6667C10.2884%2030.8333%209.16675%2031.955%209.16675%2033.3333C9.16675%2034.5625%2010.0601%2035.5817%2011.2309%2035.7892L10.7842%2036.0567C9.78675%2036.6558%209.16675%2037.75%209.16675%2038.915V44.1667C9.16675%2044.7808%209.50425%2045.3125%2010.0001%2045.6017V47.5C10.0001%2048.8783%2011.1217%2050%2012.5001%2050H15.0001C16.3784%2050%2017.5001%2048.8783%2017.5001%2047.5V45.8333H32.5001V47.5C32.5001%2048.8783%2033.6217%2050%2035.0001%2050H37.5001C38.8784%2050%2040.0001%2048.8783%2040.0001%2047.5V45.6017C40.4959%2045.3125%2040.8334%2044.7808%2040.8334%2044.1667V38.915C40.8334%2037.7508%2040.2134%2036.6558%2039.2159%2036.0567L38.7692%2035.7892C39.9401%2035.5817%2040.8334%2034.5625%2040.8334%2033.3333ZM17.1251%2029.4858C17.2284%2029.2092%2017.4601%2029.0133%2017.7442%2028.96C18.9967%2028.7258%2021.6042%2028.3333%2025.0001%2028.3333C28.3959%2028.3333%2031.0034%2028.7258%2032.2568%2028.96C32.5401%2029.0125%2032.7717%2029.2092%2032.8751%2029.4858L34.6301%2034.1667H15.3692L17.1251%2029.4858ZM10.8334%2033.3333C10.8334%2032.8733%2011.2067%2032.5%2011.6667%2032.5H12.5001C12.9601%2032.5%2013.3334%2032.8733%2013.3334%2033.3333V34.1667H11.6667C11.2067%2034.1667%2010.8334%2033.7933%2010.8334%2033.3333ZM15.8334%2047.5C15.8334%2047.96%2015.4601%2048.3333%2015.0001%2048.3333H12.5001C12.0401%2048.3333%2011.6667%2047.96%2011.6667%2047.5V45.8333H15.8334V47.5ZM37.5001%2048.3333H35.0001C34.5401%2048.3333%2034.1667%2047.96%2034.1667%2047.5V45.8333H38.3334V47.5C38.3334%2047.96%2037.9601%2048.3333%2037.5001%2048.3333ZM39.1667%2044.1667H10.8334V38.915C10.8334%2038.3333%2011.1434%2037.7858%2011.6426%2037.4858L14.3976%2035.8333H35.6026L38.3576%2037.4858C38.8567%2037.785%2039.1667%2038.3333%2039.1667%2038.915V44.1667ZM38.3334%2034.1667H36.6667V33.3333C36.6667%2032.8733%2037.0401%2032.5%2037.5001%2032.5H38.3334C38.7934%2032.5%2039.1667%2032.8733%2039.1667%2033.3333C39.1667%2033.7933%2038.7934%2034.1667%2038.3334%2034.1667Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M40.8333%2015.8333H9.16659C8.70575%2015.8333%208.33325%2016.2067%208.33325%2016.6667C8.33325%2017.1267%208.70575%2017.5%209.16659%2017.5H40.8333C41.2941%2017.5%2041.6666%2017.1267%2041.6666%2016.6667C41.6666%2016.2067%2041.2941%2015.8333%2040.8333%2015.8333Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M40.8333%2019.1667H9.16659C8.70575%2019.1667%208.33325%2019.54%208.33325%2020C8.33325%2020.46%208.70575%2020.8333%209.16659%2020.8333H40.8333C41.2941%2020.8333%2041.6666%2020.46%2041.6666%2020C41.6666%2019.54%2041.2941%2019.1667%2040.8333%2019.1667Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M35.0001%2037.5H15.0001C14.5392%2037.5%2014.1667%2037.8725%2014.1667%2038.3333C14.1667%2038.7942%2014.5392%2039.1667%2015.0001%2039.1667H35.0001C35.4609%2039.1667%2035.8334%2038.7942%2035.8334%2038.3333C35.8334%2037.8725%2035.4609%2037.5%2035.0001%2037.5Z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
div.cm_garage .garage-icon {
filter: none;
}
span.garage-size,
.header__cart-count {
border-radius: 100em;
background-color: var(background-color);
min-width: 1.3em;
min-height: 1.3em;
border-radius: 100em;
background-color: var(--palette-accent);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
line-height: 0.7;
color: #fff;
font-size: 80%;
}
div.account-button {
width: auto;
}
div.account-button svg {
max-width: 20px;
}
/* Mobile: garage + account + cart stay in one horizontal row (not stacked) */
@media screen and (max-width: 749px) {
header-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: flex-end;
gap: 0;
width: max-content;
max-width: 100%;
}
header-actions > *,
header-actions #cm-garage,
header-actions .cm_garage,
header-actions .header-actions__action,
header-actions .account-button {
flex: 0 0 auto !important;
position: relative;
}
header-actions #cm-garage,
header-actions .cm_garage {
display: flex;
align-items: center;
}
.menu-drawer-container[open] a.menu-drawer__animated-element {
width: 100%;
margin: 0;
color: var(--color-foreground);
}
summary.menu-drawer__menu-item.menu-drawer__menu-item--mainlist *,
a.menu-drawer__menu-item.menu-drawer__menu-item--mainlist *{
z-index: 1;
}
summary.menu-drawer__menu-item.menu-drawer__menu-item--mainlist::before,
a.menu-drawer__menu-item.menu-drawer__menu-item--mainlist::before {
content: '';
width: 100%;
height: 0;
display:block;
position: absolute;
top: 0;
left: 0;
background-color: var(--palette-accent);
transition: all 0.3s ease-in-out;
z-index: 0;
}
summary.menu-drawer__menu-item.menu-drawer__menu-item--mainlist:hover:before,
summary.menu-drawer__menu-item.menu-drawer__menu-item--mainlist:focus:before,
a.menu-drawer__menu-item.menu-drawer__menu-item--mainlist:hover:before,
summary.menu-drawer__menu-item.menu-drawer__menu-item--mainlist:focus:before {
height: 100%;
}
.menu-drawer-container[open] summary.menu-drawer__menu-item.menu-drawer__menu-item--mainlist:hover,
.menu-drawer-container[open] summary.menu-drawer__menu-item.menu-drawer__menu-item--mainlist:focus {
color: var(--color-background) !important;
}
summary.menu-drawer__menu-item.menu-drawer__menu-item--mainlist,
a.menu-drawer__menu-item.menu-drawer__menu-item--mainlist {
font-weight: bold;
background: #fdfdfd;
color: #000;
border-top: 2px solid rgba(0,0,0,0.02);
}
summary.menu-drawer__menu-item.menu-drawer__menu-item--mainlist .menu-drawer__menu-item--parent {
background: var(--color-background);
}
.menu-drawer > nav > ul.menu-drawer__menu.has-submenu > li:last-child a {
border-top: 2px solid var(--color-border);
background: rgba(0,0,0,0.05);
}
li.menu-drawer__list-item accordion-custom summary,
li.menu-drawer__list-item accordion-custom a {
font-weight: bold;
font-size: 1.1em;
/* line-height: 1 clipped descenders (g, y, p, q) against the text span's
overflow: hidden truncation — see header-drawer.liquid's --parent/--child
rules for the matching floor. */
line-height: 1.2;
}
.menu-drawer__menu-item--mainlist > span.svg-wrapper {
padding-top:12px;
padding-bottom: 12px;
}
}
.convermax-custom-container {
max-width: 1500px;
margin: 0 auto;
padding: 0 20px;
/* added a bit of padding so it doesn't touch the very edge on smaller screens */
}
/* Custom styles for the Convermax vehicle widget buttons */
.cm_vehicle-widget_button__clear {
background-color: transparent !important;
color: var(--color-primary-button-background) !important;
border: 1px solid var(--color-primary-button-background) !important;
box-shadow: none !important;
outline: none !important;
border-radius: 4px !important;
margin-left: 8px !important;
--button-border-width: 1px !important;
--button-border-color: var(--color-primary-button-background) !important;
--color-primary-button-border: var(--color-primary-button-background) !important;
}
/* Convermax keeps re-asserting its own green fill on this icon at runtime, so
overriding fill/color directly on their SVG isn't reliable — hide it and
draw our own icon instead (same approach as the verify-fitment dropdown
arrow above). */
.cm_vehicle-widget_button__clear .cm_icon-reset {
display: none !important;
}
.cm_vehicle-widget_button__clear {
min-width: 48px;
min-height: 40px;
background-image: url(../assets/icon-cm-vehicle-reset-dark.svg) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
}
/* Verify Fitment (product page) is the one context with a dark widget
background - every other instance (homepage hero, mobile vehicle popup,
search page label) sits on white, where the dark icon above is correct. */
div.cm_vehicle-widget__verify-fitment .cm_vehicle-widget_button__clear {
background-image: url(../assets/icon-cm-vehicle-reset.svg) !important;
}
.cm_vehicle-widget_button__clear[disabled="true"] {
opacity: 0.4;
pointer-events: none;
}
.cm_vehicle-widget_button__clear::after,
.cm_vehicle-widget_button__clear::before {
display: none !important;
box-shadow: none !important;
border: none !important;
}
.cm_vehicle-widget_button__go {
background-color: var(--color-primary-button-background) !important;
color: #ffffff !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
border-radius: 4px !important;
--button-border-width: 0px !important;
--button-border-color: var(--color-primary-button-background) !important;
--color-primary-button-border: var(--color-primary-button-background) !important;
}
.cm_vehicle-widget_button__go::after,
.cm_vehicle-widget_button__go::before {
display: none !important;
box-shadow: none !important;
border: none !important;
}
.cm_vehicle-widget_button__go:hover {
background-color: var(--color-primary-button-background) !important;
--button-border-color: var(--color-primary-button-background) !important;
}
/* Convermax intentionally hides #cm-vehicle-label on desktop search until a
vehicle is selected (matching Collection Hero's own behavior) - confirmed
by their team. We want the "Add a vehicle" prompt visible on desktop too,
so this only targets that empty (cmTemplate_active) state. Scoped with
:has() rather than the earlier blanket override so the "Shopping for X"
state (cmTemplate_locked) keeps Convermax's own layout untouched once a
vehicle is active - that state already displays correctly on its own. */
body.cm_search #cm-vehicle-label .cm_vehicle-widget:has(.cmTemplate_active) {
display: flex !important;
}
.resource-list__carousel slideshow-arrows {
padding: 0;
}
.loox-widget .loox-rating-content svg.loox-icon {
fill: var(--color-primary-button-background);
color: var(--color-primary-button-background);
}
/* Loox V2 carousel: clip "Powered by Loox" (.loox-branding is inside cross-origin iframe) */
.loox-v2-carousel-container.loox-widget {
overflow: hidden;
}
.loox-v2-carousel-container .loox-branding,
.loox-widget .loox-branding {
display: none !important;
}
div.mega-menu__detail {
margin-top: 15px;
}
.mega-menu__content-list-item div.mega-featured-card {
flex: 1;
display: flex !important;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
.mega-menu__content-list-item .mega-featured-card__price {
flex: 1;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.mega-menu__content-list-item div.mega-featured-card__media,
.mega-menu__content-list-item div.mega-featured-card__media .mega-featured-card__media {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
height: 15vh;
}
.mega-menu__content-list-item div.mega-featured-card .mega-featured-card__title {
font-weight: bold !important;
margin-bottom: 0.5em;
}
.mega-menu__content-list-item div.mega-featured-card__media img {
width: auto;
height: auto;
max-height: 100%;
}
.mega-menu__content-list-item a,
.mega-menu__content-list-item .mega-featured-card__price,
.mega-menu__content-list-item .mega-featured-card__price span {
color: #fff !important;
}
.mega-menu__content-list-item .mega-featured-card__price span.price {
font-weight: bold !important;
font-size: 115%;
}
.mega-menu__content-list-item .mega-featured-card__price span.compare-at-price {
text-decoration-color: #fff !important;
}
.mega-menu__grid {
background-color: transparent !important;
}
div.cm_main-content .cm_SearchResult .product-list{
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: stretch;
flex-direction: row;
}
div.cm_main-content .cm_SearchResult .product-list .product-item {
display: flex;
flex-direction: column;
flex: 1 1 20%;
height: auto;
min-height: inherit;
border: 1px solid var(--palette-color2);
max-width: 32%;
}
div.cm_main-content .cm_SearchResult .product-list .product-item a {
position: relative;
display: block;
height: auto;
min-height: inherit;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__info {
padding: 10px;
flex: 1;
display: flex;
flex-direction: column;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__info .product-item__info-inner {
height: 100%;
display: flex;
flex-direction: column;
flex:1;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__info .product-item__info-inner .product-item__price-list {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
gap: 0.5em;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__info .product-item__info-inner .product-item__price-list span.price {
font-size: 120%;
font-weight: 500;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__info .product-item__info-inner .product-item__price-list span.price.price--compare {
text-decoration: line-through;
font-size: 100%;
font-weight: normal;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__info form button {
border-radius: 100em;
}
div.cm_main-content .cm_SearchResult .product-list .product-item a img {
position: relative;
transition: opacity 0.3s ease-in-out;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__image-wrapper img:nth-child(2) {
display: none;
}
div.cm_main-content .cm_SearchResult .product-list .product-item a > div {
padding: 0 !important;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__title {
font-weight: bold;
}
/* #itemsBlock div.cm_SearchHeader,
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__info .product-item__info-inner .product-item__vendor {
display: none;
}*/
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__label-list {
display: flex;
wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 5px;
gap: 5px;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__label-list > span {
display: inline-flex;
background-color: var(--palette-foreground);
color: var(--palette-lightest);
width: auto;
padding: 0 5px;
align-self: flex-start;
}
.product-list--collection .product-item .aspect-ratio--square {
overflow: hidden;
box-sizing: border-box;
}
.product-list--collection .product-item .aspect-ratio--square img {
max-height: 100%;
width: 100%;
object-fit: contain;
}
div.cm_main-content div.cm_SearchResult {
margin-top: 0;
}
div.cm_pagination {
display: flex;
align-items: center;
justify-content: center;
}
.cm_pagination ul.cm_pagination-repeater {
width: auto;
border: 1px solid var(--palette-color2);
border-radius: 7px;
}
.cm_pagination ul.cm_pagination-repeater li {
font-weight: 500;
padding: 0.8em;
}
.cm_pagination ul.cm_pagination-repeater li.cm_pagination-active {
border: 1px solid var(--palette-color1);
}
div.cm_SearchPage .cm_FacetPanel {
border: 1px solid var(--palette-color2);
background: var(--color-menu-surface);
}
/* Convermax filter panel (collection pages, search page, mobile filter dialog):
softened to match the rest of the site (pill header search and buttons, 14px cards).
Selectors are kept long per Convermax's guidance so they win over their own styles
without hiding or moving anything their scripts rely on. */
div.cm_FacetPanel {
border-radius: var(--style-border-radius-popover, 14px);
}
div.cm_FacetPanel .facetholder .cm_filterInput {
box-sizing: border-box;
width: 100%;
height: 40px;
padding: 0 16px;
font-size: 14px;
background: var(--color-input-background, #fff);
border: 1px solid var(--color-input-border, #dfdfdf);
border-radius: 50px;
}
div.cm_FacetPanel .facetholder .cm_filterInput:focus {
border-color: var(--color-foreground, #111);
outline: none;
}
div.cm_FacetPanel .facetholder .cm_filterInput:focus-visible {
box-shadow: 0 0 0 2px rgb(17 17 17 / 15%);
}
div.cm_FacetPanel .facetholder input.cm_facet_checkbox {
appearance: none;
flex-shrink: 0;
width: 16px;
height: 16px;
margin: 0 8px 0 0;
vertical-align: middle;
cursor: pointer;
background: #fff;
border: 1.5px solid #9a9a9a;
border-radius: 4px;
transition: background-color 0.15s, border-color 0.15s;
}
div.cm_FacetPanel .facetholder input.cm_facet_checkbox:checked {
background: var(--color-primary-button-background, #d91c27)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / 100% no-repeat;
border-color: var(--color-primary-button-background, #d91c27);
}
div.cm_FacetPanel .facetholder input.cm_facet_checkbox:focus-visible {
outline: 2px solid var(--color-foreground, #111);
outline-offset: 2px;
}
div.cm_FacetPanel .cmTemplate_priceFacet .cm_Inputs .cm_inputMin,
div.cm_FacetPanel .cmTemplate_priceFacet .cm_Inputs .cm_inputMax {
padding: 0 14px;
border-radius: 50px;
}
div.cm_FacetPanel .cm_VehicleSpecs select.cm_select__pretty {
padding-left: 16px;
border-radius: 50px;
}
/* Every button in the panel (Show More, GO, Reset, Start over) shares one look,
matching the site's red outline "Clear" button and pill-shaped red buttons */
div.cm_FacetPanel .facetholder .cm_show-all,
div.cm_FacetPanel .cm_button.cm_button__secondary {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 72px;
height: 36px;
padding: 0 18px;
font-size: 13px;
font-weight: 600;
line-height: 1;
color: var(--color-primary-button-background, #d91c27);
background: #fff;
border: 1px solid var(--color-primary-button-background, #d91c27);
border-radius: 50px;
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
}
div.cm_FacetPanel .facetholder .cm_show-all:hover,
div.cm_FacetPanel .cm_button.cm_button__secondary:hover {
color: #fff;
background: var(--color-primary-button-background, #d91c27);
}
/* GO sits in a row with the 40px Min/Max fields */
div.cm_FacetPanel .cmTemplate_priceFacet .cm_Inputs .cm_button.cm_button__secondary {
min-width: 56px;
height: 40px;
padding: 0 14px;
}
/* Clear / Done in the header of the mobile filter dialog */
#cm_FacetDialog .buttons-container .cm_button {
border-radius: 50px;
}
div.cm_SearchPage {
padding-bottom: 30px;
}
div.cm_SearchResult {
border: none !important;
}
div.spice-spa-addon-product-wrapper .spice-addon-group-dropdownBox {
background: none;
border: none;
}
div.spice-spa-addon-product-wrapper .spice-addon-group-dropdownBox .spice-spa-arrowIcon {
display: none;
}
.spice-addon-group-oneitemBox {
border: 1px solid #000;
}
.spice-addon-group-oneitemBox .spice-spa-addon-product-item {
align-items: flex-start;
}
#cm-verify-fitment {
padding: 8px 0;
background: var(--color-foreground);
color: var(--color-background);
}
#cm-verify-fitment a {
color: var(--palette-accent);
}
#cm-verify-fitment .cm_verify-fitment_fitment__container {
flex-direction: row-reverse;
}
#cm-verify-fitment .cm_verify-fitment_fitment__container.cm_vehicle-widget__collapsible {
background: url(../assets/icon-dropdown-arrow.svg);
background-repeat: no-repeat;
background-position: center right;
background-size: 20px 20px;
}
div.cm_vehicle-widget__verify-fitment {
margin-top: 0;
margin-bottom: 0;
}
div.cm_vehicle-widget__verify-fitment.cm_vehicle-widget__collapsible .cm_vehicle-widget_title {
font-size: 90%;
font-weight: 700;
padding: 10px 60px 10px 20px;
margin-right: 10px;
}
div.cm_vehicle-widget__verify-fitment.cm_vehicle-widget__collapsible select {
color: var(--color-foreground);
}
div.cm_vehicle-widget__verify-fitment.cm_vehicle-widget__collapsible .cm_vehicle-widget_select-container,
div.cm_vehicle-widget__verify-fitment.cm_vehicle-widget__collapsible .cm_vehicle-widget_button-container {
padding: 0 20px;
}
div.cm_vehicle-widget__verify-fitment.cm_vehicle-widget__collapsible .cm_vehicle-widget_button-container div[role="button"] {
margin-right: 0;
}
div.cm_vehicle-widget__search.cm_vehicle-widget__collapsible .cm_vehicle-widget_title .cm_icon {
display: none !important;
}
/* Verify-fitment title keeps Convermax's own angle icon (hidden above for the
search widget) instead of a static background image, so it can rotate to
reflect open/closed state below. */
div.cm_vehicle-widget__verify-fitment.cm_vehicle-widget__collapsible .cm_vehicle-widget_title .cm_icon-angle {
flex-shrink: 0;
transition: transform var(--animation-speed) var(--animation-easing);
}
div.cm_vehicle-widget__verify-fitment.cm_vehicle-widget__collapsible .cm_vehicle-widget_title .cm_icon-angle path {
fill: var(--color-background);
}
div.cm_vehicle-widget__verify-fitment.cm_vehicle-widget__collapsible .cm_vehicle-widget_title .cm_icon-angle.up {
transform: rotate(180deg);
}
/* Convermax's own collection-page app block bundles its Select Your Vehicle search
widget in with the filters/grid/sort it also renders, so the widget can't be removed
without dropping the whole block. Hides just the widget; scoped to the collection page
context so it doesn't touch the same widget type elsewhere. */
/* #cm-collection-page div.cm_vehicle-widget__search {
display: none !important;
} */
div.cm_vehicle-widget__search .cm_icon,
div.cm_vehicle-widget__verify-fitment .cm_icon path {
stroke: rgb(6, 162, 6);
stroke-width: 3px;
fill: rgb(6, 162, 6);
}
div.cm_vehicle-widget__verify-fitment .cm_icon.cm_icon-times path {
stroke: rgb(223, 2, 2);
fill: rgb(223, 2, 2);
}
#searchresults {
padding: 30px;
}
#searchresults ol {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 20px;
list-style: none;
}
#searchresults ol li {
flex: 1 1 20%;
}
button.slideshow-control {
}
div.shopify-policy__container {
max-width: var(--page-width);
margin: 0 auto;
padding: 40px;
width: 100%;
box-sizing: border-box;
}
#insta-feed > h2 {
display: none !important;
}
h3[class*="sbc-item-title-template"],
div[class*="sbc-item-link-template"] {
font-weight: normal;
}
.collection-hero__top .flex.w-full.items-center {
flex-direction: column;
}
.collection-hero__top .flex.w-full.items-center p {
width: 100%;
flex: 1;
}
.rebuy-incentives__announcement,
.rebuy-incentives__steps {
display: none !important;
}
div.rebuy-incentives__progress[data-rebuy-component="progress-bar"] {
background: #000;
padding: 5px 10px;
color: #fff;
text-align: left;
}
.rebuy-incentives__progress p {
text-align: left;
}
button.theme-drawer__close-button .svg-wrapper svg path {
fill: #000;
}
.cart-drawer__inner .theme-drawer__close-button {
background: none;max
box-shadow: none;
border: none;
}
.cart-items__product-info a.cart-items__title {
font-weight: bold;
}
.cart-items__product-info a.cart-items__title,
td.cart-items__details div.cart-items__variants-wrapper dl * {
font-size: 90%;
line-height: 1;
}
td.cart-items__details div.cart-items__variants-wrapper dl {
margin: 0;
margin: 0;
margin-block-start: 0;
}
.financing-drawer-bar .financing-drawer-bar__logos {
display: flex;
flex: 1;
}
.financing-drawer-bar .financing-drawer-bar__logos > span {
flex: 1;
}
nav ul.menu-drawer__menu {
margin: 0 !important;
padding: 0 !important;
}
nav ul.menu-drawer__menu > li {
padding: 0;
}
nav ul.menu-drawer__menu > .menu-drawer__list-item > a,
nav ul.menu-drawer__menu > .menu-drawer__list-item accordion-custom summary.menu-drawer__menu-item {
padding: 5px 5% !important;
}
nav ul.menu-drawer__menu > .menu-drawer__list-item > a,
nav ul.menu-drawer__menu > .menu-drawer__list-item accordion-custom summary {
width: 100%;
flex: 1;
margin: 0 !important;
}
header div.header__drawer {
--header-drawer-min-height: auto;
}
#tidio-chat-root.grid-layout {
margin-bottom: 9px;
}
#tidio-chat-root #button-body {
width: 43.2px;
height: 43.2px;
}
#tidio-chat-root #button-body i {
width: 18px;
}
@media(max-width: 990px) {
div.cm_main-content .cm_SearchResult .product-list .product-item {
flex:1 1 30%;
}
}
@media(max-width: 768px) {
div#cm-collection-header h1.cm-collection-header__title {
margin: 30px 0 0 0;
}
div.cm_main-content .cm_SearchResult .product-list .product-item {
flex: 1 1 40%;
}
div.product-item__info form button {
margin: 0 auto;
}
div.cm_main-content .cm_SearchResult .product-list .product-item .product-item__info .product-item__info-inner .product-item__price-list {
justify-content: center;
}
predictive-search-component.header-search {
margin-bottom: 5px;
}
}
@media screen and (max-width: 660px) {
/* Convermax needs #cm-garage visible (their garage features depend on it), so on
narrow screens only its text label is dropped, kept for screen readers, which
lets the icon sit beside the logo instead of covering it. */
header #cm-garage .garage-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* The centred logo is 168px wide; below 400px it would reach the garage icon. */
@media (max-width: 400px) {
header .header-logo__image {
width: 140px !important;
height: auto;
}
}
.header__columns header-actions,
#header-component[data-menu-style='drawer'] .header__columns header-actions {
grid-area: rightB !important;
grid-column: 5 / 6 !important;
}
div.product-list .product-item {
min-width: 40%;
}
div[class*="shop-by-category-template"] div[class*="sbc-content-template"] {
padding-right: 4em !important;
padding-left: 4em !important;
}
div[class*="shop-by-category-template"] button[class*="sbc-arrow-prev"] {
left: -15px;
}
div[class*="shop-by-category-template"] button[class*="sbc-arrow-next"] {
right: -15px;
}
}
/* Recommendation + search cards: price + ATC as direct card children stay in one row */
product-recommendations .product-card__content,
.fcd-search-results .product-card__content {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 8px;
}
product-recommendations .product-card__content > *:not(product-price):not(.buy-buttons-block),
.fcd-search-results .product-card__content > *:not(product-price):not(.buy-buttons-block) {
grid-column: 1 / -1;
}
product-recommendations .product-card__content > product-price,
.fcd-search-results .product-card__content > product-price {
grid-column: 1;
min-width: 0;
}
product-recommendations .product-card__content > .buy-buttons-block,
.fcd-search-results .product-card__content > .buy-buttons-block {
grid-column: 2;
justify-self: end;
}
product-recommendations .product-card__content .buy-buttons-block .product-form-buttons,
.fcd-search-results .product-card__content .buy-buttons-block .product-form-buttons {
margin: 0;
}
@media screen and (max-width: 749px) {
product-recommendations .product-card__content,
.fcd-search-results .product-card__content {
grid-template-columns: 1fr;
}
product-recommendations .product-card__content > product-price,
product-recommendations .product-card__content > .buy-buttons-block,
.fcd-search-results .product-card__content > product-price,
.fcd-search-results .product-card__content > .buy-buttons-block {
grid-column: 1;
justify-self: stretch;
}
}
a[aria-label="fcd-spice-addons"],
div.loox-rating.loox-widget:empty {
display: none;
}
/* Collection PLP: search within results (right of category title) */
#cm-collection-header.fcd-collection-header-row,
.fcd-collection-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
flex-wrap: wrap;
width: 100%;
}
.fcd-collection-header-row > h1,
.fcd-collection-header-row > .cm-collection-header__title {
flex: 1 1 auto;
min-width: 0;
}
.fcd-collection-filter-search {
flex: 0 1 320px;
margin-left: auto;
max-width: 100%;
}
.fcd-collection-filter-search--below-carousel {
flex: none;
align-self: flex-end !important;
width: 100% !important;
max-width: 320px !important;
margin: 16px 0 24px;
}
.fcd-collection-filter-search__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.fcd-collection-filter-search__field {
display: flex;
align-items: stretch;
width: 100%;
border: 1px solid #d4d6d8;
border-radius: 4px;
background: #fff;
overflow: hidden;
}
.fcd-collection-filter-search__input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: none;
background: transparent;
padding: 10px 12px;
font-size: 14px;
line-height: 1.3;
color: #111;
}
.fcd-collection-filter-search__input::placeholder {
color: #777;
}
.fcd-collection-filter-search__submit {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
border: 0;
border-left: 1px solid #d4d6d8;
background: #f5f5f5;
color: #111;
cursor: pointer;
}
.fcd-collection-filter-search__submit:hover {
background: #ececec;
}
#cm-collection-header > div.cm-collection-header__content h1 {
margin: 0;
}
/* Shared YMM selector card (home hero + collection) */
.fcd-ymm-card.custom-hero__convermax {
background: var(--fcd-ymm-bg, #ffffff);
border-radius: 8px;
padding: 20px;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
color: #333;
text-align: left;
box-sizing: border-box;
}
.fcd-ymm-card .custom-hero__convermax-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.fcd-ymm-card .custom-hero__convermax-icon {
flex-shrink: 0;
width: var(--fcd-ymm-icon-size, 70px);
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.fcd-ymm-card .custom-hero__convermax-icon img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.fcd-ymm-card .custom-hero__convermax-icon .icon-colored {
width: var(--fcd-ymm-icon-size, 70px);
height: var(--fcd-ymm-icon-size, 70px);
background-color: var(--fcd-ymm-icon-color, #000000);
-webkit-mask-image: var(--fcd-ymm-icon-mask);
mask-image: var(--fcd-ymm-icon-mask);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.fcd-ymm-card .custom-hero__convermax-content {
flex-grow: 1;
width: 100%;
}
.fcd-ymm-card .custom-hero__convermax-text {
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
}
.fcd-ymm-card .custom-hero__convermax-title {
font-size: 42px;
line-height: 1.2;
font-weight: 700;
color: #111;
}
.fcd-ymm-card .custom-hero__convermax-subtitle {
font-size: 20px;
line-height: 1.2;
color: #555;
}
.fcd-ymm-card .custom-hero__convermax-widget {
width: 100%;
}
.fcd-ymm-card .desktop-icon {
display: none !important;
}
.fcd-ymm-card .mobile-icon {
display: flex !important;
}
.fcd-ymm-card .custom-hero__convermax-mobile-card {
background-color: var(--fcd-ymm-bg, #ffffff);
border-radius: 8px;
padding: 30px 20px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
box-sizing: border-box;
}
.fcd-ymm-card .custom-hero__convermax-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 30px;
color: #333;
text-decoration: none;
line-height: 1;
z-index: 2;
}
/* Inline variant (collection): always use desktop card layout */
.fcd-ymm-card--inline.custom-hero__convermax,
.fcd-ymm-card--inline {
position: static !important;
opacity: 1 !important;
z-index: 1;
display: block;
width: 100%;
max-width: 100%;
height: auto !important;
padding: 30px !important;
pointer-events: auto;
background-image: none !important;
background-color: var(--fcd-ymm-bg, #ffffff);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.fcd-ymm-card--inline .custom-hero__convermax-close {
display: none !important;
}
.fcd-ymm-card--inline .custom-hero__convermax-inner {
flex-direction: row;
align-items: center;
gap: 27px;
width: 100%;
}
.fcd-ymm-card--inline .custom-hero__convermax-text {
flex-direction: row;
align-items: baseline;
text-align: left;
gap: 8px;
margin-bottom: 0;
}
.fcd-ymm-card--inline .custom-hero__convermax-title {
color: #111 !important;
font-size: 20px;
line-height: normal;
}
.fcd-ymm-card--inline .custom-hero__convermax-subtitle {
color: #555 !important;
font-size: 14px;
line-height: normal;
}
.fcd-ymm-card--inline .desktop-icon {
display: flex !important;
}
.fcd-ymm-card--inline .mobile-icon {
display: none !important;
}
.fcd-ymm-card--inline .custom-hero__convermax-mobile-card {
background-color: transparent;
border-radius: 0;
padding: 0;
display: block;
width: 100%;
}
.fcd-ymm-card--inline .custom-hero__convermax-widget .cm_vehicle-widget_dropdowns,
.fcd-ymm-card--inline .custom-hero__convermax-widget .cm_tab-content {
padding-block-end: 0;
}
@media (min-width: 768px) {
.fcd-ymm-card.custom-hero__convermax {
position: static !important;
opacity: 1 !important;
z-index: 1;
display: block;
width: 80vw;
max-width: 100%;
height: auto !important;
padding: 30px !important;
pointer-events: auto;
background-image: none !important;
background-color: var(--fcd-ymm-bg, #ffffff);
}
.fcd-ymm-card .custom-hero__convermax-close {
display: none;
}
.fcd-ymm-card .custom-hero__convermax-inner {
flex-direction: row;
align-items: center;
gap: 27px;
}
.fcd-ymm-card .custom-hero__convermax-text {
flex-direction: row;
align-items: baseline;
text-align: left;
gap: 8px;
margin-bottom: 0;
}
.fcd-ymm-card .custom-hero__convermax-title {
color: #111 !important;
font-size: 20px;
line-height: normal;
}
.fcd-ymm-card .custom-hero__convermax-subtitle {
color: #555 !important;
font-size: 14px;
line-height: normal;
}
.fcd-ymm-card .desktop-icon {
display: flex !important;
}
.fcd-ymm-card .mobile-icon {
display: none !important;
}
.fcd-ymm-card .custom-hero__convermax-mobile-card {
background-color: transparent;
border-radius: 0;
padding: 0;
display: block;
width: 100%;
}
.fcd-ymm-card .custom-hero__convermax-widget .cm_vehicle-widget_dropdowns,
.fcd-ymm-card .custom-hero__convermax-widget .cm_tab-content {
padding-block-end: 0;
}
}
@media (max-width: 767px) {
.fcd-ymm-card--inline.custom-hero__convermax {
width: 100%;
padding: 20px !important;
}
.fcd-ymm-card--inline .custom-hero__convermax-inner {
flex-direction: column;
align-items: center;
gap: 15px;
}
.fcd-ymm-card--inline .custom-hero__convermax-text {
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 16px;
}
.fcd-ymm-card--inline .custom-hero__convermax-title {
font-size: 20px;
}
.fcd-ymm-card--inline .custom-hero__convermax-subtitle {
font-size: 14px;
}
.fcd-ymm-card--inline .desktop-icon {
display: none !important;
}
.fcd-ymm-card--inline .mobile-icon {
display: flex !important;
}
.fcd-ymm-card--inline .custom-hero__convermax-mobile-card {
background-color: transparent;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
}
@media (max-width: 768px) {
.fcd-collection-header-row {
align-items: stretch;
}
.fcd-collection-filter-search {
flex: 1 1 100%;
margin-left: 0;
}
.fcd-collection-vehicle {
margin-bottom: 16px;
}
.fcd-collection-vehicle__selected-inner {
flex-direction: column;
align-items: stretch;
}
.fcd-collection-vehicle__clear {
width: 100%;
}
}
/* Instafeed app block (#insta-feed): the app renders posts as inline tags with a
fixed ~65px size, so on a narrow viewport only the handful that fit the first line
show at that size - the rest sit at 0 width until their lazy-loaded image swaps in,
which never happens because they never gain a real box to scroll into view. Grid
track sizing doesn't depend on that intrinsic size, so switching to a 2-column grid
gives every post a real cell up front - both fixes the tiny thumbnails and lets the
lazy loader actually trigger past the first row. Desktop is left on the app's own
layout.
Written against app version 7.3.0's markup ( tags as direct children). The app
auto-updates outside our control - 19.1.0 replaced that structure with
.instafeed-new-layout-* wrappers (see the block below), which this no longer
matches, so it's currently inert. Left in rather than deleted in case the app ever
reverts or A/B-tests the old markup back in. */
@media screen and (max-width: 749px) {
#insta-feed {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
#insta-feed > a {
display: block !important;
width: 100% !important;
/* The app ships z-index: 999999 on these tags. Harmless in its own layout,
where they're plain static-positioned links - z-index does nothing without a
positioning context. Turning #insta-feed into a grid gives its items a
stacking context of their own, where z-index applies even at position:
static. That let the thumbnails paint over the sticky header (z-index 18)
while scrolling, and over the app's own lightbox (z-index 99999) when a
post opens - hiding its close control with no way back to the grid. */
z-index: auto !important;
}
#insta-feed .instafeed-container {
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1;
}
}
/* Same fix, rewritten against app version 19.1.0's markup. The app now lays the grid
out itself via inline styles on .instafeed-new-layout-wrapper/-item
(`display: grid; grid-template-columns: repeat(6, 1fr)`, fixed ~53px item boxes) -
all 6 posts packed into one unscrollable row on narrow screens, the same visual bug
as the old markup, different mechanism. !important in a stylesheet still beats a
plain (non-!important) inline style regardless of how that inline value was set, so
this overrides it the same way the block above did for the old version.
The z-index leak from the 7.3.0 fix above doesn't reproduce here - z-index computes
to auto on every layer of the new markup, and the lightbox itself now sits at
2147483647 (z-index's maximum value), so nothing in the grid could plausibly paint
over it even if it tried. No equivalent fix needed for that half of the old bug. */
@media screen and (max-width: 749px) {
.instafeed-new-layout-container {
width: 100% !important;
}
.instafeed-new-layout-wrapper {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.instafeed-new-layout-item {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
}
}
/* Instafeed lightbox avatar + header/image overlap.
Avatar: the profile picture the app points .profile-picture's src at is a real
Instagram/Facebook CDN URL (scontent.xx.fbcdn.net) but fails to load -
naturalWidth/naturalHeight both 0 despite the ![]()
reporting complete. Those CDN
URLs are commonly signed/short-lived and don't tend to survive being embedded on a
third-party domain. A prior version of this fix showed the shop's icon mark in its
place; Milan asked for the avatar slot gone instead rather than standing in as a
stunt double for a missing Instagram photo. Hides .instafeed-header-logo (the
wrapper), not just the ![]()
, so the row doesn't keep a blank 42px square where the
avatar used to be - the username sits alone on the left now.
Header/image overlap: separately, .instafeed-header is position: fixed with the post
image below it given margin-top to clear it - two numbers that have to agree, and
didn't. Live-checked (before the avatar was hidden): header renders at 42px, but
.profile-picture inside it rendered at 130x72px, nearly 3x the header's own height,
so the avatar's bottom half spilled out past the header and onto the photo below it.
Fixed values on both sides of that gap so they can't drift out of sync again
regardless of what the app does internally (its markup already changed once under
us this session, 7.3.0 -> 19.1.0). Solid header background so a transition frame
doesn't show photo bleeding through. Still needed with the avatar gone - the header
height and the image's margin-top are still two numbers that have to agree with each
other, independent of what's inside the header.
`:not(#\9)` on every selector here: the app's own stylesheet for this version loads
after ours in the document, so a plain `.instafeed-lightbox .x` selector ties with
theirs on specificity and loses on source order, even with !important on both sides.
An `html body` ancestor prefix (three extra elements of specificity) was tried first
and still lost, so whatever the app uses here is more specific than that. `:not(#\9)`
is a standard escape hatch rather than another guess at a number to out-rank: `:9`
isn't a real id, so the clause always matches, but its specificity still counts as if
it were - one full ID's worth (0,1,0,0), well past anything a class-based selector
could reach.
Header/image fix is mobile/tablet only: at <=1024px the app itself pins the header as
a top bar and pushes the image below it, which is the layout the fixed values above
were written for. Above 1024px the app lays the popup out side by side with the header
as an in-flow row at the top of the caption column; forcing it fixed there pulled it
out of the flow so it covered the first caption line, and the 48px margin pushed the
full-height image past the bottom of the popup. */
.instafeed-lightbox .instafeed-header-logo:not(#\9) {
display: none !important;
}
/* Left padding on the username now that the avatar next to it is gone - otherwise it
sits flush against the header's edge. */
.instafeed-lightbox .instafeed-fullname:not(#\9) {
padding-left: 16px !important;
}
@media (max-width: 1024px) {
.instafeed-lightbox .instafeed-header:not(#\9) {
position: fixed !important;
height: 48px !important;
background-color: #fff !important;
display: flex !important;
align-items: center !important;
}
.instafeed-lightbox .instafeed-post-image:not(#\9) {
margin-top: 48px !important;
}
}
/* Custom styles for Rebuy cart drawer widget to display 2 items per row */
.rebuy-cart-widget-container .rebuy-product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.rebuy-cart-widget-container .rebuy-product-block {
width: calc(50% - 7.5px);
}
/* Convermax predictive search dropdown — brand styling */
.cm_autocomplete.cm_dropdown {
border: 1px solid #e5e5e5;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
overflow: hidden;
padding: 4px 0;
}
/* Default is a fixed 480px wide panel — wider than its own positioned
ancestor (.cm_searchBox) on narrow screens, so it overflows past the
right edge and gets clipped. Match the ancestor's width instead of
trying to compute a viewport-relative size. */
@media screen and (max-width: 600px) {
.cm_autocomplete.cm_dropdown {
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
.cm_autocomplete .section + .section {
border-top: 1px solid #eee;
margin-top: 4px;
padding-top: 4px;
}
.cm_autocomplete .item.section-title {
padding: 8px 16px 4px;
}
.cm_autocomplete .item.section-title b {
color: var(--color-accent-bright);
font-size: 11px;
letter-spacing: 0.06em;
}
.cm_autocomplete .item.nav-item {
padding: 8px 16px;
transition: background-color 0.15s ease;
}
.cm_autocomplete .item.nav-item:hover,
.cm_autocomplete .item.nav-item.active,
.cm_autocomplete .item.nav-item.cm_active {
background-color: #faf1f1 !important;
}
/* Hide the Articles section in search results — not wanted */
.cm_autocomplete .section.Articles {
display: none !important;
}
/* Product results: 2-per-row grid of real cards (bigger image, easier
to tap), matching the native predictive-search-component's
predictive-search-results__wrapper-products layout instead of
Convermax's default single-column thumbnail-and-text row. */
.cm_autocomplete .section.Products .cmRepeater_items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 4px 16px 12px;
}
.cm_autocomplete .cmTemplate_product.item.product-item {
display: flex;
flex-direction: column;
padding: 6px;
border-radius: 8px;
}
.cm_autocomplete .cmTemplate_product .image-block {
width: 100% !important;
height: auto !important;
max-width: none !important;
flex-shrink: 0 !important;
aspect-ratio: 4 / 5 !important;
overflow: hidden !important;
border-radius: 8px !important;
margin-bottom: 8px !important;
}
.cm_autocomplete .cmTemplate_product .image-block img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
border-radius: 8px !important;
border: 1px solid #eee;
}
.cm_autocomplete .cmTemplate_product .description-block {
display: flex;
flex-direction: column;
gap: 4px;
}
.cm_autocomplete .cmTemplate_product .title {
font-size: 13px;
line-height: 1.35;
}
.cm_autocomplete .cmTemplate_product .price {
font-weight: 700;
}
.cm_autocomplete .cm_browseAllButton {
border-top: 1px solid #eee;
color: var(--color-accent-bright);
font-weight: 600;
text-align: center;
padding: 12px 16px;
}
.cm_autocomplete .cm_browseAllButton:hover {
background-color: #faf1f1 !important;
}
/* Subcategory carousel (collection pages) — match homepage .sbt-arrow
exactly, copied from sections/shop-by-tabs.liquid (lines 436-500):
width/height 40px desktop / 36px at max-width:767px, 24px icon fixed
at every size, radius 8px, shadow 0 2px 5px rgba(0,0,0,.2), hover is
opacity 0.9 (not a color change). */
.cm_vehicle-categories_category-scroll-button {
width: 40px !important;
height: 40px !important;
background-color: var(--color-accent-bright) !important;
opacity: 1 !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s ease;
}
@media (max-width: 767px) {
.cm_vehicle-categories_category-scroll-button {
width: 36px !important;
height: 36px !important;
}
}
.cm_vehicle-categories_category-scroll-button:hover {
opacity: 0.9 !important;
}
/* Replace Convermax's border-trick chevron with the exact SVG used by
.sbt-arrow (viewBox 0 0 24 24, stroke-width 3, fixed 24px). */
.cm_vehicle-categories_category-scroll-button::before {
content: '' !important;
width: 24px !important;
height: 24px !important;
margin: 0 !important;
border: none !important;
transform: none !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
.cm_vehicle-categories_category-scroll-button_left::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
}
.cm_vehicle-categories_category-scroll-button_right::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}
/* Hide the native scrollbar under the carousel track — the red arrow
buttons are the swipe/scroll cue now, the OS scrollbar is redundant.
overflow-x:auto stays, so swipe/drag scrolling still works. */
.cm_vehicle-categories_category-wrapper-repeater {
scrollbar-width: none;
}
.cm_vehicle-categories_category-wrapper-repeater::-webkit-scrollbar {
display: none;
}
/* Collection page top on mobile, per the Figma "Collection / Landing Page Vehicle"
mobile frame: full-width collection image above a centered title, subcategories as
a stacked list of black buttons instead of the image carousel, and Sort / Filters as
two equal buttons. Styling only - every Convermax widget stays rendered. */
@media (max-width: 749px) {
div#cm-collection-header {
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch;
gap: 16px;
}
div#cm-collection-header .cm-collection-header__image {
width: 100% !important;
max-width: 100%;
height: auto !important;
aspect-ratio: auto !important;
margin: 0 !important;
}
div#cm-collection-header .cm-collection-header__image img {
display: block;
width: 100% !important;
height: auto !important;
max-height: 220px;
object-fit: cover;
}
div#cm-collection-header h1.cm-collection-header__title {
margin: 0 !important;
text-align: center;
}
.cm_vehicle-categories__carousel .cm_vehicle-categories_category-wrapper-repeater {
display: flex !important;
flex-direction: column;
gap: 4px;
overflow: visible !important;
padding: 0 !important;
}
.cm_vehicle-categories__carousel .cm_vehicle-categories_category-wrapper {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.cm_vehicle-categories__carousel .cm_vehicle-categories_category-container {
display: block !important;
margin: 0 !important;
background: #000;
padding: 10px 16px !important;
text-align: center;
}
.cm_vehicle-categories__carousel .cm_vehicle-categories_category-title-container {
height: auto !important;
min-height: 0 !important;
}
.cm_vehicle-categories__carousel .cm_vehicle-categories_category-image-container,
.cm_vehicle-categories__carousel .cm_vehicle-categories_category-scroll-button {
display: none !important;
}
.cm_vehicle-categories__carousel .cm_vehicle-categories_category-title {
display: block !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.3;
}
.cm_SearchHeader .cm_sort,
.cm_SearchHeader .cm_facetDialogButton {
flex: 1 1 0;
min-width: 0;
}
.cm_SearchHeader .cm_facetDialogButton .cm_dialogButton {
width: 100%;
justify-content: center;
}
}
/* Carousel arrow at the first/last item (set by snippets/fcd-carousel-arrows.liquid). */
.fcd-carousel-arrow--disabled {
opacity: 0.35 !important;
cursor: default !important;
}