/* ==========================================================================
SITE V2 — FULL-SITE PREMIUM SKIN (2026-08-29)
--------------------------------------------------------------------------
Loaded AFTER styles.css on every customer page EXCEPT shop.html (the shop
carries its own shopv2.css with the same DNA). Pure presentation:
• chrome-gold serif crown on every page hero
• real-install photography behind every page hero (per data-page)
• editorial eyebrows, gold hairlines, header/footer finish
Real photos only — every background is our work on a customer's ride.
========================================================================== */
/* ------------------------- TYPE CROWN (all pages) -------------------- */
body:not([data-page="shop"]) .page-hero h1,
body[data-page="home"] .hero h1{
background:linear-gradient(100deg,#f7f3e8 0%,#e0c074 26%,#ffffff 46%,#c9a44f 64%,#f2e5c4 86%);
-webkit-background-clip:text; background-clip:text; color:transparent;
filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));
}
body[data-page="home"] .hero h1 em{ -webkit-text-fill-color:initial; color:#e8cf8e; font-style:italic; }
.eyebrow{ letter-spacing:.22em; }
.page-hero .eyebrow, .hero .eyebrow{
display:inline-flex; align-items:center; gap:.55rem; color:#c9a44f;
}
.page-hero .eyebrow::before, .hero .eyebrow::before{
content:""; width:22px; height:1px;
background:linear-gradient(90deg,#e0c074,rgba(224,192,116,.15));
}
/* ------------------- PAGE-HERO PHOTOGRAPHY (per page) ----------------- */
body[data-page="about"] .page-hero, body[data-page="custom"] .page-hero,
body[data-page="contact"] .page-hero, body[data-page="turnaround"] .page-hero,
body[data-page="faq"] .page-hero, body[data-page="gallery"] .page-hero,
body[data-page="reviews"] .page-hero, body[data-page="track"] .page-hero,
body[data-page="refer"] .page-hero, body[data-page="finishes"] .page-hero,
body[data-page="care"] .page-hero, body[data-page="local"] .page-hero,
body[data-page="speaker-racks"] .page-hero{
position:relative; overflow:hidden; background-size:cover; background-repeat:no-repeat;
background-position:center 42%; background-color:#0c0d0f;
}
body[data-page="about"] .page-hero::before, body[data-page="custom"] .page-hero::before,
body[data-page="contact"] .page-hero::before, body[data-page="turnaround"] .page-hero::before,
body[data-page="faq"] .page-hero::before, body[data-page="gallery"] .page-hero::before,
body[data-page="reviews"] .page-hero::before, body[data-page="track"] .page-hero::before,
body[data-page="refer"] .page-hero::before, body[data-page="finishes"] .page-hero::before,
body[data-page="care"] .page-hero::before, body[data-page="local"] .page-hero::before,
body[data-page="speaker-racks"] .page-hero::before{
content:""; position:absolute; inset:0;
/* one gentle wash — heavy stacked layers render as a slab (proven on the home hero) */
background:
linear-gradient(92deg, rgba(9,10,12,.8) 0%, rgba(9,10,12,.5) 42%, rgba(9,10,12,.12) 70%, rgba(9,10,12,.04) 85%),
linear-gradient(180deg, rgba(9,10,12,.12), rgba(9,10,12,0) 35%, rgba(9,10,12,0) 60%, #0c0d0f 97%);
}
body[data-page] .page-hero .container{ position:relative; z-index:1; }
body[data-page="about"] .page-hero{ background-image:url(../assets/products/v2-sanchez-gold.webp); }
body[data-page="contact"] .page-hero{ background-image:url(../assets/installs/v2-stealth-backglass.webp); }
body[data-page="turnaround"] .page-hero{ background-image:url(../assets/products/v2-kent-contracting.webp); }
body[data-page="faq"] .page-hero{ background-image:url(../assets/installs/v2-name-hopkins.webp); }
body[data-page="gallery"] .page-hero{ background-image:url(../assets/installs/v2-fleet-obs-dusk.webp); }
body[data-page="reviews"] .page-hero{ background-image:url(../assets/products/v2-hatfield-script.webp); }
body[data-page="track"] .page-hero{ background-image:url(../assets/installs/v2-fleet-gmc-sunset-road.webp); }
body[data-page="refer"] .page-hero{ background-image:url(../assets/installs/v2-club-thecoast.webp); }
body[data-page="finishes"] .page-hero{ background-image:url(../assets/products/v2-cross-chrome.webp); }
body[data-page="care"] .page-hero{ background-image:url(../assets/products/v2-monogram-bfa.webp); }
body[data-page="local"] .page-hero{ background-image:url(../assets/installs/v2-fleet-silverado-house.webp); }
body[data-page="speaker-racks"] .page-hero{ background-image:url(../assets/audio/audio-rack-loop-poster.jpg); }
/* the audio page wears the wing's violet */
body[data-page="speaker-racks"] .page-hero .eyebrow{ color:#b79aef; }
body[data-page="speaker-racks"] .page-hero .eyebrow::before{ background:linear-gradient(90deg,#a678ff,rgba(166,120,255,.12)); }
/* ==========================================================================
🔴 MOBILE ADD-TO-CART BLOCKER — FIXED 2026-08-29. DO NOT REGRESS.
--------------------------------------------------------------------------
SYMPTOM: "add to cart is broke on everything" — but ONLY on a phone.
PROVEN CAUSE (measured live at 375x812, not guessed):
• components.js injects the floating quick-contact panel `.v2-qc`
("Text us / Snap / Call now") as position:fixed at Z-INDEX 900.
• `.qv-overlay` (the Quick View that holds every Add to Cart button)
is z-index 200 in styles.css:500.
• On a 375px viewport .v2-qc occupies top 518 -> bottom 728, and the
"Add to Cart — $35" button sits at top 601 -> 655. They OVERLAP, and
document.elementFromPoint() at the button's centre returned DIV.v2-qc,
NOT the button. Every tap hit the contact panel instead of buying.
• On desktop the panel sits in a far corner, so it never showed there.
FIX (two independent guards, either one alone is sufficient):
1. the modal now outranks the panel;
2. the panel is hidden entirely while a modal is open.
⚠️ Any new position:fixed overlay MUST stay BELOW 1000, or it will start
eating taps on the buy button again. This is the money path.
========================================================================== */
.qv-overlay{ z-index:1000 !important; }
body:has(.qv-overlay.open) .v2-qc,
body:has(.qv-overlay.open) .ne-in{ display:none !important; }
/* ROOT-CAUSE GUARD: `.v2-qc` is a 183x210 fixed BOX, but its actual controls are
three small links. The empty space inside that box was still swallowing taps —
a second mobile audit caught it covering the "Real Installs" tab, which was
simply unclickable on a phone. Making the CONTAINER transparent to pointers and
re-enabling them only on the real controls means the widget can only ever
intercept a tap that genuinely lands on one of its buttons.
Apply the same pattern to ANY future floating panel. */
.v2-qc{ pointer-events:none !important; }
.v2-qc a, .v2-qc button{ pointer-events:auto !important; }
.ne-in{ pointer-events:none !important; }
.ne-in a, .ne-in button{ pointer-events:auto !important; }
/* …and pointer-events alone was NOT enough. A third audit pass found the panel's own
"Text us" LINK (x174-357, y526-569) still physically overlapping the "Real Installs"
category tab (x238-363, y519-563) — the link is a legitimate tap target, so it wins,
and that tab was dead under a finger. On a 375px screen the panel was parked
MID-SCREEN, straight through the shop's tab rail.
Park it in the bottom-right corner on phones, clear of navigation and clear of the
Quick View's buy button. ⚠ Never let this panel sit over the tab rail or the cart CTA. */
@media (max-width: 768px){
.v2-qc{
top:auto !important; bottom:calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
left:auto !important; right:12px !important;
flex-direction:row !important; gap:.4rem !important;
width:auto !important; max-width:calc(100vw - 24px) !important;
}
}
/* ------------------------- HEADER / FOOTER --------------------------- */
.site-header, #site-header > header, header.site-head{ border-bottom:1px solid rgba(224,192,116,.14); }
#site-footer{ border-top:1px solid rgba(224,192,116,.14); }
/* -------------------------- HOME POLISH ------------------------------ */
body[data-page="home"] .hero-figure img{ border:1px solid rgba(224,192,116,.28); }
body[data-page="home"] .shot{ overflow:hidden; border-radius:14px; }
body[data-page="home"] .shot img{ transition:transform .7s cubic-bezier(.2,.7,.3,1); }
body[data-page="home"] .shot:hover img{ transform:scale(1.06); }
/* audio teaser band (homepage) */
.v2-audio-band{
position:relative; overflow:hidden; border-radius:18px; margin-top:1.6rem;
border:1px solid rgba(166,120,255,.32);
background:
radial-gradient(70% 130% at 10% 0%, rgba(147,84,255,.12), transparent 55%),
linear-gradient(135deg,#12101a,#0d0b12);
display:flex; align-items:center; gap:1.4rem; padding:1.3rem 1.5rem; flex-wrap:wrap;
}
.v2-audio-band img{ width:150px; height:100px; object-fit:cover; border-radius:12px;
border:1px solid rgba(166,120,255,.35); flex:none; }
.v2-audio-band-txt{ flex:1; min-width:240px; }
.v2-audio-band-kick{
display:block; font:800 0.75rem/1 Inter,sans-serif; letter-spacing:.22em; text-transform:uppercase;
color:#b79aef; margin-bottom:.4rem;
}
.v2-audio-band-txt h2{ font-size:1.45rem; margin:0 0 .35rem; color:#f4f1ea; }
.v2-audio-band-txt p{ color:#a9a3b8; font-size:0.875rem; margin:0; }
.v2-audio-band .btn{ flex:none; }
/* ==========================================================================
CINEMA PASS — "do it like the shop": full-bleed heroes, editorial body
========================================================================== */
/* ---------------- HOMEPAGE HERO → FULL-BLEED CINEMA ------------------ */
body[data-page="home"] .hero{
position:relative; overflow:hidden; min-height:min(88vh, 860px);
display:flex; align-items:flex-end; background:#0c0d0f;
}
body[data-page="home"] .hero-figure{
position:absolute; inset:0; z-index:0; display:block; margin:0;
}
body[data-page="home"] .hero-figure img{
width:100%; height:100%; min-height:0; object-fit:cover; object-position:center 38%;
border-radius:0; border:none; box-shadow:none;
}
body[data-page="home"] .hero-figure::before,
body[data-page="home"] .hero-figure::after{ display:none; } /* chrome corner frames: gone */
/* the shop's scrim: dark left for copy, falls to page-black at the base */
body[data-page="home"] .hero::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
/* ⚠ styles.css:210 styles this same pseudo as an old decorative glow with
`right:-10%; top:-20%; width:50%; height:140%`. `inset:0` does NOT undo a
width: with left+right+width all set, the browser drops `right` and the box
stays 50% wide — so this scrim covered only the LEFT HALF of the hero, on
every screen, since it was written. The headline and the whole trust strip
sat unscrimmed on bright sky. Reset the sizing explicitly or it comes back. */
width:auto; height:auto; right:0; bottom:0;
/* ONE gentle wash — stacked heavy layers rendered as a slab wall (proven by bisect) */
background:
linear-gradient(92deg, rgba(9,10,12,.72) 0%, rgba(9,10,12,.42) 40%, rgba(9,10,12,.06) 66%, rgba(9,10,12,0) 80%),
linear-gradient(180deg, rgba(9,10,12,.18), rgba(9,10,12,0) 30%, rgba(9,10,12,0) 68%, rgba(12,13,15,.88) 97%);
}
/* the figure lives INSIDE .container — keep the container unpositioned so the
figure's absolute box resolves to the .hero section (true full-bleed), and
lift the copy above it explicitly */
body[data-page="home"] .hero .container{
position:static; display:block; padding-top:clamp(64px,9vh,104px);
padding-bottom:clamp(38px,5vh,60px);
}
body[data-page="home"] .hero-copy{ position:relative; z-index:2; max-width:660px; }
body[data-page="home"] .hero-badge{ z-index:2; }
body[data-page="home"] .hero h1{
font-size:clamp(2.4rem, 5.8vw, 4rem); line-height:1.05; margin:.9rem 0 1rem;
}
/* the stat trio already lives in the badge + refer band — cinema keeps the frame clean */
body[data-page="home"] .hero-meta{ display:none; }
body[data-page="home"] .hero p{ max-width:34em; color:#c9c6bb; }
body[data-page="home"] .hero-trust{
display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.4rem; padding:0; list-style:none;
font-size:0.75rem; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:#a9afb9;
}
body[data-page="home"] .hero-trust li{ display:inline-flex; align-items:center; }
body[data-page="home"] .hero-trust li + li::before{
content:"\00B7"; margin-right:1.6rem; color:rgba(224,192,116,.6); font-weight:900;
}
body[data-page="home"] .hero-meta{
gap:2.2rem; margin-top:1.9rem; padding-top:1.3rem; border-top:1px solid rgba(224,192,116,.22);
}
/* trust badge floats bottom-right above the photo */
body[data-page="home"] .hero-badge{
left:auto; right:clamp(16px,4vw,54px); bottom:clamp(18px,5vh,54px); z-index:2;
background:rgba(13,14,17,.94); /* solid glass — backdrop blur breaks compositing + costs frames */
border:1px solid rgba(224,192,116,.3);
}
/* if the cloud slideshow builds its full markup, its slides ride the same frame */
body[data-page="home"] .hero .hero-slide{ position:absolute; inset:0; }
body[data-page="home"] .hero .hero-slide img{ width:100%; height:100%; object-fit:cover; border-radius:0; border:none; }
body[data-page="home"] .hero .hero-dots{ position:absolute; right:1.3rem; bottom:1.2rem; z-index:3; display:flex; gap:.45rem; }
body[data-page="home"] .hero .hero-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.35); }
body[data-page="home"] .hero .hero-dots button.ns-active{ background:#e0c074; }
/* ---------------- SUBPAGE HEROES → grand, bottom-anchored ------------- */
body[data-page="about"] .page-hero, body[data-page="custom"] .page-hero,
body[data-page="contact"] .page-hero, body[data-page="turnaround"] .page-hero,
body[data-page="faq"] .page-hero, body[data-page="gallery"] .page-hero,
body[data-page="reviews"] .page-hero, body[data-page="track"] .page-hero,
body[data-page="refer"] .page-hero, body[data-page="finishes"] .page-hero,
body[data-page="care"] .page-hero, body[data-page="local"] .page-hero,
body[data-page="speaker-racks"] .page-hero{
min-height:clamp(320px, 44vh, 480px); display:flex; align-items:flex-end;
padding-bottom:clamp(28px, 4vh, 48px);
}
body:not([data-page="shop"]):not([data-page="home"]) .page-hero h1{
font-size:clamp(2.2rem, 5.6vw, 3.7rem); line-height:1.06;
}
body:not([data-page="shop"]) .page-hero p{ max-width:560px; color:#c2bfb4; }
/* ---------------- EDITORIAL BODY (all pages) -------------------------- */
/* serif gradient crown on every section title, not just heroes */
.section-head h2, .split-body h2, .cta-band h2{
background:linear-gradient(95deg,#f5f1e6,#e0c074 55%,#f5f1e6);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
display:inline-flex; align-items:center; gap:.55rem; color:#c9a44f;
}
.eyebrow::before{
content:""; width:22px; height:1px; flex:none;
background:linear-gradient(90deg,#e0c074,rgba(224,192,116,.15));
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{
content:""; width:22px; height:1px; flex:none;
background:linear-gradient(270deg,#e0c074,rgba(224,192,116,.15));
}
/* homepage category strip → typographic, gold separators */
body[data-page="home"] .trust .container{ gap:.6rem 2rem; }
body[data-page="home"] .trust span{ letter-spacing:.16em; font-size:0.75rem; color:#9ba1ab; }
body[data-page="home"] .trust .container > span + span::before,
body[data-page="home"] .trust .container > a + span::before,
body[data-page="home"] .trust .container > span + a span::before{
content:"\00B7"; margin-right:2rem; color:rgba(224,192,116,.55); font-weight:900;
}
/* story split + panels: gold hairline finish */
.split-media img{ border:1px solid rgba(224,192,116,.22); border-radius:16px; }
/* ------------------------------ PHONE -------------------------------- */
@media (max-width:680px){
body[data-page="home"] .hero{ min-height:78vh; }
body[data-page="home"] .hero .container{ padding-top:110px; }
body[data-page="home"] .hero h1{ font-size:clamp(2.1rem, 9vw, 2.7rem); }
body[data-page="home"] .hero-badge{ display:none; }
/* ── HERO LEGIBILITY, PHONE (2026-08-29 — Chris: "the home page feels cheap") ──
The desktop scrim is a 92deg LEFT-to-right wash, correct when the copy sits in
the left third. On a phone the copy is full-width and bottom-anchored, so that
wash puts its density where there is no text and leaves the headline, the body
line and the whole trust strip sitting on bright sky and chrome — dark grey on
near-white. Unreadable is the cheapest a page can look. Phones get a scrim
built for where their text actually is: clear at the top so the truck reads,
dense from the copy down. */
body[data-page="home"] .hero::after{
/* Tuned AFTER the half-width bug was fixed — the earlier values were heavy to
compensate for a scrim that only covered half the frame.
COMPOSITION: the hero photo is portrait in a landscape box, so its full height
shows and the truck sits at the BOTTOM. Copy was also bottom-anchored, so the
scrim had to bury the subject to make type legible — the two were fighting.
On phones the copy moves UP into the sky (its natural negative space) and the
scrim inverts with it: dense at the top for the words, clear through the middle
so the truck reads, dark at the very base to hand off to the page. */
background:
linear-gradient(180deg,
rgba(9,10,12,.90) 0%,
rgba(9,10,12,.84) 30%,
rgba(9,10,12,.66) 46%,
rgba(9,10,12,.30) 58%,
rgba(9,10,12,.14) 70%,
rgba(10,11,13,.42) 86%,
#0c0d0f 100%);
}
/* copy rides in the sky; the truck keeps the bottom of the frame */
body[data-page="home"] .hero{ align-items:flex-start; }
body[data-page="home"] .hero .container{
padding-top:calc(var(--bar-h, 0px) + 78px); padding-bottom:0;
}
body[data-page="home"] .hero h1{ margin:.55rem 0 .7rem; }
body[data-page="home"] .hero-actions{ margin-top:1rem; }
/* frame the truck, not the sky */
body[data-page="home"] .hero-figure img{ object-position:center 58%; }
/* belt-and-braces: type stays readable even if a future photo is brighter still */
body[data-page="home"] .hero h1,
body[data-page="home"] .hero p{ text-shadow:0 2px 14px rgba(0,0,0,.55); }
body[data-page="home"] .hero p{ color:#d8d4c9; }
body[data-page="home"] .hero-trust{
color:#c6ccd6; text-shadow:0 1px 10px rgba(0,0,0,.7);
}
body[data-page="home"] .hero-meta{ gap:1.4rem; }
body[data-page="home"] .hero-meta .num{ font-size:1.5rem; }
body:not([data-page="shop"]):not([data-page="home"]) .page-hero h1{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
}
/* ==========================================================================
LUXURY CANON (site-wide) — the same laws the shop obeys. No seams.
========================================================================== */
.btn{ border-radius:12px !important; }
.btn--buy, .btn--primary, .btn--gold{
background:linear-gradient(135deg,#f4e0ac,#c9a44f 55%,#e8ca85) !important;
color:#14161a !important; font-weight:800 !important; border:none !important;
box-shadow:0 4px 16px rgba(201,164,79,.25), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.btn--buy:hover, .btn--primary:hover, .btn--gold:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn--ghost{
background:transparent !important; color:#e0c074 !important;
border:1px solid rgba(224,192,116,.45) !important;
}
.btn--ghost:hover{ background:rgba(224,192,116,.1) !important; color:#f2e5c4 !important; }
/* forms everywhere (custom order, contact, track): jewelry-case inputs */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], select, textarea{
border-radius:12px !important; transition:border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus{
border-color:rgba(224,192,116,.6) !important;
box-shadow:0 0 0 3px rgba(224,192,116,.12) !important; outline:none !important;
}
/* cart drawer on any page that carries it */
.cart-drawer{
background:linear-gradient(180deg,#14161b,#0e1013) !important;
border-left:1px solid rgba(224,192,116,.28) !important;
box-shadow:-24px 0 70px rgba(0,0,0,.6) !important;
}
.cart-head{ font-family:'Playfair Display',Georgia,serif !important;
border-bottom:1px solid rgba(224,192,116,.18) !important; }
.cart-x:hover{ color:#e0c074 !important; }
/* footer: quiet, finished */
#site-footer{ background:#0a0b0d; }
#site-footer a{ transition:color .2s; }
#site-footer a:hover{ color:#e0c074 !important; }
/* price tables on any page */
.price-table{ border:1px solid rgba(224,192,116,.2) !important; border-radius:14px !important; overflow:hidden; }
.price-table th{ color:#c9a44f !important; letter-spacing:.1em; text-transform:uppercase; font-size:0.75rem !important; }
/* ==========================================================================
THE GENEVA PASS — $1M is restraint. One gold moment per screen.
Ivory type, unified photo grade, air, and the coupon bar learns to whisper.
========================================================================== */
/* announce bar: from shouting coupon to quiet privilege — EXACT class only
(a [class*=] here once matched html.has-announce and uppercased the page) */
/* TYPE AUDIT 2026-08-29: measured live at 1440px — the announce bar rendered at
10.88px and the nav at 11.84px, with 61 elements under 12px sitewide. Small type is
the loudest "cheap" signal there is, and these two are on EVERY page. Raised to
12.5px / 13.4px: still tracked, still quiet, now actually readable. Do not go back
under 12px on primary nav or the announce strip. */
div.announce-bar{
font-size:0.75rem !important; letter-spacing:.14em !important; text-transform:uppercase;
font-weight:650 !important; color:#8f959f !important;
background:#050607 !important; border-bottom:1px solid rgba(255,255,255,.05);
padding-top:.5rem !important; padding-bottom:.5rem !important;
}
div.announce-bar b, div.announce-bar strong, div.announce-bar a{
color:#c9a44f !important; font-weight:750 !important;
}
/* header: air + tracked nav = house of a brand */
#site-header nav a, .site-nav a{
font-size:0.875rem !important; letter-spacing:.16em !important; text-transform:uppercase;
font-weight:650 !important;
}
/* de-gold the body: section titles in warm ivory serif — the gradient stays
ONLY on page heroes. Gold lives in kickers, prices and one CTA per view. */
.section-head h2, .split-body h2, .cta-band h2{
background:none !important; -webkit-background-clip:initial !important;
background-clip:initial !important; color:#efece2 !important;
}
/* one photographic grade across every image — mixed iPhone temps read amateur */
.shot img, .split-media img, .card-media img, .v2-inst img, .qv-media img{
filter:saturate(.94) contrast(1.04) brightness(.99);
}
/* ---- ART DIRECTION BY FILENAME — every crop framed on its subject, on EVERY
page and aspect (matches .jpg and .webp alike). The subject decides the crop:
vinyl-on-glass sits high in frame, trucks sit low, workbench shots crop out
the monitors above. ---- */
img[src*="v2-name-lilly"] { object-position:50% 44% !important; }
img[src*="v2-name-hopkins"] { object-position:50% 48% !important; }
img[src*="v2-backglass-house"] { object-position:50% 68% !important; }
img[src*="v2-highclass-4runner"] { object-position:50% 46% !important; }
img[src*="v2-hc-night-windshield"]{ object-position:50% 78% !important; }
img[src*="v2-jesus-saves-red"] { object-position:50% 42% !important; }
img[src*="v2-jesussaves-windshield"]{ object-position:50% 72% !important; }
img[src*="v2-social-nesmith-suv"]{ object-position:50% 60% !important; }
img[src*="v2-stealth-backglass"] { object-position:50% 42% !important; }
img[src*="v2-number-3-red-chevy"]{ object-position:50% 52% !important; }
img[src*="v2-equipment-butler"] { object-position:50% 36% !important; }
img[src*="v2-cover-installed"] { object-position:50% 50% !important; }
img[src*="v2-covers-held"] { object-position:50% 45% !important; }
img[src*="v2-covers-stack"] { object-position:50% 55% !important; }
img[src*="v2-cover-truck"] { object-position:50% 45% !important; }
img[src*="v2-duffel"] { object-position:50% 55% !important; }
img[src*="v2-monogram-bfa"] { object-position:50% 56% !important; }
img[src*="v2-sanchez-gold"] { object-position:50% 78% !important; }
img[src*="v2-hatfield"] { object-position:50% 58% !important; }
img[src*="v2-dallas-script"] { object-position:50% 70% !important; }
img[src*="v2-cross-chrome"] { object-position:50% 55% !important; }
img[src*="v2-jesussaves-red-gothic"]{ object-position:50% 58% !important; }
img[src*="v2-newsom-logo"] { object-position:50% 55% !important; }
img[src*="v2-kent-contracting"] { object-position:50% 58% !important; }
img[src*="v2-front-plate"] { object-position:50% 55% !important; }
img[src*="v2-smalldecal"] { object-position:50% 48% !important; }
img[src*="v2-hero-obs-squarebody"]{ object-position:50% 58% !important; }
img[src*="v2-obs-squarebody-2"] { object-position:50% 55% !important; }
img[src*="v2-gmc-sunset"] { object-position:50% 52% !important; }
img[src*="v2-fleet-obs-dusk"] { object-position:50% 55% !important; }
img[src*="v2-fleet-silverado-house"]{ object-position:50% 55% !important; }
img[src*="v2-fleet-tahoe-white"] { object-position:50% 55% !important; }
img[src*="v2-fleet-ram-blue"] { object-position:50% 52% !important; }
img[src*="v2-fleet-gmc-sunset-road"]{ object-position:50% 50% !important; }
img[src*="v2-fleet-gmc-driveway"]{ object-position:50% 55% !important; }
/* the installs-wall wide opener keeps its own deeper cut */
#cat-installs .v2-inst:first-child img[src*="v2-hero-obs-squarebody"]{ object-position:50% 74% !important; }
/* HOME HERO CROP FIX (2026-08-29) — measured live, not guessed.
The source is 1170x1560 PORTRAIT and the hero box is 1.17 wide, so 36% of the photo
height is hidden. At 62% the visible band was source rows 345-1349: it showed 22% of
empty sky at the top and CUT THE WHEELS OFF the bottom — on a LIFTED truck, where the
stance is the whole point. Bottom-anchoring shows rows 562-1560: the complete truck,
wheels included, with sky left above for the headline.
⚠ SIX rules were competing for this one image (center center / center 38% / center 58%
/ 50% 58% / 50% 62% / 50% 0%) — six tuning attempts stacked on each other. THIS is the
one that wins (highest specificity). Change it here; do not add a seventh. */
body[data-page="home"] .hero-figure img[src*="v2-hero-obs-squarebody"]{ object-position:50% 100% !important; }
/* air is the most expensive material */
.section{ padding-block:clamp(64px, 9vw, 120px); }
.section + .section{ padding-top:clamp(48px, 7vw, 90px); }
/* ---- TYPE SCALE, SITE-WIDE — editorial confidence, readable everywhere ----
Body copy was timid (~15px). Luxury type is set larger and looser. */
.section p, .split-body p, .section-head p{
font-size:1rem; line-height:1.75;
}
.section-head p{ max-width:560px; margin-inline:auto; }
.section-head h2, .split-body h2{ font-size:clamp(1.9rem, 4.6vw, 2.7rem); line-height:1.12; }
.section-head{ margin-bottom:clamp(1.8rem, 4vw, 2.8rem); }
.step h3{ font-size:1.25rem; }
.step p{ font-size:1rem; line-height:1.65; }
.muted{ font-size:1rem !important; }
.price-note{ font-size:0.875rem; line-height:1.55; }
#site-footer{ font-size:0.875rem; line-height:1.7; }
#site-footer a{ font-size:0.875rem; }
/* stat trios breathe */
.stat-row .num{ font-size:1.7rem; }
.stat-row .lbl{ font-size:0.75rem; letter-spacing:.14em; }
@media (max-width:680px){
.section p, .split-body p{ font-size:1rem; line-height:1.7; }
.section-head h2, .split-body h2{ font-size:clamp(1.6rem, 7vw, 2.1rem); }
}
/* ------------------------- QUIET DETAILS ----------------------------- */
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:rgba(224,192,116,.35); color:#fff; }
body::-webkit-scrollbar{ width:11px; }
body::-webkit-scrollbar-track{ background:#0c0d0f; }
body::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#c9a44f,#7d5f23); border-radius:8px; border:2px solid #0c0d0f; }
@media (max-width:680px){
.v2-audio-band{ padding:1.05rem 1.1rem; gap:.9rem; }
.v2-audio-band img{ width:100%; height:130px; }
.v2-audio-band .btn{ width:100%; justify-content:center; }
}
/* ── ONLINE ONLY (2026-08-29, Chris: "we only do online now") ──────────────
The POLISH-500 #293 local-pickup toggle is hidden at the UI layer so no
customer can pick an option we no longer offer. checkout.js logic is left
untouched on purpose — NE_PICKUP_293 simply never becomes true, so the
money path is unchanged and this is reversible by deleting this block. */
#co-pickup293, label[for="co-pickup293"]{ display:none !important; }
.co-row:has(#co-pickup293){ display:none !important; }
/* ==== CROP DOCTOR BEGIN ==== */
/* GENERATED by _tools/crop-doctor.py — DO NOT HAND-EDIT INSIDE THE MARKERS.
Frames each card on its decal instead of the parking lot. Keyed by filename,
so it survives cloud-catalog re-renders — the same art-map pattern already
used above. Re-run the tool to regenerate; delete a line to fall back to a
centre crop. Written into sitev2.css because that is linked on every page,
which beats adding a to twenty files. */
#shop-sections .card-media img, .v2-inst img{ transform:scale(var(--z,1)); }
#shop-sections .card:hover .card-media img{ transform:scale(calc(var(--z,1) * 1.06)); }
img[src*="gmc-front-banner-2"]{ object-position:50.0% 31.8% !important; --z:1.12; }
img[src*="gmc-front-banner"]{ object-position:50.0% 31.8% !important; --z:1.22; }
img[src*="hero-titant-backglass"]{ object-position:50.0% 0.0% !important; }
img[src*="highclass-cross-truck"]{ object-position:50.0% 68.2% !important; --z:1.22; }
img[src*="install-img-0033"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="install-img-0035"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="install-img-0036"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="install-img-0066"]{ object-position:50.0% 91.6% !important; --z:1.12; }
img[src*="install-img-0067"]{ object-position:50.0% 91.6% !important; --z:1.12; }
img[src*="install-img-0069"]{ object-position:50.0% 29.2% !important; --z:1.12; }
img[src*="install-img-0070"]{ object-position:50.0% 18.8% !important; --z:1.12; }
img[src*="install-img-0071"]{ object-position:50.0% 18.8% !important; --z:1.12; }
img[src*="install-img-0072"]{ object-position:50.0% 29.2% !important; --z:1.12; }
img[src*="install-img-0108"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="install-img-0109"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="install-img-0151"]{ object-position:50.0% 86.4% !important; --z:1.22; }
img[src*="install-img-0215"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="install-img-0220"]{ object-position:50.0% 100.0% !important; --z:1.12; }
img[src*="install-img-1084"]{ object-position:50.0% 100.0% !important; }
img[src*="install-img-1117"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="install-img-1248"]{ object-position:50.0% 91.6% !important; }
img[src*="install-img-1579"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="install-img-1580"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="install-img-1907"]{ object-position:50.0% 100.0% !important; --z:1.12; }
img[src*="install-img-1951"]{ object-position:50.0% 18.8% !important; }
img[src*="install-img-1952"]{ object-position:50.0% 29.2% !important; }
img[src*="install-img-1968"]{ object-position:50.0% 100.0% !important; --z:1.12; }
img[src*="install-img-2013"]{ object-position:50.0% 91.6% !important; --z:1.12; }
img[src*="install-img-2034"]{ object-position:50.0% 16.2% !important; }
img[src*="install-img-2037"]{ object-position:50.0% 81.2% !important; --z:1.12; }
img[src*="install-img-2079"]{ object-position:50.0% 100.0% !important; }
img[src*="install-img-5596"]{ object-position:50.0% 66.9% !important; --z:1.12; }
img[src*="install-img-6716"]{ object-position:50.0% 0.0% !important; }
img[src*="install-img-6851"]{ object-position:50.0% 29.2% !important; --z:1.12; }
img[src*="install-img-6852"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="install-img-7527"]{ object-position:50.0% 91.6% !important; }
img[src*="install-img-7557"]{ object-position:50.0% 75.3% !important; --z:1.22; }
img[src*="install-img-7623"]{ object-position:50.0% 31.8% !important; --z:1.12; }
img[src*="install-img-7625"]{ object-position:0.0% 50.0% !important; }
img[src*="install-img-7626"]{ object-position:50.0% 0.0% !important; --z:1.12; }
img[src*="install-img-7782"]{ object-position:50.0% 91.6% !important; }
img[src*="install-img-7784"]{ object-position:50.0% 100.0% !important; }
img[src*="v2-backglass-house"]{ object-position:50.0% 29.2% !important; }
img[src*="v2-club-fordsfinest"]{ object-position:50.0% 100.0% !important; }
img[src*="v2-club-thecoast"]{ object-position:50.0% 100.0% !important; }
img[src*="v2-equipment-butler"]{ object-position:50.0% 81.2% !important; }
img[src*="v2-fleet-gmc-driveway"]{ object-position:50.0% 29.2% !important; --z:1.12; }
img[src*="v2-fleet-gmc-sunset-road"]{ object-position:50.0% 18.8% !important; --z:1.12; }
img[src*="v2-fleet-obs-dusk"]{ object-position:50.0% 81.2% !important; --z:1.12; }
img[src*="v2-fleet-ram-blue"]{ object-position:50.0% 100.0% !important; }
img[src*="v2-fleet-silverado-house"]{ object-position:50.0% 100.0% !important; --z:1.12; }
img[src*="v2-fleet-tahoe-white"]{ object-position:50.0% 29.2% !important; --z:1.22; }
img[src*="v2-gmc-sunset"]{ object-position:50.0% 60.4% !important; --z:1.22; }
img[src*="v2-hc-night-windshield"]{ object-position:50.0% 81.2% !important; --z:1.22; }
img[src*="v2-hero-obs-squarebody"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v2-highclass-4runner"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v2-jesus-saves-red"]{ object-position:50.0% 0.0% !important; }
img[src*="v2-jesussaves-windshield"]{ object-position:50.0% 0.0% !important; --z:1.12; }
img[src*="v2-name-hopkins"]{ object-position:50.0% 0.0% !important; }
img[src*="v2-number-3-red-chevy"]{ object-position:50.0% 13.6% !important; --z:1.12; }
img[src*="v2-obs-squarebody-2"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v2-social-nesmith-suv"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v2-stealth-backglass-2"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v2-stealth-backglass"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v2-wall-silverado-tailgate"]{ object-position:50.0% 100.0% !important; }
img[src*="v2-windshield-obs-front"]{ object-position:50.0% 18.8% !important; --z:1.22; }
img[src*="v2-windshield-script-chevy"]{ object-position:50.0% 8.4% !important; --z:1.22; }
img[src*="v3-biz-ovalles-fx4"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v3-clean-simple-dodge"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v3-club-hc-blacktruck"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v3-club-hc-greygmc"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v3-club-hc-whitechevy"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v3-club-ramsfinest"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v3-equip-bobcat"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v3-faith-camry"]{ object-position:50.0% 100.0% !important; }
img[src*="v3-faith-greydodge"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v3-faith-titan21"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v3-faith-whitegmc"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v3-name-dakota-chevy"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v3-name-hugo-suv"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v3-name-truitt"]{ object-position:0.0% 50.0% !important; --z:1.22; }
img[src*="v3-name-woodcock"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v4-banner-windshield-white"]{ object-position:50.0% 0.0% !important; --z:1.12; }
img[src*="v4-biz-butler-sunset"]{ object-position:50.0% 91.6% !important; }
img[src*="v4-club-fordsfinest-white"]{ object-position:50.0% 100.0% !important; }
img[src*="v4-club-hc-bed"]{ object-position:50.0% 29.2% !important; }
img[src*="v4-club-hc-tailgate"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v4-faith-cross-color"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v4-name-hill-glass"]{ object-position:50.0% 100.0% !important; }
img[src*="v4-name-hill-truck"]{ object-position:50.0% 68.2% !important; --z:1.12; }
img[src*="v4-name-pink-script"]{ object-position:50.0% 0.0% !important; }
img[src*="v4-race-cnb-car"]{ object-position:50.0% 91.6% !important; }
img[src*="v4-social-nesm1th"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v5-img-2037"]{ object-position:50.0% 81.2% !important; --z:1.12; }
img[src*="v5-img-2130"]{ object-position:50.0% 100.0% !important; }
img[src*="v5-img-2155"]{ object-position:50.0% 0.0% !important; --z:1.12; }
img[src*="v5-img-2318"]{ object-position:50.0% 86.4% !important; --z:1.22; }
img[src*="v5-img-2319"]{ object-position:50.0% 100.0% !important; --z:1.12; }
img[src*="v5-img-2329"]{ object-position:50.0% 60.4% !important; --z:1.22; }
img[src*="v5-img-2337"]{ object-position:50.0% 70.8% !important; --z:1.12; }
img[src*="v5-img-2357"]{ object-position:50.0% 81.2% !important; }
img[src*="v5-img-2369"]{ object-position:50.0% 100.0% !important; --z:1.12; }
img[src*="v5-img-2381"]{ object-position:50.0% 91.6% !important; --z:1.12; }
img[src*="v5-img-2488"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v5-img-2552"]{ object-position:50.0% 18.8% !important; }
img[src*="v5-img-2555"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v5-img-2653"]{ object-position:50.0% 0.0% !important; }
img[src*="v5-img-2654"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v5-img-2673"]{ object-position:50.0% 60.4% !important; --z:1.22; }
img[src*="v5-img-3134"]{ object-position:50.0% 100.0% !important; --z:1.12; }
img[src*="v5-img-3334"]{ object-position:50.0% 100.0% !important; }
img[src*="v5-img-3355"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v5-img-3357"]{ object-position:50.0% 70.8% !important; --z:1.12; }
img[src*="v5-img-3571"]{ object-position:50.0% 91.6% !important; --z:1.12; }
img[src*="v5-img-3890"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v5-img-4151"]{ object-position:50.0% 29.2% !important; }
img[src*="v5-img-4386"]{ object-position:50.0% 60.4% !important; --z:1.12; }
img[src*="v5-img-4650"]{ object-position:50.0% 0.0% !important; }
img[src*="v5-img-4942"]{ object-position:50.0% 100.0% !important; }
img[src*="v5-img-4946"]{ object-position:50.0% 0.0% !important; }
img[src*="v5-img-4973"]{ object-position:50.0% 18.8% !important; }
img[src*="v5-img-4998"]{ object-position:50.0% 18.6% !important; }
img[src*="v5-img-5024"]{ object-position:50.0% 81.4% !important; --z:1.12; }
img[src*="v5-img-5070"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v5-img-5073"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v5-img-5110"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v5-img-5111"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v5-img-5112"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v5-img-5113"]{ object-position:50.0% 81.2% !important; --z:1.22; }
img[src*="v5-img-5114"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v5-img-5116"]{ object-position:50.0% 91.6% !important; --z:1.22; }
img[src*="v5-img-5120"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v5-img-5121"]{ object-position:50.0% 100.0% !important; }
img[src*="v6-blue-ford-side"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v6-dakota-bradford-2"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v6-dashboard-pink-script"]{ object-position:0.0% 50.0% !important; }
img[src*="v6-hc-white-chevy-2"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v6-hugo-avalos-2"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v6-hugo-avalos-3"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v6-ovalles-fx4-2"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v6-rams-finest-2"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v6-titan21"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v7-img-2631"]{ object-position:50.0% 29.2% !important; --z:1.22; }
img[src*="v7-img-2634"]{ object-position:50.0% 81.2% !important; --z:1.12; }
img[src*="v7-img-2635"]{ object-position:50.0% 81.2% !important; --z:1.22; }
img[src*="v7-img-2672"]{ object-position:50.0% 60.4% !important; --z:1.22; }
img[src*="v7-img-2709"]{ object-position:50.0% 18.8% !important; --z:1.12; }
img[src*="v7-img-2738"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v7-img-2739"]{ object-position:50.0% 0.0% !important; --z:1.12; }
img[src*="v7-img-2741"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v7-img-2869"]{ object-position:50.0% 81.2% !important; }
img[src*="v7-img-3202"]{ object-position:50.0% 18.8% !important; }
img[src*="v7-img-3203"]{ object-position:50.0% 0.0% !important; --z:1.12; }
img[src*="v7-img-3257"]{ object-position:50.0% 29.2% !important; --z:1.12; }
img[src*="v7-img-3269"]{ object-position:50.0% 39.6% !important; --z:1.22; }
img[src*="v7-img-3289"]{ object-position:50.0% 44.0% !important; }
img[src*="v7-img-3314"]{ object-position:0.0% 50.0% !important; --z:1.22; }
img[src*="v7-img-3328"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v7-img-3329"]{ object-position:50.0% 100.0% !important; --z:1.22; }
img[src*="v7-img-3333"]{ object-position:50.0% 100.0% !important; }
img[src*="v8-img-3795"]{ object-position:50.0% 0.0% !important; }
img[src*="v8-img-3893"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v8-img-3894"]{ object-position:50.0% 81.2% !important; }
img[src*="v8-img-4432"]{ object-position:50.0% 0.0% !important; --z:1.12; }
img[src*="v8-img-4974"]{ object-position:50.0% 29.2% !important; }
img[src*="v8-img-4975"]{ object-position:50.0% 81.2% !important; --z:1.22; }
img[src*="v8-img-5241"]{ object-position:50.0% 100.0% !important; }
img[src*="v8-img-5242"]{ object-position:50.0% 100.0% !important; }
img[src*="front-plate-stell"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="highclass-double-pink"]{ object-position:77.2% 50.0% !important; }
img[src*="more-construction-worker"]{ object-position:71.4% 50.0% !important; }
img[src*="more-img-6825"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="more-img-7137"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="more-img-7622-overlay"]{ object-position:9.1% 50.0% !important; }
img[src*="more-img-7622"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="more-img-7625"]{ object-position:83.8% 50.0% !important; }
img[src*="more-img-8016"]{ object-position:50.0% 50.0% !important; --z:1.12; }
img[src*="v2-club-blockboys2"]{ object-position:50.0% 100.0% !important; }
img[src*="v2-club-outlaw"]{ object-position:50.0% 0.0% !important; }
img[src*="v2-club-rams"]{ object-position:50.0% 18.8% !important; }
img[src*="v2-club-stunna"]{ object-position:50.0% 29.2% !important; --z:1.12; }
img[src*="v2-club-thefinest"]{ object-position:50.0% 100.0% !important; }
img[src*="v2-cross-chrome"]{ object-position:50.0% 100.0% !important; }
img[src*="v2-dallas-script"]{ object-position:50.0% 100.0% !important; }
img[src*="v2-hatfield-script"]{ object-position:50.0% 39.6% !important; }
img[src*="v2-holo-strips"]{ object-position:50.0% 0.0% !important; --z:1.22; }
img[src*="v2-kent-contracting"]{ object-position:50.0% 0.0% !important; }
img[src*="v2-monogram-bfa"]{ object-position:50.0% 0.0% !important; }
img[src*="v2-newsom-logo"]{ object-position:50.0% 18.8% !important; }
img[src*="v2-sanchez-gold"]{ object-position:50.0% 81.2% !important; --z:1.12; }
img[src*="v3-clubart-alabama-empire"]{ object-position:68.1% 50.0% !important; --z:1.12; }
img[src*="v3-clubart-blockboyz"]{ object-position:36.4% 50.0% !important; }
img[src*="v3-clubart-coast"]{ object-position:50.0% 100.0% !important; }
img[src*="v3-clubart-firstclass"]{ object-position:50.0% 50.0% !important; --z:1.22; }
img[src*="v3-clubart-outlaw"]{ object-position:0.0% 50.0% !important; }
img[src*="v3-clubart-stunna-palm"]{ object-position:0.0% 50.0% !important; }
img[src*="v3-dot-blank"]{ object-position:50.0% 100.0% !important; }
img[src*="v3-plate-poboy"]{ object-position:50.0% 81.2% !important; }
/* ==== CROP DOCTOR END ==== */
/* ── QUICK-CONTACT CLEARANCE (2026-08-29) ─────────────────────────────────
Measured on a 414x896 phone: the mobile tab bar occupies y 820-896 (76px)
and the gold contact bubble was landing at y 828-882, x 348-402 — sitting
directly on top of the CART tab. components.js has a max-width:820px rule
meant to lift it, but it was losing at runtime, so the bubble covered the
single most important button on the site. Pinned here, in the stylesheet
that loads last, above the bar's real height plus the iOS home indicator. */
@media (max-width:820px){
.v2-qc{
bottom:calc(76px + 18px + env(safe-area-inset-bottom, 0px)) !important;
right:14px !important;
z-index:880 !important; /* under the tab bar, never over it */
}
}
@media (max-width:380px){
.v2-qc-btn{ width:48px !important; height:48px !important; }
}
/* ── CONTROLS ABOVE DECORATION (2026-08-29) ───────────────────────────────
Found by _tools/mobile-audit.js: document.elementFromPoint at the centre of
"Apply for an exclusive code" (/refer) returned a decorative