/**
* CoversCenter 2026 redesign — design system + header/nav.
* Pattern follows category-redesign.css (:root tokens, cc2- prefix).
* Homepage, results and PDP sections are scoped by body classes further down.
* Fonts are self-hosted in ../fonts (no third-party requests; CSP-safe).
*/
/* ── Fonts ─────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../fonts/barlow-condensed-800-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('../fonts/barlow-condensed-900-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-var-latin.woff2') format('woff2');
}
/* ── Tokens ────────────────────────────────────────────────────────── */
:root {
--cc2-navy: #0B0F1A;
--cc2-navy-hover: #1C2340;
--cc2-card: #141929;
--cc2-card-border: #2A3158;
--cc2-brand: #E8380D;
--cc2-brand-dark: #C02E0A;
--cc2-gold: #F59E0B;
--cc2-green: #16A34A;
--cc2-green-light: #F0FDF4;
--cc2-amber-light: #FFFBEB;
--cc2-bg: #F9FAFB;
--cc2-line: #E5E7EB;
--cc2-text: #111827;
--cc2-text-2: #4B5563;
--cc2-text-3: #9CA3AF;
--cc2-radius: 12px;
--cc2-radius-lg: 16px;
--cc2-shadow: 0 1px 3px rgba(0,0,0,.08);
--cc2-shadow-lg: 0 12px 32px rgba(11,15,26,.16);
--cc2-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
--cc2-font-body: 'Inter', Arial, sans-serif;
}
/* ── Shared components ─────────────────────────────────────────────── */
.cc2-btn,
a.cc2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--cc2-font-display);
font-weight: 700;
font-size: 19px;
letter-spacing: .02em;
line-height: 1;
padding: 15px 26px;
border-radius: var(--cc2-radius);
border: 0;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
transition: background-color .15s ease, color .15s ease;
background: var(--cc2-brand);
color: #fff;
}
.cc2-btn:hover,
a.cc2-btn:hover { background: var(--cc2-brand-dark); color: #fff; text-decoration: none; }
.cc2-btn:focus-visible,
a.cc2-btn:focus-visible { outline: 3px solid var(--cc2-gold); outline-offset: 2px; }
.cc2-btn--dark { background: var(--cc2-navy); }
.cc2-btn--dark:hover { background: var(--cc2-navy-hover); }
.cc2-btn--ghost { background: #fff; color: var(--cc2-brand); }
.cc2-btn--ghost:hover { background: #F3F4F6; color: var(--cc2-brand-dark); }
.cc2-badge {
display: inline-block;
font-family: var(--cc2-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
background: var(--cc2-brand);
border-radius: 5px;
padding: 3px 8px;
}
.cc2-badge--blue { background: #3B82F6; }
.cc2-badge--green { background: var(--cc2-green); }
.cc2-badge--purple { background: #7C3AED; }
.cc2-badge--gray { background: #6B7280; }
.cc2-h,
h1.cc2-h, h2.cc2-h, h3.cc2-h {
font-family: var(--cc2-font-display);
font-weight: 800;
text-transform: uppercase;
color: var(--cc2-navy);
letter-spacing: .01em;
line-height: 1.05;
}
/* Star rating (server-rendered SVG stars) */
.cc2-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.cc2-stars svg { width: 15px; height: 15px; fill: #D1D5DB; }
.cc2-stars svg.on { fill: var(--cc2-gold); }
.cc2-stars--lg svg { width: 20px; height: 20px; }
/* Protection bar (0-5 rating) */
.cc2-pbar { display: flex; align-items: center; gap: 8px; }
.cc2-pbar__label {
flex: 0 0 84px;
text-align: right;
font-size: 12px;
color: var(--cc2-text-3);
font-family: var(--cc2-font-body);
}
.cc2-pbar__track {
flex: 1;
height: 8px;
border-radius: 999px;
background: var(--cc2-line);
overflow: hidden;
}
.cc2-pbar__fill { height: 8px; border-radius: 999px; background: var(--cc2-brand); }
.cc2-pbar__val { flex: 0 0 14px; font-size: 12px; font-weight: 700; color: var(--cc2-text-2); }
/* Protection dots (legend + compact scale) */
.cc2-dots { display: inline-flex; gap: 3px; }
.cc2-dots i {
width: 10px; height: 10px; border-radius: 50%;
background: var(--cc2-line); display: inline-block;
}
.cc2-dots i.on { background: var(--cc2-brand); }
/* ── Header ────────────────────────────────────────────────────────── */
.header-container.cc2-header { font-family: var(--cc2-font-body); background: #fff; }
/* top trust strip (navy) */
.cc2-header .cc2-topbar { background: var(--cc2-navy); color: #fff; }
.cc2-header .cc2-topbar__inner {
max-width: 1280px; margin: 0 auto; padding: 8px 16px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
column-gap: 28px; row-gap: 4px;
font-size: 13px; font-weight: 500;
}
.cc2-header .cc2-topbar__inner .cc2-top-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cc2-header .cc2-topbar__inner .cc2-top-item svg { width: 15px; height: 15px; fill: var(--cc2-brand); flex: 0 0 auto; }
.cc2-header .cc2-topbar__inner a { color: #fff; text-decoration: none; }
.cc2-header .cc2-topbar__inner a:hover { color: var(--cc2-gold); }
/* middle: logo / search / account / cart */
.cc2-header .cc2-mid { border-bottom: 1px solid var(--cc2-line); background: #fff; }
.cc2-header .cc2-mid__inner {
max-width: 1280px; margin: 0 auto; padding: 10px 16px;
display: flex; align-items: center; gap: 20px;
}
.cc2-header .cc2-mid .logo-headder { flex: 0 0 auto; }
.cc2-header .cc2-mid .logo-headder img { height: 52px; width: auto; display: block; }
.cc2-header .cc2-mid .cc2-mid__search { flex: 1 1 auto; min-width: 160px; max-width: 520px; }
.cc2-header .cc2-mid__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.cc2-header .cc2-phone {
display: inline-flex; align-items: center; gap: 7px;
color: var(--cc2-text-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.cc2-header .cc2-phone:hover { color: var(--cc2-brand); text-decoration: none; }
.cc2-header .cc2-phone svg { width: 16px; height: 16px; fill: var(--cc2-brand); }
/* keep legacy hooks working inside new header */
.cc2-header .wishlist-header a {
display: inline-flex; align-items: center; color: var(--cc2-text-2);
font-size: 14px; font-weight: 500; text-decoration: none;
}
.cc2-header .wishlist-header a:hover { color: var(--cc2-brand); }
.cc2-header .header-account { position: relative; }
.cc2-header .minicart-wrapper { margin: 0; }
.cc2-header .minicart-wrapper .action.showcart {
background: var(--cc2-brand); border-radius: 10px; padding: 10px 16px;
display: inline-flex; align-items: center; gap: 8px;
}
.cc2-header .minicart-wrapper .action.showcart:hover { background: var(--cc2-brand-dark); }
.cc2-header .minicart-wrapper .action.showcart:before { color: #fff; }
.cc2-header .minicart-wrapper .action.showcart .counter.qty {
background: var(--cc2-navy); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; line-height: 20px;
}
/* vehicle-type nav (navy scroller) */
.cc2-header .header-bottom { background: var(--cc2-navy); border: 0; }
.cc2-vnav { max-width: 1280px; margin: 0 auto; }
.cc2-vnav__scroll {
display: flex; align-items: stretch;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none;
}
.cc2-vnav__scroll::-webkit-scrollbar { display: none; }
.cc2-vnav a.cc2-vnav__item {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
min-width: 76px; padding: 10px 14px 9px;
color: #9CA3AF; text-decoration: none;
border-right: 1px solid rgba(255,255,255,.05);
transition: background-color .15s ease, color .15s ease;
}
.cc2-vnav a.cc2-vnav__item:last-child { border-right: 0; }
.cc2-vnav a.cc2-vnav__item svg { width: 46px; height: 26px; fill: currentColor; display: block; }
.cc2-vnav a.cc2-vnav__item .cc2-vnav__label {
font-size: 10px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; line-height: 1;
font-family: var(--cc2-font-body); text-transform: uppercase;
}
.cc2-vnav a.cc2-vnav__item:hover,
.cc2-vnav a.cc2-vnav__item:focus-visible { background: var(--cc2-brand); color: #fff; }
.cc2-vnav a.cc2-vnav__item:focus-visible { outline: 3px solid var(--cc2-gold); outline-offset: -3px; }
.cc2-vnav a.cc2-vnav__item.is-active { color: #fff; box-shadow: inset 0 -3px 0 var(--cc2-brand); }
/* all-departments menu trigger sitting left of the vehicle nav */
.cc2-vnav__menu { position: relative; flex: 0 0 auto; display: flex; }
.cc2-vnav__menu > .cc2-vnav__menu-btn {
display: flex; align-items: center; gap: 8px;
background: transparent; color: #fff; border: 0; cursor: pointer;
padding: 0 18px; font-size: 13px; font-weight: 600; font-family: var(--cc2-font-body);
border-right: 1px solid rgba(255,255,255,.12);
}
.cc2-vnav__menu > .cc2-vnav__menu-btn:hover { background: var(--cc2-navy-hover); }
.cc2-vnav__menu > .cc2-vnav__menu-btn:focus-visible { outline: 3px solid var(--cc2-gold); outline-offset: -3px; }
.cc2-vnav__menu .cc2-vnav__menu-panel {
display: none; position: absolute; top: 100%; left: 0; z-index: 900;
min-width: 260px; background: #fff; border-radius: 0 0 var(--cc2-radius) var(--cc2-radius);
box-shadow: var(--cc2-shadow-lg); padding: 6px 0;
}
.cc2-vnav__menu.is-open .cc2-vnav__menu-panel,
.cc2-vnav__menu:focus-within .cc2-vnav__menu-panel { display: block; }
/* megamenu embedded in the panel: neutralise its horizontal layout */
.cc2-vnav__menu-panel .sm_megamenu_wrapper_horizontal_menu ul.sm_megamenu_menu { display: block; }
.cc2-vnav__menu-panel .sm_megamenu_wrapper_horizontal_menu li.sm_megamenu_lv1 { display: block; float: none; width: 100%; }
.cc2-vnav__menu-panel .sm_megamenu_wrapper_horizontal_menu li.sm_megamenu_lv1 > a { color: var(--cc2-text); padding: 10px 18px; display: block; }
.cc2-vnav__menu-panel .sm_megamenu_wrapper_horizontal_menu li.sm_megamenu_lv1 > a:hover { color: var(--cc2-brand); background: var(--cc2-bg); }
/* sticky state set by existing theme JS (.fixed on .ontop-element) */
.cc2-header .header-bottom.fixed {
position: fixed; top: 0; left: 0; right: 0; z-index: 899;
box-shadow: 0 2px 12px rgba(11,15,26,.35);
}
@media (max-width: 1023px) {
.cc2-header .cc2-mid__inner { flex-wrap: wrap; gap: 10px 14px; }
.cc2-header .cc2-mid .cc2-mid__search { order: 5; flex-basis: 100%; max-width: none; }
.cc2-header .cc2-phone span { display: none; }
}
@media (max-width: 767px) {
.cc2-header .cc2-topbar__inner { column-gap: 14px; font-size: 12px; }
.cc2-header .cc2-topbar__inner .cc2-top-item--hide-m { display: none; }
.cc2-header .cc2-mid .logo-headder img { height: 40px; }
.cc2-vnav a.cc2-vnav__item { min-width: 64px; padding: 8px 10px 7px; }
}
/* ── Homepage ──────────────────────────────────────────────────────── */
.cms-home .page-main { max-width: none; padding: 0; }
.cms-home .columns .column.main { padding-bottom: 0; }
.cc2-home { font-family: var(--cc2-font-body); color: var(--cc2-text); }
.cc2-home section { margin: 0; }
.cc2-section-title { font-size: 44px; margin: 0 0 6px; }
.cc2-section-title span { color: var(--cc2-brand); }
.cc2-section-title--light { color: #fff; }
.cc2-section-sub { color: var(--cc2-text-3); margin: 0 0 32px; }
/* hero */
.cc2-hero { position: relative; background: var(--cc2-navy); color: #fff; overflow: hidden; }
.cc2-hero__bg { position: absolute; inset: 0; opacity: .25; }
.cc2-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.cc2-hero__inner {
position: relative; max-width: 1280px; margin: 0 auto;
padding: 72px 16px 80px;
background: linear-gradient(90deg, rgba(11,15,26,.55) 0%, rgba(11,15,26,0) 75%);
}
.cc2-hero__copy { max-width: 640px; }
.cc2-hero__title {
font-family: var(--cc2-font-display); font-weight: 900; text-transform: uppercase;
font-size: 64px; line-height: .95; letter-spacing: .01em; margin: 0 0 14px; color: #fff;
}
.cc2-hero__title span { color: var(--cc2-brand); }
.cc2-hero__sub { color: #D1D5DB; font-size: 18px; line-height: 1.6; margin: 0 0 28px; }
/* finder card (wraps the Sm_AttributesSearch widget) */
.cc2-finder {
background: #fff; color: var(--cc2-text);
border-radius: var(--cc2-radius-lg); box-shadow: var(--cc2-shadow-lg);
padding: 22px; max-width: 560px;
}
.cc2-finder__title { font-family: var(--cc2-font-display); font-weight: 700; font-size: 22px; color: var(--cc2-navy); margin-bottom: 14px; }
.cc2-finder__note { text-align: center; font-size: 12px; color: var(--cc2-text-3); margin: 10px 0 0; }
.cc2-finder .smas-wrap { background: none; padding: 0; }
.cc2-finder .smas-caption { display: none; }
.cc2-finder .smas-form-wrap .smas-form { display: block; }
.cc2-finder .smas-group-left { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.cc2-finder .smas-attr { float: none; width: auto; padding: 0; margin: 0; }
.cc2-finder .smas-attr-inner .chosen-container,
.cc2-finder .smas-select {
width: 100% !important; border: 1px solid #D1D5DB; border-radius: 10px;
font-size: 14px; color: var(--cc2-text);
}
.cc2-finder .chosen-container-single .chosen-single {
height: 44px; line-height: 42px; border: 0; border-radius: 10px;
background: #fff; box-shadow: none; padding: 0 14px; font-size: 14px; color: var(--cc2-text);
}
.cc2-finder .chosen-container-active .chosen-single,
.cc2-finder .smas-select:focus { outline: 2px solid var(--cc2-brand); outline-offset: 0; }
.cc2-finder .smas-group-right { float: none; width: auto; padding: 0; }
.cc2-finder .smas-btn .btn-search {
width: 100%; background: var(--cc2-brand); color: #fff; border: 0; cursor: pointer;
font-family: var(--cc2-font-display); font-weight: 700; font-size: 20px; text-transform: uppercase;
padding: 15px; border-radius: var(--cc2-radius); transition: background-color .15s ease;
}
.cc2-finder .smas-btn .btn-search:hover:not([disabled]) { background: var(--cc2-brand-dark); }
.cc2-finder .smas-btn .btn-search[disabled] { background: #D1D5DB; cursor: not-allowed; }
.cc2-finder .smas-btn .btn-reset { margin-top: 8px; background: none; border: 0; color: var(--cc2-text-3); text-decoration: underline; cursor: pointer; width: 100%; }
.cc2-finder .smas-loading { border-radius: var(--cc2-radius-lg); }
/* promo strip */
.cc2-strip { background: var(--cc2-brand); color: #fff; }
.cc2-strip__inner {
max-width: 1280px; margin: 0 auto; padding: 13px 16px;
display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; row-gap: 4px;
font-size: 14px; font-weight: 600; text-align: center;
}
.cc2-strip__sep { opacity: .5; }
/* shop by type */
.cc2-types__inner { max-width: 1280px; margin: 0 auto; padding: 64px 16px; text-align: center; }
.cc2-types__grid {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.cc2-types__grid li { margin: 0; }
.cc2-types__grid a {
display: flex; flex-direction: column; align-items: center; gap: 10px;
background: var(--cc2-navy); color: #C7CBD4; border-radius: var(--cc2-radius);
padding: 22px 10px 18px; text-decoration: none;
transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.cc2-types__grid a:hover, .cc2-types__grid a:focus-visible { background: var(--cc2-brand); color: #fff; transform: translateY(-3px); }
.cc2-types__grid a:focus-visible { outline: 3px solid var(--cc2-gold); outline-offset: 2px; }
.cc2-types__icon svg { width: 64px; height: 36px; display: block; }
.cc2-types__label { font-family: var(--cc2-font-display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
/* trust badge cards */
.cc2-badges-band { background: var(--cc2-bg); padding: 44px 16px; }
.cc2-badges {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
}
.cc2-badge-card {
background: #fff; border: 1px solid var(--cc2-line); border-radius: var(--cc2-radius);
box-shadow: var(--cc2-shadow); padding: 18px 14px; text-align: center;
display: flex; flex-direction: column; gap: 6px;
}
.cc2-badge-card__t { font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--cc2-text); }
.cc2-badge-card__s { font-size: 12px; color: var(--cc2-text-3); }
/* why us */
.cc2-why__inner {
max-width: 1280px; margin: 0 auto; padding: 64px 16px;
display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.cc2-why__copy p { color: var(--cc2-text-2); line-height: 1.7; margin: 0 0 24px; }
.cc2-why__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cc2-why__list li { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 3px solid var(--cc2-brand); }
.cc2-why__list strong { color: var(--cc2-text); }
.cc2-why__list span { font-size: 14px; color: var(--cc2-text-3); }
.cc2-why__media img { width: 100%; height: auto; border-radius: var(--cc2-radius-lg); box-shadow: var(--cc2-shadow-lg); }
/* testimonials */
.cc2-testimonials { background: var(--cc2-navy); }
.cc2-testimonials__inner { max-width: 1280px; margin: 0 auto; padding: 64px 16px; text-align: center; }
.cc2-testimonials__grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;
margin-top: 36px; text-align: left;
}
.cc2-tcard {
background: var(--cc2-card); border: 1px solid var(--cc2-card-border); border-radius: var(--cc2-radius-lg);
padding: 22px; margin: 0; color: #D1D5DB;
}
.cc2-tcard p { font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.cc2-tcard footer strong { color: #fff; }
/* final CTA */
.cc2-cta { background: var(--cc2-brand); color: #fff; }
.cc2-cta__inner { max-width: 760px; margin: 0 auto; padding: 56px 16px; text-align: center; }
.cc2-cta__inner > p { color: rgba(255,255,255,.85); font-size: 17px; margin: 0 0 26px; }
.cc2-cta__note { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 14px; }
@media (max-width: 1023px) {
.cc2-hero__title { font-size: 52px; }
.cc2-why__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
.cc2-section-title { font-size: 34px; }
.cc2-hero__inner { padding: 44px 16px 52px; }
.cc2-hero__title { font-size: 42px; }
.cc2-finder .smas-group-left { grid-template-columns: 1fr; }
.cc2-types__inner, .cc2-why__inner, .cc2-testimonials__inner { padding: 44px 16px; }
}
@media (prefers-reduced-motion: reduce) {
.cc2-types__grid a, .cc2-btn, .cc2-vnav a.cc2-vnav__item { transition: none; }
.cc2-types__grid a:hover { transform: none; }
}
/* ── Vehicle results page ──────────────────────────────────────────── */
.catalogsearch-result-index .cc2-results-toolbar { display: none; }
.cc2-sr-only, .cc-sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cc2-legend {
background: #fff; border: 1px solid var(--cc2-line); border-radius: var(--cc2-radius);
padding: 10px 18px; margin: 0 0 18px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px;
font-family: var(--cc2-font-body); font-size: 12px; color: var(--cc2-text-3);
}
.cc2-legend__cap { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cc2-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cc2-editions { display: flex; flex-direction: column; gap: 16px; margin: 0 0 28px; }
.cc2-edition {
background: #fff; border: 2px solid var(--cc2-line); border-radius: var(--cc2-radius-lg);
overflow: hidden; box-shadow: var(--cc2-shadow); font-family: var(--cc2-font-body);
transition: box-shadow .15s ease;
}
.cc2-edition:hover { box-shadow: var(--cc2-shadow-lg); }
.cc2-edition__bar { height: 6px; background: var(--cc2-accent, var(--cc2-brand)); }
.cc2-edition__grid {
display: grid; grid-template-columns: 230px 1fr 220px 180px; gap: 22px;
padding: 20px 22px; align-items: center;
}
.cc2-edition__cap {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--cc2-text-3); margin: 0 0 8px;
}
.cc2-edition__id .cc2-badge { margin-bottom: 8px; }
.cc2-edition__name { margin: 0 0 4px; font-family: var(--cc2-font-display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1; }
.cc2-edition__name a { color: var(--cc2-navy); text-decoration: none; }
.cc2-edition__name a:hover { color: var(--cc2-brand); }
.cc2-edition__tagline { font-size: 12px; color: var(--cc2-text-3); line-height: 1.5; margin: 0 0 10px; }
.cc2-edition__imglink img { max-width: 170px; height: auto; display: block; }
.cc2-edition__reviews .product-reviews-summary { margin: 6px 0 0; }
.cc2-edition__protection { display: flex; flex-direction: column; gap: 7px; }
.cc2-edition__protection .cc2-pbar__fill { background: var(--cc2-accent, var(--cc2-brand)); }
.cc2-edition__specs dl { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.cc2-edition__spec { display: flex; justify-content: space-between; gap: 10px; }
.cc2-edition__spec dt { font-size: 12px; color: var(--cc2-text-3); }
.cc2-edition__spec dd { font-size: 12px; font-weight: 600; color: var(--cc2-text-2); margin: 0; text-align: right; }
.cc2-edition__buy { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.cc2-edition__price .price-box .price { font-family: var(--cc2-font-display); font-weight: 800; font-size: 30px; color: var(--cc2-brand); }
.cc2-edition__price .price-box .old-price .price { font-size: 16px; color: var(--cc2-text-3); font-weight: 400; }
.cc2-edition__price .price-box .special-price .price { color: var(--cc2-brand); }
.cc2-edition__stock { margin: 0; font-size: 12px; font-weight: 600; }
.cc2-edition__stock--in { color: var(--cc2-green); }
.cc2-edition__stock--out { color: var(--cc2-brand-dark); }
.cc2-edition__cta { font-size: 16px; padding: 12px 16px; }
.cc2-edition__cart { width: 100%; font-size: 16px; padding: 12px 16px; }
.cc2-edition__ship { margin: 0; font-size: 11px; color: var(--cc2-text-3); }
.cc2-results-callout {
background: var(--cc2-navy); color: #fff; border-radius: var(--cc2-radius-lg);
padding: 24px 28px; margin: 0 0 28px;
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
font-family: var(--cc2-font-body);
}
.cc2-results-callout h3 { margin: 0 0 4px; font-family: var(--cc2-font-display); font-weight: 700; font-size: 24px; text-transform: uppercase; color: #fff; }
.cc2-results-callout p { margin: 0; color: #9CA3AF; font-size: 14px; }
@media (max-width: 1023px) {
.cc2-edition__grid { grid-template-columns: 1fr 1fr; }
.cc2-edition__buy { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
.cc2-edition__grid { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
.cc2-edition__imglink img { margin: 0 auto; }
.cc2-edition__id { text-align: center; }
}
/* ── Product page ──────────────────────────────────────────────────── */
.catalog-product-view .cc2-fitment {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
background: var(--cc2-green-light); border: 1px solid #BBF7D0; border-radius: 10px;
padding: 10px 14px; margin: 10px 0 14px;
font-family: var(--cc2-font-body); font-size: 14px; color: #166534;
}
.catalog-product-view .cc2-fitment svg { color: var(--cc2-green); flex: 0 0 auto; }
.catalog-product-view .cc2-fitment__all { margin-left: auto; color: var(--cc2-brand); font-weight: 600; text-decoration: underline; }
.catalog-product-view .cc2-fitment__all:hover { color: var(--cc2-brand-dark); }
.catalog-product-view .cc2-pdp-panels { margin: 22px 0; font-family: var(--cc2-font-body); }
.catalog-product-view .cc2-warranty {
display: flex; align-items: center; gap: 14px;
background: var(--cc2-navy); color: #fff; border-radius: var(--cc2-radius);
padding: 16px 18px; margin: 0 0 16px;
}
.catalog-product-view .cc2-warranty svg { color: var(--cc2-gold); flex: 0 0 auto; }
.catalog-product-view .cc2-warranty__t {
margin: 0; font-family: var(--cc2-font-display); font-weight: 700;
font-size: 20px; text-transform: uppercase; color: #fff;
}
.catalog-product-view .cc2-warranty__s { margin: 2px 0 0; font-size: 13px; color: #9CA3AF; }
.catalog-product-view .cc2-pdp-panels__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.catalog-product-view .cc2-included, .catalog-product-view .cc2-protection {
background: var(--cc2-bg); border: 1px solid var(--cc2-line); border-radius: var(--cc2-radius-lg);
padding: 18px 20px;
}
.catalog-product-view .cc2-included h3.cc2-h, .catalog-product-view .cc2-protection h3.cc2-h { font-size: 20px; margin: 0 0 12px; }
.catalog-product-view .cc2-included ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.catalog-product-view .cc2-included li { display: flex; gap: 9px; font-size: 14px; color: var(--cc2-text-2); }
.catalog-product-view .cc2-included__check {
flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%;
background: #DCFCE7; color: var(--cc2-green); font-size: 11px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.catalog-product-view .cc2-protection { display: flex; flex-direction: column; gap: 8px; }
/* core PDP polish under the new system */
.catalog-product-view .page-title-wrapper .page-title {
font-family: var(--cc2-font-display); font-weight: 800; text-transform: uppercase;
color: var(--cc2-navy); line-height: 1.02;
}
.catalog-product-view .product-info-price .price-box .price {
font-family: var(--cc2-font-display); font-weight: 800; color: var(--cc2-brand);
}
.catalog-product-view .box-tocart .action.tocart {
background: var(--cc2-brand); border: 0; border-radius: var(--cc2-radius);
font-family: var(--cc2-font-display); font-weight: 700; font-size: 20px; text-transform: uppercase;
}
.catalog-product-view .box-tocart .action.tocart:hover { background: var(--cc2-brand-dark); }
.catalog-product-view .box-tocart .action.tocart:focus-visible { outline: 3px solid var(--cc2-gold); outline-offset: 2px; }
@media (max-width: 767px) {
.catalog-product-view .cc2-pdp-panels__grid { grid-template-columns: 1fr; }
.catalog-product-view .cc2-fitment__all { margin-left: 0; }
}
/* ═══ v3 design revision (2026-08-15): compact header, full-viewport hero ═══ */
/* red slim trust strip */
.cc2-header .cc2-topbar--red { background: var(--cc2-brand); }
.cc2-header .cc2-topbar--red .cc2-topbar__inner { padding: 5px 16px; font-size: 12px; letter-spacing: .02em; }
.cc2-header .cc2-topbar--red a:hover { color: #FFE4DC; }
.cc2-header .cc2-topbar--red .top-bar-cus { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; }
.cc2-header .cc2-topbar--red .top-bar-cus svg { height: 22px; width: auto; display: block; }
/* compact logo bar */
.cc2-header .cc2-mid__inner { padding: 6px 16px; gap: 14px; }
.cc2-header .cc2-mid .logo-headder img { height: 40px; }
.cc2-header .cc2-mid .cc2-mid__search { max-width: 340px; }
/* stacked phone block (renders the header-med-content CMS block) */
.cc2-phone-block { flex: 0 0 auto; line-height: 1.25; font-size: 13px; }
.cc2-phone-block .med-content-cus { display: flex; flex-direction: column; }
.cc2-phone-block .call-con > span { font-size: 11px; color: var(--cc2-text-3); display: block; }
.cc2-phone-block .con-no { font-weight: 700; color: var(--cc2-text); white-space: nowrap; }
.cc2-phone-block .seven-days { font-size: 10px; color: var(--cc2-text-3); white-space: nowrap; }
/* icon-style actions (wishlist / login) */
.cc2-header .cc2-icon-action { text-align: center; }
.cc2-header .cc2-icon-action .wishlist-header a,
.cc2-header .wishlist-header a {
display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
font-size: 10px; font-weight: 600; color: var(--cc2-text-2);
}
.cc2-header .cc2-icon-action svg { display: block; }
.cc2-header .header-account .drop-account { font-size: 10px; font-weight: 600; }
.cc2-header .header-account .drop-account .links > li > a,
.cc2-header .header-account .drop-account .authorization-link a {
display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
color: var(--cc2-text-2); font-size: 10px; font-weight: 600; text-decoration: none;
}
.cc2-header .header-account .drop-account .authorization-link a::before {
content: ""; width: 20px; height: 20px; display: block;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.cc2-header .cc2-icon-action a:hover, .cc2-header .header-account .drop-account a:hover { color: var(--cc2-brand); }
/* tighter vehicle nav */
.cc2-vnav a.cc2-vnav__item { min-width: 64px; padding: 7px 10px 6px; gap: 3px; }
.cc2-vnav a.cc2-vnav__item svg { width: 40px; height: 22px; }
.cc2-vnav a.cc2-vnav__item .cc2-vnav__label { font-size: 9px; }
/* full-viewport hero, two columns, strip anchored at bottom */
.cc2-hero--full { display: flex; flex-direction: column; }
.cc2-hero--full .cc2-hero__inner--grid {
flex: 1 1 auto; width: 100%; max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
padding: 28px 16px 36px;
background: linear-gradient(90deg, rgba(11,15,26,.55) 0%, rgba(11,15,26,0) 75%);
}
@media (min-width: 768px) {
.cc2-hero--full { min-height: max(480px, calc(100vh - 150px)); }
}
.cc2-hero--full .cc2-hero__copy { max-width: none; }
.cc2-hero__badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
border-radius: 999px; padding: 5px 14px; margin-bottom: 16px;
color: var(--cc2-gold); font-size: 13px; letter-spacing: 2px;
}
.cc2-hero__badge em { font-style: normal; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.cc2-hero--full .cc2-hero__title { font-size: 56px; margin-bottom: 10px; }
.cc2-hero--full .cc2-hero__sub { font-size: 17px; margin-bottom: 18px; max-width: 30em; }
.cc2-hero__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cc2-hero__points li { color: #D1D5DB; font-size: 14px; padding-left: 24px; position: relative; }
.cc2-hero__points li::before {
content: "\2713"; position: absolute; left: 0; top: 0;
color: var(--cc2-green); font-weight: 700;
}
.cc2-hero--full .cc2-finder { max-width: none; }
.cc2-finder__title small { font-family: var(--cc2-font-body); font-weight: 400; font-size: 12px; color: var(--cc2-text-3); text-transform: none; }
.cc2-finder__trustrow {
display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px;
margin-top: 12px; padding-top: 12px; border-top: 1px solid #F3F4F6;
font-size: 11px; color: var(--cc2-text-3); font-weight: 600;
}
.cc2-strip--herofoot { position: relative; background: rgba(232,56,13,.92); }
.cc2-strip--herofoot .cc2-strip__inner { padding: 10px 16px; font-size: 13px; }
@media (max-width: 767px) {
.cc2-hero--full .cc2-hero__inner--grid { grid-template-columns: 1fr; gap: 22px; padding: 26px 16px 30px; }
.cc2-hero--full .cc2-hero__title { font-size: 40px; }
.cc2-phone-block { display: none; }
.cc2-header .cc2-mid__inner { flex-wrap: wrap; }
}
/* ═══ v4 design revision (2026-08-15): figma-faithful homepage sections ═══ */
/* hero: natural height (v4 removed the forced full-viewport height) */
@media (min-width: 768px) {
.cc2-hero--full { min-height: 0; }
}
.cc2-strip--herofoot { background: var(--cc2-brand); }
/* 4 photo category cards */
.cc2-photocards {
list-style: none; margin: 0 0 22px; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.cc2-photocards li { margin: 0; }
.cc2-photocards a {
position: relative; display: block; border-radius: var(--cc2-radius-lg); overflow: hidden;
box-shadow: var(--cc2-shadow); aspect-ratio: 4 / 3; background: var(--cc2-navy);
transition: transform .2s ease, box-shadow .2s ease;
}
.cc2-photocards a:hover, .cc2-photocards a:focus-visible { transform: translateY(-4px); box-shadow: var(--cc2-shadow-lg); }
.cc2-photocards a:focus-visible { outline: 3px solid var(--cc2-gold); outline-offset: 2px; }
.cc2-photocards img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc2-photocards a::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(11,15,26,.92) 0%, rgba(11,15,26,.35) 45%, rgba(11,15,26,0) 70%);
}
.cc2-photocards__cap {
position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; text-align: left;
display: flex; flex-direction: column; gap: 1px;
}
.cc2-photocards__cap strong {
font-family: var(--cc2-font-display); font-weight: 700; font-size: 20px;
text-transform: uppercase; color: #fff; line-height: 1.05;
}
.cc2-photocards__cap em { font-style: normal; font-size: 12px; color: #C7CBD4; }
/* secondary compact row for the remaining 9 vehicle types */
.cc2-types__grid--compact { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.cc2-types__grid--compact a { padding: 12px 8px 10px; gap: 6px; }
.cc2-types__grid--compact .cc2-types__icon svg { width: 44px; height: 24px; }
.cc2-types__grid--compact .cc2-types__label { font-size: 13px; }
/* hide the four types already shown as photo cards */
.cc2-types__grid--compact a[href*="car-covers"],
.cc2-types__grid--compact a[href*="golf-cart"],
.cc2-types__grid--compact a[href$="/motorcycle"],
.cc2-types__grid--compact a[href*="suv-covers"] { display: none; }
.cc2-types__grid--compact li:has(> a[href*="car-covers"]),
.cc2-types__grid--compact li:has(> a[href*="golf-cart"]),
.cc2-types__grid--compact li:has(> a[href$="/motorcycle"]),
.cc2-types__grid--compact li:has(> a[href*="suv-covers"]) { display: none; }
/* badge cards with icons */
.cc2-badge-card__i { font-size: 28px; line-height: 1; }
/* why-us: icon list + floating badges on the photo */
.cc2-why__list li { display: flex; flex-direction: row; gap: 12px; border-left: 0; padding-left: 0; align-items: flex-start; }
.cc2-why__icon { font-size: 22px; flex: 0 0 34px; text-align: center; margin-top: 1px; }
.cc2-why__body { display: flex; flex-direction: column; gap: 2px; }
.cc2-why__media { position: relative; }
.cc2-why__float {
position: absolute; display: flex; flex-direction: column; line-height: 1.15;
border-radius: var(--cc2-radius); padding: 12px 16px; box-shadow: var(--cc2-shadow-lg);
font-size: 12px; font-weight: 600;
}
.cc2-why__float strong { font-family: var(--cc2-font-display); font-weight: 800; font-size: 24px; text-transform: uppercase; }
.cc2-why__float--tr { top: -14px; right: -10px; background: var(--cc2-navy); color: #fff; }
.cc2-why__float--bl { bottom: -14px; left: -10px; background: var(--cc2-brand); color: #fff; }
@media (max-width: 767px) {
.cc2-why__float--tr { top: -10px; right: 4px; }
.cc2-why__float--bl { bottom: -10px; left: 4px; }
}
/* testimonials: star row + verified-style marker to match the design */
.cc2-tcard::before {
content: "\2605\2605\2605\2605\2605";
display: block; color: var(--cc2-gold); letter-spacing: 3px; font-size: 14px; margin-bottom: 10px;
}
/* ═══ header search bar — figma style (rounded field, right icon button) ═══ */
.cc2-header .cc2-mid__search .sm-searchbox { margin: 0; padding: 0; }
.cc2-header .cc2-mid__search .pre-text,
.cc2-header .cc2-mid__search .post-text,
.cc2-header .cc2-mid__search .sm-searchbox-popular,
.cc2-header .cc2-mid__search .sm-searchbox-advanced { display: none; }
.cc2-header .cc2-mid__search .form.minisearch {
display: flex; align-items: stretch;
border: 1px solid #D1D5DB; border-radius: 10px; overflow: hidden; background: #fff;
transition: box-shadow .15s ease, border-color .15s ease;
}
.cc2-header .cc2-mid__search .form.minisearch:focus-within {
border-color: transparent; box-shadow: 0 0 0 2px var(--cc2-brand);
}
.cc2-header .cc2-mid__search .field.searchbox { flex: 1 1 auto; margin: 0; }
.cc2-header .cc2-mid__search .control { border: 0; margin: 0; padding: 0; }
.cc2-header .cc2-mid__search .input-box { position: relative; }
.cc2-header .cc2-mid__search input.input-searchbox {
width: 100%; border: 0; background: #fff; box-shadow: none;
height: 40px; padding: 0 14px; font-size: 14px; color: var(--cc2-text-2);
font-family: var(--cc2-font-body);
}
.cc2-header .cc2-mid__search input.input-searchbox:focus { outline: none; box-shadow: none; }
.cc2-header .cc2-mid__search input.input-searchbox::placeholder { color: var(--cc2-text-3); }
.cc2-header .cc2-mid__search .actions { margin: 0; }
.cc2-header .cc2-mid__search .btn-searchbox {
height: 40px; width: 46px; border: 0; border-left: 1px solid #D1D5DB;
background: var(--cc2-bg); color: var(--cc2-text-3); cursor: pointer;
border-radius: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
transition: background-color .15s ease, color .15s ease;
}
.cc2-header .cc2-mid__search .btn-searchbox:hover,
.cc2-header .cc2-mid__search .btn-searchbox:focus-visible {
background: var(--cc2-brand); color: #fff; border-color: var(--cc2-brand);
}
.cc2-header .cc2-mid__search .btn-searchbox::before {
content: ""; width: 17px; height: 17px; display: block; background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.cc2-header .cc2-mid__search .btn-searchbox span,
.cc2-header .cc2-mid__search .btn-searchbox i { display: none; }
.cc2-header .cc2-mid__search .search-autocomplete { top: 42px; }
/* ═══ v5 design revision (2026-08-15): results cards with left image panel ═══ */
.cc2-edition--v5 .cc2-edition__grid {
grid-template-columns: 240px 1fr 200px 170px;
gap: 0 22px; padding: 0 22px 0 0; align-items: stretch;
}
.cc2-edition__photo {
position: relative; display: block; background: #F3F4F6; overflow: hidden;
min-height: 170px;
}
.cc2-edition__photo img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block; max-width: none;
}
.cc2-edition__photobadge { position: absolute; top: 10px; left: 10px; box-shadow: 0 2px 8px rgba(11,15,26,.25); }
.cc2-edition--v5 .cc2-edition__id { padding: 18px 0; }
.cc2-edition--v5 .cc2-edition__protection { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cc2-edition--v5 .cc2-edition__protection .cc2-pbar__label { flex-basis: 62px; }
.cc2-edition--v5 .cc2-edition__specs { padding: 18px 0; align-self: center; }
.cc2-edition--v5 .cc2-edition__buy { padding: 18px 0; align-self: center; }
.cc2-edition--v5 .cc2-edition__reviews .product-reviews-summary { margin: 4px 0 0; }
@media (max-width: 1023px) {
.cc2-edition--v5 .cc2-edition__grid { grid-template-columns: 200px 1fr; padding: 0 16px 0 0; }
.cc2-edition--v5 .cc2-edition__specs { display: none; }
.cc2-edition--v5 .cc2-edition__buy { grid-column: 1 / -1; padding: 0 16px 16px; }
}
@media (max-width: 767px) {
.cc2-edition--v5 .cc2-edition__grid { grid-template-columns: 1fr; gap: 0; padding: 0; }
.cc2-edition__photo { min-height: 150px; aspect-ratio: 21 / 9; }
.cc2-edition--v5 .cc2-edition__id { padding: 14px 16px; text-align: left; }
.cc2-edition--v5 .cc2-edition__buy { padding: 0 16px 16px; }
}
/* ═══ results page: centered title block + bottom badges (figma) ═══ */
.catalogsearch-result-index .page-title-wrapper { text-align: center; padding-top: 26px; }
.catalogsearch-result-index .page-title-wrapper .page-title {
font-family: var(--cc2-font-display); font-weight: 800; text-transform: none;
color: var(--cc2-navy); font-size: 44px; line-height: 1.05; margin-bottom: 2px;
}
.cc2-results-sub {
text-align: center; color: var(--cc2-text-3); font-family: var(--cc2-font-body);
font-size: 17px; margin: 0 0 22px;
}
.cc2-badges--results { margin: 0 0 30px; }
@media (max-width: 767px) {
.catalogsearch-result-index .page-title-wrapper .page-title { font-size: 32px; }
}
/* ═══ results page hardening: beat legacy !important CSS, figma top area ═══ */
/* hide the legacy SALE banner row above the finder */
.catalogsearch-result-index [data-content-type="row"][data-background-images*="ads-all"] { display: none !important; }
/* restyle the legacy red "Start Here" finder block into the design system */
.catalogsearch-result-index .search-temp-form { background: none !important; padding: 0 !important; }
.catalogsearch-result-index .search-temp-form .smas-wrap,
.catalogsearch-result-index .smas-wrap {
background: #fff !important; border: 1px solid var(--cc2-line) !important;
border-radius: var(--cc2-radius-lg) !important; box-shadow: var(--cc2-shadow) !important;
padding: 16px 18px !important; margin: 18px auto 6px !important; max-width: 1100px;
}
.catalogsearch-result-index .smas-caption {
display: block !important; background: none !important; color: var(--cc2-navy) !important;
font-family: var(--cc2-font-display) !important; font-weight: 700 !important;
font-size: 20px !important; text-transform: uppercase; text-align: left !important;
padding: 0 0 10px !important; margin: 0 !important;
}
.catalogsearch-result-index .smas-caption * { color: var(--cc2-navy) !important; font-size: inherit !important; }
.catalogsearch-result-index .smas-form-wrap .smas-form { display: flex !important; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.catalogsearch-result-index .smas-group-left { display: flex !important; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; float: none !important; width: auto !important; padding: 0 !important; }
.catalogsearch-result-index .smas-attr { flex: 1 1 160px; float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.catalogsearch-result-index .smas-attr-inner .chosen-container { width: 100% !important; }
.catalogsearch-result-index .chosen-container-single .chosen-single {
height: 42px !important; line-height: 40px !important; border: 1px solid #D1D5DB !important;
border-radius: 10px !important; background: #fff !important; box-shadow: none !important;
padding: 0 12px !important; font-size: 14px !important; color: var(--cc2-text) !important;
}
.catalogsearch-result-index .smas-group-right { float: none !important; width: auto !important; padding: 0 !important; flex: 0 0 auto; }
.catalogsearch-result-index .smas-btn .btn-search {
background: var(--cc2-brand) !important; color: #fff !important; border: 0 !important;
border-radius: var(--cc2-radius) !important; font-family: var(--cc2-font-display) !important;
font-weight: 700 !important; font-size: 17px !important; text-transform: uppercase;
padding: 11px 22px !important; height: 42px; cursor: pointer;
}
.catalogsearch-result-index .smas-btn .btn-search:hover:not([disabled]) { background: var(--cc2-brand-dark) !important; }
.catalogsearch-result-index .smas-btn .btn-search[disabled] { background: #D1D5DB !important; }
/* protection bars: defend against legacy span/width rules */
.catalogsearch-result-index .cc2-pbar { display: flex !important; align-items: center !important; gap: 8px !important; }
.catalogsearch-result-index .cc2-pbar__track {
display: block !important; flex: 1 1 auto !important; height: 8px !important;
border-radius: 999px !important; background: var(--cc2-line) !important;
overflow: hidden !important; position: relative !important;
}
.catalogsearch-result-index .cc2-pbar__fill {
display: block !important; height: 8px !important; border-radius: 999px !important;
background: var(--cc2-accent, var(--cc2-brand)) !important;
position: absolute !important; left: 0 !important; top: 0 !important;
}
.catalogsearch-result-index .cc2-pbar__label { flex: 0 0 62px !important; width: auto !important; }
.catalogsearch-result-index .cc2-pbar__val { flex: 0 0 14px !important; }
/* buttons: defend against legacy .action/anchor overrides */
.catalogsearch-result-index a.cc2-btn.cc2-edition__cta {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 100% !important; background: var(--cc2-navy) !important; color: #fff !important;
border: 0 !important; border-radius: var(--cc2-radius) !important;
font-family: var(--cc2-font-display) !important; font-weight: 700 !important;
font-size: 16px !important; text-transform: uppercase !important; text-decoration: none !important;
padding: 12px 16px !important; line-height: 1 !important;
}
.catalogsearch-result-index a.cc2-btn.cc2-edition__cta:hover { background: var(--cc2-navy-hover) !important; }
.catalogsearch-result-index button.cc2-btn.cc2-edition__cart {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 100% !important; background: var(--cc2-brand) !important; color: #fff !important;
border: 0 !important; border-radius: var(--cc2-radius) !important;
font-family: var(--cc2-font-display) !important; font-weight: 700 !important;
font-size: 16px !important; text-transform: uppercase !important;
padding: 12px 16px !important; line-height: 1 !important;
}
.catalogsearch-result-index button.cc2-btn.cc2-edition__cart:hover { background: var(--cc2-brand-dark) !important; }
.catalogsearch-result-index .cc2-edition__buy { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; text-align: center; }
.catalogsearch-result-index .cc2-edition__price .price-box .price {
font-family: var(--cc2-font-display) !important; font-weight: 800 !important;
font-size: 30px !important; color: var(--cc2-brand) !important;
}
/* photo panel: neutralize nested catalog image wrappers (car fallback images) */
.cc2-edition__photo .product-image-container,
.cc2-edition__photo .product-image-wrapper {
position: absolute !important; inset: 0 !important; display: block !important;
width: 100% !important; height: 100% !important; padding: 0 !important;
}
.cc2-edition__photo .product-image-wrapper img,
.cc2-edition__photo img.product-image-photo {
position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
object-fit: cover !important; max-width: none !important; margin: 0 !important;
}
/* ═══ demo-data preview: urgency strips + sample star rows (staging eval) ═══ */
.cc2-urgency {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
margin: 0 0 16px; font-family: var(--cc2-font-body);
}
.cc2-urgency__item {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 600; border-radius: 10px; padding: 8px 16px;
}
.cc2-urgency__item--amber { background: var(--cc2-amber-light); border: 1px solid #FDE68A; color: #B45309; }
.cc2-urgency__item--green { background: var(--cc2-green-light); border: 1px solid #BBF7D0; color: #15803D; }
.cc2-demostars { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.cc2-demostars__row {
position: relative; display: inline-block; width: 82px; height: 15px;
-webkit-mask: url('data:image/svg+xml;utf8,') repeat-x left center / 16.4px 15px;
mask: url('data:image/svg+xml;utf8,') repeat-x left center / 16.4px 15px;
background: #D1D5DB;
}
.cc2-demostars__row::after {
content: ""; position: absolute; inset: 0;
width: var(--cc2-starfill, 100%); background: var(--cc2-gold);
}
.cc2-demostars__count { font-size: 12px; color: var(--cc2-text-3); }
/* ═══ header hardening + breadcrumb + topstrip (match figma header) ═══ */
/* topbar trust strip content */
.cc2-topstrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; }
.cc2-topstrip span { font-weight: 600; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; }
.cc2-topstrip__sep { opacity: .4; }
/* vehicle nav MUST be navy — legacy CSS keeps trying to whiten it */
.cc2-header .header-bottom.cc2-header-bottom {
background: var(--cc2-navy) !important; border: 0 !important; box-shadow: none !important;
}
.cc2-header .cc2-vnav a.cc2-vnav__item { color: #9CA3AF !important; background: transparent; }
.cc2-header .cc2-vnav a.cc2-vnav__item:hover,
.cc2-header .cc2-vnav a.cc2-vnav__item:focus-visible { background: var(--cc2-brand) !important; color: #fff !important; }
.cc2-header .cc2-vnav__menu > .cc2-vnav__menu-btn { color: #fff !important; background: transparent !important; }
/* cart button: keep the "Cart (N)" label visible like the design */
.cc2-header .minicart-wrapper .action.showcart {
background: var(--cc2-brand) !important; border-radius: 10px !important; padding: 10px 16px !important;
}
.cc2-header .minicart-wrapper .action.showcart .text {
position: static !important; width: auto !important; height: auto !important;
margin: 0 4px 0 2px !important; clip: auto !important; overflow: visible !important;
color: #fff; font-size: 14px; font-weight: 600;
}
.cc2-header .minicart-wrapper .action.showcart .counter.qty {
background: transparent !important; color: #fff !important; margin: 0 !important;
min-width: 0 !important; padding: 0 !important; height: auto !important; line-height: inherit !important;
}
.cc2-header .minicart-wrapper .action.showcart .counter.qty::before { content: "("; }
.cc2-header .minicart-wrapper .action.showcart .counter.qty::after { content: ")"; }
.cc2-header .minicart-wrapper .action.showcart .counter-label { display: none; }
/* login/account: strip legacy box styling */
.cc2-header .header-account .drop-account {
background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
.cc2-header .header-account .drop-account ul.header.links { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cc2-header .header-account .drop-account li { margin: 0; padding: 0; }
.cc2-header .header-account .drop-account li.greet.welcome { display: none; }
/* results breadcrumb strip */
.cc2-crumbs {
max-width: 1280px; margin: 0 auto 4px; padding: 14px 0 10px;
font-family: var(--cc2-font-body); font-size: 14px; color: var(--cc2-text-3);
display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--cc2-line);
margin-bottom: 20px;
}
.cc2-crumbs a { color: var(--cc2-text-2); text-decoration: none; }
.cc2-crumbs a:hover { color: var(--cc2-brand); text-decoration: underline; }
.cc2-crumbs__here { color: var(--cc2-text); font-weight: 500; }
/* legacy youlogix-carcover.css hides the results page title — bring it back */
body.catalogsearch-result-index .page-title-wrapper { display: block !important; text-align: center; padding-top: 8px; }
body.catalogsearch-result-index .page-title-wrapper .page-title {
font-family: var(--cc2-font-display) !important; font-weight: 800 !important;
color: var(--cc2-navy) !important; font-size: 44px !important; line-height: 1.05 !important;
margin: 0 0 2px !important; text-transform: none !important;
}
/* ═══ v6 PDP (2026-08-15) ═══ */
/* eyebrow + title */
.catalog-product-view .page-title-wrapper { padding-top: 0; }
.catalog-product-view .page-title-wrapper::before {
content: "COVERSCENTER.COM"; display: block;
font-family: var(--cc2-font-body); font-size: 11px; font-weight: 700;
letter-spacing: .14em; color: var(--cc2-brand); margin-bottom: 2px;
}
.catalog-product-view .page-title-wrapper .page-title { font-size: 40px !important; text-transform: uppercase !important; }
/* price box card */
.catalog-product-view .product-info-price {
background: var(--cc2-bg); border: 1px solid var(--cc2-line); border-radius: var(--cc2-radius-lg);
padding: 16px 18px; margin-bottom: 14px;
}
.catalog-product-view .product-info-price .price-box .price { font-size: 34px !important; }
.catalog-product-view .product-info-price .old-price .price { font-size: 18px !important; color: var(--cc2-text-3) !important; }
.cc2-savebadge {
display: inline-block; background: #DCFCE7; color: #15803D; font-weight: 700;
font-size: 13px; border-radius: 8px; padding: 4px 10px; margin-left: 8px; vertical-align: middle;
font-family: var(--cc2-font-body);
}
.cc2-delivery { margin-top: 8px; }
.cc2-delivery__line { color: #15803D; font-weight: 600; font-size: 14px; font-family: var(--cc2-font-body); }
.catalog-product-view .order-timer { display: none !important; }
/* urgency + pills */
.cc2-pdp-mid { margin: 12px 0; font-family: var(--cc2-font-body); }
.cc2-pdp-urgency { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.cc2-pdp-urgency__line { font-size: 14px; color: var(--cc2-text-2); display: flex; align-items: center; gap: 7px; }
.cc2-pdp-urgency__line--green { color: #15803D; }
.cc2-pulse { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; display: inline-block; animation: cc2pulse 1.6s infinite; }
@keyframes cc2pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cc2-pulse { animation: none; } }
.cc2-pdp-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.cc2-pdp-pill {
font-size: 12px; font-weight: 600; color: var(--cc2-text-2);
background: #F3F4F6; border: 1px solid var(--cc2-line); border-radius: 999px; padding: 5px 12px;
}
/* qty + add to cart + buy now */
.catalog-product-view .box-tocart .action.tocart {
width: 100%; font-size: 19px !important; padding: 14px 20px !important; border-radius: var(--cc2-radius) !important;
}
.cc2-buybox { margin: 10px 0 18px; font-family: var(--cc2-font-body); }
.cc2-buynow {
width: 100%; background: #fff; color: var(--cc2-navy); border: 2px solid var(--cc2-navy);
border-radius: var(--cc2-radius); font-family: var(--cc2-font-display); font-weight: 700;
font-size: 18px; text-transform: uppercase; padding: 13px 18px; cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.cc2-buynow:hover { background: var(--cc2-navy); color: #fff; }
.cc2-payrow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.cc2-payrow__label { font-size: 11px; color: var(--cc2-text-3); }
.cc2-payrow__m { font-size: 11px; font-weight: 600; color: var(--cc2-text-2); background: #F3F4F6; border-radius: 5px; padding: 3px 7px; }
.cc2-trustgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cc2-trustgrid__item {
display: flex; gap: 10px; align-items: flex-start;
background: var(--cc2-bg); border: 1px solid var(--cc2-line); border-radius: var(--cc2-radius); padding: 11px 12px;
}
.cc2-trustgrid__item > span { font-size: 22px; line-height: 1; }
.cc2-trustgrid__item strong { display: block; font-size: 13px; color: var(--cc2-text); line-height: 1.25; }
.cc2-trustgrid__item em { font-style: normal; font-size: 11.5px; color: var(--cc2-text-3); line-height: 1.35; }
/* gallery mini trust cards */
.cc2-gallery-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; font-family: var(--cc2-font-body); }
.cc2-gallery-trust__card {
border: 1px solid var(--cc2-line); border-radius: var(--cc2-radius); padding: 12px 8px;
display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.cc2-gallery-trust__card > span { font-size: 22px; }
.cc2-gallery-trust__card strong { font-size: 12px; color: var(--cc2-text); }
.cc2-gallery-trust__card em { font-style: normal; font-size: 11px; color: var(--cc2-text-3); }
/* detailed area + side panel: two columns via float */
.catalog-product-view .product.info.detailed { width: calc(100% - 352px); float: left; }
.cc2-pdp-side { width: 320px; float: right; display: flex; flex-direction: column; gap: 16px; font-family: var(--cc2-font-body); }
.cc2-pdp-sections-clear, .cc2-whycc { clear: both; }
.cc2-guarantee { background: var(--cc2-navy); color: #fff; border-radius: var(--cc2-radius-lg); padding: 24px 20px; text-align: center; }
.cc2-guarantee__icon { font-size: 42px; display: block; margin-bottom: 8px; }
.cc2-guarantee__pre { font-family: var(--cc2-font-display); font-weight: 800; font-size: 20px; display: block; }
.cc2-guarantee__title { font-family: var(--cc2-font-display); font-weight: 800; font-size: 26px; color: var(--cc2-brand); line-height: 1.1; display: block; }
.cc2-guarantee p { color: #9CA3AF; font-size: 13px; margin: 10px 0 0; line-height: 1.55; }
.cc2-promises { border: 1px solid var(--cc2-line); border-radius: var(--cc2-radius-lg); overflow: hidden; }
.cc2-promises__row { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid #F3F4F6; }
.cc2-promises__row:last-child { border-bottom: 0; }
.cc2-promises__row > span { font-size: 22px; }
.cc2-promises__row strong { display: block; font-size: 13px; color: var(--cc2-text); }
.cc2-promises__row em { font-style: normal; font-size: 11.5px; color: var(--cc2-text-3); }
.cc2-starcall { background: var(--cc2-amber-light); border: 1px solid #FDE68A; border-radius: var(--cc2-radius-lg); padding: 14px; display: flex; gap: 14px; align-items: center; }
.cc2-starcall__score { text-align: center; }
.cc2-starcall__score strong { font-family: var(--cc2-font-display); font-weight: 800; font-size: 34px; color: var(--cc2-text); display: block; }
.cc2-starcall__body strong { font-size: 13px; color: var(--cc2-text); }
.cc2-starcall__body p { font-size: 12px; color: var(--cc2-text-2); margin: 4px 0 0; line-height: 1.45; }
/* why-choose-us navy section */
.cc2-whycc { background: var(--cc2-navy); border-radius: var(--cc2-radius-lg); overflow: hidden; margin: 30px 0; font-family: var(--cc2-font-body); }
.cc2-whycc__head { text-align: center; padding: 30px 24px 22px; }
.cc2-whycc__eyebrow { display: inline-block; background: var(--cc2-brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; }
.cc2-whycc__head h2 { font-family: var(--cc2-font-display); font-weight: 800; font-size: 38px; color: #fff; text-transform: uppercase; line-height: 1.05; margin: 0; }
.cc2-whycc__head h2 span { color: var(--cc2-brand); }
.cc2-whycc__head p { color: #9CA3AF; font-size: 15px; max-width: 560px; margin: 12px auto 0; line-height: 1.6; }
.cc2-whycc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--cc2-card-border); }
.cc2-whycc__tile { background: var(--cc2-card); padding: 20px; display: flex; gap: 13px; align-items: flex-start; }
.cc2-whycc__tile > span { font-size: 26px; }
.cc2-whycc__tile strong { display: block; font-family: var(--cc2-font-display); font-weight: 700; font-size: 17px; color: #fff; margin-bottom: 3px; }
.cc2-whycc__tile em { font-style: normal; font-size: 13px; color: #9CA3AF; line-height: 1.5; }
.cc2-whycc__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; }
.cc2-whycc__foot strong { display: block; font-family: var(--cc2-font-display); font-size: 20px; color: #fff; }
.cc2-whycc__foot em { font-style: normal; font-size: 13px; color: #9CA3AF; }
/* PDP reviews (demo) */
.cc2-pdp-reviews { margin: 30px 0; font-family: var(--cc2-font-body); }
.cc2-pdp-reviews h2.cc2-h { font-size: 32px; margin-bottom: 18px; }
.cc2-pdp-reviews__grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.cc2-pdp-reviews__summary { background: var(--cc2-bg); border: 1px solid var(--cc2-line); border-radius: var(--cc2-radius-lg); padding: 20px; text-align: center; }
.cc2-pdp-reviews__score { font-family: var(--cc2-font-display); font-weight: 800; font-size: 52px; color: var(--cc2-navy); display: block; }
.cc2-pdp-reviews__summary em { font-style: normal; font-size: 13px; color: var(--cc2-text-3); display: block; margin: 4px 0 12px; }
.cc2-histo { display: flex; flex-direction: column; gap: 6px; }
.cc2-histo__row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cc2-text-3); }
.cc2-histo__track { flex: 1; height: 8px; background: var(--cc2-line); border-radius: 999px; overflow: hidden; }
.cc2-histo__track > span { display: block; height: 8px; background: var(--cc2-gold); border-radius: 999px; }
.cc2-rev { border-bottom: 1px solid #F3F4F6; padding: 14px 0; }
.cc2-rev__head { display: flex; gap: 11px; align-items: center; margin-bottom: 7px; }
.cc2-rev__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cc2-brand); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cc2-rev__head strong { display: block; font-size: 14px; color: var(--cc2-text); }
.cc2-rev__head em { font-style: normal; font-size: 12px; color: var(--cc2-text-3); }
.cc2-rev__verified { margin-left: auto; font-size: 11px; font-weight: 600; color: #15803D; background: var(--cc2-green-light); border: 1px solid #BBF7D0; border-radius: 6px; padding: 3px 8px; }
.cc2-rev p { font-size: 14px; color: var(--cc2-text-2); line-height: 1.6; margin: 7px 0 0; }
/* bottom band */
.cc2-pdp-alsoband {
background: var(--cc2-navy); color: #fff; border-radius: var(--cc2-radius-lg);
padding: 22px 26px; margin: 0 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
font-family: var(--cc2-font-body);
}
.cc2-pdp-alsoband h3 { font-family: var(--cc2-font-display); font-weight: 700; font-size: 24px; text-transform: uppercase; color: #fff; margin: 0 0 4px; }
.cc2-pdp-alsoband p { color: #9CA3AF; font-size: 14px; margin: 0; }
.cc-edc-sub { color: var(--cc2-text-3); font-size: 14px; margin: 2px 0 8px; }
@media (max-width: 1023px) {
.catalog-product-view .product.info.detailed { width: 100%; float: none; }
.cc2-pdp-side { width: 100%; float: none; }
.cc2-pdp-reviews__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
.cc2-trustgrid { grid-template-columns: 1fr; }
.cc2-whycc__head h2 { font-size: 30px; }
}
/* ═══ v6 PDP layout corrections ═══ */
/* what's-included panels: full-width section between buy area and details */
.catalog-product-view .cc2-pdp-panels { clear: both; margin: 34px 0 26px; }
/* comparison: full-width section, table keeps its natural width and scrolls */
.catalog-product-view .cc-edc { clear: both; margin: 30px 0; }
.catalog-product-view .cc-edc-table { min-width: 940px; }
.catalog-product-view .cc-edc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* details tabs + side panel float pair */
.catalog-product-view .product.info.detailed { margin-top: 6px; }
.cc2-whycc { clear: both; }
/* ═══ v6 PDP polish round 2 ═══ */
/* exact buy-column ordering via flex (independent of block render order) */
.catalog-product-view .product-info-main { display: flex; flex-direction: column; }
.catalog-product-view .product-info-main > * { order: 50; }
.catalog-product-view .product-info-main > .page-title-wrapper { order: 1; }
.catalog-product-view .product-info-main > .cc2-fitment { order: 2; }
.catalog-product-view .product-info-main > .cc2-pdp-stars { order: 3; }
.catalog-product-view .product-info-main > .product-info-price { order: 4; }
.catalog-product-view .product-info-main > .cc2-pdp-mid { order: 5; }
.catalog-product-view .product-info-main > .product-add-form { order: 6; }
.catalog-product-view .product-info-main > .cc2-buybox { order: 7; }
/* stars row under title */
.cc2-pdp-stars { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-family: var(--cc2-font-body); }
.cc2-pdp-stars strong { font-size: 15px; color: var(--cc2-text); }
.cc2-pdp-stars__sep { color: var(--cc2-line); }
.cc2-pdp-stars a { color: var(--cc2-brand); font-size: 14px; font-weight: 500; text-decoration: underline; }
/* price line: inline special + struck regular + save chip, no labels */
.catalog-product-view .product-info-price .price-label { display: none !important; }
.catalog-product-view .main-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.catalog-product-view .main-price .special-price .price { font-family: var(--cc2-font-display) !important; font-weight: 800 !important; font-size: 34px !important; color: var(--cc2-brand) !important; }
.catalog-product-view .main-price .old-price { text-decoration: none; }
.catalog-product-view .main-price .old-price .price { font-size: 18px !important; color: var(--cc2-text-3) !important; text-decoration: line-through; font-weight: 400 !important; }
.catalog-product-view .main-price .save-prc { display: none !important; }
/* protection bars + buttons: same hardening as results page, scoped to PDP */
.catalog-product-view .cc2-pbar { display: flex !important; align-items: center !important; gap: 8px !important; }
.catalog-product-view .cc2-pbar__track {
display: block !important; flex: 1 1 auto !important; height: 8px !important;
border-radius: 999px !important; background: var(--cc2-line) !important;
overflow: hidden !important; position: relative !important;
}
.catalog-product-view .cc2-pbar__fill {
display: block !important; height: 8px !important; border-radius: 999px !important;
background: var(--cc2-brand) !important;
position: absolute !important; left: 0 !important; top: 0 !important;
}
.catalog-product-view .cc2-pbar__label { flex: 0 0 70px !important; width: auto !important; }
/* comparison table: figma-style compact headers + sticky label col */
.catalog-product-view .cc-edc-table { min-width: 860px; }
.catalog-product-view .cc-edc-head .cc-edc-edname { font-family: var(--cc2-font-display); font-weight: 700; font-size: 17px; display: block; }
.catalog-product-view .cc-edc-head .cc-edc-tag { font-size: 11px; color: var(--cc2-text-3); display: block; margin-top: 2px; }
.catalog-product-view .cc-edc-pricerow--top .cc-edc-sale { font-family: var(--cc2-font-display); font-weight: 800; font-size: 20px; color: var(--cc2-brand); display: block; }
.catalog-product-view .cc-edc-pricerow--top .cc-edc-reg { font-size: 12px; color: var(--cc2-text-3); text-decoration: line-through; display: block; }
.cc-edc-cta-btn--cart {
background: var(--cc2-brand) !important; color: #fff !important; border: 0 !important;
border-radius: 8px !important; font-family: var(--cc2-font-display) !important; font-weight: 700 !important;
font-size: 13px !important; text-transform: uppercase; padding: 9px 14px !important; cursor: pointer; width: 100%;
}
.cc-edc-cta-btn--cart:hover { background: var(--cc2-brand-dark) !important; }
.cc-edc-cartform { margin: 0; }
/* GPay / express wallet button: keep below Buy Now, full width, tidy */
.catalog-product-view .product-info-main [class*="wallet"],
.catalog-product-view .product-info-main .gpay-button { margin-top: 8px !important; }
/* ═══ v6 PDP polish round 3: price card, qty stepper, wallet button ═══ */
/* price card: only price row + delivery line (SKU + empty-review link hidden) */
.catalog-product-view .product-info-price .product.attribute.sku,
.catalog-product-view .product-info-price .product-reviews-summary,
.catalog-product-view .product-info-price .reviews-actions,
.catalog-product-view .product-info-main .product-info-stock-sku,
.catalog-product-view .product-info-main .stock.available,
.catalog-product-view .product-info-main .view-count { display: none !important; }
.catalog-product-view .product-info-price { display: block !important; }
.catalog-product-view .product-info-price .price-box { float: none !important; width: auto !important; }
.catalog-product-view .main-price { display: inline-flex !important; align-items: center !important; gap: 12px; flex-wrap: nowrap; }
.cc2-savebadge { white-space: nowrap; }
.catalog-product-view .cc2-delivery {
display: block; border: 0 !important; background: none !important;
margin: 8px 0 0 !important; padding: 0 !important; float: none !important; width: auto !important; text-align: left;
}
.catalog-product-view .price-time { border: 0 !important; background: none !important; padding: 0 !important; margin: 8px 0 0 !important; float: none !important; width: auto !important; }
/* qty stepper */
.cc2-qty {
display: inline-flex; align-items: stretch; border: 2px solid #D1D5DB; border-radius: var(--cc2-radius);
overflow: hidden; background: #fff; height: 52px;
}
.cc2-qty .cc2-qty__btn {
width: 44px; border: 0; background: #fff; color: var(--cc2-text-2);
font-size: 20px; font-weight: 700; cursor: pointer; line-height: 1;
}
.cc2-qty .cc2-qty__btn:hover { background: #F3F4F6; }
.cc2-qty input#qty {
width: 48px !important; border: 0 !important; text-align: center; font-weight: 700; font-size: 16px;
height: 100% !important; margin: 0 !important; box-shadow: none !important;
-moz-appearance: textfield; appearance: textfield;
}
.cc2-qty input#qty::-webkit-outer-spin-button, .cc2-qty input#qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.catalog-product-view .box-tocart .field.qty .label { display: none; }
.catalog-product-view .box-tocart .fieldset { display: flex !important; align-items: stretch; gap: 12px !important; flex-wrap: wrap; }
.catalog-product-view .box-tocart .field.qty { margin: 0 !important; padding: 0 !important; flex: 0 0 auto; }
.catalog-product-view .box-tocart .actions { flex: 1 1 auto; margin: 0 !important; padding: 0 !important; }
.catalog-product-view .box-tocart .action.tocart { height: 52px; }
/* Stripe Express (G Pay / Apple Pay) wallet: quiet full-width row below the cart row */
.catalog-product-view .box-tocart .fieldset > *:has(#payment-request-button),
.catalog-product-view #payment-request-button {
flex: 1 1 100%; order: 99; max-width: 320px;
}
.catalog-product-view #payment-request-button {
background: none !important; border: 1px solid var(--cc2-line) !important; border-radius: var(--cc2-radius) !important;
padding: 4px !important; margin: 2px 0 0 !important;
}
/* price row fine-tune: bigger price, tighter chip, delivery on its own line */
.catalog-product-view .main-price { display: flex !important; width: 100%; gap: 14px; }
.catalog-product-view .main-price .special-price .price { font-size: 46px !important; line-height: 1 !important; }
.catalog-product-view .main-price .old-price { margin: 0 !important; }
.catalog-product-view .main-price .old-price .price { font-size: 22px !important; }
.catalog-product-view .main-price .special-price { margin: 0 !important; }
.cc2-savebadge { margin-left: 0 !important; align-self: center; font-size: 15px; padding: 6px 12px; }
.catalog-product-view .product-info-price { overflow: hidden; }
.catalog-product-view .price-time, .catalog-product-view .cc2-delivery { display: block !important; clear: both !important; width: 100% !important; }
.catalog-product-view .cc2-delivery__line { font-size: 15px; }
/* buy-now: figma style — white, black 2px border, dark condensed text (beat legacy button skins) */
.catalog-product-view button.cc2-buynow,
.catalog-product-view button.cc2-buynow:active,
.catalog-product-view button.cc2-buynow:focus {
background: #fff !important; color: #0B0F1A !important;
border: 2px solid #0B0F1A !important; border-radius: var(--cc2-radius) !important;
font-family: var(--cc2-font-display) !important; font-weight: 700 !important;
font-size: 20px !important; text-transform: uppercase !important; letter-spacing: .02em;
padding: 14px 18px !important; width: 100% !important; box-shadow: none !important;
}
.catalog-product-view button.cc2-buynow:hover { background: #0B0F1A !important; color: #fff !important; }
/* price: lighter weight; free-shipping strictly on its own row below the price */
.catalog-product-view .price-box,
.catalog-product-view .product-info-price .price-final_price { display: block !important; float: none !important; width: 100% !important; }
.catalog-product-view .main-price .special-price .price { font-weight: 700 !important; }
.catalog-product-view .main-price .old-price .price { font-weight: 400 !important; }
.catalog-product-view .product-info-price .price-time { display: block !important; clear: both !important; width: 100% !important; margin-top: 10px !important; float: none !important; }
.catalog-product-view .cc2-delivery__line { white-space: nowrap; }
/* buy-now: kill legacy fixed height/line-height that pushed the label out of the box */
.catalog-product-view button.cc2-buynow {
display: flex !important; align-items: center !important; justify-content: center !important;
height: auto !important; min-height: 54px; line-height: 1 !important;
margin: 0 0 4px !important; overflow: visible;
}
.catalog-product-view button.cc2-buynow span { line-height: 1 !important; }
/* review form relocated to page bottom: card styling */
.catalog-product-view .column.main > .review-add,
.catalog-product-view .column.main > #reviews,
.catalog-product-view .column.main > [data-role="content"]#reviews {
clear: both; background: #fff; border: 1px solid var(--cc2-line); border-radius: var(--cc2-radius-lg);
padding: 26px; margin: 0 0 30px; max-width: 760px;
}
.catalog-product-view .column.main > #reviews .block-title strong,
.catalog-product-view .column.main > #reviews .review-title {
font-family: var(--cc2-font-display); font-weight: 800; text-transform: uppercase;
font-size: 26px; color: var(--cc2-navy);
}
/* buy column: hide the stock reviews summary/link everywhere (demo stars replace it) */
.catalog-product-view .product-info-main .product-reviews-summary,
.catalog-product-view .product-info-main .reviews-actions { display: none !important; }
/* ═══ results cards: figma price stack (red price / grey struck / green save) ═══ */
.catalogsearch-result-index .cc2-edition__price .main-price {
display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important;
}
.catalogsearch-result-index .cc2-edition__price .special-price .price {
font-family: var(--cc2-font-display) !important; font-weight: 700 !important;
font-size: 32px !important; color: var(--cc2-brand) !important; line-height: 1.05 !important;
}
.catalogsearch-result-index .cc2-edition__price .old-price { margin: 0 !important; text-decoration: none !important; }
.catalogsearch-result-index .cc2-edition__price .old-price .price {
font-family: var(--cc2-font-body) !important; font-weight: 400 !important;
font-size: 15px !important; color: var(--cc2-text-3) !important; text-decoration: line-through !important;
}
.catalogsearch-result-index .cc2-edition__price .cc2-savebadge {
background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
color: var(--cc2-green) !important; font-size: 13px !important; font-weight: 700 !important;
font-family: var(--cc2-font-body) !important; white-space: nowrap;
}
.catalogsearch-result-index .cc2-edition__price .cc2-savebadge__amt { text-transform: none; }
.catalogsearch-result-index .cc2-edition__price .cc2-savebadge__pct { display: none !important; }
.catalogsearch-result-index .cc2-edition__price .save-prc { display: none !important; }
/* results buy column: right-aligned price stack per figma; PDP chip stays uppercase */
.catalog-product-view .cc2-savebadge { text-transform: uppercase; }
.catalogsearch-result-index .cc2-edition__buy { text-align: right; }
.catalogsearch-result-index .cc2-edition__price .main-price { align-items: flex-end !important; }
.catalogsearch-result-index .cc2-edition__stock { text-align: right; font-size: 13px !important; }
.catalogsearch-result-index .cc2-edition__ship { text-align: center; }
@media (max-width: 767px) {
.catalogsearch-result-index .cc2-edition__buy { text-align: center; }
.catalogsearch-result-index .cc2-edition__price .main-price { align-items: center !important; }
.catalogsearch-result-index .cc2-edition__stock { text-align: center; }
}
/* results price stack: force right alignment at the text level (flex children are full-width) */
.catalogsearch-result-index .cc2-edition__price,
.catalogsearch-result-index .cc2-edition__price .main-price,
.catalogsearch-result-index .cc2-edition__price .main-price > *,
.catalogsearch-result-index .cc2-edition__price .price-box,
.catalogsearch-result-index .cc2-edition__price .special-price,
.catalogsearch-result-index .cc2-edition__price .old-price { text-align: right !important; width: 100% !important; display: block !important; }
.catalogsearch-result-index .cc2-edition__price .cc2-savebadge { display: block !important; text-align: right !important; }
@media (max-width: 767px) {
.catalogsearch-result-index .cc2-edition__price,
.catalogsearch-result-index .cc2-edition__price .main-price > *,
.catalogsearch-result-index .cc2-edition__price .cc2-savebadge { text-align: center !important; }
}
/* best-for line under the tagline */
.cc2-edition__bestfor {
font-size: 13px; font-weight: 600; color: var(--cc2-text-2);
margin: 0 0 8px; display: flex; align-items: center; gap: 7px;
font-family: var(--cc2-font-body);
}
/* results price: kill legacy floats/inline widths inside the price stack */
.catalogsearch-result-index .cc2-edition__price * { float: none !important; }
.catalogsearch-result-index .cc2-edition__price .price-container,
.catalogsearch-result-index .cc2-edition__price .price-wrapper,
.catalogsearch-result-index .cc2-edition__price .price {
display: inline !important; width: auto !important; text-align: right !important; margin: 0 !important;
}
/* results price stack: breathing room between the lines */
.catalogsearch-result-index .cc2-edition__price .main-price { gap: 6px !important; }
.catalogsearch-result-index .cc2-edition__price .special-price { margin-bottom: 2px !important; }
.catalogsearch-result-index .cc2-edition__price .special-price .price { line-height: 1.1 !important; }
.catalogsearch-result-index .cc2-edition__price .old-price { margin-bottom: 2px !important; }
.catalogsearch-result-index .cc2-edition__price .old-price .price { line-height: 1.4 !important; }
.catalogsearch-result-index .cc2-edition__price .cc2-savebadge { line-height: 1.4 !important; margin-top: 2px !important; }
.catalogsearch-result-index .cc2-edition__stock { margin: 10px 0 !important; }
/* ═══ results photo panel: natural-flow images (immune to container-height collapse) ═══ */
.catalogsearch-result-index .cc2-edition__photo {
display: block !important; position: relative !important; align-self: center !important;
min-height: 0 !important; padding: 16px 0 16px 16px; overflow: visible !important;
}
.catalogsearch-result-index .cc2-edition__photo img,
.catalogsearch-result-index .cc2-edition__photo img.product-image-photo,
.catalogsearch-result-index .cc2-edition__photo .product-image-wrapper img {
position: static !important; inset: auto !important;
width: 100% !important; height: auto !important; max-width: 100% !important;
object-fit: contain !important; display: block !important;
margin: 0 !important; border-radius: 10px;
}
.catalogsearch-result-index .cc2-edition__photo .product-image-container,
.catalogsearch-result-index .cc2-edition__photo .product-image-wrapper {
position: static !important; inset: auto !important; display: block !important;
width: 100% !important; height: auto !important; padding: 0 !important;
}
.catalogsearch-result-index .cc2-edition__photobadge { position: absolute; top: 24px; left: 24px; }
@media (max-width: 767px) {
.catalogsearch-result-index .cc2-edition__photo { aspect-ratio: auto; padding: 14px 14px 0; }
}
/* ═══ header cart button: compact "My Cart (N)" — no subtotal spill ═══ */
.cc2-header .minicart-wrapper .action.showcart {
display: inline-flex !important; align-items: center !important; gap: 6px !important;
white-space: nowrap !important; height: 44px !important; padding: 0 16px !important;
max-width: none !important; line-height: 1 !important;
}
.cc2-header .minicart-wrapper .action.showcart .counter.qty {
display: inline-flex !important; align-items: center !important; white-space: nowrap !important;
font-size: 14px !important; font-weight: 600 !important;
}
.cc2-header .minicart-wrapper .action.showcart .counter.qty.empty { display: none !important; }
.cc2-header .minicart-wrapper .action.showcart .counter-number { position: static !important; }
/* anything price-ish inside the button stays in the dropdown, not the button */
.cc2-header .minicart-wrapper .action.showcart .counter-label,
.cc2-header .minicart-wrapper .action.showcart .cart-subtotal,
.cc2-header .minicart-wrapper .action.showcart .subtotal,
.cc2-header .minicart-wrapper .action.showcart .price-container,
.cc2-header .minicart-wrapper .action.showcart .price { display: none !important; }