:root { --mm-navy: #071c33; --mm-navy-2: #0b2a4a; --mm-blue: #0b63ce; --mm-blue-hover: #147bff; --mm-blue-active: #084fa7; --mm-blue-light: #eaf3ff; --mm-green-light: #e6f6ea; --mm-ice: #f5f9ff; --mm-price: #0b4fa8; --mm-ink: #071c33; --mm-text: #122033; --mm-muted: #667085; --mm-border: #dde5ee; --mm-border-strong: #c7d3e0; --mm-bg: #f7f9fc; --mm-white: #ffffff; --mm-green: #16a34a; --mm-green-bg: #ecfdf3; --mm-error: #dc2626; --mm-error-bg: #fef3f2; --mm-warning: #d97706; --mm-red: var(--mm-blue); --mm-red-hover: var(--mm-blue-hover); --mm-radius: 4px; --mm-radius-sm: 4px; --mm-focus: rgba(11, 99, 206, 0.18); --mm-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --mm-page-pad: 56px; --mm-side-col: 280px; --mm-font: Figtree, system-ui, sans-serif; --mm-font-prose: Figtree, system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } .mm-body { min-height: 100vh; background: var(--mm-white); color: var(--mm-text); font-family: var(--mm-font); font-size: 16px; line-height: 22px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mm-body h1, .mm-body h2, .mm-body h3, .mm-body h4, .mm-body h5, .mm-body h6, .mm-body b, .mm-body strong, .mm-body th { font-weight: 600; } .mm-body.is-listing, .mm-body.is-product { background: var(--mm-bg); } .mm-body.is-listing .mm-header, .mm-body.is-product .mm-header { background: var(--mm-white); } .mm-body.is-drawer-open { overflow: hidden; } .mm-body:after, .mm-body #overlayer { display: none !important; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--mm-blue); outline-offset: 2px; box-shadow: 0 0 0 3px var(--mm-focus); } button, input, select { font: inherit; } select:not([multiple]) { appearance: none; -webkit-appearance: none; background-color: var(--mm-white); background-image: var(--mm-select-arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; padding-right: 36px; } select:not([multiple])::-ms-expand { display: none; } .mm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .mm-wrap { max-width: 1600px; margin: 0 auto; padding-left: var(--mm-page-pad); padding-right: var(--mm-page-pad); } .mm-header { background: #fff; border-bottom: 1px solid var(--mm-border); } .mm-header__inner { display: flex; align-items: center; gap: 16px; min-height: 75px; } .mm-logo { display: flex; flex-shrink: 0; align-items: center; line-height: 0; } .mm-logo img { display: block; height: 35px; width: auto; max-width: 220px; } .mm-search { display: flex; align-items: center; flex: 1 1 420px; width: 100%; max-width: 640px; min-width: 0; height: 42px; min-height: 42px; border: 0; border-radius: 4px; overflow: hidden; background: #eaf3ff; } .mm-search:focus-within { background: #d6e8ff; } .mm-search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0 12px; background: transparent; color: var(--mm-navy); appearance: none; -webkit-appearance: none; outline: 0; box-shadow: none; } .mm-search input:focus, .mm-search input:focus-visible, .mm-search__btn:focus, .mm-search__btn:focus-visible { outline: 0; box-shadow: none; } .mm-search input[type="search"]::-webkit-search-decoration, .mm-search input[type="search"]::-webkit-search-cancel-button, .mm-search input[type="search"]::-webkit-search-results-button, .mm-search input[type="search"]::-webkit-search-results-decoration { display: none; appearance: none; -webkit-appearance: none; } .mm-search input::placeholder { color: #7a8aa0; } .mm-search__btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 100%; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: #0b63ce; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; } .mm-search__btn:hover { color: #084fa7; background: transparent; } .mm-actions { display: flex; align-items: center; gap: 8px; } .mm-action { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 12px 6px 10px; border: 0; border-radius: 4px; cursor: pointer; text-align: left; text-decoration: none; transition: background 150ms ease, color 150ms ease; } .mm-action i, .mm-action svg { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; font-size: 20px; line-height: 1; } .mm-action span { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; } .mm-action strong { display: inline; font-size: 13px; font-weight: 600; line-height: 1.2; } .mm-action--vehicle strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-action small { display: inline; font-size: 14px; font-weight: 400; line-height: 1.2; opacity: 1; } .mm-action--vehicle { background: #3aa86a; color: #fff; } .mm-action--vehicle i, .mm-action--vehicle svg, .mm-action--vehicle strong, .mm-action--vehicle small { color: #fff; } .mm-action--vehicle:hover, .mm-action--vehicle.is-on { background: #32975e; } .mm-action--fav { background: #eaf3ff; color: #0b63ce; } .mm-action--fav i, .mm-action--fav strong, .mm-action--fav small { color: #0b63ce; } .mm-action--fav:hover { background: #d6e8ff; } .mm-action--rsv { background: #2e78ce; color: #fff; } .mm-action--rsv i, .mm-action--rsv svg, .mm-action--rsv strong, .mm-action--rsv small { color: #fff; } .mm-action--rsv:hover { background: #2568b8; } .mm-cats { border-bottom: 0; background: var(--mm-navy); } .mm-cats__inner { display: flex; align-items: stretch; gap: 12px; min-height: 48px; } .mm-cats__pick { position: relative; display: block; flex: 0 0 var(--mm-side-col); width: var(--mm-side-col); align-self: stretch; } .mm-cats__all { position: relative; display: flex; flex-direction: column; width: 100%; align-self: stretch; } .mm-cats__sizer { display: none; } .mm-cats__sizer span { display: block; padding: 0 20px; font-weight: 500; white-space: nowrap; } .mm-cats__sizer-btn { padding: 0 14px 0 40px; font-weight: 600; } .mm-cats__all summary { list-style: none; display: flex; align-items: center; gap: 8px; width: 100%; flex: 1 1 auto; height: auto; min-height: 48px; padding: 0 12px; border-radius: 0; background: var(--mm-blue); color: #fff; font-weight: 400; cursor: pointer; white-space: nowrap; box-sizing: border-box; } .mm-cats__all summary { font-size: 16px; } .mm-cats__all summary i, .mm-cats__all summary svg { flex: 0 0 22px; width: 22px; height: 22px; font-size: 24px; line-height: 1; } .mm-cats__all summary:hover { background: var(--mm-blue-hover); } .mm-cats__all summary::-webkit-details-marker { display: none; } .mm-cats__dropdown { position: absolute; top: 100%; left: 0; z-index: 20; width: 100%; min-width: 100%; padding: 10px; background: var(--mm-blue); border: 0; border-radius: 0 0 4px 4px; box-sizing: border-box; } .mm-cats__dropdown a, .mm-cats__links a { display: flex; align-items: center; min-height: 34px; padding: 6px 8px; color: #fff; font-weight: 400; font-size: 16px; border-radius: 4px; } .mm-cats__dropdown a { white-space: normal; } .mm-cats__dropdown a:hover { background: var(--mm-blue-hover); } .mm-cats__links a:hover { background: transparent; color: var(--mm-blue-hover); } .mm-cats__links { display: flex; flex-wrap: wrap; gap: 8px 18px; } @media (min-width: 1200px) { .mm-cats__inner { gap: 12px; } } @media (min-width: 1280px) { .mm-header__inner { display: grid; grid-template-columns: var(--mm-side-col) minmax(0, 1fr) auto; column-gap: 0; align-items: center; } .mm-search { flex: none; width: 100%; max-width: none; } .mm-actions { margin-left: 12px; } } .mm-main { padding: 35px 0 35px; } .mm-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 32px; font-size: 14px; color: var(--mm-muted); } .mm-body.is-product .mm-bc { margin-bottom: 10px; } .mm-bc a:hover { color: var(--mm-blue); } .mm-bc span:last-child { color: var(--mm-text); font-weight: 600; } .mm-pagehead, .mm-page-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .mm-pagehead h1, .mm-page-title { margin: 0 0 14px; font-size: 22px; line-height: 1.2; } .mm-btn, .pdp-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--mm-radius-sm); background: var(--mm-red); color: #fff; font-weight: 500; cursor: pointer; transition: background 150ms ease; } .mm-btn:hover, .pdp-add:hover:not(:disabled) { background: var(--mm-blue-hover); } .mm-btn:active, .pdp-add:active:not(:disabled) { background: var(--mm-blue-active); } .mm-btn--ghost { background: #fff; color: var(--mm-navy); border: 1px solid var(--mm-border-strong); } .mm-btn--ghost:hover { background: var(--mm-ice); color: var(--mm-blue); border-color: var(--mm-blue); } .pdp-add { flex: 0 0 auto; height: 40px; min-width: 140px; font-size: 14px; background: #2e78ce; color: #fff; } .pdp-add i, .pdp-add .mm-icon { font-size: 18px; line-height: 1; color: #fff; } .pdp-add:hover:not(:disabled) { background: #2568b8; color: #fff; } .pdp-add:hover:not(:disabled) i, .pdp-add:hover:not(:disabled) .mm-icon { color: #fff; } .pdp-add:active:not(:disabled) { background: #2568b8; color: #fff; } .pdp-add:disabled { background: #c5c9d1; cursor: not-allowed; } #reserve-modal .js-reserve-send { background: #2e78ce; color: #fff; } #reserve-modal .js-reserve-send:hover { background: #2568b8; } .shop-welcome { max-width: 720px; margin: 32px auto 0; text-align: center; } .shop-welcome__eyebrow { color: var(--mm-red); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; } .shop-welcome h1 { font-size: clamp(24px, 4vw, 32px); } .shop-welcome__lead, .pdp-muted, .mm-empty, .shop-notice { color: var(--mm-muted); } .shop-welcome__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .mm-empty-box, .shop-notice { padding: 24px; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: #fff; } .pdp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "gallery side"; gap: 16px var(--mm-page-pad); align-items: start; } .pdp-side { grid-area: side; } .pdp-gallery { grid-area: gallery; } .pdp-desc-block { margin: 8px 0 0; } .pdp-desc { color: var(--mm-text); font-family: var(--mm-font-prose); font-size: 16px; line-height: 22px; } .pdp-desc-more { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 6px 12px; border: 0; border-radius: var(--mm-radius); background: var(--mm-blue-light); color: var(--mm-blue); font: inherit; font-size: 12px; font-weight: 500; line-height: 1.2; cursor: pointer; } .pdp-desc-more[hidden] { display: none; } .pdp-desc-more:hover { background: #d7e8ff; color: var(--mm-blue-active); } .pdp-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .pdp-thumbs-bar { display: flex; align-items: stretch; gap: 8px; } .pdp-thumbs-bar .pdp-nav { position: static; z-index: 1; flex: 0 0 36px; width: 36px; height: auto; min-height: 114px; transform: none; } .pdp-thumbs { display: flex; flex: 1 1 auto; flex-direction: row; gap: 8px; min-width: 0; overflow-x: auto; overflow-y: hidden; } .pdp-thumb { flex: 0 0 114px; width: 114px; height: 114px; padding: 0; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; overflow: hidden; cursor: pointer; } .pdp-thumb.is-active { border: 2px solid var(--mm-red); } .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; background: #fff; } .pdp-stage { position: relative; } .pdp-stage__shell { position: relative; width: 100%; } .pdp-stage__frame { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; overflow: hidden; cursor: pointer; font: inherit; color: inherit; appearance: none; -webkit-appearance: none; } .pdp-stage__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #fff; } .pdp-stage--empty { min-height: 320px; display: grid; place-items: center; border: 1px solid var(--mm-border); color: var(--mm-muted); } .pdp-badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; } .pdp-badge { padding: 4px 8px; border-radius: 4px; background: var(--mm-bg); border: 1px solid var(--mm-border); font-size: 12px; font-weight: 600; } .pdp-nav, .pdp-lightbox__x { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 40px; padding: 0; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; color: var(--mm-navy); box-shadow: none; cursor: pointer; } .pdp-nav:active, .pdp-nav:focus, .pdp-nav:focus-visible { box-shadow: none; } .pdp-nav:disabled { opacity: 0.38; color: var(--mm-muted); box-shadow: none; cursor: default; } .pdp-nav--prev { left: 10px; top: 50%; transform: translateY(-50%); } .pdp-nav--next { right: 10px; top: 50%; transform: translateY(-50%); } .pdp-zoom { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; color: var(--mm-navy); box-shadow: 0 1px 4px rgba(7, 28, 51, 0.08); cursor: pointer; appearance: none; -webkit-appearance: none; } .pdp-zoom i, .pdp-zoom .mm-icon { font-size: 16px; line-height: 1; } .pdp-nav i, .pdp-nav .mm-icon { font-size: 16px; line-height: 1; } .pdp-thumbs-bar .pdp-nav i, .pdp-thumbs-bar .pdp-nav .mm-icon { font-size: 20px; } .pdp-brand { margin: 0 0 8px; color: var(--mm-muted); font-size: 13px; font-weight: 600; } .pdp-brand-logo { height: 28px; margin-bottom: 10px; } .pdp-condition-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 5px; } .pdp-condition { display: inline-flex; align-items: center; margin: 0; padding: 4px 10px; border: 0; border-radius: 2px; font-size: 12px; font-weight: 500; line-height: 1.3; } .pdp-sku { color: var(--mm-muted); font-size: 13px; font-weight: 400; line-height: 1.3; } .pdp-condition.is-used { background: #fee2e2; color: #dc2626; } .pdp-condition.is-new { background: #fff6cc; color: #7a6208; } .pdp h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; font-weight: 600; } .pdp-fitment { margin: 0 0 35px; } .pdp-fitment ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .pdp-fitment li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: var(--mm-green-light); color: var(--mm-navy); font-size: 12px; line-height: 1.3; } .pdp-fitment__make { font-weight: 500; } .pdp-fitment__sep { display: block; flex: 0 0 1px; width: 1px; height: 10px; overflow: hidden; background: #8b98a6; color: transparent; font-size: 0; line-height: 0; } .pdp-fitment__model { font-weight: 400; } .pdp-lead { margin: 0 0 14px; color: var(--mm-muted); } .pdp-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 0; color: var(--mm-muted); font-size: 13px; } .pdp-meta:empty { display: none; } .pdp-meta span + span::before { content: "·"; margin-right: 14px; } .pdp-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; margin: 0; } .pdp-price { margin: 0; color: var(--mm-text); font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; } .pdp-price small { display: inline; margin-left: 0.2em; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--mm-text); } .pdp-price-old { color: var(--mm-muted); font-size: 13px; font-weight: 400; text-decoration: line-through; } .pdp-save { color: var(--mm-price); font-weight: 500; font-size: 13px; } .pdp-unavailable { margin: 0 0 12px; color: var(--mm-error); font-size: 16px; font-weight: 500; } .pdp-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; } .pdp-cta__action { display: contents; } .pdp-cta .pdp-add, .pdp-cta__action > .pdp-add, .pdp-cta__action .pdp-reserve-fields { width: 100%; min-width: 0; } .pdp-reserve.is-open .js-reserve-open, .pdp-reserve.is-open .pdp-fav { display: none !important; } .pdp-reserve-fields[hidden] { display: none; } .pdp-reserve-fields { display: flex; flex: 1 1 auto; min-width: 0; gap: 8px; align-items: center; } .pdp-reserve-phone { display: flex; flex: 1 1 auto; min-width: 0; margin: 0; } .pdp-reserve-fields input { width: 100%; height: 40px; min-height: 40px; padding: 0 12px; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; color: var(--mm-text); font: inherit; } .pdp-reserve-fields input:focus { border-color: var(--mm-blue); outline: 0; box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.15); } .pdp-reserve-fields .pdp-add { flex: 0 0 auto; width: auto; min-width: 0; } .pdp-reserve-close { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; color: var(--mm-navy); font-size: 22px; line-height: 1; cursor: pointer; } .pdp-reserve-close:hover { border-color: var(--mm-blue); color: var(--mm-blue); } .pdp-reserve-ok { margin: 0; padding: 12px 14px; border-radius: 4px; background: #ecfdf3; color: var(--mm-navy); line-height: 1.45; } .pdp-fav { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 4px; background: #eaf3ff; color: #0b63ce; cursor: pointer; font-size: 18px; } .pdp-fav i, .pdp-fav .mm-icon { color: #0b63ce; } .pdp-fav:hover, .pdp-fav.is-on { background: #d6e8ff; color: #0b63ce; } .pdp-fav:hover i, .pdp-fav.is-on i, .pdp-fav:hover .mm-icon, .pdp-fav.is-on .mm-icon { color: #0b63ce; } .pdp-fit { position: relative; z-index: 8; margin-top: 20px; padding: 20px 22px 18px; background: #ecfdf3; border: 1px solid #c6ebd4; border-radius: 4px; overflow: visible; } .pdp-fit__head { margin-bottom: 16px; text-align: left; } .pdp-fit__head h2 { margin: 0 0 4px; color: #071C32; font-size: 20px; font-weight: 600; line-height: 1.25; } .pdp-fit__head p { margin: 0; color: #071C32; font-size: 16px; line-height: 22px; } .pdp-fit__head a { color: #071C32; font-weight: 600; } .pdp-fit__empty { margin: 0; color: #071C32; font-size: 13px; } .pdp-fit__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px 14px; align-items: end; } .pdp-fit__form .mm-vehicle__row span { color: #071C32; font-size: 14px; font-weight: 600; } .pdp-fit .mm-combo.is-open { z-index: 9; } .pdp-fit__form .mm-combo__btn, .pdp-fit__form select { min-height: 42px; border-radius: 4px; background-color: #fff; } .pdp-fit__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; } .pdp-fit__submit, .pdp-fit__clear { min-height: 42px; padding: 0 22px; border-radius: 4px; white-space: nowrap; } .pdp-fit__submit { background: #071C32; color: #fff; } .pdp-fit__submit:hover { background: #0c2438; color: #fff; } .pdp-fit__submit:active { background: #051422; color: #fff; } .pdp-fit__clear { padding: 0 18px; background: #fff; color: #071C32; border: 1px solid #c6ebd4; } .pdp-fit__clear:hover { background: #d8f7e4; color: #071C32; border-color: #b7e4c7; } .pdp-contact { margin-top: 14px; font-size: 16px; line-height: 22px; } .pdp-contact .pdp-help, .pdp-contact .pdp-help p, .pdp-contact .pdp-help strong, .pdp-contact .pdp-seller h3, .pdp-contact .pdp-seller dt, .pdp-contact .pdp-seller dd, .pdp-contact .pdp-seller p, .pdp-contact .pdp-about, .pdp-contact .pdp-muted { font-size: 16px; line-height: 22px; } @media (min-width: 768px) { .pdp-side { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; min-height: 0; } .pdp-hero.is-desc-open .pdp-side, .pdp-hero.is-about-open .pdp-side, .pdp-hero.is-measuring .pdp-side { height: auto; } .pdp-intro { flex: 0 0 auto; } .pdp-desc, .pdp-about { overflow: hidden; } .pdp-hero.is-desc-open .pdp-desc, .pdp-hero.is-measuring .pdp-desc { overflow: visible; max-height: none; } .pdp-hero.is-about-open .pdp-about, .pdp-hero.is-measuring .pdp-about { overflow: visible; max-height: none; } .pdp-buy { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; } .pdp-contact { flex: 0 0 auto; } } .pdp-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 28px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--mm-border); } .pdp-usp li { display: grid; gap: 4px; } .pdp-usp i, .pdp-usp .mm-icon { font-size: 22px; color: var(--mm-blue); } .pdp-usp span { color: var(--mm-muted); font-size: 13px; } .pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px var(--mm-page-pad); margin-top: 20px; } .pdp-card { padding: 16px; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; } .pdp-card h2, .pdp-related h2, .pdp-tabs-wrap h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; } .pdp-card h2 i, .pdp-card h2 .mm-icon { font-size: 24px; line-height: 1; color: var(--mm-navy); } .pdp-spec { margin: 0; } .pdp-spec > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 10px; } .pdp-spec > div:nth-child(odd) { background: var(--mm-bg); } .pdp-spec > .pdp-spec__empty { grid-template-columns: 1fr; color: var(--mm-muted); } .pdp-spec dt { color: var(--mm-muted); font-weight: 400; } .pdp-spec dd { margin: 0; text-align: right; font-weight: 500; } .pdp-more { margin-top: 12px; border: 0; background: transparent; color: var(--mm-text); font-weight: 600; cursor: pointer; } .pdp-grid:has(> :only-child) { grid-template-columns: 1fr; } .pdp-seller-data { align-content: start; } .pdp-extra { margin: 0; padding: 0; list-style: none; } .pdp-extra li { display: flex; gap: 8px; padding: 8px 0; } .pdp-oe { display: flex; flex-wrap: wrap; gap: 6px; } .pdp-oe button, .pdp-oe-list button { border: 1px solid var(--mm-border); background: #fff; border-radius: 4px; padding: 2px 8px; cursor: pointer; } .pdp-help { display: grid; gap: 8px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--mm-border); } .pdp-help p { margin: 0; } .pdp-help .mm-btn { width: 100%; white-space: normal; text-align: center; line-height: 2; padding-top: 10px; padding-bottom: 10px; background: var(--mm-text); color: #fff; } .pdp-help .mm-btn:hover { background: #1c3048; color: #fff; } .pdp-help .mm-btn:active { background: #0c1828; color: #fff; } .pdp-seller { display: grid; gap: 10px; } .pdp-extra + .pdp-seller, .pdp-extra + .pdp-muted { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mm-border); } .pdp-seller h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--mm-navy); } .pdp-seller__note { margin: 0 0 8px; color: var(--mm-muted); font-size: 12px; line-height: 1.4; } .pdp-seller__fold { border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; } .pdp-seller__fold summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 12px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--mm-navy); list-style: none; } .pdp-seller__fold summary::-webkit-details-marker, .pdp-seller__fold summary::marker { display: none; content: ''; } .pdp-seller__fold summary::after { content: 'Pokaż'; font-size: 16px; font-weight: 600; color: var(--mm-blue); } .pdp-seller__fold[open] summary { border-bottom: 1px solid var(--mm-border); } .pdp-seller__fold[open] summary::after { content: 'Ukryj'; } .pdp-seller__fold dl { padding: 4px 12px 10px; } .pdp-seller__fold dt, .pdp-seller__fold dd, .pdp-seller__fold p, .pdp-seller__fold a { font-size: 16px; line-height: 22px; } .pdp-seller dl { margin: 0; } .pdp-seller dl > div { display: grid; gap: 2px; padding: 0; border-bottom: 1px solid var(--mm-border); } .pdp-seller dl > div:last-child { padding-bottom: 0; border-bottom: 0; } .pdp-seller dt { color: var(--mm-muted); font-size: 16px; font-weight: 400; } .pdp-seller dd { margin: 0; font-size: 16px; word-break: break-word; } .pdp-seller a { color: var(--mm-navy); } .pdp-seller p { margin: 0; font-size: 16px; line-height: 22px; white-space: pre-wrap; } .pdp-about-block { min-width: 0; } .pdp-about { margin: 0; color: var(--mm-text); font-family: var(--mm-font-prose); font-size: 16px; line-height: 22px; } .pdp-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; } .pdp-tabs { display: flex; flex-wrap: wrap; gap: 10px; } .pdp-tabs .mm-btn { flex: 0 0 auto; } .pdp-tab { padding-top: 20px; } .pdp-prose { max-width: 850px; } .pdp-oe-list { padding: 0; list-style: none; } .pdp-oe-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mm-border); } .pdp-banner { position: relative; z-index: 0; width: auto; max-width: none; margin: 45px 0 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 35px 0; border-radius: 0; background: linear-gradient(135deg, #071c33 0%, #0b2a4a 100%); color: #fff; } .pdp-banner__inner { display: block; max-width: 1600px; margin: 0 auto; padding: 0 var(--mm-page-pad); } .pdp-banner h2 { margin: 0 0 10px; color: #fff; font-size: 20px; line-height: 1.25; } .pdp-banner__text { color: #fff; font-size: 14px; line-height: 1.55; } @media (max-width: 899px) { .pdp-fit { padding: 20px 22px 18px; } .pdp-fit__form { grid-template-columns: 1fr 1fr; } .pdp-fit__actions { grid-column: 1 / -1; } .pdp-fit__submit { flex: 1 1 auto; } } .pdp-related { position: relative; z-index: 0; margin-top: 40px; } .pdp-lightbox, .mm-modal { position: fixed; inset: 0; z-index: 40; } .pdp-lightbox { display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .pdp-lightbox[hidden] { display: none !important; } .mm-modal[hidden] { display: none !important; } .pdp-lightbox__bg, .mm-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 32, 0.55); } .pdp-lightbox__bg { background: rgba(7, 28, 51, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pdp-lightbox__box, .mm-modal__box { position: relative; z-index: 1; width: min(860px, calc(100% - 32px)); margin: 8vh auto 0; padding: 24px; background: #fff; border-radius: 4px; } .mm-modal--vehicle .mm-modal__box { width: min(480px, calc(100% - 32px)); margin-top: 12vh; padding: 0; overflow: visible; border: 1px solid #d4e4f8; box-shadow: 0 18px 48px rgba(7, 28, 51, 0.22); } .mm-modal--vehicle .mm-modal__head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 48px 10px 16px; background: var(--mm-ice); border-bottom: 1px solid #d4e4f8; } .mm-modal--vehicle .mm-modal__head > i, .mm-modal--vehicle .mm-modal__head > svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--mm-blue); font-size: 22px; line-height: 1; } .mm-modal--vehicle .mm-modal__head h2 { margin: 0; color: var(--mm-navy); font-size: 16px; font-weight: 600; line-height: 1.2; } .mm-modal--vehicle .mm-modal__x { top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 4px; color: var(--mm-navy); font-size: 18px; line-height: 1; } .mm-modal--vehicle .mm-modal__x:hover { background: #fff; color: var(--mm-blue); } .mm-modal--vehicle .mm-modal__lead { margin: 0; padding: 14px 16px 0; color: #5b6b82; font-size: 13px; line-height: 1.5; } .mm-modal--vehicle .mm-vehicle { padding: 14px 16px 16px; margin-top: 0; } .mm-modal--vehicle .mm-modal__box > .mm-vehicle__actions { padding: 14px 16px 16px; } .pdp-lightbox__box { width: auto; max-width: 100%; height: auto; max-height: 100%; margin: 0; padding: 0; background: transparent; overflow: visible; } .pdp-lightbox__box img { display: block; width: auto; height: auto; max-width: min(100%, calc(100vw - 32px)); max-height: calc(100vh - 48px); object-fit: contain; background: none; } .pdp-lightbox__x, .mm-modal__x { position: absolute; top: 10px; right: 10px; z-index: 2; border: 0; background: transparent; font-size: 28px; cursor: pointer; } .mm-vehicle { display: grid; gap: 12px; margin-top: 4px; } .mm-vehicle__row { display: grid; gap: 6px; } .mm-vehicle__row span { font-size: 13px; font-weight: 600; } .mm-vehicle select, .mm-vehicle input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--mm-border); border-radius: 4px; background-color: var(--mm-white); color: var(--mm-text); font: inherit; } .mm-vehicle select { padding-right: 36px; } .mm-vehicle input:focus { border-color: var(--mm-blue); outline: 0; box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.15); } .mm-combo { position: relative; } .mm-combo.is-open { z-index: 3; } .mm-combo__native { position: absolute !important; width: 1px !important; min-height: 0 !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); pointer-events: none; background-image: none !important; } .mm-combo__btn { width: 100%; min-height: 44px; padding: 8px 36px 8px 12px; border: 1px solid var(--mm-border); border-radius: 4px; background-color: var(--mm-white); background-image: var(--mm-select-arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; color: var(--mm-text); text-align: left; cursor: pointer; } .mm-combo.is-disabled .mm-combo__btn { cursor: not-allowed; color: var(--mm-muted); background-color: var(--mm-bg); } .mm-combo.is-open .mm-combo__btn { border-color: var(--mm-blue); box-shadow: 0 0 0 3px var(--mm-focus); } .mm-combo__drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 4; display: flex; flex-direction: column; max-height: 280px; overflow: hidden; background: #fff; border: 1px solid var(--mm-border); border-radius: 4px; box-shadow: 0 10px 28px rgba(7, 28, 51, 0.12); } .mm-combo__drop[hidden] { display: none !important; } .mm-combo__find { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 10px; border-bottom: 1px solid var(--mm-border); } .mm-combo__find i, .mm-combo__find .mm-icon { color: var(--mm-muted); font-size: 16px; } .mm-combo__search { width: 100%; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--mm-text); } .mm-combo__search:focus { outline: none; box-shadow: none; } .mm-combo__list { margin: 0; padding: 4px 0; overflow: auto; list-style: none; } .mm-combo__opt { width: 100%; padding: 8px 12px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } .mm-combo__opt:hover, .mm-combo__opt:focus { background: var(--mm-ice); outline: none; } .mm-combo__opt.is-on { background: var(--mm-blue-light); font-weight: 600; } .mm-combo__opt.is-placeholder { color: var(--mm-muted); font-weight: 400; } .mm-combo__empty { padding: 12px; color: var(--mm-muted); font-size: 13px; } .mm-vehicle__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; } .mm-vehicle__clear { color: var(--mm-blue); font-size: 13px; } .pdp-lightbox__x { top: 0; right: 0; left: auto; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; font-size: 18px; line-height: 0; color: var(--mm-navy); box-shadow: 0 1px 4px rgba(7, 28, 51, 0.08); transform: translate(50%, -50%); } .pdp-lightbox__x i, .pdp-lightbox__x .mm-icon { display: block; font-size: 18px; line-height: 1; width: 18px; height: 18px; text-align: center; } .mm-toast { position: fixed; right: 16px; bottom: 16px; z-index: 50; padding: 12px 16px; border-radius: 4px; background: var(--mm-ink); color: #fff; } .mm-footer { border-top: 0; background: var(--mm-white); color: var(--mm-muted); } .mm-footer a { color: var(--mm-muted); transition: color 150ms ease; } .mm-footer a:hover { color: var(--mm-blue); } .ft-col__title, .ft-col__toggle { display: block; margin: 0 0 2px; color: var(--mm-navy); font-size: 14px; font-weight: 600; } .ft-main { padding: 32px 0; background: var(--mm-white); } .ft-main__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(220px, 1.25fr); gap: 28px; align-items: start; } .ft-brand { padding: 35px 0; border-bottom: 1px solid var(--mm-border); background: var(--mm-white); } .ft-brand__text { width: 100%; max-width: none; margin: 0; font-size: 14px; line-height: 1.55; color: var(--mm-text); } .ft-brand__text + .ft-social, .ft-brand__text + .ft-stats { margin-top: 14px; } .ft-social { display: flex; flex-wrap: wrap; gap: 8px; } .ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 4px; color: var(--mm-ink); font-size: 20px; } .ft-social a:hover { color: var(--mm-red); } .ft-stats { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .ft-stats li { display: grid; grid-template-columns: 20px auto; column-gap: 8px; align-items: baseline; } .ft-stats i, .ft-stats .mm-icon { grid-row: 1 / span 2; color: var(--mm-red); } .ft-stats strong { color: var(--mm-text); font-size: 15px; } .ft-stats span { grid-column: 2; font-size: 13px; } .ft-col__title { margin-bottom: 10px; } .ft-col__toggle { display: none; width: 100%; padding: 14px 0; border: 0; background: transparent; text-align: left; cursor: pointer; } .ft-col__toggle i, .ft-col__toggle .mm-icon { float: right; transition: transform 150ms ease; } .ft-col.is-open .ft-col__toggle i, .ft-col.is-open .ft-col__toggle .mm-icon { transform: rotate(180deg); } .ft-col ul, .ft-contact ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; } .ft-col a { display: inline-block; font-size: 16px; } .ft-contact span, .ft-trust span { display: block; font-size: 13px; } .ft-ask { margin-top: 18px; } .ft-seller { min-width: 0; } .ft-seller__box { display: flex; flex-direction: column; align-items: stretch; gap: 14px; height: 100%; padding: 16px 18px; background: var(--mm-blue-light); border: 1px solid #d4e4f8; border-radius: 4px; } .ft-seller__copy { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .ft-seller__copy > i, .ft-seller__copy > .mm-icon { flex: 0 0 auto; font-size: 26px; width: 1em; height: 1em; line-height: 1; color: var(--mm-blue); } .ft-seller h2 { margin: 0 0 4px; color: var(--mm-navy); font-size: 16px; font-weight: 600; line-height: 1.25; } .ft-seller p { margin: 0; color: #5b6b82; font-size: 13px; line-height: 1.45; } .mm-footer .ft-seller .mm-btn { width: 100%; flex: 0 0 auto; color: #fff; } .mm-footer .ft-seller .mm-btn:hover { color: #fff; } .ft-news { background: var(--mm-navy); color: #d3dfeb; } .ft-news__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1fr); gap: 32px; align-items: center; padding-top: 45px; padding-bottom: 45px; } .ft-news__grid > div:first-child { display: flex; gap: 16px; align-items: flex-start; } .ft-news i.la-envelope, .ft-news .mm-icon { font-size: 36px; line-height: 1; color: #fff; } .ft-news h2 { margin: 0 0 6px; color: #fff; font-size: 20px; } .ft-news p { margin: 0; max-width: 460px; line-height: 1.55; } .ft-news__row { display: flex; gap: 10px; } .ft-news input[type="email"] { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 0; border-radius: 4px; background: #fff; color: var(--mm-text); } .ft-news .mm-btn { min-width: 140px; height: 52px; } .ft-news__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; } .ft-news__consent a { color: #fff; text-decoration: underline; } .ft-news__consent input { margin-top: 3px; } .ft-news__msg { margin: 10px 0 0; font-size: 14px; } .ft-news__msg.is-ok { color: #86efac; } .ft-news__msg.is-err { color: #fda4af; } .ft-news__form.is-ok .ft-news__row, .ft-news__form.is-ok .ft-news__consent { display: none; } .ft-trust { border-top: 1px solid var(--mm-border); background: var(--mm-white); } .ft-trust__grid { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 30px; padding-bottom: 30px; } .ft-trust__grid > div { flex: 1 1 200px; min-width: min(200px, 100%); } .ft-trust h3 { margin: 0 0 12px; color: var(--mm-text); font-size: 14px; font-weight: 600; } .ft-trust p { margin: 0; font-size: 14px; } .ft-trust strong, .ft-trust i { color: var(--mm-text); } .ft-logos { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0; padding: 0; list-style: none; } .ft-logos li { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--mm-border); border-radius: 4px; color: var(--mm-ink); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .ft-bottom { background: var(--mm-navy); color: #d3dfeb; } .ft-bottom__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; } .ft-bottom p { margin: 0; font-size: 13px; } .ft-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 18px; } .ft-bottom a { color: #d0d5dd; font-size: 13px; } .ft-bottom a:hover { color: #fff; } .ft-top { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: transparent; color: #fff; font-size: 18px; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; } .ft-top:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; } .mm-cms { max-width: 920px; } .mm-cms h1 { margin: 0 0 10px; font-size: 22px; line-height: 1.2; } .mm-cms h2 { margin: 20px 0 8px; font-size: 16px; } .mm-cms__body { color: var(--mm-text); font-size: 14px; line-height: 1.5; } .mm-cms__body p, .mm-cms__body h2, .mm-cms__body h3, .mm-cms__body h4, .mm-cms__body ul, .mm-cms__body ol, .mm-cms__body blockquote { margin: 0 0 12px; } .mm-cms__body h2 { margin-top: 20px; font-size: 20px; line-height: 1.25; } .mm-cms__body h3 { margin-top: 16px; font-size: 17px; line-height: 1.3; } .mm-cms__body h4 { margin-top: 14px; font-size: 15px; } .mm-cms__body ul, .mm-cms__body ol { padding-left: 22px; } .mm-cms__body a { color: var(--mm-blue); text-decoration: underline; } .mm-cms__body a:hover { color: var(--mm-blue-hover); } .mm-cms__body blockquote { padding: 4px 0 4px 12px; border-left: 3px solid var(--mm-blue); color: var(--mm-muted); } .mm-checkout { display: grid; gap: 10px; max-width: 560px; margin-top: 18px; } .mm-checkout label, .mm-cart__qty { display: grid; gap: 6px; } .mm-checkout input, .mm-checkout textarea, .mm-cart__qty input { padding: 10px 12px; border: 1px solid var(--mm-border); border-radius: 4px; } .mm-checkout input:focus, .mm-checkout textarea:focus, .mm-cart__qty input:focus { border-color: var(--mm-blue); outline: 0; box-shadow: 0 0 0 3px var(--mm-focus); } .mm-checkout__row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; } .mm-cart__qty { grid-template-columns: 80px auto; align-items: center; } .mm-cart { padding: 0; list-style: none; } .mm-cart li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--mm-border); } .mm-rsv { padding: 0; list-style: none; } .mm-rsv li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--mm-border); } .mm-rsv img, .mm-rsv__ph { width: 72px; height: 72px; border-radius: 4px; background: var(--mm-ice); object-fit: cover; } .mm-rsv__ph { display: flex; align-items: center; justify-content: center; color: var(--mm-blue); font-size: 28px; } .mm-rsv a, .mm-rsv strong { color: var(--mm-navy); } .mm-rsv__meta { margin: 4px 0 0; color: var(--mm-muted); font-size: 12px; } .mm-rsv-lookup, .mm-rsv-again { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; } .mm-rsv-lookup label, .mm-rsv-again label { flex: 1 1 220px; margin: 0; } .mm-rsv-lookup input, .mm-rsv-again input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--mm-border); border-radius: 4px; } .mm-rsv-again { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--mm-border); } .mm-rsv-again p { flex: 1 1 100%; margin: 0; color: var(--mm-muted); } @media (max-width: 1279px) and (min-width: 768px) { .mm-header__inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px; padding-bottom: 8px; } .mm-search { flex: 1 1 0; order: 0; width: auto; max-width: none; min-width: 0; } .mm-actions { flex: 1 1 100%; justify-content: flex-end; width: 100%; margin-left: 0; } } @media (max-width: 1199px) { .pdp-grid { grid-template-columns: 1fr 1fr; } .ft-main__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .ft-seller { grid-column: 1 / -1; } .ft-seller__box { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px 28px; } .mm-footer .ft-seller .mm-btn { width: auto; } } @media (max-width: 767px) { .pdp-fit { padding: 16px 14px; } .pdp-fit__form { grid-template-columns: 1fr; } .pdp-fit__submit, .pdp-fit__clear { width: 100%; } .mm-header__inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "search" "actions"; align-items: center; gap: 10px 12px; min-height: 0; padding-top: 10px; padding-bottom: 12px; } .mm-logo { grid-area: logo; } .mm-search { grid-area: search; order: unset; max-width: none; } .mm-actions { grid-area: actions; gap: 6px; margin-left: 0; width: 100%; } .mm-logo img { height: 30px; max-width: 200px; } .mm-action { justify-content: center; min-width: 0; min-height: 40px; padding: 6px 8px; } .mm-cats__inner { min-height: 48px; padding-top: 0; padding-bottom: 0; gap: 0; } .mm-cats__pick, .mm-cats__all { display: block; flex: none; width: 100%; } .mm-cats__sizer { display: none; } .mm-cats__dropdown { width: 100%; top: 100%; } .mm-main { padding: 35px 0 35px; } .mm-cats__links { display: none; } .mm-header__inner, .pdp-gallery, .pdp-grid, .pdp-lower, .pdp-usp { grid-template-columns: 1fr; } .pdp-banner { margin-top: 45px; padding: 35px 0; } .pdp-banner__inner { flex-direction: column; align-items: flex-start; } .pdp-banner h2 { font-size: 22px; color: #fff; } .pl-head { margin: 4px 0 16px; gap: 12px; } .pl-head h1 { font-size: 20px; } .pl-mobile-bar { margin-bottom: 12px; gap: 8px; } .ft-main__grid, .ft-news__grid, .ft-bottom__inner { grid-template-columns: 1fr; } .ft-seller { grid-column: auto; } .ft-seller__box { flex-direction: column; align-items: stretch; padding: 16px; } .mm-footer .ft-seller .mm-btn, .ft-seller .mm-btn { width: 100%; } .ft-trust__grid > div { flex: 1 1 100%; } .ft-brand { grid-column: auto; } .ft-main { padding: 28px 0 32px; } .ft-col:not(.ft-contact) { border-bottom: 1px solid var(--mm-border); } .ft-col__title { display: none; } .ft-contact .ft-col__title { display: block; margin-top: 16px; } .ft-col__toggle { display: block; } .ft-col:not(.ft-contact):not(.is-open) ul { display: none; } .ft-col.is-open ul { padding-bottom: 14px; } .ft-news { padding: 8px 0; } .ft-news__row { flex-direction: column; } .ft-news .mm-btn { width: 100%; } .ft-bottom__inner { display: grid; justify-items: center; text-align: center; padding-top: 20px; padding-bottom: 20px; } .ft-bottom nav { justify-content: center; } .pdp-thumbs { padding-top: 4px; overflow-x: auto; } .pdp h1 { font-size: 22px; } .pdp-price { font-size: 20px; } .pdp-cta .pdp-add { width: auto; flex: 1 1 auto; min-width: 0; } .pdp-usp { grid-template-columns: 1fr; } .pdp-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "side"; } .pdp-gallery { grid-template-columns: minmax(0, 1fr); } .pdp-thumbs { padding-top: 4px; overflow-x: auto; } } .pl-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin: 4px 0 14px; } .pl-head h1 { margin: 0 0 4px; font-size: 22px; line-height: 1.2; font-weight: 600; } .pl-head p { margin: 0; max-width: 640px; color: var(--mm-muted); } .pl-layout { display: grid; grid-template-columns: var(--mm-side-col) minmax(0, 1fr); gap: 16px var(--mm-page-pad); align-items: start; } .pl-side { position: sticky; top: 12px; padding: 14px; background: #fff; border: 1px solid var(--mm-border); border-radius: 4px; } .pl-cats { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--mm-border); } .pl-cats__title { margin: 0 0 6px; color: var(--mm-navy); font-size: 15px; font-weight: 600; } .pl-cats__tree { max-height: min(70vh, 720px); overflow: auto; } .pl-cats ul { list-style: none; margin: 0; padding: 0; } .pl-cats ul ul { padding-left: 12px; } .pl-cats__item.is-collapsed > ul { display: none; } .pl-cats__row { display: flex; align-items: center; gap: 2px; } .pl-cats__toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--mm-muted); font-size: 12px; line-height: 1; cursor: pointer; } .pl-cats__toggle i, .pl-cats__toggle .mm-icon { display: block; transition: transform 0.15s ease; } .pl-cats__item.is-open > .pl-cats__row .pl-cats__toggle i, .pl-cats__item.is-open > .pl-cats__row .pl-cats__toggle .mm-icon { transform: rotate(90deg); } .pl-cats__toggle.is-empty { visibility: hidden; pointer-events: none; } .pl-cats__link { flex: 1 1 auto; min-width: 0; padding: 3px 0; color: var(--mm-text); font-size: 16px; line-height: 1.3; text-decoration: none; } .pl-cats__link:hover { color: var(--mm-blue); } .pl-cats__link.is-on { color: var(--mm-blue); font-weight: 600; } .pl-cats__link.is-root { color: var(--mm-navy); font-weight: 500; } .pl-cats__link.is-root.is-on { color: var(--mm-blue); } .pl-makes .pl-cats__tree { max-height: min(40vh, 320px); } .pl-makes .pl-search { margin: 0 0 8px; } .pl-side__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .pl-side__head h2 { margin: 0; font-size: 15px; } .pl-side__close { display: none; border: 0; background: transparent; font-size: 28px; cursor: pointer; } .pl-filter { border-top: 1px solid var(--mm-border); padding: 8px 0; } .pl-filter summary { display: flex; justify-content: space-between; align-items: center; min-height: 32px; cursor: pointer; font-weight: 600; list-style: none; } .pl-filter summary::-webkit-details-marker { display: none; } .pl-filter summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid var(--mm-muted); border-bottom: 2px solid var(--mm-muted); transform: rotate(45deg); transition: transform 150ms ease; } .pl-filter[open] summary::after { transform: rotate(-135deg); } .pl-vehicle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 56px; padding: 12px 16px; border: 0; border-radius: 4px; background: var(--mm-navy); color: #fff; text-align: center; cursor: pointer; transition: background 150ms ease; } .pl-vehicle:hover { background: var(--mm-navy-2); } .pl-vehicle:active { background: #061627; } .pl-vehicle strong { font-size: 14px; font-weight: 600; line-height: 1.2; } .pl-vehicle small { color: rgba(255, 255, 255, 0.68); font-size: 12px; font-style: normal; line-height: 1.3; } .pl-check, .pl-checks label { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 0; padding: 2px 0; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 16px; } .pl-checks em { color: var(--mm-muted); font-style: normal; } .pl-checks { margin: 0; padding: 0; list-style: none; } .pl-checks li { display: flex; } .pl-checks label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-content: stretch; } .pl-checks input, .pl-check input, .ft-news__consent input, .mm-checkout input[type="checkbox"] { accent-color: var(--mm-blue); } .pl-search, .pl-price input { width: 100%; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--mm-border); border-radius: 4px; } .pl-search:focus, .pl-price input:focus { border-color: var(--mm-blue); outline: 0; box-shadow: 0 0 0 3px var(--mm-focus); } .pl-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pl-range { --pl-range-h: 20px; --pl-thumb: 16px; --pl-track: 3px; position: relative; height: var(--pl-range-h); margin: 12px 0 8px; } .pl-range::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--pl-track); transform: translateY(-50%); background: var(--mm-border); border-radius: 99px; pointer-events: none; } .pl-range input[type="range"] { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: var(--pl-range-h); margin: 0; padding: 0; pointer-events: none; appearance: none; -webkit-appearance: none; background: transparent; } .pl-range input.js-price-range-min { z-index: 3; } .pl-range input.js-price-range-max { z-index: 2; } .pl-range input[type="range"]::-webkit-slider-runnable-track { height: var(--pl-range-h); background: transparent; border: none; } .pl-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; appearance: none; -webkit-appearance: none; width: var(--pl-thumb); height: var(--pl-thumb); margin-top: calc((var(--pl-range-h) - var(--pl-thumb)) / 2); border: 0; border-radius: 50%; background: var(--mm-red); cursor: pointer; } .pl-range input[type="range"]::-moz-range-track { height: var(--pl-track); background: transparent; border: none; } .pl-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: var(--pl-thumb); height: var(--pl-thumb); border: 0; border-radius: 50%; background: var(--mm-red); cursor: pointer; } .pl-more { display: inline-block; margin-top: 8px; border: 0; background: transparent; color: var(--mm-text); font-weight: 600; cursor: pointer; } .pl-side__foot .pl-clear { width: 100%; } .pl-side__foot { display: grid; gap: 8px; margin-top: 8px; } .pl-side__apply { display: none; } .pl-filters-bg { display: none; } .pl-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .pl-toolbar__right { display: flex; align-items: center; gap: 10px; } .pl-toolbar__right { flex-wrap: wrap; } .pl-toolbar label { display: inline-flex; align-items: center; gap: 8px; color: var(--mm-muted); font-size: 14px; line-height: 1; white-space: nowrap; } .pl-toolbar select { width: auto; min-height: 34px; margin: 0; padding: 0 32px 0 10px; border: 1px solid var(--mm-border); border-radius: 4px; background-color: #fff; background-image: var(--mm-select-arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; color: var(--mm-text); } .pl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .pl-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid #c7ddf7; border-radius: 4px; background: var(--mm-blue-light); color: var(--mm-price); font-size: 13px; line-height: 1; } .pl-chips a:hover { background: #dcebfc; } .pl-chips__label { display: inline-flex; align-items: center; line-height: 1; } .pl-chips__x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; line-height: 0; } .pl-chips__x .mm-icon { display: block; width: 20px; height: 20px; vertical-align: 0; } .pl-chips__clear { font-weight: 500; } .pl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .pl-skel { pointer-events: none; } .pl-skel__media { aspect-ratio: 1 / 1; background: #eef3f8; } .pl-skel__body { display: grid; gap: 8px; padding: 12px 10px 8px; } .pl-skel__buy { display: grid; gap: 10px; margin-top: auto; padding: 0 10px 12px; } .pl-skel__line, .pl-skel__chip, .pl-skel__btn, .pl-skel__media { background-image: linear-gradient(90deg, #e8eef5 0%, #f6f9fc 45%, #e8eef5 100%); background-size: 200% 100%; animation: pl-skel 1.15s ease-in-out infinite; } .pl-skel__line { display: block; height: 12px; border-radius: 4px; } .pl-skel__line--sm { width: 38%; height: 10px; } .pl-skel__line--mid { width: 72%; } .pl-skel__line--price { width: 46%; height: 16px; } .pl-skel__chip { display: block; width: 72px; height: 22px; border-radius: 4px; } .pl-skel__btn { display: block; height: 40px; border-radius: 4px; } .pl-grid.is-ajax .pl-card__media img { opacity: 0; transition: opacity 220ms ease; } .pl-grid.is-ajax .pl-card__media img.is-in { opacity: 1; } @keyframes pl-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .pl-card { display: flex; flex-direction: column; min-width: 0; min-height: 100%; background: #fff; border: 1px solid var(--mm-border); border-radius: 4px; } .pl-card:hover { border-color: #b8cce4; } .pl-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f4f6f8; } .pl-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #fff; } .pl-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .pl-card__badge { padding: 3px 7px; border-radius: 4px; background: var(--mm-blue); color: #fff; font-size: 12px; font-weight: 600; } .pl-card__badge.is-new { background: var(--mm-blue-hover); } .pl-card__badge.is-best { background: var(--mm-navy-2); } .pl-card__badge.is-used { background: #dc2626; } .pl-card__body { display: grid; gap: 4px; padding: 8px 10px 6px; } .pl-card__brand, .pl-card__spec, .pl-card__stock, .pl-card__ship { margin: 0; color: var(--mm-muted); font-size: 14px; } .pl-card__spec { white-space: pre-line; } .pl-card__brand-logo { height: 18px; width: auto; max-width: 100%; } .pl-card__condition { display: inline-flex; margin: 0 0 2px; padding: 2px 7px; font-size: 12px; font-weight: 400; line-height: 1.3; width: fit-content; max-width: 100%; justify-self: start; } .pl-card__name { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pl-card__makes { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; } .pl-card__makes li { padding: 2px 7px; background: var(--mm-green-light); border-radius: 2px; color: var(--mm-navy); font-size: 12px; font-weight: 500; line-height: 1.3; } .pl-card__rating { margin: 0; color: #f59e0b; font-size: 13px; } .pl-card__buy { margin-top: auto; padding: 0 10px 10px; } .pl-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .pl-card__price strong { color: var(--mm-text); font-size: 16px; font-weight: 500; } .pl-card__price small { color: var(--mm-text); font-size: 12px; font-weight: 400; } .pl-card__price s { color: var(--mm-muted); font-size: 12px; font-weight: 400; } .pl-card__stock.is-on, .pl-card__stock.is-off { display: flex; align-items: center; font-weight: 500; } .pl-card__stock.is-on { color: var(--mm-green); } .pl-card__stock.is-on::before, .pl-card__stock.is-off::before { content: ""; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background: currentColor; } .pl-card__stock.is-off { color: var(--mm-error); } .pl-card__cta { display: flex; gap: 8px; margin-top: 10px; min-width: 0; } .pl-card__cta form, .pl-card__cta .pl-card__add { flex: 1; min-width: 0; } .pl-card__add { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; } .pl-card__add.is-disabled { background: #c5c9d1; pointer-events: auto; } .pl-card__fav { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; cursor: pointer; font-size: 16px; } .pl-card__fav svg { width: 18px; height: 18px; } .pl-card__fav.is-on { color: var(--mm-red); } .pl-pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; } .pl-pager div { display: flex; gap: 6px; } .pl-pager a, .pl-pager span { min-width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--mm-border); border-radius: 4px; } .pl-pager a:hover { background: var(--mm-blue-light); color: var(--mm-blue); } .pl-pager a.is-active { background: var(--mm-blue); border-color: var(--mm-blue); color: #fff; } .pl-seo { max-width: 920px; margin-top: 36px; } .pl-mobile-bar, .pl-drawer { display: none; } .pl-sort-opt { display: block; padding: 12px 0; border-bottom: 1px solid var(--mm-border); } .pl-sort-opt.is-active { font-weight: 600; } @media (max-width: 1279px) { .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .pl-layout { grid-template-columns: 1fr; } .pl-side { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(100%, 360px); height: 100%; max-height: 100%; overflow: hidden; transform: translateX(-110%); transition: transform 150ms ease; } .pl-side__head { order: -2; position: sticky; top: 0; z-index: 3; margin: -18px -18px 12px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--mm-border); } .pl-cats { display: flex; flex-direction: column; order: -1; flex: 1 1 0; min-height: 240px; } .pl-makes { flex: 0 1 auto; min-height: 0; max-height: none; } .pl-makes .pl-cats__tree { max-height: min(28vh, 240px); min-height: 0; } .pl-cats__tree { flex: 1 1 auto; min-height: 200px; max-height: none; overflow: auto; } .pl-filters { flex: 0 1 auto; min-height: 160px; overflow: auto; } .pl-side.is-open { transform: none; } .pl-filters-bg { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(17, 24, 32, 0.45); } .pl-filters-bg:not([hidden]) { display: block; } .pl-side__apply { display: inline-flex; } .pl-side__foot { position: sticky; bottom: 0; padding-top: 12px; background: #fff; } .pl-side__close, .pl-mobile-bar, .pl-drawer { display: flex; } .pl-mobile-bar { justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; } .pl-toolbar__right { display: none; } .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-drawer { position: fixed; inset: 0; z-index: 41; } .pl-drawer[hidden] { display: none; } .pl-drawer__bg { position: absolute; inset: 0; background: rgba(17, 24, 32, 0.45); } .pl-drawer__box { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: #fff; border-radius: 4px 4px 0 0; } .pl-head { display: grid; } .pl-head h1 { font-size: 20px; } .mm-bc { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } } @media (max-width: 767px) { .pl-card__name { font-size: 16px; } .pl-card__price strong { font-size: 16px; } } @media (max-width: 374px) { .pl-grid { grid-template-columns: 1fr; } } @media (max-width: 899px) and (min-width: 768px) { .ft-news__grid { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-width: 1199px) { .ft-trust__grid > div { flex: 1 1 calc(50% - 14px); } } .mm-body.is-home { background: var(--mm-bg); } .hm-hero { min-height: 0; margin-bottom: 28px; padding: 28px 24px; border-radius: 4px; background: linear-gradient(90deg, rgba(7, 28, 51, 0.96) 0%, rgba(7, 28, 51, 0.86) 42%, rgba(7, 28, 51, 0.72) 100%), var(--mm-navy); color: #fff; } .hm-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; min-height: 0; } .hm-hero__copy h1 { margin: 0 0 10px; max-width: none; font-size: 36px; font-weight: 600; line-height: 1.12; text-transform: uppercase; } .hm-hero__copy h1 span { color: var(--mm-blue-hover); } .hm-hero__copy > p { margin: 0 0 16px; max-width: 525px; color: #bfd0e2; font-size: 16px; } .hm-hero__search { min-width: 200px; } .hm-hero__benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0; padding: 0; list-style: none; } .hm-hero__benefits li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; align-items: center; } .mm-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.15em; stroke-width: 1; } .pl-card__fav.is-on .mm-icon, .pdp-fav.is-on .mm-icon { fill: currentColor; } .hm-hero__benefits i, .hm-hero__benefits .mm-icon { grid-row: 1 / span 2; color: #a9d3ff; font-size: 40px; width: 1em; height: 1em; line-height: 1; } .hm-hero__benefits strong { color: #fff; font-size: 18px; } .hm-hero__benefits span { color: #bfd0e2; font-size: 16px; } .hm-section, .hm-banners, .hm-seller, .hm-help { margin: 32px 0; } .is-home .pdp-fit { margin-top: 0; margin-bottom: 32px; } .hm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .hm-reco > .hm-head { align-items: center; min-height: 48px; margin-bottom: 14px; padding: 0 16px; background: var(--mm-navy); border-radius: 4px; } .hm-head h2, .hm-section > h2, .hm-seller h2, .hm-help h2, .hm-banner h2 { margin: 0; font-size: 22px; font-weight: 600; color: var(--mm-navy); } .hm-reco > .hm-head h2 { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2; } .hm-head a, .hm-reco__all { display: inline-flex; align-items: center; gap: 6px; color: var(--mm-blue); font-weight: 600; text-decoration: none; white-space: nowrap; } .hm-reco > .hm-head a, .hm-reco .hm-reco__all { color: #fff; font-size: 14px; font-weight: 500; } .hm-head a:hover, .hm-reco__all:hover { color: var(--mm-blue-hover); } .hm-reco > .hm-head a:hover, .hm-reco .hm-reco__all:hover { color: var(--mm-blue-hover); } .hm-cats { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; } .hm-cats[data-n="1"] { --hm-cats-n: 1; } .hm-cats[data-n="2"] { --hm-cats-n: 2; } .hm-cats[data-n="3"] { --hm-cats-n: 3; } .hm-cats[data-n="4"] { --hm-cats-n: 4; } .hm-cats[data-n="5"] { --hm-cats-n: 5; } .hm-cats[data-n="6"] { --hm-cats-n: 6; } .hm-cats[data-n="7"] { --hm-cats-n: 7; } .hm-cats[data-n="8"] { --hm-cats-n: 8; } .hm-cats > li { flex: 1 1 calc((100% - (var(--hm-cats-n, 1) - 1) * 14px) / var(--hm-cats-n, 1)); min-width: min(180px, 100%); } .hm-cat { display: grid; gap: 8px; width: 100%; height: 100%; min-height: 40px; padding: 10px 10px 12px; background: #fff; border: 1px solid var(--mm-border); border-radius: 4px; color: var(--mm-navy); text-decoration: none; transition: border-color 160ms ease; } .hm-cat:hover { border-color: var(--mm-blue); } .hm-cat__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--mm-ice); border-radius: 4px; color: var(--mm-blue); font-size: 22px; } .hm-cat strong { font-size: 13px; line-height: 1.3; } .hm-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .hm-banner { --hm-bg: #071c33; --hm-title: #fff; --hm-accent: #147bff; --hm-text: #bfd0e2; --hm-btn-bg: #fff; --hm-btn: #071c33; padding: 24px 24px; border-radius: 4px; background: var(--hm-bg); color: var(--hm-title); } .hm-banner h2, .hm-banner h2 span { color: var(--hm-title); } .hm-banner h2 span { color: var(--hm-accent); } .hm-banner p { margin: 12px 0 22px; max-width: 420px; color: var(--hm-text); } .hm-banner__btn { background: var(--hm-btn-bg); color: var(--hm-btn); border-color: var(--hm-btn-bg); } .hm-banner__btn:hover { filter: brightness(0.94); } .hm-reco__tabs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; border-bottom: 1px solid var(--mm-border); } .hm-reco__tab { min-height: 36px; padding: 0 0 8px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--mm-muted); font: inherit; font-weight: 600; cursor: pointer; } .hm-reco__tab.is-on { color: var(--mm-blue); border-bottom-color: var(--mm-blue); } .hm-reco__grid { width: 100%; max-width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); } .hm-seller__points strong { display: block; color: var(--mm-navy); } .hm-seller__points span { color: var(--mm-muted); font-size: 13px; } .hm-seller { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: center; padding: 24px; border-radius: 4px; background: var(--mm-navy); color: #fff; } .hm-seller h2 { color: #fff; } .hm-seller p { margin: 12px 0 22px; max-width: 520px; color: #bfd0e2; } .hm-seller__points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; } .hm-seller__points strong { color: #fff; } .hm-seller__points span { color: #bfd0e2; } .hm-brands { display: flex; flex-wrap: nowrap; gap: 12px; margin: 18px 0 0; padding: 0 0 8px; overflow-x: auto; list-style: none; } .hm-brands a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; background: #fff; border: 1px solid var(--mm-border); border-radius: 4px; color: var(--mm-navy); font-weight: 600; text-decoration: none; white-space: nowrap; } .hm-brands a:hover { border-color: var(--mm-blue); color: var(--mm-blue); } .hm-help { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: linear-gradient(90deg, #c5dbf5, #aecff0); border-radius: 4px; } .hm-help p { margin: 8px 0 0; max-width: 520px; color: #3a4f6b; } .hm-help__actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 1279px) { .hm-reco__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1199px) { .hm-hero__copy h1 { font-size: 30px; } .hm-hero__inner, .hm-seller { grid-template-columns: 1fr; } .hm-banners { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .hm-hero { min-height: 0; margin-bottom: 28px; padding: 20px 16px; } .hm-hero__inner { min-height: 0; gap: 16px; } .hm-hero__copy h1 { font-size: 26px; max-width: none; } .hm-hero__copy > p { margin-bottom: 14px; font-size: 16px; } .hm-hero__search { width: 100%; } .hm-hero__benefits { grid-template-columns: 1fr; gap: 12px; } .hm-banners, .hm-seller__points, .hm-reco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-reco__grid .pl-card__add { padding: 0 6px; white-space: normal; line-height: 1.15; text-align: center; } .hm-reco__grid .pl-card__fav { flex: 0 0 32px; width: 32px; height: 32px; } .hm-banners { gap: 12px; } .hm-cats { gap: 10px; } .hm-cats > li { flex: 1 1 calc(50% - 5px); min-width: calc(50% - 5px); } .hm-cat { padding: 12px 10px 14px; gap: 8px; } .hm-cat__media { aspect-ratio: auto; height: 52px; font-size: 22px; } .hm-cat strong { font-size: 13px; } .hm-section, .hm-banners, .hm-seller, .hm-help { margin: 28px 0; } .is-home .pdp-fit { margin-bottom: 28px; } .hm-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; } .hm-reco > .hm-head { flex-direction: row; align-items: center; gap: 12px; padding: 0 12px; } .hm-head h2, .hm-section > h2, .hm-seller h2, .hm-help h2, .hm-banner h2 { font-size: 20px; } .hm-seller, .hm-help, .hm-banner { padding: 20px 16px; } .hm-seller { gap: 18px; } .hm-seller__points { gap: 12px; } .hm-banner p { margin: 10px 0 16px; } .hm-help { flex-direction: column; align-items: flex-start; gap: 16px; } .hm-help__actions { width: 100%; } .hm-help__actions .mm-btn, .hm-seller .mm-btn, .hm-banner__btn { width: 100%; } } @media (max-width: 479px) { .hm-banners, .hm-seller__points { grid-template-columns: 1fr; } } .mm-auth { display: grid; place-items: center; min-height: 52vh; padding: 20px 0 40px; } .mm-auth__card { width: min(440px, 100%); display: grid; gap: 12px; padding: 22px 20px; background: #fff; border: 1px solid var(--mm-border); border-radius: 4px; box-shadow: 0 8px 24px rgba(7, 28, 51, 0.06); } .mm-auth__eyebrow { margin: 0; color: var(--mm-blue); font-size: 13px; font-weight: 600; } .mm-auth__card h1 { margin: 0; color: var(--mm-navy); font-size: 22px; font-weight: 600; } .mm-auth__lead { margin: 0; color: var(--mm-muted); line-height: 1.5; } .mm-auth__card label { display: grid; gap: 6px; color: var(--mm-navy); } .mm-auth__card input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--mm-border); border-radius: 4px; background: #fff; color: var(--mm-text); font: inherit; } .mm-auth__card input:focus { border-color: var(--mm-blue); outline: 0; box-shadow: 0 0 0 3px var(--mm-focus); } .mm-auth__card .mm-btn { width: 100%; } .mm-auth__links { display: grid; gap: 8px; text-align: center; } .mm-auth__links a { color: var(--mm-blue); font-weight: 600; text-decoration: none; } .mm-auth__links a:hover { color: var(--mm-blue-hover); } .mm-flash { margin: 0; padding: 12px 14px; border-radius: 4px; background: #ecfdf3; color: var(--mm-text); } .mm-flash.is-warn, .mm-flash.is-error { background: var(--mm-error-bg); color: var(--mm-error); } @media (max-width: 767px) { .mm-cats { position: relative; z-index: 25; } .mm-cats__dropdown { max-height: min(70vh, 480px); overflow: auto; background: var(--mm-blue); border: 0; border-radius: 0 0 4px 4px; box-shadow: none; } .mm-cats__dropdown a { white-space: normal; color: #fff; } .mm-cats__dropdown a:hover { background: var(--mm-blue-hover); color: #fff; } .pl-head { margin: 4px 0 16px; gap: 12px; } .pl-head h1, .mm-pagehead h1, .mm-page-title, .mm-auth__card h1, .pdp h1 { font-size: 20px; } .pl-mobile-bar { margin-bottom: 12px; gap: 8px; } .pl-mobile-bar .mm-btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; } .pl-seo { margin-top: 24px; } .pl-seo h1, .pl-seo h2, .mm-cms h1, .mm-cms h2 { overflow-wrap: anywhere; } .pl-seo h1, .mm-cms h1 { font-size: 20px; } .pl-seo h2, .mm-cms h2 { font-size: 20px; margin-top: 20px; } .mm-cms ul, .pl-seo ul { padding-left: 20px; } .mm-empty-box { padding: 22px 16px; } .mm-empty-box .mm-btn, .mm-empty + .mm-btn, .mm-checkout .mm-btn { width: 100%; } .mm-cart li, .mm-rsv li { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; padding: 14px 0; } .mm-checkout__row, .mm-cart__qty { grid-template-columns: 1fr; } .mm-auth { min-height: 0; padding: 12px 0 40px; place-items: stretch; } .mm-auth__card { width: 100%; padding: 22px 16px; } .mm-search input { padding: 0 12px; } .pdp-usp { grid-template-columns: 1fr; gap: 10px; } .pdp-cta .pdp-add { flex: 1 1 auto; min-width: 0; } .pdp-lightbox__box { width: auto; max-width: 100%; margin: 0; padding: 0; } .mm-modal__box { width: calc(100% - 24px); margin-top: 6vh; padding: 18px 16px; } .mm-modal--vehicle .mm-modal__box { padding: 0; } .pdp-spec > div { grid-template-columns: 1fr; gap: 2px; } .pdp-spec dd { text-align: left; } .mm-modal__box .mm-btn { width: 100%; } } @media (max-width: 374px) { .mm-logo img { height: 30px; max-width: 180px; } .mm-action { min-width: 40px; min-height: 40px; padding: 6px; } .mm-header__inner { gap: 8px; } } .pdp-usp { gap: 12px; margin: 18px 0 0; padding: 14px 0 0; } .pdp-usp i, .pdp-usp .mm-icon { font-size: 18px; } .pl-vehicle { min-height: 44px; padding: 8px 12px; } .pl-chips a { min-height: 32px; padding: 0 10px; } .pl-pager { margin-top: 16px; } .pl-pager a, .pl-pager span { min-width: 32px; height: 32px; font-size: 13px; } .hm-brands a { min-height: 34px; padding: 6px 12px; font-size: 13px; } .mm-empty-box, .shop-notice { padding: 16px; } .pdp-banner h2 { font-size: 18px; color: #fff; } .ft-col__toggle { padding: 10px 0; } @media (max-width: 767px) { .mm-cats__all summary { height: auto; min-height: 48px; } .mm-action { min-width: 40px; min-height: 40px; } .mm-btn, .pdp-add { min-height: 40px; } .pdp-reserve-fields input, .pdp-fav { min-height: 40px; } .pdp-fav { height: 40px; } .hm-hero { padding: 16px 14px; margin-bottom: 20px; } .hm-section, .hm-banners, .hm-seller, .hm-help { margin: 22px 0; } .pdp-banner h2 { font-size: 18px; color: #fff; } .pl-card__cta { margin-top: 6px; } } .pdp-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; } .pdp-cta .pdp-fav { flex: 0 0 40px; width: 40px; max-width: 40px; } @media (max-width: 767px) { :root { --mm-page-pad: 16px; } .mm-wrap { padding-left: var(--mm-page-pad); padding-right: var(--mm-page-pad); } .mm-header__inner { gap: 12px; padding-top: 12px; padding-bottom: 12px; } .mm-logo img { height: 30px; max-width: 148px; } .mm-search input { padding: 0 12px; } .mm-cats .mm-wrap { padding-left: 0; padding-right: 0; } .mm-cats__all summary { padding: 0 var(--mm-page-pad); } .mm-cats__dropdown { padding: 8px 16px 12px; } .mm-cats__dropdown a { white-space: normal; min-height: 40px; } .mm-main { padding: 35px 0 35px; } .mm-body.is-product .mm-main { padding-bottom: 24px; } .mm-body.is-product { overflow-x: hidden; } .mm-body.is-product .mm-main > .mm-wrap { padding-left: 20px; padding-right: 20px; } .mm-body.is-product .pdp-banner__inner { padding-left: 20px; padding-right: 20px; } .pdp, .pdp-hero, .pdp-gallery, .pdp-side, .pdp-grid, .pdp-card { min-width: 0; max-width: 100%; } .mm-bc { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 4px; margin-bottom: 12px; } .pl-head { margin: 0 0 16px; gap: 10px; } .pl-head p { max-width: none; } .pl-toolbar { display: none; } .pl-mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; } .pl-mobile-bar strong { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--mm-navy); } .pl-mobile-bar .mm-btn { width: 100%; min-width: 0; padding: 0 10px; } .pl-grid { gap: 12px; } .pl-card__body { gap: 6px; padding: 10px 12px 8px; } .pl-card__buy { padding: 0 12px 12px; } .pl-card__cta { margin-top: 8px; gap: 8px; } .pl-card__add { min-height: 36px; padding: 0 8px; font-size: 14px; } .pl-card__fav { width: 36px; height: 36px; flex: 0 0 36px; } .pl-pager { margin-top: 20px; } .pdp h1, .pdp-help p, .pdp-fit__head p, .pl-card__name { overflow-wrap: anywhere; } .pdp-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pdp-stage, .pdp-stage__shell, .pdp-stage__frame { max-width: 100%; } .pdp-thumbs-bar { gap: 6px; } .pdp-thumbs-bar .pdp-nav { flex: 0 0 32px; width: 32px; min-height: 72px; } .pdp-thumbs { gap: 6px; padding-top: 0; } .pdp-thumb { flex-basis: 72px; width: 72px; height: 72px; } .pdp-cta { grid-template-columns: 1fr; gap: 12px; align-items: stretch; } .pdp-cta__action { display: flex; gap: 10px; align-items: center; width: 100%; } .pdp-cta .pdp-add, .pdp-cta__action > .pdp-add { flex: 1 1 auto; min-width: 0; width: auto; } .pdp-card { padding: 16px; } .pdp-contact { margin-top: 16px; } .pdp-help { margin-bottom: 16px; padding-bottom: 16px; } .pdp-about-block { margin-top: 4px; } .pdp-grid, .pdp-lower { gap: 16px; margin-top: 16px; } .pdp-related { margin-top: 28px; } .pdp-banner { margin-top: 45px; padding: 35px 0; } .pdp-banner__inner { padding: 0 var(--mm-page-pad); gap: 16px; } .pdp-fit { padding: 16px 14px; } .hm-hero { margin-bottom: 24px; padding: 20px 16px; } .hm-hero__inner { gap: 16px; } .hm-section, .hm-banners, .hm-seller, .hm-help { margin: 24px 0; } .hm-cats { gap: 12px; } .hm-cats > li { flex: 1 1 calc(50% - 6px); min-width: calc(50% - 6px); } .hm-cat { padding: 14px 12px 16px; } .hm-seller, .hm-help, .hm-banner { padding: 20px 16px; } .ft-brand { padding: 35px 0; } .ft-brand__text { margin: 0; max-width: none; } .ft-news { padding: 0; } .ft-news__grid { gap: 16px; padding-top: 45px; padding-bottom: 45px; } .ft-news__row { flex-direction: column; gap: 8px; } .ft-news input[type="email"], .ft-news .mm-btn { width: 100%; min-width: 0; height: 44px; } .ft-main { padding: 8px 0 24px; } .ft-col__toggle { padding: 14px 0; } .ft-seller__box { padding: 16px; gap: 12px; } .ft-bottom__inner { padding-top: 16px; padding-bottom: 16px; gap: 12px; } } @media (max-width: 374px) { .mm-logo img { height: 30px; max-width: 132px; } .pl-grid { grid-template-columns: 1fr; } .pdp-thumb { flex-basis: 64px; width: 64px; height: 64px; } } @media (max-width: 1279px) and (min-width: 768px) { .mm-action { min-height: 40px; padding: 6px 10px; } .mm-search { height: 40px; min-height: 40px; } .mm-action--vehicle strong { max-width: 220px; } } @media (max-width: 767px) { .mm-actions { display: flex; flex-wrap: nowrap; justify-content: stretch; gap: 6px; width: 100%; min-width: 0; margin-left: 0; } .mm-action { flex: 1 1 0; justify-content: center; width: auto; min-width: 0; min-height: 36px; padding: 5px 6px; gap: 4px; } .mm-action span { display: inline-flex; min-width: 0; } .mm-action i, .mm-action svg { font-size: 16px; flex-basis: 16px; width: 16px; height: 16px; } .mm-action strong { font-size: 12px; } .mm-action small { font-size: 14px; font-weight: 400; } .mm-action--vehicle strong { max-width: 100%; } .mm-search { height: 36px; min-height: 36px; } .mm-search__btn { padding: 0 10px; font-size: 13px; } } .mm-notfound { max-width: 40rem; margin: 8px auto 24px; padding: 28px 24px; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: #fff; } .mm-notfound__code { margin: 0 0 8px; color: var(--mm-blue); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; } .mm-notfound h1 { margin: 0 0 10px; } .mm-notfound h2 { margin: 22px 0 8px; font-size: 15px; } .mm-notfound__lead { margin: 0 0 16px; color: var(--mm-muted); line-height: 1.5; } .mm-notfound__actions { display: flex; flex-wrap: wrap; gap: 8px; } .mm-notfound__cats { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .mm-notfound__cats a { color: var(--mm-blue); text-decoration: none; } .mm-notfound__cats a:hover { text-decoration: underline; }