/** Shopify CDN: Minification failed
Line 30:14 Expected identifier but found "#e10600"
Line 30:21 Unexpected ";"
Line 756:63 Expected identifier but found whitespace
**/
/* ============================================================================
Turn4Diesel theme styles (t4d.css)
Brand: racing green var(--t4d-brand), black text, white surfaces.
DESIGN RULE: no overlay/modal/popup styles exist in this file on purpose.
Every interaction (notices, confirms, dropdowns) is inline in the page flow.
========================================================================
:root{ /* Turn4Diesel theme color variables. */
html{
--t4d-brand:#e10600;
--t4d-brand-deep:#a80400;
--t4d-brand-ink:#3b1d1d;
--t4d-accent:#e10600;
--t4d-accent-deep:#a80400;
--t4d-tint:#fdf1f0; --t4d-secondary:#007738; --t4d-secondary-bright:#16a34a; --t4d-secondary-deep:#005c2b;
--t4d-tint-2:#eef7f0;
--t4d-tint-3:#e6f4ec;
--t4d-tint-4:#f4f8f5;
--t4d-tint-5:#dfe9e2;
--t4d-line:#cfd8d2;
--t4d-muted:#9fb3a8;
}
--t4d-brand:#e10600;
--t4d-brand-deep:#a80400;
--t4d-brand-ink:#3b1d1d;
--t4d-accent:#e10600;
--t4d-accent-deep:#a80400;
--t4d-tint:#fdf1f0; --t4d-secondary:#007738; --t4d-secondary-bright:#16a34a; --t4d-secondary-deep:#005c2b;
--t4d-tint-2:#eef7f0;
--t4d-tint-3:#e6f4ec;
--t4d-tint-4:#f4f8f5;
--t4d-tint-5:#dfe9e2;
--t4d-line:#cfd8d2;
--t4d-muted:#9fb3a8;
}
.t4d { color: #111; }
.t4d-wrap { max-width: 960px; margin: 0 auto; padding: 8px 0 32px; }
.t4d-h2 { font-size: 1.6rem; margin: 0 0 8px; }
.t4d-sub { color: #444; margin: 0 0 20px; }
.t4d-muted { color: #666; font-size: 0.92rem; }
/* ---------- inline notices ---------- */
.t4d-notice {
border: 1px solid #ddd;
border-left: 4px solid #999;
background: #fafafa;
padding: 12px 14px;
margin: 0 0 16px;
border-radius: 6px;
font-size: 0.95rem;
line-height: 1.45;
}
.t4d-notice--success { border-left-color: var(--t4d-brand); background: var(--t4d-tint); }
.t4d-notice--error { border-left-color: #c0392b; background: #fdf3f2; }
.t4d-notice--warn { border-left-color: #d98e00; background: #fff9ec; }
.t4d-notice--info { border-left-color: var(--t4d-brand); background: var(--t4d-tint-4); }
.t4d-notice a { color: var(--t4d-brand); font-weight: 600; }
.t4d-notice .t4d-btn { margin-top: 8px; }
/* ---------- forms ---------- */
.t4d-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.t4d-field { display: flex; flex-direction: column; gap: 6px; }
.t4d-field label { font-weight: 600; font-size: 0.9rem; }
.t4d-optional { font-weight: 400; color: #666; }
.t4d-field select,
.t4d-field input[type="text"],
.t4d-textinput {
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
background: #fff;
width: 100%;
}
.t4d-field select:disabled,
.t4d-field input:disabled { background: #f2f2f2; color: #888; }
/* ---------- buttons ---------- */
.t4d-btn {
display: inline-block;
background: var(--t4d-brand);
color: #fff;
border: 1px solid var(--t4d-brand);
border-radius: 6px;
padding: 11px 20px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.t4d-btn:hover { background: var(--t4d-brand-deep); border-color: var(--t4d-brand-deep); color: #fff; }
.t4d-btn:disabled { opacity: 0.55; cursor: wait; }
.t4d-btn--secondary { background: #fff; color: var(--t4d-brand); }
.t4d-btn--secondary:hover { background: var(--t4d-tint); color: var(--t4d-brand-deep); }
.t4d-btn--danger { background: #fff; color: #c0392b; border-color: #c0392b; }
.t4d-btn--danger:hover { background: #fdf3f2; color: #a93226; }
.t4d-btn--small { padding: 7px 12px; font-size: 0.88rem; }
.t4d-link {
background: none; border: none; padding: 0;
color: var(--t4d-brand); font-weight: 600; cursor: pointer; font-size: 0.95rem;
text-decoration: underline;
}
/* ---------- current truck summary ---------- */
.t4d-current {
border: 1px solid var(--t4d-brand);
background: var(--t4d-tint);
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 18px;
}
.t4d-current a { color: var(--t4d-brand); font-weight: 600; }
/* ---------- builds manager ---------- */
.t4d-newbuild { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.t4d-newbuild .t4d-textinput { flex: 1 1 240px; }
.t4d-build-card {
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 16px 18px;
margin-bottom: 18px;
background: #fff;
}
.t4d-build-card__head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px;
}
.t4d-build-card__name { font-size: 1.2rem; margin: 0; }
.t4d-build-card__nameinput { font-size: 1.1rem; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; }
.t4d-build-card__meta { color: #666; font-size: 0.85rem; margin-left: auto; }
.t4d-item {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 0;
border-top: 1px solid #f0f0f0;
}
.t4d-item__img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: #f4f4f4; }
.t4d-item__title { font-weight: 600; font-size: 0.95rem; }
.t4d-item__variant { color: #666; font-size: 0.85rem; }
.t4d-item__unavail { color: #c0392b; font-size: 0.85rem; font-weight: 600; }
.t4d-item__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.t4d-qty { display: inline-flex; align-items: center; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
.t4d-qty button { background: #f7f7f7; border: none; padding: 6px 10px; cursor: pointer; font-size: 1rem; }
.t4d-qty button:hover { background: #eee; }
.t4d-qty span { min-width: 30px; text-align: center; font-weight: 600; }
.t4d-item__line { font-weight: 600; min-width: 76px; text-align: right; }
.t4d-build-card__foot { margin-top: 12px; border-top: 1px solid #f0f0f0; padding-top: 12px; }
.t4d-totals { margin: 0 0 12px; max-width: 380px; }
.t4d-totals__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.95rem; }
.t4d-totals__row--total { border-top: 1px solid #ddd; margin-top: 6px; padding-top: 8px; font-size: 1.05rem; }
.t4d-totals__helper { font-size: 0.82rem; color: #666; margin: 2px 0 6px; }
.t4d-build-card__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.t4d-confirm {
margin-top: 10px; padding: 10px 12px;
background: #fdf3f2; border: 1px solid #e8b4ae; border-radius: 6px;
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.t4d-empty { color: #666; padding: 18px 0; }
/* ---------- kit builder steps ---------- */
.t4d-steps {
list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 22px;
flex-wrap: wrap; counter-reset: step;
}
.t4d-steps li {
flex: 1 1 100px; text-align: center; font-size: 0.85rem; font-weight: 600;
padding: 10px 6px; border-radius: 6px; background: #f2f2f2; color: #777;
border: 1px solid #e4e4e4;
}
.t4d-steps li.is-active { background: var(--t4d-brand); border-color: var(--t4d-brand); color: #fff; }
.t4d-steps li.is-done { background: var(--t4d-tint-3); border-color: var(--t4d-brand); color: var(--t4d-brand); }
.t4d-stepnav { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.t4d-servicecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.t4d-servicecard {
border: 2px solid #e0e0e0; border-radius: 8px; padding: 14px;
cursor: pointer; font-weight: 600; text-align: center; background: #fff;
}
.t4d-servicecard:hover { border-color: var(--t4d-brand); }
.t4d-servicecard.is-selected { border-color: var(--t4d-brand); background: var(--t4d-tint); }
.t4d-slot { border: 1px solid #e6e6e6; border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.t4d-slot__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.t4d-slot__label { font-weight: 700; }
.t4d-slot__qty { color: #666; font-size: 0.88rem; }
.t4d-pick {
display: flex; gap: 10px; align-items: center;
border: 1px solid #eee; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px;
cursor: pointer;
}
.t4d-pick:hover { border-color: var(--t4d-brand); }
.t4d-pick.is-selected { border-color: var(--t4d-brand); background: var(--t4d-tint); }
.t4d-pick img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: #f4f4f4; }
.t4d-pick__info { flex: 1; }
.t4d-pick__title { font-weight: 600; font-size: 0.92rem; }
.t4d-pick__price { color: var(--t4d-brand); font-weight: 700; white-space: nowrap; }
.t4d-pick select { max-width: 220px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; }
.t4d-review { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.t4d-review th, .t4d-review td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eee; font-size: 0.93rem; }
.t4d-review th { color: #555; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.t4d-kitname { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; align-items: center; }
.t4d-kitname .t4d-textinput { flex: 1 1 220px; }
.t4d-plan { display: flex; gap: 10px; align-items: center; border: 1px solid #eee; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.t4d-plan:hover { border-color: var(--t4d-brand); }
.t4d-plan.is-selected { border-color: var(--t4d-brand); background: var(--t4d-tint); }
/* ---------- add to build (product page) ---------- */
.t4d-addtobuild { margin: 12px 0; }
.t4d-addtobuild__details { border: 1px solid #ddd; border-radius: 8px; }
.t4d-addtobuild__toggle {
cursor: pointer; padding: 12px 14px; font-weight: 700; list-style: none;
display: flex; justify-content: space-between; align-items: center;
}
.t4d-addtobuild__toggle::-webkit-details-marker { display: none; }
.t4d-addtobuild__details[open] .t4d-addtobuild__toggle::after { content: "–"; }
.t4d-addtobuild__panel { padding: 0 14px 14px; border-top: 1px solid #eee; }
.t4d-addtobuild__opt {
display: block; width: 100%; text-align: left;
background: #fff; border: 1px solid #eee; border-radius: 6px;
padding: 9px 12px; margin: 8px 0 0; cursor: pointer; font-size: 0.95rem;
}
.t4d-addtobuild__opt:hover { border-color: var(--t4d-brand); background: var(--t4d-tint); }
.t4d-addtobuild__new { display: flex; gap: 8px; margin-top: 10px; }
.t4d-addtobuild__new[hidden] { display: none !important; }
.t4d-addtobuild__new .t4d-textinput { flex: 1; }
/* ---------- header badge ---------- */
.t4d-builds-badge {
display: inline-flex; align-items: center; gap: 6px;
color: inherit; text-decoration: none; font-weight: 600; font-size: 0.95rem;
padding: 8px 10px; border-radius: 6px;
}
.t4d-builds-badge:hover { background: rgba(225, 6, 0, 0.08); }
.t4d-builds-badge__count {
background: var(--t4d-brand); color: #fff; border-radius: 999px;
min-width: 22px; height: 22px; line-height: 22px; text-align: center;
font-size: 0.78rem; padding: 0 6px;
}
@media (max-width: 640px) {
.t4d-item { grid-template-columns: 52px 1fr; }
.t4d-item__actions { grid-column: 1 / -1; justify-content: flex-start; }
.t4d-item__img { width: 52px; height: 52px; }
}
/* ---------- Garage form ---------- */
.t4d-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
@media(max-width:760px){.t4d-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.t4d-field{display:flex;flex-direction:column;gap:6px}
.t4d-field label{font-weight:600;font-size:14px}
.t4d-field select{padding:10px;border:1px solid #cfcfcf;border-radius:10px;font-size:15px;background:#fff}
.t4d-field--inline{margin:4px 0 8px;max-width:420px}
.t4d-optional{color:#777;font-weight:400;font-size:13px}
.t4d-current{border:1px solid var(--t4d-brand);background:var(--t4d-tint-2);border-radius:10px;padding:12px 14px;margin:14px 0;font-size:15px}
/* ---------- Login prompt ---------- */
.t4d-loginprompt{border:1px dashed #9aa3a8;border-radius:12px;padding:26px;text-align:center;margin:24px 0;background:#fafafa}
.t4d-loginprompt p{margin:0 0 14px}
/* ---------- Builds manager ---------- */
.t4d-build-card{border:1px solid #e1e3e6;border-radius:14px;padding:18px;margin:0 0 20px;background:#fff}
.t4d-build-card__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.t4d-build-card__name{margin:0;font-size:20px}
.t4d-build-card__meta{color:#666;font-size:13px;margin-left:auto}
.t4d-build-card__nameinput{font-size:20px;font-weight:700;padding:6px 10px;border:1px solid var(--t4d-brand);border-radius:8px}
.t4d-build-card__foot{border-top:1px solid #eee;padding-top:14px;margin-top:6px}
.t4d-build-card__btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.t4d-totals{display:flex;flex-direction:column;gap:4px;margin:6px 0 10px;max-width:340px}
.t4d-totals__row{display:flex;justify-content:space-between;font-size:15px}
.t4d-totals__row.is-grand{font-weight:700;font-size:17px;border-top:1px solid #ddd;padding-top:6px}
.t4d-totals__note{font-size:13px;color:#666}
/* ---------- Item rows ---------- */
.t4d-item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #f0f0f0}
.t4d-item__img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:#f4f4f4;border:1px solid #eee}
div.t4d-item__img{background:#f4f4f4}
.t4d-item__title{font-size:15px}
.t4d-item__variant{font-size:13px;color:#666}
.t4d-item__unavail{font-size:13px;color:#b3261e;margin-top:4px}
.t4d-item__actions{display:flex;align-items:center;gap:12px}
.t4d-item__line{font-weight:700;min-width:72px;text-align:right}
.t4d-qty{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfcfcf;border-radius:999px;padding:4px 10px}
.t4d-qty button{border:0;background:#f0f0f0;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1}
.t4d-qty button:hover{background:#e2e2e2}
.t4d-qty span{min-width:20px;text-align:center;font-weight:700}
/* ---------- Inline confirm ---------- */
.t4d-confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ---------- Kit stepper ---------- */
.t4d-steps{list-style:none;display:flex;gap:0;margin:20px 0 26px;padding:0;border:1px solid #e1e3e6;border-radius:12px;overflow:hidden}
.t4d-steps li{flex:1;padding:12px 8px;text-align:center;font-size:14px;color:#666;background:#f7f7f7;border-right:1px solid #e1e3e6}
.t4d-steps li:last-child{border-right:0}
.t4d-steps li span{display:inline-block;width:24px;height:24px;line-height:24px;border-radius:50%;background:#ccc;color:#fff;font-size:13px;margin-right:6px}
.t4d-steps li.is-active{background:#fff;color:#111;font-weight:700}
.t4d-steps li.is-active span{background:var(--t4d-brand)}
.t4d-steps li.is-done span{background:#555}
.t4d-stepnav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
/* ---------- Service cards ---------- */
.t4d-servicecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:16px 0}
.t4d-servicecard{border:2px solid #e1e3e6;border-radius:12px;background:#fff;padding:18px;font-size:16px;font-weight:600;cursor:pointer;text-align:left}
.t4d-servicecard:hover{border-color:var(--t4d-brand)}
.t4d-servicecard.is-selected{border-color:var(--t4d-brand);background:var(--t4d-tint-2)}
/* ---------- Slot picks ---------- */
.t4d-slot{border:1px solid #e1e3e6;border-radius:12px;padding:16px;margin:0 0 14px}
.t4d-slot__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.t4d-slot__label{font-weight:700;font-size:17px}
.t4d-slot__qty{font-size:13px;color:#666}
.t4d-slot__picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.t4d-pick{display:flex;gap:10px;align-items:center;border:2px solid #e6e6e6;border-radius:10px;padding:10px;cursor:pointer;background:#fff}
.t4d-pick img{width:52px;height:52px;object-fit:cover;border-radius:8px;background:#f4f4f4}
.t4d-pick__info{flex:1;display:flex;flex-direction:column;gap:6px}
.t4d-pick__title{font-size:14px;font-weight:600}
.t4d-pick__info select{font-size:13px;padding:6px;border:1px solid #cfcfcf;border-radius:8px;max-width:100%}
.t4d-pick__price{font-weight:700;font-size:15px;white-space:nowrap}
.t4d-pick.is-selected{border-color:var(--t4d-brand);background:var(--t4d-tint-2)}
.t4d-pick input[type="radio"]{accent-color:var(--t4d-brand)}
/* ---------- Review table ---------- */
.t4d-review{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.t4d-review th,.t4d-review td{text-align:left;padding:10px 8px;border-bottom:1px solid #eee;vertical-align:top}
.t4d-review thead th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#666}
@media(max-width:640px){.t4d-review thead{display:none}.t4d-review tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:10px}.t4d-review td{display:block;border:0;padding:4px 10px}}
.t4d-kitname{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}
.t4d-kitname .t4d-textinput{flex:1;min-width:220px}
/* ---------- Subscription plans ---------- */
.t4d-plan{display:flex;gap:10px;align-items:center;border:2px solid #e6e6e6;border-radius:10px;padding:14px;cursor:pointer;margin:0 0 10px;background:#fff}
.t4d-plan input{accent-color:var(--t4d-brand)}
.t4d-plan.is-selected{border-color:var(--t4d-brand);background:var(--t4d-tint-2)}
/* ---------- (retired product-page block) ---------- */
.t4d-addtobuild{margin:12px 0}
.t4d-addtobuild__details{border:1px solid #e1e3e6;border-radius:10px;background:#fff;color:var(--t4d-text)}
.t4d-addtobuild__toggle{padding:12px 14px;cursor:pointer;font-weight:700;list-style:none}
.t4d-addtobuild__toggle::-webkit-details-marker{display:none}
.t4d-addtobuild__toggle::after{content:'▾';float:right}
.t4d-addtobuild__panel{border-top:1px solid #eee;padding:12px 14px}
.t4d-addtobuild__opt{display:block;width:100%;text-align:left;border:1px solid #e6e6e6;background:#fff;border-radius:8px;padding:10px;margin:0 0 8px;cursor:pointer;font-size:14px}
.t4d-addtobuild__opt:hover{border-color:var(--t4d-brand);background:var(--t4d-tint-2)}
.t4d-addtobuild__new{display:flex;gap:8px;margin-top:10px}
.t4d-addtobuild__new .t4d-textinput{flex:1}
/* ---------- Builds badge (header) ---------- */
.t4d-builds-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:600;color:#111}
.t4d-builds-badge__count{background:var(--t4d-brand);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px}
/* ==== t4d-polish.css 2026-09-13 ==== */
/* ============================================================================
Turn4Diesel polish styles (t4d-polish.css) — 2026-09-13
Additive only. Brand green var(--t4d-brand). No overlay/modal/popup styles.
Load after t4d.css.
============================================================================ */
/* ---------- trust badge strip ---------- */
.t4d-trustbar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
max-width: 1200px;
margin: 0 auto;
padding: 18px 16px;
}
.t4d-trustbar__item {
display: flex; gap: 10px; align-items: flex-start;
background: var(--t4d-tint-4); border: 1px solid var(--t4d-tint-5); border-radius: 8px;
padding: 12px 14px;
}
.t4d-trustbar__icon { font-size: 1.4rem; line-height: 1.2; }
.t4d-trustbar__item strong { display: block; font-size: 0.95rem; color: #111; }
.t4d-trustbar__item span span { font-size: 0.85rem; color: #555; }
/* ---------- shop by engine ---------- */
.t4d-engine-section { max-width: 1200px; margin: 0 auto; padding: 32px 16px; }
.t4d-engine-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px; margin-top: 16px;
}
.t4d-engine-card {
display: flex; flex-direction: column; gap: 4px;
background: #111; color: #fff; border-radius: 10px;
padding: 22px 18px; text-decoration: none;
border: 2px solid #111; transition: border-color .15s ease;
}
.t4d-engine-card:hover { border-color: var(--t4d-brand); color: #fff; }
.t4d-engine-card__engine { font-size: 1.25rem; font-weight: 700; }
.t4d-engine-card__truck { font-size: 0.95rem; color: var(--t4d-line); }
.t4d-engine-card__meta { font-size: 0.85rem; color: var(--t4d-muted); margin-top: 6px; }
.t4d-engine-card--all { background: var(--t4d-brand); border-color: var(--t4d-brand); }
.t4d-engine-card--all:hover { border-color: var(--t4d-brand-deep); }
/* ---------- product-page fitment nudge ---------- */
.t4d-fitment-nudge {
display: flex; gap: 10px; align-items: flex-start;
border: 1px solid var(--t4d-tint-5); border-left: 4px solid var(--t4d-brand);
background: var(--t4d-tint-4); border-radius: 6px;
padding: 12px 14px; margin: 14px 0; font-size: 0.92rem;
color: var(--t4d-text);
}
.t4d-fitment-nudge p { margin: 0; line-height: 1.45; }
.t4d-fitment-nudge a { color: var(--t4d-brand); font-weight: 600; }
/* ---------- product description: verified fitment + specs ---------- */
.t4d-fitment-block {
border: 1px solid var(--t4d-tint-5); border-left: 4px solid var(--t4d-brand);
background: var(--t4d-tint-4); border-radius: 6px;
padding: 14px 16px; margin: 0 0 18px;
}
.t4d-fitment-block h3 { margin: 0 0 8px; font-size: 1.05rem; }
.t4d-fitment-block ul { margin: 0 0 8px; padding-left: 20px; }
.t4d-fitment-block li { margin: 3px 0; }
.t4d-fitment-note { font-size: 0.9rem; color: #444; margin: 8px 0 0; }
.t4d-specs-block { margin: 18px 0 0; }
.t4d-specs-block h3 { font-size: 1.05rem; margin: 0 0 8px; }
.t4d-specs-block table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.t4d-specs-block th, .t4d-specs-block td {
text-align: left; padding: 7px 10px; border-bottom: 1px solid #e5e5e5;
}
.t4d-specs-block th { background: #f7f7f7; width: 42%; font-weight: 600; }
.t4d-xref { font-size: 0.88rem; color: #444; }
.t4d-bestfor {
font-size: 0.95rem; background: #fff8e6;
border: 1px solid #f0dfa8; border-radius: 6px;
padding: 10px 14px; margin: 0 0 18px;
}
/* ==== t4d-polish-home 2026-09-13 ==== */
.t4d-kit-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--t4d-brand-ink);color:#fff;border-radius:12px;padding:28px 32px;margin:8px 0}
.t4d-kit-cta h3{margin:0 0 6px;color:#fff;font-size:1.35rem}
.t4d-kit-cta p{margin:0;opacity:.85}
.t4d-kit-cta__btn{display:inline-block;background:#fff;color:var(--t4d-brand-ink);font-weight:700;padding:12px 28px;border-radius:8px;text-decoration:none;white-space:nowrap}
.t4d-kit-cta__btn:hover{opacity:.92}
.t4d-guides-teaser{text-align:center;padding:8px 16px}
.t4d-guides-teaser h3{margin:0 0 8px}
.t4d-guides-teaser p{margin:0;opacity:.75}
/* === T4D-REDESIGN 2026-09-13: unify Garage/Builds/Kit green with site green === */
.t4d-btn { background: var(--t4d-accent); border-color: var(--t4d-accent); }
.t4d-btn:hover { background: var(--t4d-accent-deep); border-color: var(--t4d-accent-deep); }
.t4d-btn--secondary { color: var(--t4d-secondary-bright); }
.t4d-btn--secondary:hover { color: var(--t4d-secondary-deep); }
.t4d-link { color: var(--t4d-accent); }
.t4d-notice--success { border-left-color: var(--t4d-accent); }
.t4d-notice--info { border-left-color: var(--t4d-accent); }
.t4d-notice a { color: var(--t4d-accent-deep); }
.t4d-current a { color: var(--t4d-accent-deep); }
.t4d-steps li.is-active { background: var(--t4d-accent); border-color: var(--t4d-accent); }
.t4d-steps li.is-active span { background: var(--t4d-accent); }
.t4d-steps li.is-done { border-color: var(--t4d-accent); color: var(--t4d-accent-deep); }
.t4d-servicecard:hover, .t4d-servicecard.is-selected { border-color: var(--t4d-accent); }
.t4d-pick:hover, .t4d-pick.is-selected { border-color: var(--t4d-accent); }
.t4d-pick__price { color: var(--t4d-accent-deep); }
.t4d-plan:hover, .t4d-plan.is-selected { border-color: var(--t4d-accent); }
.t4d-addtobuild__toggle::after { color: var(--t4d-accent); }
.t4d-addtobuild__opt:hover { border-color: var(--t4d-accent); }
.t4d-current { border-color: var(--t4d-accent); }
.t4d-build-card__nameinput { border-color: var(--t4d-accent); }
/* === T4D-REDESIGN 2026-09-13: mobile drawer rebuild === */
.menu-drawer, .menu-drawer-container, .menu-drawer__navigation { background: #0a0a0a !important; --color-background: #0a0a0a; }
.menu-drawer__backdrop { background: rgba(0, 0, 0, 0.72) !important; }
.menu-drawer__menu-item-text { font-family: 'Bebas Neue', sans-serif !important; font-weight: 700; font-size: 20px !important; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff !important; }
.menu-drawer__menu-item { border-bottom: 1px solid #27272a; }
.menu-drawer__menu-item:active .menu-drawer__menu-item-text, .menu-drawer__menu-item:hover .menu-drawer__menu-item-text { color: var(--t4d-accent) !important; }
.menu-drawer__close-button { color: #ffffff !important; }
.menu-drawer__utility-links a { color: #a1a1aa !important; font-size: 14px; }
/* === T4D-REDESIGN 2026-09-13: checkered-flag design language + big badge presence === */
.t4d-checker-strip { height: 14px; background: repeating-conic-gradient(#0a0a0a 0% 25%, #ffffff 0% 50%) 0 0 / 28px 28px; }
.t4d-checker-strip--sm { height: 10px; background-size: 20px 20px; }
.footer-wrapper, #shopify-section-footer, footer.footer { border-top: 14px solid transparent; border-image: repeating-conic-gradient(#0a0a0a 0% 25%, #ffffff 0% 50%) 0 0 / 28px 28px; border-image-slice: 14; border-image-width: 14px 0 0 0; }
.t4d-hero-logo img { width: min(720px, 92vw); height: auto; display: block; margin-inline: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.55)); }
.header__heading-logo { max-height: 72px; width: auto; }
@media (max-width: 749px) { .header__heading-logo { max-height: 64px; } .t4d-hero-logo img { width: min(480px, 94vw); } }
.t4d-sec-accent { width: 120px; height: 10px; margin-bottom: 12px; background: repeating-conic-gradient(#0a0a0a 0% 25%, #ffffff 0% 50%) 0 0 / 20px 20px; border: 1px solid #27272a; }
/* ==== Builds light polish 2026-09-17 (Devon: "doesn't look great" — spacing/alignment only) ==== */
.t4d-build-create { margin: 4px 0 22px; }
.t4d-build-card__head { row-gap: 6px; }
.t4d-build-card__head .t4d-build-card__truck { margin-top: 0; }
.t4d-build-card__ymm, .t4d-build-card__truck { white-space: nowrap; }
p.t4d-empty { border: 1px dashed #c9cdd2; border-radius: 10px; padding: 20px;
text-align: center; background: #fafbfc; color: #555; }
.t4d-scope { margin: 0 0 14px; }
/* Safety: products tagged race-only stay hidden on the storefront — the race line is
attorney-gated and sells off-site only. */
product-card[data-t4d-race-only], .t4d-addtobuild[data-t4d-race-only],
.t4d-item.t4d-race-only{ display:none; }
/* Service Kit live-catalog fit badges (v2026-09-19) */
.t4d-fitbadge{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:#1e7e34;color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em}
.t4d-fitbadge--universal{background:#3a6ea5}
/* Service Kit UX refinements (Devon 2026-09-19): green check on selected category + prominent green Continue */
.t4d-servicecard { position: relative; }
.t4d-servicecard.is-selected::after {
content: '\2713';
position: absolute; top: 10px; right: 12px;
width: 24px; height: 24px; border-radius: 50%;
background: var(--t4d-accent); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 700; line-height: 1;
}
.t4d-stepnav .t4d-btn[data-next] {
background: var(--t4d-accent); border-color: var(--t4d-accent); color: #fff;
font-size: 1.05rem; padding: 13px 28px;
}
.t4d-stepnav .t4d-btn[data-next]:hover:not(:disabled) { background: var(--t4d-accent-deep); border-color: var(--t4d-accent-deep); color: #fff; }
.t4d-stepnav .t4d-btn[data-next]:disabled { opacity: .65; }
/* T4D 2026-09-20: keep staged Street/Race toggle hidden until race go-live */
.t4d-mode-toggle[hidden]{display:none!important}
/* === T4D 2026-09-21: tire card size dropdown (one product per tire model) === */
.t4d-tire-size { display: block; margin: 8px 0 4px; }
.t4d-tire-size__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a1a1aa; margin-bottom: 4px; }
.t4d-tire-size__select { width: 100%; padding: 8px 10px; font-size: 14px; color: #fafafa; background: #18181b; border: 1px solid #3f3f46; border-radius: 8px; }
.t4d-tire-size__select:focus { outline: none; border-color: #e10600; }
.t4d-tire-bo { color: #fbbf24; font-size: 13px; margin: 4px 0; }
/* === T4D-REDESIGN 2026-09-13: unify Garage/Builds/Kit green with site green ===
Marker-guarded append for assets/t4d.css. Maps racing green #007738 to the
site diesel green #e10600 family. Additive only — delete this block to revert.
=== /T4D-REDESIGN === */
.t4d-btn { background: #e10600; border-color: #e10600; }
.t4d-btn:hover { background: #a80400; border-color: #a80400; }
.t4d-btn--secondary { background: #fff; border-color: #007738; color: #007738; }
.t4d-btn--secondary:hover { background: #f0f9f3; border-color: #005c2b; color: #005c2b; }
.t4d-link { color: #e10600; }
.t4d-notice--success { border-left-color: #e10600; }
.t4d-notice--info { border-left-color: #e10600; }
.t4d-notice a { color: #a80400; }
.t4d-current a { color: #a80400; }
.t4d-steps li.is-active { background: #e10600; border-color: #e10600; }
.t4d-steps li.is-active span { background: #e10600; }
.t4d-steps li.is-done { border-color: #e10600; color: #a80400; }
.t4d-servicecard:hover, .t4d-servicecard.is-selected { border-color: #e10600; }
.t4d-pick:hover, .t4d-pick.is-selected { border-color: #e10600; }
.t4d-pick__price { color: #a80400; }
.t4d-plan:hover, .t4d-plan.is-selected { border-color: #e10600; }
.t4d-addtobuild__toggle::after { color: #e10600; }
.t4d-addtobuild__opt:hover { border-color: #e10600; }
.t4d-current { border-color: #e10600; }
.t4d-build-card__nameinput { border-color: #e10600; }
/* === T4D-REDESIGN 2026-09-13: mobile drawer rebuild (staged — pushes with tap bundle)
Solid charcoal panel (no bleed-through), on-brand Oswald/green navigation.
=== /T4D-REDESIGN === */
.menu-drawer,
.menu-drawer-container,
.menu-drawer__navigation {
background: #0a0a0a !important;
--color-background: #0a0a0a;
}
.menu-drawer__backdrop {
background: rgba(0, 0, 0, 0.72) !important;
}
.menu-drawer__menu-item-text {
font-family: Oswald, sans-serif !important;
font-weight: 700;
font-size: 20px !important;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff !important;
}
.menu-drawer__menu-item {
border-bottom: 1px solid #27272a;
}
.menu-drawer__menu-item:active .menu-drawer__menu-item-text,
.menu-drawer__menu-item:hover .menu-drawer__menu-item-text {
color: #e10600 !important;
}
.menu-drawer__close-button {
color: #ffffff !important;
}
.menu-drawer__utility-links a {
color: #a1a1aa !important;
font-size: 14px;
}
/* === T4D-REDESIGN 2026-09-13: checkered-flag design language + big badge presence
(staged — pushes with tap bundle) === */
/* Checkered strip divider — drop between sections */
.t4d-checker-strip {
height: 14px;
background: repeating-conic-gradient(#0a0a0a 0% 25%, #ffffff 0% 50%) 0 0 / 28px 28px;
}
.t4d-checker-strip--sm {
height: 10px;
background-size: 20px 20px;
}
/* Checkered top edge on the footer */
.footer-wrapper, #shopify-section-footer, footer.footer {
border-top: 14px solid transparent;
border-image: repeating-conic-gradient(#0a0a0a 0% 25%, #ffffff 0% 50%) 0 0 / 28px 28px;
border-image-slice: 14;
border-image-width: 14px 0 0 0;
}
/* Big badge presence: hero logo + header logo sizing */
.t4d-hero-logo img {
width: min(720px, 92vw);
height: auto;
display: block;
margin-inline: auto;
filter: drop-shadow(0 10px 30px rgba(0,0,0,.55));
}
.header__heading-logo {
max-height: 72px;
width: auto;
}
@media (max-width: 749px) {
.header__heading-logo { max-height: 64px; }
.t4d-hero-logo img { width: min(480px, 94vw); }
}
/* Section-header checkered accent bar (use: above a heading) */
.t4d-sec-accent {
width: 120px;
height: 10px;
margin-bottom: 12px;
background: repeating-conic-gradient(#0a0a0a 0% 25%, #ffffff 0% 50%) 0 0 / 20px 20px;
border: 1px solid #27272a;
}
/* === T4D 2026-09-21: tire card size dropdown (one product per tire model) === */
.t4d-tire-size { display: block; margin: 8px 0 4px; }
.t4d-tire-size__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a1a1aa; margin-bottom: 4px; }
.t4d-tire-size__select { width: 100%; padding: 8px 10px; font-size: 14px; color: #fafafa; background: #18181b; border: 1px solid #3f3f46; border-radius: 8px; }
.t4d-tire-size__select:focus { outline: none; border-color: #e10600; }
.t4d-tire-bo { color: #fbbf24; font-size: 13px; margin: 4px 0; }
/* T4D tire set-of-4 pricing — 2026-09-21 */
.t4d-tire-setprice { margin: 10px 0 4px; }
.t4d-tire-setprice__set { font-size: 1.1rem; margin: 0 0 2px; }
.t4d-tire-setprice__set strong { font-weight: 700; }
.t4d-tire-setprice__compare { color: #8a8a8a; margin-left: 8px; font-size: 0.9em; }
.t4d-tire-setprice__freight { font-size: 0.9rem; margin: 0 0 2px; }
.t4d-tire-setprice__note { font-size: 0.8rem; color: #8a8a8a; margin: 0; max-width: 46ch; }
/* === T4D 2026-09-21: wheel set-of-4 pricing (mirrors tire set-price display) ===
Append to live assets/t4d.css — marker-guarded so it can be found/removed.
=== /T4D wheel set-of-4 === */
.t4d-wheel-setprice { margin: 10px 0 4px; }
.t4d-wheel-setprice__set { font-size: 1.1rem; margin: 0 0 2px; }
.t4d-wheel-setprice__set strong { font-weight: 700; }
.t4d-wheel-setprice__compare { color: #8a8a8a; margin-left: 8px; font-size: 0.9em; }
/* === T4D 2026-09-21: Select Tires button on wheel product pages ===
=== /T4D select-tires === */
.t4d-select-tires-btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
margin-top: 10px;
padding: 12px 16px;
border: 1px solid #e10600;
border-radius: 8px;
background: transparent;
color: #e10600;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
cursor: pointer;
}
.t4d-select-tires-btn:hover {
background: rgba(22, 163, 74, 0.12);
color: #4ade80;
text-decoration: none;
}
/* === T4D 2026-09-22: product-page dark-mode text overrides ===
var(--t4d-text) is never defined in this file, so in dark mode the rules that
used it inherited white-on-white. Hardcode #18181b; keep intended links green. */
.t4d-addtobuild__details,
.t4d-addtobuild__details .t4d-addtobuild__toggle,
.t4d-addtobuild__details .t4d-addtobuild__panel,
.t4d-addtobuild__details .t4d-addtobuild__panel :not(a) {
color: #18181b;
}
.t4d-fitment-nudge,
.t4d-fitment-nudge :not(a) {
color: #18181b;
}
.t4d-addtobuild__details a,
.t4d-fitment-nudge a {
color: #e10600;
}
/* T4D safety net (Devon 2026-09-22): never allow horizontal page overflow to
clip the mobile header logo or shift page content. `clip` (not hidden)
preserves position:sticky. */
html, body { overflow-x: clip; }
/* Turn4Diesel: compact header Builds badge on mobile so the logo stays clear */
@media (max-width: 749px) {
.t4d-builds-badge__label { display: none; }
.t4d-builds-badge { padding: 8px 6px; }
}
/* ---------- (retired button styles, Devon 2026-10-09) ---------- */
.t4d-addtobuild { margin: 12px 0; }
.t4d-addtobuild__details { border: none; border-radius: 10px; }
.t4d-addtobuild__toggle {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; box-sizing: border-box;
background: #c0c0c0; color: #fff;
font-weight: 800; font-size: 15px;
padding: 14px 20px; border-radius: 10px;
cursor: pointer; list-style: none; min-height: 52px;
transition: background .15s ease;
}
.t4d-addtobuild__toggle:hover { background: #a9a9a9; }
.t4d-addtobuild__toggle::-webkit-details-marker { display: none; }
.t4d-addtobuild__details[open] { border: 1px solid #333; background: #111; }
.t4d-addtobuild__details[open] .t4d-addtobuild__toggle { border-radius: 9px 9px 0 0; }
.t4d-addtobuild__details[open] .t4d-addtobuild__toggle::after { content: "\2013"; }
.t4d-addtobuild__panel { padding: 4px 14px 14px; border-top: 1px solid #2e2e32; }
/* ---------- Product page: green Add to cart (Devon 2026-10-09) ----------
Scoped to the product form so collection quick-add buttons are untouched. */
/* Devon 2026-10-09: Add to cart = green. Robust selector for theme-generated button. */
[data-t4d-addtobuild] {
display: flex !important;
}
/* Devon 2026-10-09: Wheel product page - Add to cart (big green) above PayPal */
div.product-form-buttons--stacked {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
div./* Add to Cart wrapper - direct targeting without :has() */
.product-form-buttons--stacked > span {
flex: 1 1 45% !important;
min-width: 160px !important;
order: 2 !important;
}
.product-form-buttons--stacked > span:has(.accelerated-checkout-block) {
flex: 1 1 100% !important;
order: 4 !important;
}
div.product-form-buttons--stacked [data-t4d-addtobuild] {
flex: 1 1 45% !important;
min-width: 160px !important;
order: 3 !important;
}
div.product-form-buttons--stacked .accelerated-checkout-block {
flex: 1 1 100% !important;
order: 4 !important;
}
/* Devon 2026-10-09: Product page buttons - FINAL */
.product-form-buttons--stacked .add-to-cart-button {
background-color: #e10600 !important;
background: #e10600 !important;
border-color: #e10600 !important;
color: #fff !important;
font-size: 1.4rem !important;
font-weight: 800 !important;
}
.product-form-buttons--stacked .add-to-cart-button:hover {
background-color: #e10600 !important;
background: #e10600 !important;
}
[data-t4d-addtobuild] .t4d-addtobuild__toggle {
background: #c0c0c0 !important;
border: 2px solid #a0a0a0 !important;
color: #e10600 !important;
font-size: 1.4rem !important;
font-weight: 800 !important;
padding: 20px 24px !important;
border-radius: 10px !important;
width: 100% !important;
}
[data-t4d-addtobuild] .t4d-addtobuild__toggle::after { content: none !important; }
/* Devon 2026-10-09: No PayPal/accelerated checkout on product pages — checkout page only */
.product-form-buttons--stacked .accelerated-checkout-block,
.product-form .accelerated-checkout-block,
shop-pay-wallet-button,
.google-pay-button,
.apple-pay-button {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* ===== Batch4 2026-10-19 ===== */
/* #1 start-build / garage selects: the page foreground is white, the select box is white -> set a dark text color explicitly */
.t4d-field select,
.t4d-field select option,
.t4d-field input[type="text"],
.t4d-textinput {
color: #111 !important;
-webkit-text-fill-color: #111;
background-color: #fff;
}
.t4d-field select:disabled,
.t4d-field input:disabled { color: #6b6b6b !important; -webkit-text-fill-color: #6b6b6b; background-color: #f2f2f2; }
.t4d-field select:invalid,
.t4d-field select option[value=""] { color: #555 !important; -webkit-text-fill-color: #555; }
/* #2 variant pills: with no option preselected every label got the white "selected" pill under white text.
Hide the pill until something is checked, and color the label text by its own checked state. */
.variant-option--buttons:not(:has(input:checked)) .variant-option__button-label__pill { opacity: 0 !important; }
.variant-option__button-label input:not(:checked) ~ .variant-option__button-label__text { color: var(--color-variant-text); position: relative; z-index: 3; }
.variant-option__button-label input:checked ~ .variant-option__button-label__text { color: var(--color-selected-variant-text); position: relative; z-index: 3; }
.variant-option__button-label:hover input:not(:checked) ~ .variant-option__button-label__text { color: var(--color-variant-hover-text); }
@supports not selector(:has(*)) {
.variant-option__button-label__pill { opacity: 0; }
.variant-option__button-label input:checked ~ .variant-option__button-label__pill { opacity: 1; transform: none; }
}
/* #4 PDP main image: never defer rendering of the first / visible slide (content-visibility:auto made it paint late) */
.product-information slideshow-slide:first-of-type,
.product-information slideshow-slide[aria-hidden="false"],
.product-information .product-media-container--tallest,
.product-information .product-media-container:first-child {
content-visibility: visible !important;
contain-intrinsic-size: none;
}
/* #6 the "Chat with us" pill (theme code, layout/theme.liquid) must never cover the cart drawer / its Check out button */
body:has(#cart-drawer[open]) .t4d-chat-fab,
body.t4d-cart-open .t4d-chat-fab { display: none !important; }
/* #9 home Featured Parts truck filter bar (assets/t4d-home-fit.js) */
.t4d-home-fitbar { margin: 0 0 14px; padding: 10px 14px; border: 1px solid #2e5c3d; border-radius: 8px; background: rgba(34,197,94,.08); font-size: 14px; line-height: 1.5; }
.t4d-home-fitbar a { color: #e10600; font-weight: 700; text-decoration: underline; }
.t4d-home-fitbar__all { margin-left: 6px; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; opacity: .8; }