/* =============================================
AGWraps Shop — main.css
Child theme: agwraps-child
Updated: 2026
FONT LOADING: Google Fonts are preloaded via
...
for consistent spacing — this class has NO
styling of its own beyond providing consistent
horizontal padding/max-width; the actual WC
notice boxes (.woocommerce-message etc.) are
styled below so "Product removed — Undo",
"Coupon applied", errors etc. look right on
ANY page, automatically — no per-page styling
needed ever again.
═══════════════════════════════════════════ */
.page-notices-wrap {
width:100%;
max-width:100vw;
box-sizing:border-box;
overflow:hidden;
padding:16px 16px 0;
}
.page-notices-wrap:empty { padding:0; } /* no notices = zero footprint */
.page-notices-wrap .woocommerce-message,
.page-notices-wrap .woocommerce-error,
.page-notices-wrap .woocommerce-info {
margin:0 0 12px;
padding:13px 16px;
font-family:var(--font-body);
font-size:14px; font-weight:400;
border-left:4px solid;
list-style:none;
display:flex;
flex-direction:column;
gap:6px;
width:100%;
box-sizing:border-box;
overflow:hidden;
word-break:break-word;
}
.page-notices-wrap .woocommerce-error li,
.page-notices-wrap .woocommerce-message li,
.page-notices-wrap .woocommerce-info li {
display:block;
width:100%;
word-break:break-word;
}
.page-notices-wrap .woocommerce-message { background:#edfaf3; border-color:#1a7a4a; color:#1a4a38; }
.page-notices-wrap .woocommerce-error { background:#fdf0ee; border-color:#c0392b; color:#7b1a12; }
.page-notices-wrap .woocommerce-info { background:#eef3fd; border-color:#1a4a8a; color:#1a3a6a; }
.page-notices-wrap .woocommerce-message a,
.page-notices-wrap .woocommerce-error a,
.page-notices-wrap .woocommerce-info a {
color:inherit; font-weight:700; text-decoration:underline;
}
.page-notices-wrap .woocommerce-message a.button,
.page-notices-wrap .woocommerce-error a.button,
.page-notices-wrap .woocommerce-info a.button {
margin-left:auto; text-decoration:none;
font-family:var(--font-display); font-size:12px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
padding:6px 16px; border:1px solid currentColor;
flex-shrink:0; white-space:nowrap;
}
@media(max-width:768px) {
.page-notices-wrap { padding:16px 20px 0; }
}
/* ── BUTTONS ─────────────────────────────── */
.btn-primary {
font-family:var(--font-display);
font-size:15px; font-weight:800;
letter-spacing:2px; text-transform:uppercase;
padding:15px 34px;
background:var(--yellow); color:var(--black);
text-decoration:none; display:inline-block;
border:2px solid var(--yellow-border);
transition:all 0.2s;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.btn-primary:hover { background:#ffd700; transform:translateY(-2px); }
.btn-outline {
font-family:var(--font-display);
font-size:15px; font-weight:700;
letter-spacing:2px; text-transform:uppercase;
padding:13px 32px;
background:transparent; color:rgba(255,255,255,0.85);
text-decoration:none; display:inline-block;
border:2px solid rgba(255,255,255,0.45);
transition:all 0.2s;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.btn-outline:hover { border-color:var(--yellow); color:var(--yellow); }
/* ── ANNOUNCEMENT BAR — disabled ──────────── */
.announce-bar { display:none; }
/*
@keyframes scrollLeft {
0% { transform:translateX(0); }
100% { transform:translateX(-50%); }
}
.announce-bar { background:var(--black); color:rgba(255,255,255,0.75); padding:9px 0; overflow:hidden; white-space:nowrap; }
.announce-track { display:flex; width:max-content; animation:scrollLeft 28s linear infinite; font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.announce-track:hover { animation-play-state:paused; }
.announce-item { display:inline-flex; align-items:center; padding:0 36px; gap:12px; }
.announce-item strong { color:var(--yellow); }
.announce-item .dot { width:4px; height:4px; background:var(--yellow); border-radius:50%; flex-shrink:0; }
*/
/* ── NAVIGATION — DESKTOP ────────────────── */
.site-nav {
position:sticky; top:0; z-index:300;
background:var(--black);
border-bottom:1px solid rgba(255,255,255,0.08);
box-shadow:0 2px 16px rgba(0,0,0,0.25);
min-height:78px; overflow:visible;
}
.nav-inner {
max-width:1380px; margin:0 auto;
padding:0 40px; height:78px; min-height:78px;
display:grid; grid-template-columns:280px 1fr 280px;
align-items:center; gap:20px;
}
.nav-logo-wrap { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav-logo-wrap .nav-logo-img { max-height:58px; width:auto; display:block; filter:none; }
.custom-logo-link { display:flex; align-items:center; }
.custom-logo-link img, .custom-logo { max-height:58px; width:auto; height:auto; display:block; }
.nav-logo-text { font-family:var(--font-display); font-size:26px; font-weight:900; letter-spacing:3px; text-transform:uppercase; color:var(--white); }
.nav-logo-text .ag { color:var(--yellow); }
.nav-logo-text .wraps { background:var(--yellow); color:var(--black); padding:2px 8px; margin-left:2px; }
.nav-links {
display:flex; align-items:center;
justify-content:center; list-style:none; gap:0;
padding-top: 20px;
}
.nav-links a {
display:block; padding:4px 16px 0;
font-family:var(--font-display); font-size:14px; font-weight:700;
line-height:1; letter-spacing:1.5px; text-transform:uppercase;
color:rgba(255,255,255,0.65); text-decoration:none;
transition:color 0.2s; white-space:nowrap; position:relative;
}
.nav-links a::after { content:''; position:absolute; bottom:-1px; left:16px; right:16px; height:2px; background:var(--yellow); transform:scaleX(0); transition:transform 0.25s; }
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-links a.highlight { color:var(--yellow); }
.nav-actions { display:flex; align-items:center; gap:10px; }
.cart-btn {
position:relative; width:42px; height:42px;
background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
display:flex; align-items:center; justify-content:center;
text-decoration:none; transition:all 0.2s;
}
.cart-btn:hover { border-color:var(--yellow); background:rgba(245,200,0,0.1); }
.cart-btn svg { width:18px; height:18px; fill:var(--white); }
.cart-badge {
position:absolute; top:-5px; right:-5px;
background:var(--yellow); color:var(--black);
font-family:var(--font-mono); font-size:9px;
width:16px; height:16px;
display:flex; align-items:center; justify-content:center;
border-radius:50%; font-weight:700;
}
.account-btn-wrap { position:relative; }
.account-btn {
display:flex; align-items:center; gap:8px;
font-family:var(--font-display); font-size:13px; font-weight:800;
letter-spacing:1.5px; text-transform:uppercase;
padding:10px 16px;
background:rgba(255,255,255,0.07); color:var(--white);
border:1px solid rgba(255,255,255,0.12);
cursor:pointer; transition:all 0.2s; white-space:nowrap;
clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.account-btn:hover { background:var(--yellow); color:var(--black); border-color:var(--yellow-border); }
.account-btn:hover svg { fill:var(--black); }
.account-btn:hover .account-chevron { fill:var(--black); }
.account-btn svg { width:16px; height:16px; fill:var(--white); flex-shrink:0; }
.account-btn .account-chevron { width:12px; height:12px; fill:rgba(255,255,255,0.4); transition:transform 0.2s; flex-shrink:0; }
.account-btn-wrap.open .account-chevron { transform:rotate(180deg); }
.account-avatar {
width:24px; height:24px; background:var(--yellow);
border-radius:50%; display:none;
align-items:center; justify-content:center;
font-family:var(--font-display); font-size:13px; font-weight:900; color:var(--black); flex-shrink:0;
}
.account-btn-wrap.logged-in .account-avatar { display:flex; }
.account-btn-wrap.logged-in .account-icon { display:none; }
.account-btn-wrap.logged-in .account-btn { background:rgba(245,200,0,0.15); border-color:var(--yellow-border); color:var(--yellow); }
.account-dropdown {
position:absolute; top:calc(100% + 8px); right:0;
background:var(--white); border:1px solid var(--gray-200);
box-shadow:0 12px 40px rgba(0,0,0,0.12);
min-width:220px; z-index:500;
opacity:0; pointer-events:none;
transform:translateY(-6px);
transition:opacity 0.2s, transform 0.2s;
}
.account-btn-wrap.open .account-dropdown { opacity:1; pointer-events:auto; transform:translateY(0); }
.account-dropdown-header { padding:14px 18px 10px; border-bottom:1px solid var(--gray-200); }
.account-dropdown-name { font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--black); line-height:1; }
.account-dropdown-email { font-family:var(--font-mono); font-size:10px; color:var(--gray-400); margin-top:3px; }
.account-dropdown a, .account-dropdown button {
display:flex; align-items:center; gap:10px;
padding:11px 18px; width:100%;
font-family:var(--font-body); font-size:14px;
color:var(--gray-600); text-decoration:none;
background:none; border:none; cursor:pointer;
text-align:left; transition:all 0.15s;
}
.account-dropdown a:hover, .account-dropdown button:hover { background:var(--gray-100); color:var(--black); }
.account-dropdown a svg, .account-dropdown button svg { width:15px; height:15px; fill:var(--gray-400); flex-shrink:0; }
.account-dropdown a:hover svg, .account-dropdown button:hover svg { fill:var(--yellow-border); }
.account-dropdown .signout-btn { border-top:1px solid var(--gray-200); color:var(--gray-400); }
.dropdown-logged-in { display:none; }
.dropdown-logged-out { display:block; }
.account-btn-wrap.logged-in .dropdown-logged-in { display:block; }
.account-btn-wrap.logged-in .dropdown-logged-out { display:none; }
.mobile-nav-bar { display:none; }
/* ── MOBILE DRAWER ───────────────────────── */
.mob-drawer {
position:fixed; top:0; left:0; bottom:0;
width:300px; max-width:85vw;
background:var(--black); z-index:600;
transform:translateX(-100%);
transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
display:flex; flex-direction:column;
}
.mob-drawer.is-open { transform:translateX(0); }
.mob-drawer-overlay { position:fixed; inset:0; z-index:590; background:rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition:opacity 0.3s; }
.mob-drawer-overlay.is-open { opacity:1; pointer-events:auto; }
.mob-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid rgba(255,255,255,0.08); }
.mob-drawer-title { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--white); }
.mob-drawer-close {
width:36px; height:36px;
background:rgba(245,200,0,0.08); border:1px solid var(--yellow);
display:flex; align-items:center; justify-content:center;
cursor:pointer; color:var(--yellow); font-size:28px; font-weight:700; line-height:1;
}
.mob-drawer-close:hover { background:var(--yellow); color:var(--black); }
.mob-drawer-nav { display:flex; flex-direction:column; flex:1; overflow-y:auto; padding:16px 0; }
.mob-drawer-nav a {
display:block; padding:14px 24px;
font-family:var(--font-display); font-size:16px; font-weight:700;
letter-spacing:2px; text-transform:uppercase; color:var(--yellow);
text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.05); transition:all 0.15s;
}
.mob-drawer-nav a:hover { color:var(--white); padding-left:32px; background:rgba(255,255,255,0.05); }
.mob-drawer-footer { padding:20px 24px; border-top:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:10px; }
.mob-drawer-account-btn {
display:flex; align-items:center; gap:10px; padding:12px 20px;
background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
color:var(--white); font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:2px; text-transform:uppercase; text-decoration:none; transition:all 0.2s;
}
.mob-drawer-account-btn svg { width:16px; height:16px; fill:var(--white); flex-shrink:0; }
.mob-drawer-account-btn:hover { background:var(--yellow); color:var(--black); }
.mob-drawer-account-btn:hover svg { fill:var(--black); }
.mob-drawer-register-btn {
display:block; padding:12px 20px; background:var(--yellow); color:var(--black);
font-family:var(--font-display); font-size:13px; font-weight:800;
letter-spacing:2px; text-transform:uppercase; text-decoration:none; text-align:center; transition:background 0.2s;
}
.mob-drawer-register-btn:hover { background:#ffd700; }
/* ── HERO ────────────────────────────────── */
.hero {
background:var(--black);
min-height:90vh;
display:grid;
grid-template-columns:1fr 1fr;
position:relative;
overflow:hidden;
}
.hero::after {
content:''; position:absolute; top:0; left:50%;
width:100px; height:100%;
background:var(--black);
transform:skewX(-6deg) translateX(-50%);
z-index:3; pointer-events:none;
}
.hero-left {
display:flex;
flex-direction:column;
justify-content:center;
padding:40px 60px 70px 80px;
position:relative;
z-index:4;
}
.hero-right {
position:relative; z-index:4; overflow:hidden;
background:var(--black);
}
/* ── HERO IMAGES — desktop/mobile split ──── */
/* Base styles shared by both */
.hero-vehicle-img {
position:absolute;
inset:0;
z-index:1;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
filter:brightness(0.85);
transition:transform 6s ease;
}
.hero-right:hover .hero-vehicle-img { transform:scale(1.04); }
/* Desktop: show desktop image, hide mobile image */
.hero-vehicle-img--desktop { display:block; }
.hero-vehicle-img--mobile { display:none; }
.hero-img-placeholder {
display: none !important;
position:absolute; inset:0;
background:linear-gradient(135deg,#1a1a00 0%,#111100 50%,#0c0c0c 100%);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display);
font-size:clamp(48px,7vw,90px); font-weight:900;
color:rgba(245,200,0,0.06);
text-transform:uppercase; letter-spacing:-2px;
line-height:0.85; text-align:center; padding:40px;
user-select:none;
}
.hero-right-overlay {
position:absolute; inset:0; z-index:2;
background:linear-gradient(to top,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.05) 40%,transparent 70%);
}
/* Hero text */
.hero-eyebrow {
font-family:var(--font-mono);
font-size:11px; letter-spacing:3px; text-transform:uppercase;
color:var(--yellow); margin-bottom:20px;
display:flex; align-items:center; gap:12px;
}
.hero-eyebrow::before { content:''; width:28px; height:2px; background:var(--yellow); flex-shrink:0; }
.hero-h1 {
font-family:var(--font-display);
font-size:clamp(54px,6vw,88px);
font-weight:900; line-height:0.9;
letter-spacing:1px; text-transform:uppercase;
color:var(--white); margin-bottom:24px;
}
.hero-h1 .line-yellow { color:var(--yellow); display:block; }
.hero-sub { font-size:16px; font-weight:300; color:rgba(255,255,255,0.6); max-width:420px; margin-bottom:40px; line-height:1.75; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:52px; }
.hero-how { display:flex; gap:0; border:1px solid rgba(255,255,255,0.1); }
.hero-how-item { flex:1; padding:14px 18px; border-right:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; gap:10px; }
.hero-how-item:last-child { border-right:none; }
.hero-how-num { font-family:var(--font-display); font-size:28px; font-weight:900; color:var(--yellow); line-height:1; flex-shrink:0; }
.hero-how-text { font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); line-height:1.4; }
/* ── MOBILE HERO ─────────────────────────── */
@media(max-width:768px) {
.hero { grid-template-columns:1fr; min-height:90vh; }
.hero::after { display:none; }
/* hero-right becomes a full-screen backdrop */
.hero-right {
position:absolute; inset:0; z-index:0;
overflow:visible; /* allow PNG to bleed off edges */
background:var(--black);
}
/* Hide desktop image, show mobile Bronco PNG */
.hero-vehicle-img--desktop { display:none; }
.hero-vehicle-img--mobile {
display:block;
/* Override the inset fill — PNG sits bottom-right and bleeds */
position:absolute;
inset:auto;
bottom:-20px;
right:-20px;
width:105%;
height:auto;
object-fit:unset;
filter:none;
transform:none;
z-index:1;
}
.hero-right:hover .hero-vehicle-img--mobile { transform:none; }
/* Dual gradient: dark left for text readability, dark bottom */
.hero-right-overlay {
background:
linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.1) 100%),
linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 55%);
z-index:2;
}
.hero-img-placeholder { background:rgba(0,0,0,0.92); color:rgba(245,200,0,0.06); }
.hero-left {
position:relative;
z-index:4;
padding:55px 20px 80px;
min-height:90vh;
background:transparent;
}
.hero-how { display:none; }
}
/* ── TRUST BAR ───────────────────────────── */
@keyframes scrollLeft {
0% { transform:translateX(0); }
100% { transform:translateX(-50%); }
}
.trust-bar { background:var(--yellow); border-bottom:2px solid var(--yellow-border); overflow:hidden; width:100%; max-width:100vw; }
.trust-bar-inner {
display:flex; align-items:center;
width:max-content;
animation:scrollLeft 22s linear infinite;
flex-wrap:nowrap;
}
.trust-bar-inner:hover { animation-play-state:paused; }
.trust-item {
display:flex; align-items:center; gap:8px;
padding:13px 28px; border-right:1px solid rgba(0,0,0,0.1);
font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase;
color:rgba(0,0,0,0.75); white-space:nowrap; flex-shrink:0;
}
.trust-item:last-child { border-right:none; }
.trust-item svg { width:15px; height:15px; fill:var(--black); flex-shrink:0; }
/* ── SECTION LABELS & TITLES ─────────────── */
.section-label { font-family:var(--font-mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--yellow-border); display:block; margin-bottom:10px; }
.section-title { font-family:var(--font-display); font-size:clamp(34px,4.5vw,54px); font-weight:900; text-transform:uppercase; letter-spacing:2px; color:var(--black); line-height:0.95; margin-bottom:0; }
.section-subtitle { font-size:16px; font-weight:300; color:var(--gray-600); margin-top:14px; line-height:1.7; max-width:600px; }
/* ── 4 BUYING PATHS ──────────────────────── */
.buying-paths { padding:88px 40px; background:var(--off-white); border-bottom:1px solid var(--gray-200); }
.buying-paths-inner { max-width:1380px; margin:0 auto; }
.paths-header { margin-bottom:48px; }
.paths-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.path-card {
background:var(--white); border:2px solid var(--gray-200);
padding:36px 28px 32px; text-decoration:none; color:inherit;
position:relative; overflow:hidden; transition:all 0.3s;
display:flex; flex-direction:column; cursor:pointer;
}
.path-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.path-card::after { content:attr(data-num); position:absolute; bottom:-10px; right:16px; font-family:var(--font-display); font-size:88px; font-weight:900; color:rgba(0,0,0,0.04); line-height:1; pointer-events:none; transition:color 0.3s; }
.path-card:hover { border-color:var(--yellow-border); background:var(--white); transform:translateY(-5px); box-shadow:0 16px 48px rgba(0,0,0,0.09); }
.path-card:hover::before { transform:scaleX(1); }
.path-card:hover::after { color:rgba(245,200,0,0.08); }
.path-card:hover .path-arrow { transform:translateX(6px); color:var(--yellow-border); }
.path-card:hover .path-icon { background:var(--black); }
.path-card:hover .path-icon svg { fill:var(--yellow); }
.path-num { font-family:var(--font-mono); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gray-400); margin-bottom:20px; }
.path-icon { width:48px; height:48px; background:var(--yellow); display:flex; align-items:center; justify-content:center; margin-bottom:20px; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); transition:background 0.25s; }
.path-icon svg { width:22px; height:22px; fill:var(--black); transition:fill 0.25s; }
.path-title { font-family:var(--font-display); font-size:24px; font-weight:900; text-transform:uppercase; letter-spacing:1.5px; color:var(--black); line-height:1; margin-bottom:4px; }
.path-subtitle { font-family:var(--font-mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--yellow-border); margin-bottom:14px; }
.path-desc { font-size:13px; font-weight:400; color:var(--gray-600); line-height:1.7; margin-bottom:20px; flex:1; }
.path-steps { list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:24px; }
.path-steps li { font-size:12px; color:var(--black); display:flex; align-items:flex-start; gap:8px; line-height:1.4; }
.path-steps li::before { content:'→'; color:var(--yellow-border); flex-shrink:0; font-size:11px; margin-top:1px; }
.path-arrow { font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--black); display:flex; align-items:center; gap:8px; transition:all 0.25s; margin-top:auto; padding-top:16px; border-top:1px solid var(--gray-200); }
.path-arrow::after { content:'→'; }
.path-badge { position:absolute; top:16px; right:16px; background:var(--black); color:var(--yellow); font-family:var(--font-mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:3px 9px; }
.path-card.featured { background:var(--yellow); border-color:var(--yellow-border); }
.path-card.featured::after { color:rgba(0,0,0,0.06); }
.path-card.featured .path-num { color:rgba(0,0,0,0.4); }
.path-card.featured .path-subtitle { color:rgba(0,0,0,0.55); }
.path-card.featured .path-title { color:var(--black); }
.path-card.featured .path-desc { color:rgba(0,0,0,0.65); }
.path-card.featured .path-steps li { color:var(--black); }
.path-card.featured .path-steps li::before { color:var(--black); }
.path-card.featured .path-arrow { color:var(--black); border-top-color:rgba(0,0,0,0.15); }
.path-card.featured .path-icon { background:var(--black); }
.path-card.featured .path-icon svg { fill:var(--yellow); }
.path-card.featured .path-badge { background:var(--black); color:var(--yellow); }
.path-card.featured::before { background:var(--black); }
.path-card.featured:hover { background:var(--yellow); box-shadow:0 16px 48px rgba(0,0,0,0.15); }
/* ── CATEGORIES ──────────────────────────── */
.categories { background:var(--off-white); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); padding:80px 40px; }
.categories-inner { max-width:1300px; margin:0 auto; }
.cat-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:260px 260px; gap:3px; margin-top:48px; }
.cat-card { position:relative; overflow:hidden; background:var(--black); border:2px solid var(--black); display:flex; flex-direction:column; justify-content:flex-end; padding:28px; text-decoration:none; color:inherit; cursor:pointer; transition:border-color 0.25s; }
.cat-card:hover { border-color:var(--yellow); }
.cat-card:hover .cat-card-title { color:var(--yellow); }
.cat-card:hover .cat-corner { opacity:1; }
.cat-card.large { grid-row:1/3; }
.cat-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.2) 60%,transparent 100%); z-index:1; }
.cat-watermark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:clamp(60px,10vw,110px); font-weight:900; color:rgba(245,200,0,0.05); text-transform:uppercase; letter-spacing:-4px; pointer-events:none; z-index:0; }
.cat-content { position:relative; z-index:3; }
.cat-label { font-family:var(--font-mono); font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--yellow); margin-bottom:6px; }
.cat-card-title { font-family:var(--font-display); font-size:26px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--white); line-height:1; margin-bottom:6px; transition:color 0.2s; }
.cat-card.large .cat-card-title { font-size:38px; }
.cat-price { font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,0.5); letter-spacing:1px; }
.cat-corner { position:absolute; top:0; right:0; border-style:solid; border-width:0 32px 32px 0; border-color:transparent var(--yellow) transparent transparent; z-index:5; opacity:0; transition:opacity 0.2s; }
/* ── FEATURED PRODUCTS ───────────────────── */
.products { padding:96px 40px; background:var(--white); }
.products-inner { max-width:1300px; margin:0 auto; }
.products-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; gap:24px; flex-wrap:wrap; }
.view-all { font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--black); text-decoration:none; display:flex; align-items:center; gap:8px; transition:gap 0.2s; border-bottom:1px solid var(--gray-200); padding-bottom:2px; }
.view-all:hover { gap:14px; border-color:var(--yellow-border); }
.view-all::after { content:'→'; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.product-card { background:var(--white); border:2px solid var(--gray-200); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; position:relative; transition:all 0.25s; cursor:pointer; }
.product-card:hover { border-color:var(--yellow-border); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.08); }
.product-card:hover .product-img-inner { transform:scale(1.05); }
.product-badge { position:absolute; top:0; left:0; background:var(--yellow); color:var(--black); font-family:var(--font-mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:5px 12px; font-weight:700; z-index:5; }
.product-img { aspect-ratio:1; overflow:hidden; background:var(--gray-100); display:flex; align-items:center; justify-content:center; }
.product-img-inner { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.product-img-placeholder { font-family:var(--font-display); font-size:52px; font-weight:900; color:rgba(0,0,0,0.07); text-transform:uppercase; letter-spacing:2px; }
.product-body { padding:18px 20px; flex:1; display:flex; flex-direction:column; border-top:1px solid var(--gray-200); background:var(--white); }
.product-category { font-family:var(--font-mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--yellow-border); margin-bottom:6px; }
.product-name { font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--black); line-height:1.1; margin-bottom:auto; padding-bottom:14px; }
.product-footer { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--gray-200); }
.product-price { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--black); }
.product-price .from { font-size:10px; font-weight:400; color:var(--gray-400); font-family:var(--font-mono); letter-spacing:1px; display:block; margin-bottom:1px; }
.product-add { width:36px; height:36px; background:var(--yellow); display:flex; align-items:center; justify-content:center; transition:background 0.2s; flex-shrink:0; clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px)); }
.product-add svg { width:16px; height:16px; fill:var(--black); }
.product-add:hover { background:#ffd700; }
/* ── HOW IT WORKS ────────────────────────── */
.how-it-works { padding:96px 40px; background:var(--gray-100); border-top:1px solid var(--gray-200); }
.how-inner { max-width:1300px; margin:0 auto; }
.how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin-top:56px; }
.how-step { background:var(--white); border:2px solid var(--gray-200); padding:36px 28px; position:relative; transition:all 0.2s; }
.how-step:hover { border-color:var(--yellow-border); transform:translateY(-4px); }
.how-step-num { font-family:var(--font-display); font-size:72px; font-weight:900; color:var(--yellow); line-height:1; margin-bottom:16px; }
.how-step-title { font-family:var(--font-display); font-size:22px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--black); margin-bottom:10px; line-height:1; }
.how-step-desc { font-size:14px; font-weight:300; color:var(--gray-600); line-height:1.65; }
.how-step-arrow { position:absolute; top:50%; right:-18px; transform:translateY(-50%); width:36px; height:36px; background:var(--yellow); display:flex; align-items:center; justify-content:center; z-index:5; }
.how-step-arrow svg { width:16px; height:16px; fill:var(--black); }
.how-step:last-child .how-step-arrow { display:none; }
/* ── BUSINESS PORTAL ─────────────────────── */
.portal-band { background:var(--black); padding:80px 40px; position:relative; overflow:hidden; }
.portal-band::before { content:'PORTAL'; position:absolute; right:-20px; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-size:clamp(100px,16vw,200px); font-weight:900; color:rgba(255,255,255,0.03); letter-spacing:-8px; pointer-events:none; white-space:nowrap; }
.portal-band-inner { max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center; position:relative; z-index:2; }
.portal-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:12px; }
.portal-title { font-family:var(--font-display); font-size:clamp(38px,5vw,60px); font-weight:900; text-transform:uppercase; letter-spacing:2px; color:var(--white); line-height:0.92; margin-bottom:16px; }
.portal-title span { color:var(--yellow); }
.portal-sub { font-size:16px; font-weight:300; color:rgba(255,255,255,0.55); max-width:520px; margin-bottom:32px; line-height:1.7; }
.portal-features { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:32px; }
.portal-feat { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.6); }
.portal-feat svg { width:18px; height:18px; fill:var(--yellow); flex-shrink:0; }
.portal-cta-group { display:flex; flex-direction:column; align-items:center; gap:16px; flex-shrink:0; }
.portal-new { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.5); text-align:center; }
.portal-login { font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.35); text-decoration:none; display:flex; align-items:center; gap:6px; }
.portal-login::after { content:'→'; color:var(--yellow); }
.portal-login:hover { color:rgba(255,255,255,0.7); }
/* ── CLIENT LOGOS ────────────────────────── */
.clients { padding:64px 0; border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); overflow:hidden; background:var(--white); }
.clients-label { font-family:var(--font-mono); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gray-400); text-align:center; margin-bottom:36px; padding:0 40px; }
.clients-track-wrap { overflow:hidden; }
.clients-track { display:flex; animation:scrollLeft 40s linear infinite; width:max-content; }
.clients-track:hover { animation-play-state:paused; }
.client-item { display:flex; align-items:center; padding:0 60px; border-right:1px solid var(--gray-200); flex-shrink:0; gap:16px; min-width:240px; }
.client-item img { max-height:40px; width:auto; max-width:130px; object-fit:contain; filter:grayscale(1); opacity:0.5; transition:all 0.3s; flex-shrink:0; }
.clients-track:hover .client-item img { filter:grayscale(0); opacity:1; }
.client-name { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray-400); white-space:nowrap; transition:color 0.3s; }
.clients-track:hover .client-name { color:var(--black); }
/* ── TESTIMONIALS ────────────────────────── */
.testimonials { padding:96px 40px; background:var(--white); }
.testimonials-inner { max-width:1300px; margin:0 auto; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:48px; }
.testimonial-card { background:var(--off-white); border:2px solid var(--gray-200); padding:36px 32px; position:relative; transition:all 0.2s; }
.testimonial-card:hover { border-color:var(--yellow-border); }
.testimonial-card::before { content:'"'; position:absolute; top:-16px; right:24px; font-family:var(--font-display); font-size:120px; font-weight:900; color:rgba(245,200,0,0.15); line-height:1; pointer-events:none; }
.stars { display:flex; gap:3px; margin-bottom:16px; }
.star { color:var(--yellow); font-size:16px; }
.t-text { font-size:15px; font-weight:400; color:var(--gray-600); line-height:1.75; margin-bottom:24px; font-style:italic; }
.t-author { display:flex; align-items:center; gap:14px; padding-top:18px; border-top:1px solid var(--gray-200); }
.t-avatar { width:40px; height:40px; background:var(--yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0; clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px)); }
.t-avatar svg { width:20px; height:20px; fill:var(--black); }
.t-name { font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--black); line-height:1; margin-bottom:3px; }
.t-role { font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray-400); }
/* ── NATIONAL REACH ──────────────────────── */
.national { background:var(--yellow); padding:72px 40px; position:relative; overflow:hidden; }
.national::before { content:'USA'; position:absolute; right:-20px; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-size:clamp(120px,18vw,240px); font-weight:900; color:rgba(0,0,0,0.05); letter-spacing:-10px; pointer-events:none; }
.national-inner { max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; position:relative; z-index:2; }
.national-title { font-family:var(--font-display); font-size:clamp(40px,5vw,64px); font-weight:900; text-transform:uppercase; letter-spacing:2px; color:var(--black); line-height:0.92; margin-bottom:16px; }
.national-sub { font-size:17px; font-weight:400; color:rgba(0,0,0,0.65); margin-bottom:28px; line-height:1.7; max-width:480px; }
.national-points { list-style:none; display:flex; flex-direction:column; gap:10px; }
.national-points li { display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(0,0,0,0.7); }
.national-points li::before { content:''; width:20px; height:2px; background:var(--black); flex-shrink:0; }
.national-visual { background:var(--black); height:320px; display:flex; align-items:center; justify-content:center; clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px)); position:relative; overflow:hidden; }
.national-visual-text { font-family:var(--font-display); font-size:clamp(48px,8vw,100px); font-weight:900; color:rgba(245,200,0,0.1); text-transform:uppercase; letter-spacing:3px; text-align:center; line-height:0.9; padding:24px; }
.national-visual-badge { position:absolute; bottom:24px; right:24px; background:var(--yellow); color:var(--black); font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:8px 16px; font-weight:700; }
.national-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:28px; }
.national-stat { background:rgba(0,0,0,0.08); padding:18px 20px; text-align:center; }
.national-stat-num { font-family:var(--font-display); font-size:32px; font-weight:900; color:var(--black); line-height:1; }
.national-stat-label { font-family:var(--font-mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(0,0,0,0.55); margin-top:3px; }
/* ── FOOTER ──────────────────────────────── */
footer { background:var(--black); border-top:3px solid var(--yellow); }
.footer-top { max-width:1300px; margin:0 auto; padding:72px 40px 48px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:60px; }
.footer-logo-img { max-height:65px; width:auto; display:block; filter:none; }
.footer-logo { font-family:var(--font-display); font-size:30px; font-weight:900; letter-spacing:3px; color:var(--white); text-decoration:none; display:inline-flex; align-items:center; margin-bottom:14px; }
.footer-logo .wraps { background:var(--yellow); color:var(--black); padding:2px 8px; margin-left:2px; }
.footer-desc { font-size:14px; font-weight:300; color:rgba(255,255,255,0.45); line-height:1.7; margin-bottom:24px; max-width:280px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:13px; color:rgba(255,255,255,0.4); }
.footer-contact-item svg { width:14px; height:14px; fill:var(--yellow); flex-shrink:0; margin-top:2px; }
.footer-contact-item a { color:rgba(255,255,255,0.4); text-decoration:none; }
.footer-contact-item a:hover { color:var(--yellow); }
.social-row { display:flex; gap:8px; margin-top:20px; }
.social-btn { width:36px; height:36px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all 0.2s; }
.social-btn:hover { background:var(--yellow); border-color:var(--yellow); }
.social-btn:hover svg { fill:var(--black); }
.social-btn svg { width:14px; height:14px; fill:rgba(255,255,255,0.4); }
.footer-col-title { font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--white); margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.07); }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-links a { font-size:13px; color:rgba(255,255,255,0.4); text-decoration:none; transition:color 0.2s; display:flex; align-items:center; gap:7px; }
.footer-links a:hover { color:var(--yellow); }
.footer-links a::before { content:''; width:10px; height:1px; background:rgba(245,200,0,0.3); flex-shrink:0; opacity:0; transition:opacity 0.2s; }
.footer-links a:hover::before { opacity:1; }
.newsletter-incentive { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--yellow); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.newsletter-incentive::before { content:''; width:16px; height:2px; background:var(--yellow); }
.newsletter-label { font-size:13px; color:rgba(255,255,255,0.4); line-height:1.6; margin-bottom:14px; }
.newsletter-form { display:flex; }
.newsletter-form input { flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-right:none; padding:11px 16px; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:var(--white); outline:none; }
.newsletter-form input::placeholder { color:rgba(255,255,255,0.4); }
.newsletter-form input:focus { border-color:var(--yellow); }
.newsletter-form button { background:var(--yellow); border:none; padding:11px 20px; cursor:pointer; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; font-weight:700; color:var(--black); white-space:nowrap; transition:background 0.2s; }
.newsletter-form button:hover { background:#ffd700; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding:20px 40px; max-width:1300px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.45); }
.footer-bottom a { color:rgba(255,255,255,0.45); text-decoration:none; }
.footer-bottom a:hover { color:var(--yellow); }
/* ── MOBILE BOTTOM STICKY ────────────────── */
/* Base: hidden on desktop */
.mobile-sticky { display:none; }
/* ── ANIMATIONS ──────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
@keyframes slideRight{ from{opacity:0;transform:translateX(-20px);} to{opacity:1;transform:translateX(0);} }
.hero-eyebrow { animation:slideRight 0.6s ease both; }
.hero-h1 { animation:fadeUp 0.7s 0.1s ease both; }
.hero-sub { animation:fadeUp 0.7s 0.2s ease both; }
.hero-ctas { animation:fadeUp 0.7s 0.3s ease both; }
.hero-how { animation:fadeUp 0.7s 0.4s ease both; }
/* ── RESPONSIVE — TABLET (1100px) ───────── */
@media(max-width:1100px) {
.paths-grid { grid-template-columns:repeat(2,1fr); }
.cat-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
.cat-card.large { grid-column:span 2; grid-row:auto; }
.product-grid { grid-template-columns:repeat(2,1fr); }
.how-grid { grid-template-columns:repeat(2,1fr); }
.how-step-arrow { display:none; }
.testimonial-grid { grid-template-columns:1fr; }
.national-inner { grid-template-columns:1fr; }
.national-visual { display:none; }
.portal-band-inner { grid-template-columns:1fr; }
.portal-cta-group { flex-direction:row; align-items:center; }
.footer-top { grid-template-columns:1fr 1fr; }
}
/* ── RESPONSIVE — MOBILE (1024px) ──────── */
@media(max-width:1024px) {
.nav-links { display:none; }
.nav-actions { display:none; }
.nav-inner { grid-template-columns:1fr; padding:0; height:auto; }
.nav-logo-wrap { display:none; }
.mobile-nav-bar {
display:flex; align-items:center; justify-content:space-between;
padding:0 16px; height:60px; background:var(--black); gap:12px;
}
.mob-hamburger {
width:40px; height:40px; background:none; border:none;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:5px; cursor:pointer; flex-shrink:0;
}
.mob-hamburger span { display:block; width:22px; height:2px; background:var(--white); transition:all 0.3s; }
.mob-hamburger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mob-hamburger.is-open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.mob-hamburger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mob-logo { display:flex; align-items:center; flex:1; justify-content:center; }
.mob-logo img { max-height:46px; width:auto; filter:none; }
.custom-logo-link img, .custom-logo { max-height:46px; width:auto; }
.mob-logo-text { font-family:var(--font-display); font-size:22px; font-weight:900; letter-spacing:3px; text-transform:uppercase; color:var(--white); }
.mob-logo-text .ag { color:var(--yellow); }
.mob-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mob-account-btn { display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; color:var(--white); padding:6px; }
.mob-account-btn svg { width:18px; height:18px; fill:var(--white); }
.mob-account-label { font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--yellow); }
.mob-cart-btn { position:relative; width:36px; height:36px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; text-decoration:none; }
.mob-cart-btn svg { width:17px; height:17px; fill:var(--white); }
.mob-cart-badge { position:absolute; top:-4px; right:-4px; background:var(--yellow); color:var(--black); font-family:var(--font-mono); font-size:8px; width:15px; height:15px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-weight:700; }
.buying-paths,.products,.testimonials,.how-it-works,.categories,.national { padding:60px 20px; }
.buying-paths { padding:56px 20px; }
.portal-band { padding:60px 20px; }
.clients { padding:48px 0; }
.paths-grid { grid-template-columns:1fr; }
.cat-grid { grid-template-columns:1fr; grid-template-rows:auto; }
.cat-card.large { grid-column:auto; }
.product-grid { grid-template-columns:1fr 1fr; }
.how-grid { grid-template-columns:1fr; gap:3px; }
.national-stat-row { grid-template-columns:repeat(3,1fr); }
.portal-band-inner { grid-template-columns:1fr; }
.portal-cta-group { flex-direction:row; }
.footer-top { grid-template-columns:1fr; gap:40px; padding:48px 20px 32px; }
.footer-bottom { padding:16px 20px; }
/* Mobile sticky — show on mobile only, with safe area */
.mobile-sticky {
display:flex;
position:fixed; left:0; right:0; bottom:0; z-index:400;
background:var(--white); border-top:2px solid var(--yellow);
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
gap:8px; transform:translateZ(0);
}
.mobile-sticky a {
flex:1; text-align:center; padding:13px 8px;
font-family:var(--font-display); font-size:13px; font-weight:800;
letter-spacing:1.5px; text-transform:uppercase; text-decoration:none;
display:flex; align-items:center; justify-content:center; gap:6px;
}
.mobile-sticky a.shop-btn { background:var(--yellow); color:var(--black); }
.mobile-sticky a.portal-btn { background:var(--black); color:var(--yellow); }
.mobile-sticky a svg { width:16px; height:16px; }
.mobile-sticky a.shop-btn svg { fill:var(--black); }
.mobile-sticky a.portal-btn svg { fill:var(--yellow); }
body { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
}
/* ═══════════════════════════════════════════════════════
NEW SECTIONS — Homepage Rebuild 2026
Added: Shop by Vehicle · Featured Collections ·
How It Works (3-step) · Why AGWraps · Before & After ·
Shop by Industry · Rating Summary · FAQ · Final CTA
═══════════════════════════════════════════════════════ */
/* ── HERO TRUST ROW (replaces hero-how) ──── */
.hero-trust-row {
display:flex; flex-wrap:wrap; gap:12px 20px;
margin-top:32px; padding-top:24px;
border-top:1px solid rgba(255,255,255,0.1);
}
.hero-trust-item {
display:flex; align-items:center; gap:7px;
font-family:var(--font-mono); font-size:10px;
letter-spacing:1.5px; text-transform:uppercase;
color:rgba(255,255,255,0.5);
}
.hero-trust-item svg { width:14px; height:14px; fill:var(--yellow); flex-shrink:0; }
@media(max-width:768px) { .hero-trust-row { gap:10px 16px; } .hero-trust-item { font-size:9px; } }
/* ── VIEW ALL LINK (shared) ─────────────── */
.view-all {
font-family:var(--font-mono); font-size:11px;
letter-spacing:2px; text-transform:uppercase;
color:var(--black); text-decoration:none;
display:flex; align-items:center; gap:8px;
transition:gap 0.2s;
border-bottom:1px solid var(--gray-200); padding-bottom:2px;
}
.view-all:hover { gap:14px; border-color:var(--yellow-border); }
.view-all::after { content:'→'; }
/* ── SHOP BY VEHICLE ─────────────────────── */
.vehicle-section { padding:80px 40px; background:var(--black); }
.vehicle-inner { max-width:1380px; margin:0 auto; }
.vehicle-header {
display:flex; align-items:flex-end;
justify-content:space-between; gap:24px;
margin-bottom:40px;
}
.vehicle-header .section-label { color:rgba(245,200,0,0.6); }
.vehicle-header .section-title { color:var(--white); }
.vehicle-header .view-all { color:var(--yellow); border-color:rgba(245,200,0,0.2); }
.vehicle-header .view-all:hover { border-color:var(--yellow); }
.vehicle-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:3px;
}
.vehicle-card {
position:relative; overflow:hidden;
background:var(--black-soft);
border:1px solid rgba(255,255,255,0.06);
aspect-ratio:4/3;
display:flex; flex-direction:column;
justify-content:flex-end;
text-decoration:none; color:inherit;
transition:border-color 0.25s;
}
.vehicle-card:hover { border-color:var(--yellow); }
.vehicle-card:hover .vehicle-card-wm { opacity:0.12; }
.vehicle-card:hover .vehicle-card-cta { color:var(--yellow); }
.vehicle-card-wm {
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display);
font-size:clamp(36px,6vw,72px); font-weight:900;
color:rgba(245,200,0,0.05); letter-spacing:-2px;
text-transform:uppercase; pointer-events:none;
transition:opacity 0.3s; user-select:none;
}
/* When a category thumbnail image is set in WP admin,
.vehicle-card-img replaces the text watermark with
the actual photo, dimmed so card text stays readable. */
.vehicle-card-img {
position:absolute; inset:0;
background-image:var(--vehicle-img);
background-size:cover; background-position:center;
filter:none; /*brightness(0.55) saturate(0.9);*/
transition:transform 6s ease, filter 0.3s ease;
}
.vehicle-card:hover .vehicle-card-img { transform:scale(1.06); filter:brightness(0.65) saturate(1); }
.vehicle-card-overlay {
position:absolute; inset:0;
background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.1) 70%,transparent 100%);
}
.vehicle-card-content { position:relative; z-index:2; padding:18px 20px; }
.vehicle-card-title {
font-family:var(--font-display);
font-size:20px; font-weight:800;
text-transform:uppercase; letter-spacing:2px;
color:var(--white); line-height:1; margin-bottom:4px;
}
.vehicle-card-sub {
font-family:var(--font-mono); font-size:9px;
letter-spacing:2px; text-transform:uppercase;
color:rgba(255,255,255,0.4); margin-bottom:10px;
}
.vehicle-card-cta {
font-family:var(--font-display); font-size:12px;
font-weight:700; letter-spacing:2px;
text-transform:uppercase; color:rgba(255,255,255,0.5);
transition:color 0.2s;
}
@media(max-width:1100px) { .vehicle-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:768px) {
.vehicle-section { padding:56px 20px; }
.vehicle-grid { grid-template-columns:repeat(2,1fr); }
.vehicle-header { flex-direction:column; align-items:flex-start; gap:12px; }
}
/* ── PRINT & PROMO ───────────────────────── */
.print-promo { padding:72px 40px; background:var(--white); border-top:1px solid var(--gray-200); }
.print-promo-inner { max-width:1380px; margin:0 auto; }
.print-promo-header {
display:flex; align-items:flex-end;
justify-content:space-between; gap:24px; margin-bottom:36px;
}
.print-promo-grid {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:3px;
}
.print-card {
background:var(--off-white); border:1px solid var(--gray-200);
padding:20px 16px 18px;
text-decoration:none; color:inherit;
display:flex; flex-direction:column; align-items:flex-start;
gap:8px; position:relative; overflow:hidden;
transition:all 0.2s;
}
.print-card:hover {
background:var(--black); border-color:var(--black);
transform:translateY(-3px);
box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
.print-card:hover .print-card-icon { background:var(--yellow); }
.print-card:hover .print-card-icon svg { fill:var(--black); }
.print-card:hover .print-card-name { color:var(--white); }
.print-card:hover .print-card-sub { color:rgba(255,255,255,0.5); }
.print-card:hover .print-card-arrow { color:var(--yellow); }
.print-card-icon {
width:40px; height:40px;
background:var(--gray-200);
display:flex; align-items:center; justify-content:center;
flex-shrink:0; transition:background 0.2s;
clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.print-card-icon svg { width:20px; height:20px; fill:var(--gray-600); transition:fill 0.2s; }
.print-card-name {
font-family:var(--font-display);
font-size:15px; font-weight:800;
text-transform:uppercase; letter-spacing:1px;
color:var(--black); line-height:1;
transition:color 0.2s;
}
.print-card-sub {
font-family:var(--font-body); font-size:11px;
color:var(--gray-400); line-height:1.5;
flex:1; transition:color 0.2s;
}
.print-card-arrow {
font-size:16px; color:var(--gray-400);
margin-top:4px; transition:color 0.2s;
align-self:flex-end;
}
@media(max-width:1100px) { .print-promo-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:768px) {
.print-promo { padding:56px 20px; }
.print-promo-grid { grid-template-columns:repeat(2,1fr); }
.print-promo-header { flex-direction:column; align-items:flex-start; gap:12px; }
}
/* ── FEATURED COLLECTIONS ────────────────── */
.collections { padding:80px 40px; background:var(--off-white); border-top:1px solid var(--gray-200); }
.collections-inner { max-width:1380px; margin:0 auto; }
.collections-header {
display:flex; align-items:flex-end;
justify-content:space-between; gap:24px; margin-bottom:40px;
}
.collections-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:3px;
}
.collection-card {
background:var(--white); border:2px solid var(--gray-200);
padding:28px 28px 24px;
text-decoration:none; color:inherit;
display:flex; flex-direction:column; gap:12px;
position:relative; overflow:hidden;
transition:all 0.25s;
}
.collection-card::before {
content:''; position:absolute;
top:0; left:0; right:0; height:4px;
background:var(--yellow); transform:scaleX(0);
transform-origin:left; transition:transform 0.3s;
}
.collection-card:hover {
border-color:var(--yellow-border);
transform:translateY(-4px);
box-shadow:0 12px 40px rgba(0,0,0,0.08);
}
.collection-card:hover::before { transform:scaleX(1); }
.collection-card:hover .collection-card-cta { color:var(--yellow-border); transform:translateX(4px); }
/* Label variants — yellow = action, black = urgency */
.collection-card-label {
font-family:var(--font-mono); font-size:9px;
letter-spacing:3px; text-transform:uppercase;
font-weight:700; padding:5px 12px;
display:inline-block; align-self:flex-start;
clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);
}
.collection-card--yellow .collection-card-label {
background:var(--yellow); color:var(--black);
}
.collection-card--black .collection-card-label {
background:var(--black); color:var(--yellow);
}
.collection-card-body { flex:1; }
.collection-card-title {
font-family:var(--font-display);
font-size:22px; font-weight:800;
text-transform:uppercase; letter-spacing:1.5px;
color:var(--black); line-height:1; margin-bottom:8px;
}
.collection-card-sub { font-size:13px; color:var(--gray-600); line-height:1.6; }
.collection-card-cta {
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:2px; text-transform:uppercase;
color:var(--black); transition:all 0.2s; display:inline-block;
padding-top:14px; border-top:1px solid var(--gray-200);
}
@media(max-width:1100px) { .collections-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px) {
.collections { padding:56px 20px; }
.collections-grid { grid-template-columns:1fr; }
.collections-header { flex-direction:column; align-items:flex-start; gap:12px; }
}
/* ── HOW IT WORKS — 3-step ───────────────── */
.how-it-works { padding:88px 40px; background:var(--gray-100); border-top:1px solid var(--gray-200); }
.how-inner { max-width:1300px; margin:0 auto; }
.how-grid--3 {
display:grid; grid-template-columns:repeat(3,1fr);
gap:3px; margin-top:48px;
}
.how-step {
background:var(--white); border:2px solid var(--gray-200);
padding:40px 32px; position:relative; transition:all 0.2s;
}
.how-step:hover { border-color:var(--yellow-border); transform:translateY(-4px); }
.how-step--featured { background:var(--black); border-color:var(--yellow); }
.how-step--featured .how-step-num { color:var(--yellow); }
.how-step--featured .how-step-title { color:var(--white); }
.how-step--featured .how-step-desc { color:rgba(255,255,255,0.55); }
.how-step--featured .how-step-icon { background:var(--yellow); }
.how-step--featured .how-step-icon svg { fill:var(--black); }
.how-step-num {
font-family:var(--font-display); font-size:56px;
font-weight:900; color:var(--yellow); line-height:1; margin-bottom:16px;
}
.how-step-icon {
width:52px; height:52px; background:var(--gray-100);
display:flex; align-items:center; justify-content:center;
margin-bottom:20px;
clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.how-step-icon svg { width:24px; height:24px; fill:var(--black); }
.how-step-title {
font-family:var(--font-display); font-size:22px; font-weight:800;
text-transform:uppercase; letter-spacing:2px;
color:var(--black); margin-bottom:12px; line-height:1;
}
.how-step-desc { font-size:14px; font-weight:300; color:var(--gray-600); line-height:1.7; }
.how-cta {
display:flex; gap:12px; flex-wrap:wrap;
margin-top:48px; justify-content:center;
}
.btn-outline-dark {
font-family:var(--font-display); font-size:15px; font-weight:700;
letter-spacing:2px; text-transform:uppercase;
padding:13px 32px; background:transparent; color:var(--black);
border:2px solid var(--gray-200); text-decoration:none;
display:inline-block; transition:all 0.2s;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.btn-outline-dark:hover { border-color:var(--black); color:var(--black); }
@media(max-width:1100px) { .how-grid--3 { grid-template-columns:1fr; } }
@media(max-width:768px) { .how-it-works { padding:56px 20px; } }
/* ── WHY AGWRAPS ─────────────────────────── */
.why-section { padding:88px 40px; background:var(--white); }
.why-inner { max-width:1380px; margin:0 auto; }
.why-header { margin-bottom:48px; }
.why-sub {
font-size:16px; color:var(--gray-600); margin-top:12px;
max-width:600px; line-height:1.7;
}
.why-grid {
display:grid; grid-template-columns:repeat(3,1fr);
gap:3px; margin-bottom:48px;
}
.why-card {
background:var(--off-white); border:1px solid var(--gray-200);
padding:32px 28px; transition:all 0.2s;
}
.why-card:hover { border-color:var(--yellow-border); transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,0.06); }
.why-icon {
width:48px; height:48px; background:var(--yellow);
display:flex; align-items:center; justify-content:center;
margin-bottom:18px;
clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.why-icon svg { width:22px; height:22px; fill:var(--black); }
.why-card-title {
font-family:var(--font-display); font-size:18px; font-weight:800;
text-transform:uppercase; letter-spacing:1.5px;
color:var(--black); line-height:1; margin-bottom:10px;
}
.why-card-desc { font-size:13px; color:var(--gray-600); line-height:1.65; }
.why-stats {
display:grid; grid-template-columns:repeat(4,1fr);
gap:3px; background:var(--black);
}
.why-stat {
padding:28px 24px; text-align:center;
border-right:1px solid rgba(255,255,255,0.07);
}
.why-stat:last-child { border-right:none; }
.why-stat-num {
font-family:var(--font-display); font-size:clamp(32px,4vw,48px);
font-weight:900; color:var(--yellow); display:block; line-height:1; margin-bottom:8px;
}
.why-stat-label {
font-family:var(--font-mono); font-size:10px;
letter-spacing:2px; text-transform:uppercase;
color:rgba(255,255,255,0.4);
}
@media(max-width:1100px) { .why-grid { grid-template-columns:repeat(2,1fr); } .why-stats { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px) {
.why-section { padding:56px 20px; }
.why-grid { grid-template-columns:1fr; }
.why-stats { grid-template-columns:repeat(2,1fr); }
}
/* ── BEFORE & AFTER ──────────────────────── */
.before-after { padding:80px 40px; background:var(--black); }
.before-after-inner { max-width:1380px; margin:0 auto; }
.before-after-header {
display:flex; align-items:flex-end;
justify-content:space-between; gap:24px; margin-bottom:40px;
}
.before-after-header .section-label { color:rgba(245,200,0,0.6); }
.before-after-header .section-title { color:var(--white); }
.before-after-header .view-all { color:var(--yellow); border-color:rgba(245,200,0,0.2); }
.ba-grid {
display:grid; grid-template-columns:repeat(3,1fr);
gap:3px;
}
.ba-item { display:flex; flex-direction:column; }
.ba-slider {
background:var(--black-soft); border:1px solid rgba(255,255,255,0.08);
min-height:220px; overflow:hidden;
}
/* Ensure WP Before After plugin output fills container */
.ba-slider .wbais-wrap,
.ba-slider .wbais-container { width:100% !important; }
.ba-meta {
display:flex; align-items:center; justify-content:space-between;
padding:12px 0; gap:8px;
border-top:1px solid rgba(255,255,255,0.06); margin-top:8px;
}
.ba-type {
font-family:var(--font-display); font-size:14px; font-weight:700;
text-transform:uppercase; letter-spacing:1px; color:var(--white);
}
.ba-location {
font-family:var(--font-mono); font-size:10px;
letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.35);
}
.ba-placeholder-note {
margin-top:24px; padding:16px 20px;
background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
font-family:var(--font-mono); font-size:11px;
letter-spacing:1px; color:rgba(255,255,255,0.5); text-align:center;
}
.ba-placeholder-note a { color:var(--yellow); }
@media(max-width:1100px) { .ba-grid { grid-template-columns:1fr; } }
@media(max-width:768px) {
.before-after { padding:56px 20px; }
.before-after-header { flex-direction:column; align-items:flex-start; gap:12px; }
}
/* ── SHOP BY INDUSTRY ────────────────────── */
.industry-section { padding:80px 40px; background:var(--off-white); border-top:1px solid var(--gray-200); }
.industry-inner { max-width:1380px; margin:0 auto; }
.industry-header { margin-bottom:40px; }
.industry-sub {
font-size:16px; color:var(--gray-600); margin-top:12px;
max-width:560px; line-height:1.7;
}
.industry-grid {
display:grid; grid-template-columns:repeat(5,1fr);
gap:3px;
}
.industry-card {
background:var(--white); border:1px solid var(--gray-200);
padding:24px 20px 20px;
text-decoration:none; color:inherit;
display:flex; flex-direction:column; align-items:center;
gap:10px; text-align:center;
transition:all 0.2s;
}
.industry-card:hover { border-color:var(--yellow-border); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.07); background:var(--yellow-light); }
.industry-card:hover .industry-icon { background:var(--yellow); }
.industry-card:hover .industry-icon svg { fill:var(--black); }
.industry-card:hover .industry-arrow { color:var(--yellow-border); }
.industry-icon {
width:48px; height:48px; background:var(--gray-100);
display:flex; align-items:center; justify-content:center;
transition:all 0.2s;
clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.industry-icon svg { width:22px; height:22px; fill:var(--gray-600); transition:fill 0.2s; }
.industry-name {
font-family:var(--font-display); font-size:15px; font-weight:700;
text-transform:uppercase; letter-spacing:1.5px; color:var(--black); line-height:1;
}
.industry-arrow {
font-family:var(--font-mono); font-size:12px;
color:var(--gray-400); transition:color 0.2s;
}
@media(max-width:1100px) { .industry-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:768px) {
.industry-section { padding:56px 20px; }
.industry-grid { grid-template-columns:repeat(2,1fr); }
}
/* ── RATING SUMMARY ──────────────────────── */
.rating-summary {
display:flex; align-items:center; gap:20px;
flex-wrap:wrap; margin:24px 0 48px;
padding:20px 24px;
background:var(--yellow-light); border:1px solid var(--yellow-border);
}
.rating-stars { font-size:24px; color:var(--yellow); letter-spacing:2px; }
.rating-score {
font-family:var(--font-display); font-size:36px; font-weight:900;
color:var(--black); line-height:1;
}
.rating-score span { font-size:18px; color:var(--gray-400); font-weight:400; }
.rating-count {
font-family:var(--font-mono); font-size:11px;
letter-spacing:2px; text-transform:uppercase; color:var(--gray-600);
}
.rating-cta {
margin-left:auto;
font-family:var(--font-mono); font-size:11px;
letter-spacing:2px; text-transform:uppercase;
color:var(--black); text-decoration:none;
border-bottom:1px solid var(--yellow-border); padding-bottom:2px;
transition:border-color 0.2s;
}
.rating-cta:hover { border-color:var(--black); }
@media(max-width:768px) { .rating-cta { margin-left:0; } }
/* ── FAQ ─────────────────────────────────── */
.faq-section { padding:88px 40px; background:var(--white); border-top:1px solid var(--gray-200); }
.faq-inner { max-width:900px; margin:0 auto; }
.faq-header { margin-bottom:48px; }
.faq-grid { display:flex; flex-direction:column; gap:3px; }
.faq-item { border:1px solid var(--gray-200); overflow:hidden; }
.faq-question {
width:100%; padding:20px 24px;
background:var(--white); border:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:16px;
font-family:var(--font-display); font-size:18px; font-weight:700;
text-transform:uppercase; letter-spacing:1px;
color:var(--black); text-align:left;
transition:background 0.15s;
}
.faq-question:hover { background:var(--gray-100); }
.faq-question[aria-expanded="true"] { background:var(--black); color:var(--yellow); }
.faq-question[aria-expanded="true"] .faq-chevron { fill:var(--yellow); transform:rotate(180deg); }
.faq-chevron {
width:18px; height:18px; fill:var(--gray-400);
flex-shrink:0; transition:transform 0.25s, fill 0.15s;
}
.faq-answer { padding:0 24px; background:var(--off-white); border-top:1px solid var(--gray-200); }
.faq-answer:not([hidden]) { padding:20px 24px; }
.faq-answer p { font-size:15px; color:var(--gray-600); line-height:1.75; }
@media(max-width:768px) {
.faq-section { padding:56px 20px; }
.faq-question { font-size:15px; padding:16px 18px; }
}
/* ── FINAL CTA ───────────────────────────── */
.final-cta {
background:var(--black); padding:88px 40px 0;
position:relative; overflow:hidden;
}
.final-cta::before {
content:'AGWRAPS'; position:absolute;
right:-40px; top:50%; transform:translateY(-50%);
font-family:var(--font-display); font-size:clamp(80px,14vw,180px);
font-weight:900; color:rgba(255,255,255,0.02);
letter-spacing:-8px; pointer-events:none; white-space:nowrap;
}
.final-cta-inner {
max-width:1300px; margin:0 auto;
display:grid; grid-template-columns:1fr 1fr;
gap:80px; align-items:start;
position:relative; z-index:2;
padding-bottom:64px;
}
/* LEFT */
.final-cta-title {
font-family:var(--font-display);
font-size:clamp(40px,5.5vw,72px); font-weight:900;
text-transform:uppercase; letter-spacing:2px;
color:var(--white); line-height:0.9; margin-bottom:36px;
}
.final-cta-buttons { display:flex; gap:12px; flex-wrap:wrap; }
/* RIGHT — checklist only */
.final-cta-right {
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
}
.final-cta-reasons { padding:32px 36px; }
.final-cta-reasons-title,
.final-cta-contact-title {
font-family:var(--font-display);
font-size:16px; font-weight:800;
letter-spacing:3px; text-transform:uppercase;
color:var(--white); margin-bottom:18px;
display:flex; align-items:center; gap:10px;
}
.final-cta-reasons-title::before,
.final-cta-contact-title::before {
content:''; width:24px; height:2px;
background:var(--yellow); flex-shrink:0;
}
.final-cta-checklist {
list-style:none; display:flex;
flex-direction:column; gap:11px;
}
.final-cta-checklist li {
display:flex; align-items:center; gap:12px;
font-family:var(--font-body); font-size:15px;
color:rgba(255,255,255,0.75);
}
.final-cta-checklist li::before {
content:'✓';
width:22px; height:22px; flex-shrink:0;
background:var(--yellow); color:var(--black);
font-size:12px; font-weight:900;
display:flex; align-items:center; justify-content:center;
border-radius:50%;
}
/* NEED HELP — full width, centered below grid */
.final-cta-help {
position:relative; z-index:2;
border-top:1px solid rgba(255,255,255,0.08);
padding:36px 40px;
display:flex; flex-direction:column;
align-items:center; gap:24px;
text-align:center;
}
.final-cta-help .final-cta-contact-title {
justify-content:center; margin-bottom:0;
}
.final-cta-help-items {
display:flex; align-items:center;
justify-content:center;
gap:48px; flex-wrap:wrap;
}
.final-cta-contact-item {
display:flex; align-items:center; gap:10px;
font-size:15px; color:rgba(255,255,255,0.7);
}
.final-cta-contact-item svg { width:18px; height:18px; fill:var(--yellow); flex-shrink:0; }
.final-cta-contact-item a { color:inherit; text-decoration:none; transition:color 0.2s; }
.final-cta-contact-item a:hover { color:var(--yellow); }
@media(max-width:1100px) {
.final-cta-inner { grid-template-columns:1fr; gap:40px; }
.final-cta-help-items { gap:28px; }
}
@media(max-width:768px) {
.final-cta { padding:56px 20px 0; }
.final-cta-buttons { flex-direction:column; }
.final-cta-reasons { padding:24px 20px; }
.final-cta-help { padding:28px 20px; }
.final-cta-help-items { flex-direction:column; gap:16px; align-items:flex-start; text-align:left; }
.final-cta-help .final-cta-contact-title { justify-content:flex-start; }
}
/* ── RESPONSIVE — new sections tablet/1100 ── */
@media(max-width:1100px) {
.why-grid { grid-template-columns:repeat(2,1fr); }
.why-stats { grid-template-columns:repeat(2,1fr); }
.testimonial-grid { grid-template-columns:1fr; }
.ba-grid { grid-template-columns:1fr; gap:20px; }
.collections-grid { grid-template-columns:repeat(2,1fr); }
}
/* ── LAZY LOAD — Intersection Observer fade-in ── */
.hp-lazy { opacity:0; transform:translateY(20px); transition:opacity 0.5s ease, transform 0.5s ease; }
.hp-lazy.is-visible { opacity:1; transform:translateY(0); }
/* ═══════════════════════════════════════════
404 — PAGE NOT FOUND
═══════════════════════════════════════════ */
.error-404 {
background:var(--black);
min-height:70vh;
display:flex; align-items:center; justify-content:center;
padding:80px 40px;
position:relative; overflow:hidden;
}
.error-404::before {
content:'404'; position:absolute;
left:50%; top:50%; transform:translate(-50%,-50%);
font-family:var(--font-display);
font-size:clamp(200px,40vw,520px); font-weight:900;
color:rgba(245,200,0,0.03); letter-spacing:-10px;
pointer-events:none; white-space:nowrap; line-height:1;
}
.error-404-inner {
max-width:640px; margin:0 auto;
text-align:center; position:relative; z-index:2;
}
.error-404-code {
font-family:var(--font-display);
font-size:clamp(64px,10vw,120px); font-weight:900;
color:var(--yellow); line-height:1; letter-spacing:-2px;
margin-bottom:8px;
}
.error-404-title {
font-family:var(--font-display);
font-size:clamp(28px,4vw,44px); font-weight:900;
text-transform:uppercase; letter-spacing:2px;
color:var(--white); line-height:1; margin-bottom:14px;
}
.error-404-sub {
font-size:16px; font-weight:300;
color:rgba(255,255,255,0.5);
max-width:460px; margin:0 auto 36px;
line-height:1.7;
}
/* Search bar */
.error-404-search {
display:flex; max-width:480px; margin:0 auto 32px;
}
.error-404-search-input {
flex:1; padding:15px 18px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12); border-right:none;
font-family:var(--font-body); font-size:15px; color:var(--white);
outline:none; transition:border-color 0.2s;
}
.error-404-search-input::placeholder { color:rgba(255,255,255,0.3); }
.error-404-search-input:focus { border-color:var(--yellow); }
.error-404-search-btn {
width:54px; flex-shrink:0;
background:var(--yellow); border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background 0.2s;
}
.error-404-search-btn:hover { background:#ffd700; }
.error-404-search-btn svg { width:20px; height:20px; fill:var(--black); }
/* CTAs */
.error-404-ctas {
display:flex; gap:12px; flex-wrap:wrap;
justify-content:center; margin-bottom:48px;
}
.error-404-ctas .btn-outline-dark {
color:rgba(255,255,255,0.85); border-color:rgba(255,255,255,0.2);
}
.error-404-ctas .btn-outline-dark:hover { border-color:var(--yellow); color:var(--yellow); }
/* Helpful links */
.error-404-links { border-top:1px solid rgba(255,255,255,0.08); padding-top:32px; }
.error-404-links-label {
display:block; font-family:var(--font-mono);
font-size:11px; letter-spacing:3px; text-transform:uppercase;
color:rgba(255,255,255,0.35); margin-bottom:18px;
}
.error-404-links-grid {
display:flex; flex-wrap:wrap; gap:10px 24px;
justify-content:center;
}
.error-404-links-grid a {
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
color:rgba(255,255,255,0.6); text-decoration:none;
position:relative; transition:color 0.2s;
}
.error-404-links-grid a::after {
content:''; position:absolute; bottom:-3px; left:0; right:0;
height:1px; background:var(--yellow);
transform:scaleX(0); transition:transform 0.25s;
}
.error-404-links-grid a:hover { color:var(--yellow); }
.error-404-links-grid a:hover::after { transform:scaleX(1); }
@media(max-width:768px) {
.error-404 { padding:56px 20px; min-height:60vh; }
.error-404-ctas { flex-direction:column; }
.error-404-links-grid { gap:14px 18px; }
}
/* ═══════════════════════════════════════════
LOGIN / REGISTER — My Account
(page header now comes from the global
.cart-page-header rules near the top of
this file — see "GLOBAL — FULL-BLEED
CUSTOM TEMPLATES")
═══════════════════════════════════════════ */
.auth-body {
background:var(--off-white);
min-height:70vh;
}
.auth-inner {
max-width:1100px;
margin:0 auto;
padding:48px 40px 0;
display:flex !important;
flex-wrap:wrap;
gap:3px;
}
.auth-inner--split > .auth-panel {
flex:1 1 460px; /* grow/shrink, base width before wrapping to single column */
}
.auth-inner--single {
max-width:520px;
}
.auth-inner--single > .auth-panel {
flex:1 1 100%;
}
/* ── Panel ── */
.auth-panel {
background:var(--white) !important;
border:1px solid var(--gray-200);
padding:40px;
box-sizing:border-box;
display:flex;
flex-direction:column;
min-width:0;
}
.auth-panel--register {
background:var(--black) !important;
border-color:var(--black);
}
/* Blanket fix: every element inside the dark panel gets
a light text color by default. Specific overrides for
labels/links/inputs follow below and win on specificity. */
.auth-panel--register,
.auth-panel--register * {
color:rgba(255,255,255,0.75);
}
.auth-panel--register a {
color:var(--yellow);
}
.auth-panel-header { margin-bottom:28px; }
.auth-panel-label {
font-family:var(--font-mono); font-size:10px;
letter-spacing:3px; text-transform:uppercase;
color:var(--yellow-border); display:block; margin-bottom:8px;
}
.auth-panel--register .auth-panel-label { color:var(--yellow); }
.auth-panel-title {
font-family:var(--font-display);
font-size:30px; font-weight:900;
text-transform:uppercase; letter-spacing:2px;
color:var(--black); line-height:1; margin-bottom:10px;
}
.auth-panel--register .auth-panel-title { color:var(--white); }
.auth-panel-sub {
font-size:14px; font-weight:300;
color:var(--gray-600); line-height:1.6; max-width:340px;
}
.auth-panel--register .auth-panel-sub { color:rgba(255,255,255,0.5); }
/* ── Form fields ── */
.auth-form { display:flex; flex-direction:column; }
.auth-field { margin-bottom:18px; }
.auth-field label {
display:block; font-family:var(--font-body);
font-size:13px; font-weight:600;
color:var(--black); margin-bottom:6px;
}
.auth-panel--register .auth-field label { color:rgba(255,255,255,0.85); }
.auth-required { color:var(--yellow-border); }
.auth-input {
width:100%; padding:13px 16px;
border:1px solid var(--gray-200);
background:var(--white);
font-family:var(--font-body); font-size:15px; color:var(--black);
outline:none; transition:border-color 0.2s;
appearance:none; -webkit-appearance:none; border-radius:0;
}
.auth-input::placeholder { color:var(--gray-400); }
.auth-input:focus { border-color:var(--yellow-border); }
.auth-panel--register .auth-input {
background:rgba(255,255,255,0.05);
border-color:rgba(255,255,255,0.12);
color:var(--white);
}
.auth-panel--register .auth-input::placeholder { color:rgba(255,255,255,0.3); }
.auth-panel--register .auth-input:focus { border-color:var(--yellow); }
/* ── Row: remember me + forgot ── */
.auth-row {
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:12px; margin-bottom:24px;
}
.auth-check-label {
display:flex; align-items:center; gap:9px;
cursor:pointer; font-size:13px; color:var(--gray-600);
}
.auth-check { display:none; }
.auth-check-custom {
width:17px; height:17px; flex-shrink:0;
border:2px solid var(--gray-200);
display:flex; align-items:center; justify-content:center;
transition:all 0.15s;
}
.auth-check:checked + .auth-check-custom { background:var(--yellow); border-color:var(--yellow-border); }
.auth-check:checked + .auth-check-custom::after {
content:''; width:7px; height:4px;
border-left:2px solid var(--black);
border-bottom:2px solid var(--black);
transform:rotate(-45deg) translateY(-1px); display:block;
}
.auth-forgot {
font-family:var(--font-mono); font-size:10px;
letter-spacing:1.5px; text-transform:uppercase;
color:var(--gray-400); text-decoration:underline;
}
.auth-forgot:hover { color:var(--black); }
/* ── Privacy note (register) ── */
.auth-note,
.auth-privacy {
font-size:12px; line-height:1.6;
color:var(--gray-400); margin-bottom:20px;
}
.auth-panel--register .auth-note,
.auth-panel--register .auth-privacy { color:rgba(255,255,255,0.35); }
.auth-privacy a { color:var(--yellow-border); }
.auth-panel--register .auth-privacy a { color:var(--yellow); }
/* ── Submit ── */
.auth-submit {
width:100%; padding:15px 24px;
background:var(--yellow); color:var(--black);
border:2px solid var(--yellow-border);
font-family:var(--font-display); font-size:15px; font-weight:800;
letter-spacing:2px; text-transform:uppercase;
cursor:pointer; transition:all 0.2s;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
margin-top:auto;
}
.auth-submit:hover { background:#ffd700; transform:translateY(-1px); }
.auth-submit--alt {
background:var(--yellow); color:var(--black); border-color:var(--yellow);
}
/* ── Trust row below panels ── */
.auth-trust-row {
max-width:1100px; margin:0 auto;
padding:32px 40px 64px;
display:flex; gap:0; flex-wrap:wrap;
border-top:1px solid var(--gray-200); margin-top:32px;
}
.auth-trust-item {
flex:1; min-width:180px;
display:flex; align-items:center; gap:10px;
padding:20px 24px 0;
font-family:var(--font-mono); font-size:11px;
letter-spacing:2px; text-transform:uppercase;
color:var(--gray-400);
}
.auth-trust-item svg { width:18px; height:18px; fill:var(--yellow-border); flex-shrink:0; }
/* ── Responsive ── */
@media(max-width:1024px) {
.auth-inner--split { grid-template-columns:1fr; }
}
@media(max-width:768px) {
.auth-inner { padding:32px 16px 0; }
.auth-panel { padding:28px 24px; }
.auth-panel-title { font-size:24px; }
.auth-row { flex-direction:column; align-items:flex-start; gap:14px; }
.auth-trust-row { padding:24px 16px 48px; flex-direction:column; gap:14px; }
.auth-trust-item { padding:0; min-width:0; }
}
/* ═══════════════════════════════════════════
MY ACCOUNT — Sidebar layout
═══════════════════════════════════════════ */
.acct-body { background:var(--off-white); min-height:70vh; }
.acct-inner {
max-width:1380px; margin:0 auto; padding:0 40px 80px;
display:grid; grid-template-columns:280px 1fr;
gap:24px; align-items:start;
}
/* ── Sidebar ── */
.acct-sidebar {
min-width:0; width:100%;
display:flex; flex-direction:column; gap:16px;
}
.acct-user-card {
background:var(--black); border:1px solid var(--black);
padding:22px; display:flex; align-items:center; gap:14px;
}
.acct-user-avatar {
width:46px; height:46px; flex-shrink:0;
background:var(--yellow); color:var(--black);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-size:20px; font-weight:900;
}
.acct-user-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.acct-user-name {
font-family:var(--font-display); font-size:16px; font-weight:800;
text-transform:uppercase; letter-spacing:1px; color:var(--white);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.acct-user-email {
font-family:var(--font-mono); font-size:10px;
color:rgba(255,255,255,0.4);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.acct-nav {
background:var(--white); border:1px solid var(--gray-200);
display:flex; flex-direction:column;
}
.acct-nav-link {
display:flex; align-items:center; gap:12px;
padding:13px 18px;
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
color:var(--gray-600); text-decoration:none;
border-bottom:1px solid var(--gray-200);
transition:all 0.15s; position:relative;
}
.acct-nav-link:last-child { border-bottom:none; }
.acct-nav-link svg { width:16px; height:16px; fill:var(--gray-400); flex-shrink:0; transition:fill 0.15s; }
.acct-nav-link:hover { background:var(--gray-100); color:var(--black); }
.acct-nav-link:hover svg { fill:var(--yellow-border); }
.acct-nav-link--active {
background:var(--black); color:var(--white);
}
.acct-nav-link--active svg { fill:var(--yellow); }
.acct-nav-link--active:hover { background:var(--black); color:var(--white); }
.acct-nav-active-dot {
position:absolute; left:0; top:0; bottom:0; width:3px;
background:var(--yellow);
}
.acct-nav-link--logout {
color:var(--gray-400);
}
.acct-nav-link--logout svg { fill:var(--gray-400); }
.acct-nav-link--logout:hover { color:#c0392b; }
.acct-nav-link--logout:hover svg { fill:#c0392b; }
/* Business Portal teaser */
.acct-portal-teaser {
background:var(--yellow-light); border:1px solid var(--yellow-border);
padding:20px;
}
.acct-portal-label {
display:block; font-family:var(--font-mono); font-size:9px;
letter-spacing:2px; text-transform:uppercase;
color:var(--yellow-border); margin-bottom:8px;
}
.acct-portal-text { font-size:13px; color:var(--gray-600); line-height:1.6; margin-bottom:12px; }
.acct-portal-link {
font-family:var(--font-display); font-size:12px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
color:var(--black); text-decoration:none;
border-bottom:1px solid var(--black); padding-bottom:2px;
}
.acct-portal-link:hover { color:var(--yellow-border); border-color:var(--yellow-border); }
/* ── Main content ── */
.acct-main { min-width:0; width:100%; display:flex; flex-direction:column; gap:16px; }
/* Welcome */
.acct-welcome {
background:var(--black); border:1px solid var(--black);
padding:28px 30px;
}
.acct-welcome-title {
font-family:var(--font-display); font-size:clamp(22px,3vw,30px); font-weight:900;
text-transform:uppercase; letter-spacing:1.5px;
color:var(--white); line-height:1; margin-bottom:8px;
}
.acct-welcome-sub { font-size:14px; color:rgba(255,255,255,0.5); line-height:1.6; }
/* Quick stats */
.acct-stats {
display:grid; grid-template-columns:1fr 1fr 1fr;
gap:3px;
}
.acct-stat {
background:var(--white); border:1px solid var(--gray-200);
padding:24px; text-align:center;
}
.acct-stat-num {
display:block; font-family:var(--font-display); font-size:40px; font-weight:900;
color:var(--black); line-height:1; margin-bottom:6px;
}
.acct-stat-label {
font-family:var(--font-mono); font-size:10px; letter-spacing:2px;
text-transform:uppercase; color:var(--gray-400);
}
.acct-stat--cta { display:flex; align-items:center; justify-content:center; }
.acct-stat-shop {
display:flex; flex-direction:column; align-items:center; gap:8px;
text-decoration:none; color:var(--black);
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
transition:color 0.15s;
}
.acct-stat-shop svg { width:24px; height:24px; fill:var(--yellow-border); transition:fill 0.15s; }
.acct-stat-shop:hover { color:var(--yellow-border); }
.acct-stat-shop:hover svg { fill:var(--black); }
/* Block (shared pattern) */
.acct-block { background:var(--white); border:1px solid var(--gray-200); }
.acct-block-header {
display:flex; align-items:center; gap:14px;
padding:18px 22px; border-bottom:1px solid var(--gray-200);
background:var(--black);
}
.acct-block-num {
width:34px; height:34px; flex-shrink:0;
background:var(--yellow);
display:flex; align-items:center; justify-content:center;
clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.acct-block-num svg { width:17px; height:17px; fill:var(--black); }
.acct-block-title {
font-family:var(--font-display); font-size:17px; font-weight:800;
text-transform:uppercase; letter-spacing:2px; color:var(--white);
line-height:1; flex:1;
}
.acct-view-all {
font-family:var(--font-mono); font-size:10px; letter-spacing:2px;
text-transform:uppercase; color:var(--yellow); text-decoration:none;
white-space:nowrap; transition:color 0.15s;
}
.acct-view-all:hover { color:var(--white); }
.acct-block-body { padding:22px; }
.acct-block-body--no-pad { padding:0; }
/* Empty state */
.acct-empty {
display:flex; flex-direction:column; align-items:center;
gap:14px; padding:48px 22px; text-align:center;
}
.acct-empty svg { width:40px; height:40px; fill:var(--gray-200); }
.acct-empty p { font-size:14px; color:var(--gray-400); }
/* Order rows */
.acct-orders-list { display:flex; flex-direction:column; }
.acct-order-row {
display:grid;
grid-template-columns:56px 1fr auto auto auto;
align-items:center; gap:16px;
padding:16px 22px; border-bottom:1px solid var(--gray-200);
}
.acct-order-row:last-child { border-bottom:none; }
.acct-order-thumb { position:relative; flex-shrink:0; }
.acct-order-thumb img { width:56px; height:56px; object-fit:cover; border:1px solid var(--gray-200); display:block; }
.acct-order-thumb-count {
position:absolute; bottom:-6px; right:-6px;
width:22px; height:22px; background:var(--black); color:var(--yellow);
border-radius:50%; font-family:var(--font-mono); font-size:10px; font-weight:700;
display:flex; align-items:center; justify-content:center;
}
.acct-order-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.acct-order-number {
font-family:var(--font-display); font-size:14px; font-weight:700;
text-transform:uppercase; letter-spacing:0.5px; color:var(--black);
}
.acct-order-date {
font-family:var(--font-mono); font-size:10px; letter-spacing:1px;
text-transform:uppercase; color:var(--gray-400);
}
.acct-status-badge {
display:inline-block; padding:5px 12px;
font-family:var(--font-mono); font-size:9px; letter-spacing:2px;
text-transform:uppercase; font-weight:700;
background:var(--gray-100); color:var(--gray-600);
white-space:nowrap;
}
.acct-status-badge--completed { background:#edfaf3; color:#1a7a4a; }
.acct-status-badge--processing { background:var(--yellow-light); color:#9a7d00; }
.acct-status-badge--on-hold { background:#eef3fd; color:#1a4a8a; }
.acct-status-badge--cancelled,
.acct-status-badge--failed { background:#fdf0ee; color:#c0392b; }
.acct-status-badge--refunded { background:var(--gray-100); color:var(--gray-400); }
.acct-order-total {
font-family:var(--font-display); font-size:16px; font-weight:800;
color:var(--black); white-space:nowrap;
}
.acct-order-actions { display:flex; gap:8px; flex-shrink:0; }
.acct-order-btn {
display:flex; align-items:center; gap:6px;
padding:9px 16px;
font-family:var(--font-display); font-size:11px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
text-decoration:none; white-space:nowrap;
border:1px solid var(--gray-200); color:var(--black);
transition:all 0.15s;
}
.acct-order-btn svg { width:13px; height:13px; }
.acct-order-btn--view:hover { border-color:var(--black); }
.acct-order-btn--reorder {
background:var(--yellow); border-color:var(--yellow-border); color:var(--black);
}
.acct-order-btn--reorder svg { fill:var(--black); }
.acct-order-btn--reorder:hover { background:#ffd700; }
/* Addresses */
.acct-addresses-grid {
display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.acct-address { font-style:normal; font-size:14px; color:var(--gray-600); line-height:1.8; }
.acct-address-empty { font-size:14px; color:var(--gray-400); margin-bottom:14px; }
/* ── Responsive ── */
@media(max-width:1024px) {
.acct-inner { grid-template-columns:1fr; }
.acct-sidebar { order:2; }
.acct-main { order:1; }
}
@media(max-width:768px) {
.acct-inner { padding:0 16px 60px; gap:16px; }
.acct-stats { grid-template-columns:1fr 1fr; }
.acct-stat--cta { grid-column:span 2; }
.acct-order-row {
grid-template-columns:48px 1fr; grid-template-areas:
"thumb info"
"thumb status"
"actions actions";
row-gap:8px;
}
.acct-order-thumb { grid-area:thumb; }
.acct-order-info { grid-area:info; }
.acct-order-status { grid-area:status; }
.acct-order-total { display:none; } /* shown via status row on mobile to save space */
.acct-order-actions{ grid-area:actions; padding-top:8px; border-top:1px solid var(--gray-200); }
.acct-addresses-grid { grid-template-columns:1fr; }
.acct-block-header { padding:14px 18px; }
.acct-block-body { padding:18px; }
}
/* ═══════════════════════════════════════════
HEADER SEARCH — Trigger buttons + Overlay
═══════════════════════════════════════════ */
/* ── Trigger buttons (match cart-btn/account-btn style) ── */
.search-trigger {
width:42px; height:42px;
background:rgba(255,255,255,0.07) !important;
border:1px solid rgba(255,255,255,0.12) !important;
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:all 0.2s; flex-shrink:0;
color:#ffffff !important;
}
.search-trigger:hover {
border-color:var(--yellow) !important;
background:rgba(245,200,0,0.1) !important;
}
.mob-search-btn {
width:36px; height:36px;
background:rgba(255,255,255,0.07) !important;
border:1px solid rgba(255,255,255,0.12) !important;
display:flex; align-items:center; justify-content:center;
cursor:pointer; flex-shrink:0;
color:#ffffff !important;
}
/* Force icon visibility — GP overrides fill on button/svg elements */
.site-nav .search-trigger svg,
.site-nav .search-trigger svg path,
.site-nav .mob-search-btn svg,
.site-nav .mob-search-btn svg path {
width:18px; height:18px;
fill:#ffffff !important;
color:#ffffff !important;
opacity:1 !important;
visibility:visible !important;
}
.site-nav .mob-search-btn svg,
.site-nav .mob-search-btn svg path { width:16px; height:16px; }
.site-nav .search-trigger:hover svg,
.site-nav .search-trigger:hover svg path,
.site-nav .mob-search-btn:hover svg,
.site-nav .mob-search-btn:hover svg path {
fill:var(--yellow) !important;
color:var(--yellow) !important;
}
/* ── Overlay backdrop ── */
.search-overlay {
position:fixed; inset:0; z-index:700;
background:rgba(17,17,17,0.97);
backdrop-filter:blur(6px);
opacity:0; pointer-events:none;
transition:opacity 0.25s ease;
display:flex; align-items:flex-start; justify-content:center;
overflow-y:auto;
padding:80px 20px;
}
.search-overlay.is-open { opacity:1; pointer-events:auto; }
body.search-overlay-active { overflow:hidden; }
.search-overlay-inner {
width:100%; max-width:720px;
position:relative;
}
.search-overlay-close {
position:absolute; top:-56px; right:0;
width:42px; height:42px;
background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
display:flex; align-items:center; justify-content:center;
cursor:pointer; color:var(--white); transition:all 0.2s;
}
.search-overlay-close:hover { border-color:var(--yellow); color:var(--yellow); }
.search-overlay-close svg { width:18px; height:18px; }
/* ── Search form ── */
.search-overlay-form {
display:flex; align-items:center; gap:0;
background:var(--white); border:2px solid var(--yellow);
position:relative;
}
.search-overlay-icon {
width:22px; height:22px; fill:var(--gray-400);
margin-left:20px; flex-shrink:0;
}
.search-overlay-input {
flex:1; border:none; outline:none; background:none;
padding:20px 16px;
font-family:var(--font-body); font-size:18px; color:var(--black);
}
.search-overlay-input::placeholder { color:var(--gray-400); }
.search-overlay-submit {
display:flex; align-items:center; gap:8px;
background:var(--yellow); border:none; cursor:pointer;
padding:0 24px; height:100%;
align-self:stretch;
font-family:var(--font-display); font-size:14px; font-weight:800;
letter-spacing:1.5px; text-transform:uppercase; color:var(--black);
transition:background 0.2s;
}
.search-overlay-submit svg { width:16px; height:16px; fill:var(--black); }
.search-overlay-submit:hover { background:#ffd700; }
.search-overlay-submit span { display:none; }
@media(min-width:600px) { .search-overlay-submit span { display:inline; } }
/* ── Popular search suggestions (shown before typing) ── */
.search-overlay-suggestions { margin-top:24px; }
.search-overlay-suggest-label {
display:block; font-family:var(--font-mono); font-size:10px;
letter-spacing:3px; text-transform:uppercase;
color:rgba(255,255,255,0.35); margin-bottom:14px;
}
.search-overlay-suggest-tags { display:flex; flex-wrap:wrap; gap:10px; }
.search-overlay-suggest-tags a {
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
color:rgba(255,255,255,0.7); text-decoration:none;
padding:9px 18px; border:1px solid rgba(255,255,255,0.15);
transition:all 0.2s;
}
.search-overlay-suggest-tags a:hover {
border-color:var(--yellow); color:var(--yellow);
}
/* ── Live results dropdown ── */
.search-overlay-results {
margin-top:16px;
background:var(--white);
border:1px solid var(--gray-200);
max-height:60vh; overflow-y:auto;
display:none;
}
.search-overlay-results.has-results { display:block; }
.search-overlay-results.is-loading { opacity:0.6; }
.search-results-list { display:flex; flex-direction:column; }
.search-result-item {
display:flex; align-items:center; gap:14px;
padding:14px 18px;
text-decoration:none; color:inherit;
border-bottom:1px solid var(--gray-200);
transition:background 0.1s;
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover,
.search-result-item.is-active { background:var(--gray-100); }
.search-result-img {
width:48px; height:48px; flex-shrink:0;
border:1px solid var(--gray-200); overflow:hidden;
}
.search-result-img img { width:100%; height:100%; object-fit:cover; display:block; }
.search-result-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.search-result-name {
font-family:var(--font-display); font-size:14px; font-weight:700;
text-transform:uppercase; letter-spacing:0.5px; color:var(--black);
line-height:1.2;
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.search-result-cat {
font-family:var(--font-mono); font-size:9px; letter-spacing:2px;
text-transform:uppercase; color:var(--yellow-border);
}
.search-result-price {
font-family:var(--font-display); font-size:15px; font-weight:800;
color:var(--black); white-space:nowrap; flex-shrink:0;
}
.search-result-price .woocommerce-Price-amount { font-size:15px; }
.search-result-price del { color:var(--gray-400); font-size:12px; font-weight:400; margin-right:4px; }
.search-view-all {
display:block; text-align:center;
padding:14px 18px;
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:2px; text-transform:uppercase;
color:var(--black); text-decoration:none;
background:var(--yellow-light); border-top:1px solid var(--yellow-border);
transition:background 0.2s;
}
.search-view-all:hover { background:var(--yellow); }
.search-no-results { padding:28px 18px; text-align:center; }
.search-no-results p { font-size:15px; color:var(--black); margin-bottom:6px; }
.search-no-results-hint { font-size:13px; color:var(--gray-400); margin-bottom:0; }
@media(max-width:768px) {
.search-overlay { padding:70px 16px; }
.search-overlay-icon { margin-left:14px; width:18px; height:18px; }
.search-overlay-input { padding:16px 12px; font-size:16px; }
.search-overlay-submit { padding:0 18px; }
.search-overlay-close { top:-50px; width:38px; height:38px; }
}
/* ═══════════════════════════════════════════
SEARCH RESULTS PAGE
═══════════════════════════════════════════ */
.search-results-body { background:var(--off-white); min-height:60vh; }
.search-results-inner { max-width:1380px; margin:0 auto; padding:0 40px 80px; }
/* Refine search bar */
.search-refine-form {
display:flex; align-items:center;
background:var(--white); border:1px solid var(--gray-200);
margin-bottom:32px; max-width:560px;
}
.search-refine-icon { width:18px; height:18px; fill:var(--gray-400); margin-left:16px; flex-shrink:0; }
.search-refine-input {
flex:1; border:none; outline:none; background:none;
padding:14px 12px; font-family:var(--font-body); font-size:14px; color:var(--black);
}
.search-refine-btn {
background:var(--yellow); border:none; cursor:pointer;
padding:14px 24px;
font-family:var(--font-display); font-size:13px; font-weight:800;
letter-spacing:1.5px; text-transform:uppercase; color:var(--black);
transition:background 0.2s;
}
.search-refine-btn:hover { background:#ffd700; }
/* Product badge variants */
.product-badge--oos { background:var(--gray-400); color:var(--white); }
/* Pagination */
.search-pagination {
display:flex; justify-content:center; gap:6px; margin-top:48px; flex-wrap:wrap;
}
.search-pagination .page-numbers {
display:flex; align-items:center; justify-content:center;
min-width:42px; height:42px; padding:0 14px;
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:1px; text-decoration:none;
border:1px solid var(--gray-200); color:var(--black);
background:var(--white); transition:all 0.15s;
}
.search-pagination .page-numbers:hover { border-color:var(--yellow-border); }
.search-pagination .page-numbers.current { background:var(--black); color:var(--yellow); border-color:var(--black); }
.search-pagination .page-numbers.dots { border:none; background:none; }
/* Empty state */
.search-empty {
text-align:center; padding:72px 20px;
max-width:560px; margin:0 auto;
}
.search-empty-icon {
width:64px; height:64px; margin:0 auto 24px;
background:var(--gray-100); border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.search-empty-icon svg { width:28px; height:28px; fill:var(--gray-400); }
.search-empty-title {
font-family:var(--font-display); font-size:26px; font-weight:900;
text-transform:uppercase; letter-spacing:1px; color:var(--black); margin-bottom:12px;
}
.search-empty-sub { font-size:15px; color:var(--gray-600); line-height:1.7; margin-bottom:28px; }
.search-empty-links { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.search-empty-links a {
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
color:var(--black); text-decoration:none;
padding:11px 22px; border:1px solid var(--gray-200);
transition:all 0.2s;
}
.search-empty-links a:hover { border-color:var(--yellow-border); background:var(--yellow-light); }
@media(max-width:768px) {
.search-results-inner { padding:0 16px 60px; }
.search-refine-form { max-width:none; margin-bottom:24px; }
}
/* ═══════════════════════════════════════════
CONTACT US
═══════════════════════════════════════════ */
.contact-body { background:var(--off-white); min-height:60vh; }
.contact-inner { max-width:1380px; margin:0 auto; padding:0 40px 80px; }
.contact-grid {
display:grid; grid-template-columns:380px 1fr;
gap:24px; align-items:start;
}
/* ── Shared block (matches ty-block / acct-block pattern) ── */
.contact-col-info,
.contact-col-form { display:flex; flex-direction:column; gap:16px; min-width:0; width:100%; }
.contact-block { background:var(--white); border:1px solid var(--gray-200); }
.contact-block-header {
display:flex; align-items:center; gap:14px;
padding:18px 22px; border-bottom:1px solid var(--gray-200);
background:var(--black);
}
.contact-block-num {
width:34px; height:34px; flex-shrink:0;
background:var(--yellow);
display:flex; align-items:center; justify-content:center;
clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.contact-block-num svg { width:17px; height:17px; fill:var(--black); }
.contact-block-title {
font-family:var(--font-display); font-size:17px; font-weight:800;
text-transform:uppercase; letter-spacing:2px; color:var(--white); line-height:1;
}
.contact-block-body { padding:22px; }
.contact-block-body--no-pad { padding:0; }
/* Links / text */
.contact-link {
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
color:var(--yellow-border); text-decoration:none;
transition:color 0.15s;
}
.contact-link:hover { color:var(--black); }
.contact-link--big {
display:block; font-size:22px; font-weight:800; letter-spacing:1px;
color:var(--black); margin-bottom:8px;
}
.contact-link--big:hover { color:var(--yellow-border); }
.contact-meta { font-size:13px; color:var(--gray-400); line-height:1.6; }
.contact-meta--note { margin-top:12px; padding-top:12px; border-top:1px solid var(--gray-200); }
.contact-address { font-style:normal; font-size:15px; color:var(--gray-600); line-height:1.7; margin-bottom:14px; }
/* Hours table */
.contact-hours-row {
display:flex; justify-content:space-between; gap:12px;
padding:8px 0; font-size:14px; color:var(--gray-600);
border-bottom:1px solid var(--gray-200);
}
.contact-hours-row:last-of-type { border-bottom:none; }
.contact-hours-row span:first-child { font-weight:600; color:var(--black); }
/* ── Form embed ── */
.contact-form-embed {
width:100%; min-height:560px;
background:var(--gray-100);
}
.contact-form-embed iframe { display:block; min-height:560px; }
/* ── Map embed ── */
.contact-block--map { overflow:hidden; }
.contact-map-embed { width:100%; height:280px; }
.contact-map-embed iframe { display:block; }
/* ── Quick links ── */
.contact-quicklinks {
margin-top:24px; padding-top:32px;
border-top:1px solid var(--gray-200);
text-align:center;
}
.contact-quicklinks-label {
display:block; font-family:var(--font-mono); font-size:11px;
letter-spacing:3px; text-transform:uppercase;
color:var(--gray-400); margin-bottom:18px;
}
.contact-quicklinks-grid {
display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.contact-quicklinks-grid a {
font-family:var(--font-display); font-size:13px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
color:var(--black); text-decoration:none;
padding:11px 24px; border:1px solid var(--gray-200);
transition:all 0.2s;
}
.contact-quicklinks-grid a:hover { border-color:var(--yellow-border); background:var(--yellow-light); }
/* ── Responsive ── */
@media(max-width:1024px) {
.contact-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
.contact-inner { padding:0 16px 60px; }
.contact-form-embed,
.contact-form-embed iframe { min-height:480px; }
.contact-map-embed { height:220px; }
}
/* ═══════════════════════════════════════════
BUSINESS PORTAL — Landing Page
═══════════════════════════════════════════ */
.bp-body { background:var(--off-white); }
.bp-inner { max-width:1300px; margin:0 auto; padding:0 40px 0; }
.bp-section { padding:72px 0; border-bottom:1px solid var(--gray-200); }
.bp-section:last-child { border-bottom:none; }
.bp-section-header { margin-bottom:44px; max-width:640px; }
/* ── How It Works ── */
.bp-how-grid {
display:grid; grid-template-columns:repeat(4,1fr);
gap:3px; margin-bottom:32px;
}
.bp-how-step {
background:var(--white); border:2px solid var(--gray-200);
padding:32px 26px; position:relative; transition:all 0.2s;
}
.bp-how-step:hover { border-color:var(--yellow-border); transform:translateY(-3px); }
.bp-how-num {
font-family:var(--font-display); font-size:52px; font-weight:900;
color:var(--yellow); line-height:1; margin-bottom:14px;
}
.bp-how-icon {
width:46px; height:46px; background:var(--gray-100);
display:flex; align-items:center; justify-content:center;
margin-bottom:18px;
clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.bp-how-icon svg { width:22px; height:22px; fill:var(--black); }
.bp-how-title {
font-family:var(--font-display); font-size:18px; font-weight:800;
text-transform:uppercase; letter-spacing:1.5px;
color:var(--black); margin-bottom:10px; line-height:1.2;
}
.bp-how-desc { font-size:13px; color:var(--gray-600); line-height:1.7; }
.bp-how-desc code, .bp-how-title code { font-family:var(--font-mono); background:var(--yellow-light); padding:1px 5px; font-size:0.9em; }
.bp-example-box {
background:var(--black); padding:28px 32px;
display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
}
.bp-example-label {
font-family:var(--font-mono); font-size:10px; letter-spacing:3px;
text-transform:uppercase; color:var(--yellow);
flex-shrink:0; padding-top:3px;
}
.bp-example-box p { font-size:14px; color:rgba(255,255,255,0.7); line-height:1.8; flex:1; min-width:240px; }
.bp-example-box code {
font-family:var(--font-mono); font-size:0.9em;
background:rgba(245,200,0,0.12); color:var(--yellow);
padding:1px 6px;
}
.bp-example-box strong { color:var(--white); }
/* ── Benefits ── */
.bp-benefits-grid {
display:grid; grid-template-columns:repeat(3,1fr);
gap:3px;
}
.bp-benefit-card {
background:var(--white); border:1px solid var(--gray-200);
padding:30px 26px; transition:all 0.2s;
}
.bp-benefit-card:hover { border-color:var(--yellow-border); box-shadow:0 8px 32px rgba(0,0,0,0.06); }
.bp-benefit-icon {
width:46px; height:46px; background:var(--yellow);
display:flex; align-items:center; justify-content:center;
margin-bottom:18px;
clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.bp-benefit-icon svg { width:22px; height:22px; fill:var(--black); }
.bp-benefit-title {
font-family:var(--font-display); font-size:17px; font-weight:800;
text-transform:uppercase; letter-spacing:1.5px;
color:var(--black); margin-bottom:10px; line-height:1.2;
}
.bp-benefit-desc { font-size:13px; color:var(--gray-600); line-height:1.7; }
/* ── FAQ (details/summary, matches faq-question pattern) ── */
.bp-faq-grid { display:flex; flex-direction:column; gap:3px; max-width:820px; }
.bp-faq-item {
border:1px solid var(--gray-200); background:var(--white);
overflow:hidden;
}
.bp-faq-item summary {
padding:18px 22px; cursor:pointer; list-style:none;
font-family:var(--font-display); font-size:16px; font-weight:700;
text-transform:uppercase; letter-spacing:1px; color:var(--black);
display:flex; align-items:center; justify-content:space-between; gap:16px;
transition:background 0.15s;
}
.bp-faq-item summary::-webkit-details-marker { display:none; }
.bp-faq-item summary::after {
content:'+'; font-size:22px; font-weight:300; color:var(--gray-400);
flex-shrink:0; transition:transform 0.2s;
}
.bp-faq-item[open] summary::after { transform:rotate(45deg); }
.bp-faq-item summary:hover { background:var(--gray-100); }
.bp-faq-item[open] summary { background:var(--black); color:var(--yellow); }
.bp-faq-item[open] summary::after { color:var(--yellow); }
.bp-faq-item p {
padding:18px 22px; margin:0;
font-size:14px; color:var(--gray-600); line-height:1.75;
background:var(--off-white); border-top:1px solid var(--gray-200);
}
.bp-faq-item code { font-family:var(--font-mono); background:var(--yellow-light); padding:1px 5px; font-size:0.9em; }
/* ── Registration form section ── */
.bp-section--form { padding-bottom:80px; }
.bp-form-card {
background:var(--black);
display:grid; grid-template-columns:1fr 1fr;
gap:0; overflow:hidden;
}
.bp-form-left { padding:48px 44px; }
.bp-form-left .section-label { color:rgba(245,200,0,0.6); }
.bp-form-left .section-title { color:var(--white); }
.bp-form-desc { font-size:15px; color:rgba(255,255,255,0.55); line-height:1.7; margin:16px 0 24px; }
.bp-form-checklist { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
.bp-form-checklist li {
display:flex; align-items:center; gap:10px;
font-size:14px; color:rgba(255,255,255,0.8);
}
.bp-form-checklist li::before {
content:'✓'; width:20px; height:20px; flex-shrink:0;
background:var(--yellow); color:var(--black);
font-size:11px; font-weight:900; border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.bp-form-alt { font-size:13px; color:rgba(255,255,255,0.4); }
.bp-form-alt a { color:var(--yellow); text-decoration:none; font-weight:700; }
.bp-form-alt a:hover { color:var(--white); }
.bp-form-right { background:var(--white); min-height:520px; }
.bp-form-embed { width:100%; height:100%; min-height:520px; }
.bp-form-embed iframe { display:block; min-height:520px; }
/* ── Responsive ── */
@media(max-width:1100px) {
.bp-how-grid { grid-template-columns:repeat(2,1fr); }
.bp-benefits-grid { grid-template-columns:repeat(2,1fr); }
.bp-form-card { grid-template-columns:1fr; }
.bp-form-right { min-height:480px; }
}
@media(max-width:768px) {
.bp-inner { padding:0 16px; }
.bp-section { padding:48px 0; }
.bp-how-grid, .bp-benefits-grid { grid-template-columns:1fr; }
.bp-example-box { flex-direction:column; gap:10px; padding:22px 20px; }
.bp-form-left { padding:32px 24px; }
.bp-form-embed, .bp-form-embed iframe, .bp-form-right { min-height:440px; }
}
/* ════════════════════════════════════════════════════════════
HOMEPAGE — hp- prefix
Strategy: Black/yellow for hero, portals, accents, CTAs.
White/off-white body for product grids and content sections.
Brief: modern · premium · mobile-first · conversion-focused
════════════════════════════════════════════════════════════ */
/* ── Shared tokens ── */
.hp-yellow { color: var(--yellow); }
.hp-eyebrow {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 3px; text-transform: uppercase;
color: var(--yellow-border); display: block; margin-bottom: 10px;
}
.hp-eyebrow--yellow { color: var(--yellow); }
.hp-eyebrow--muted { color: var(--gray-400); }
/* ── Section shell ── */
.hp-section { background: var(--white); padding: 80px 0; }
.hp-section:nth-child(even) { background: var(--off-white); }
.hp-section-inner { max-width: 1380px; margin: 0 auto; padding: 0 40px; }
.hp-section-head {
display: flex; align-items: flex-end;
justify-content: space-between; gap: 24px;
margin-bottom: 40px; flex-wrap: wrap;
}
.hp-section-head.hp-center { flex-direction: column; align-items: center; text-align: center; }
.hp-section-title {
font-family: var(--font-display); font-size: clamp(28px,3.5vw,44px);
font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
color: var(--black); line-height: 1; margin: 0;
}
.hp-section-sub { font-size: 16px; color: var(--gray-600); max-width: 560px; margin-top: 12px; line-height: 1.6; }
.hp-view-all {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
text-transform: uppercase; color: var(--yellow-border);
text-decoration: none; white-space: nowrap; flex-shrink: 0;
transition: color 0.2s;
}
.hp-view-all:hover { color: var(--black); }
/* ── Buttons ── */
.hp-btn-primary, .hp-btn-outline, .hp-btn-ghost,
.hp-btn-yellow, .hp-btn-outline-white, .hp-btn-outline-dark, .hp-btn-ghost-light {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
padding: 14px 28px; cursor: pointer; transition: all 0.2s;
clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
white-space: nowrap;
}
.hp-btn-primary { background: var(--yellow); color: var(--black); border: 2px solid var(--yellow-border); }
.hp-btn-primary:hover { background: var(--black); color: var(--yellow); border-color: var(--black); }
.hp-btn-yellow { background: var(--yellow); color: var(--black); border: 2px solid var(--yellow-border); }
.hp-btn-yellow:hover { background: #ffd700; }
.hp-btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.4); }
.hp-btn-outline:hover { border-color: var(--yellow); color: var(--yellow); }
.hp-btn-outline-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.3); }
.hp-btn-outline-white:hover { border-color: var(--white); }
.hp-btn-outline-dark { background: transparent; color: var(--black); border: 2px solid var(--gray-200); }
.hp-btn-outline-dark:hover { border-color: var(--black); }
.hp-btn-ghost { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); border: 2px solid rgba(255,255,255,0.15); }
.hp-btn-ghost:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.hp-btn-ghost-light { background: rgba(0,0,0,0.06); color: var(--black); border: 2px solid rgba(0,0,0,0.15); }
.hp-btn-ghost-light:hover { border-color: var(--black); }
/* ════════════════════════════════
1. HERO
════════════════════════════════ */
.hp-hero {
background: var(--black);
display: grid; grid-template-columns: 1fr 1fr;
min-height: 560px; overflow: visible;
position: relative;
}
.hp-hero-content {
padding: 34px 60px 40px 40px;
display: flex; flex-direction: column; justify-content: flex-start;
max-width: 680px;
}
.hp-hero-h1 {
font-family: var(--font-display); font-size: clamp(36px,4.5vw,68px);
font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
color: var(--white); line-height: 1.02; margin: 0 0 20px;
}
.hp-hero-yellow { color: var(--yellow); }
.hp-hero-sub { font-size: 16px; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 32px; max-width: 480px; }
.hp-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-hero-visual {
position: relative; background: #000000; overflow: hidden;
display: flex; align-items: flex-end; justify-content: flex-end;
}
.hp-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-hero-badge {
position: absolute; top: 32px; left: 32px;
background: var(--yellow); color: var(--black);
padding: 14px 18px;
clip-path: polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.hp-hero-badge-num { font-family: var(--font-display); font-size: 26px; font-weight: 900; display: block; line-height: 1; }
.hp-hero-badge-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; display: block; margin-top: 4px; }
/* ════════════════════════════════
2. TRUST BAR
════════════════════════════════ */
.hp-trust-bar {
background: var(--black);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 3px solid var(--yellow);
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 0; padding: 0;
}
.hp-trust-item {
display: flex; align-items: center; gap: 8px;
padding: 16px 28px;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 2px; text-transform: uppercase;
color: rgba(255,255,255,0.55);
border-right: 1px solid rgba(255,255,255,0.06);
white-space: nowrap;
}
.hp-trust-item:last-child { border-right: none; }
.hp-trust-item svg { width: 14px; height: 14px; fill: var(--yellow); flex-shrink: 0; }
/* ════════════════════════════════
3. WHAT ARE YOU BRANDING?
════════════════════════════════ */
.hp-branding { background: var(--off-white) !important; }
.hp-branding-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
/* Make first card span 2 columns for visual hierarchy */
.hp-branding-grid .hp-brand-card:first-child { grid-column: span 2; }
.hp-brand-card {
position: relative; display: block;
aspect-ratio: 4/3; overflow: hidden;
text-decoration: none;
}
.hp-brand-card:first-child { aspect-ratio: 8/5; }
.hp-brand-card-img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transition: transform 0.5s ease;
}
.hp-brand-card:hover .hp-brand-card-img { transform: scale(1.04); }
.hp-brand-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
}
.hp-brand-card-body {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 24px 28px;
}
.hp-brand-count {
font-family: var(--font-mono); font-size: 9px;
letter-spacing: 2px; text-transform: uppercase;
color: var(--yellow); display: block; margin-bottom: 6px;
}
.hp-brand-title {
font-family: var(--font-display); font-size: clamp(18px,2vw,26px);
font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
color: var(--white); margin: 0 0 6px; line-height: 1.1;
}
.hp-brand-desc { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0 0 10px; line-height: 1.4; }
.hp-brand-cta {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
text-transform: uppercase; color: var(--yellow);
transition: color 0.2s;
}
.hp-brand-card:hover .hp-brand-cta { color: var(--white); }
@media (max-width: 1100px) {
.branding-grid--six {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.branding-grid--six .branding-card,
.branding-grid--six .branding-card:nth-child(n),
.branding-grid--six .branding-card--large {
grid-column: auto;
grid-row: auto;
min-height: 240px;
aspect-ratio: 4 / 3;
}
}
@media (max-width: 768px) {
.branding-inner {
padding: 0 16px;
}
.branding-grid--six {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.branding-grid--six .branding-card,
.branding-grid--six .branding-card:nth-child(n),
.branding-grid--six .branding-card--large {
min-height: 180px;
aspect-ratio: 1 / 1;
}
.branding-card-body {
padding: 16px 14px;
}
.branding-card-title {
font-size: clamp(14px, 4vw, 20px);
letter-spacing: 1px;
}
.branding-card-cta {
font-size: 8px;
letter-spacing: 1.4px;
}
}
/* ════════════════════════════════
4. POPULAR PRODUCTS
════════════════════════════════ */
.hp-products-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
.hp-product-card {
background: var(--white); text-decoration: none;
border: 1px solid var(--gray-200);
transition: transform 0.2s, box-shadow 0.2s;
display: flex; flex-direction: column;
}
.hp-product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.hp-product-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--gray-100); }
.hp-product-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.hp-product-card:hover .hp-product-img { transform: scale(1.04); }
.hp-product-badge {
position: absolute; top: 0; left: 0;
background: var(--yellow); color: var(--black);
font-family: var(--font-mono); font-size: 9px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; padding: 5px 10px;
}
.hp-product-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.hp-product-cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow-border); margin: 0; }
.hp-product-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--black); margin: 0; line-height: 1.2; flex: 1; }
.hp-product-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--yellow); }
.hp-rc { color: var(--gray-400); font-size: 11px; }
.hp-product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.hp-product-price { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--black); }
.hp-product-price .woocommerce-Price-amount { font-size: 18px; }
.hp-product-btn { width: 34px; height: 34px; background: var(--yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
.hp-product-btn svg { width: 16px; height: 16px; fill: var(--black); }
.hp-product-card:hover .hp-product-btn { background: var(--black); }
.hp-product-card:hover .hp-product-btn svg { fill: var(--yellow); }
/* ════════════════════════════════
5. SHOP BY VEHICLE
════════════════════════════════ */
.hp-vehicles { background: var(--black) !important; }
.hp-vehicles .hp-section-title,
.hp-vehicles .hp-eyebrow { color: var(--white); }
.hp-vehicles .hp-eyebrow { color: rgba(255,255,255,0.4); }
.hp-vehicles .hp-view-all { color: var(--yellow); }
.hp-vehicles .hp-view-all:hover { color: var(--white); }
.hp-vehicles-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
.hp-vehicle-card {
position: relative; aspect-ratio: 3/4;
display: flex; align-items: flex-end;
background: #1a1a1a;
background-image: var(--hp-vbg);
background-size: cover; background-position: center;
text-decoration: none; overflow: hidden;
transition: transform 0.3s;
}
.hp-vehicle-card:hover { transform: scale(1.02); z-index: 2; }
.hp-vehicle-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
.hp-vehicle-body { position: relative; z-index: 2; padding: 20px 18px; }
.hp-vehicle-title { font-family: var(--font-display); font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: var(--white); margin: 0 0 6px; line-height: 1.1; }
.hp-vehicle-desc { font-size: 12px; color: rgba(255,255,255,0.5); margin: 0 0 10px; line-height: 1.4; }
.hp-vehicle-cta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); }
/* ════════════════════════════════════════════
BUSINESS PORTAL — redesigned section
Replaces old hp-portal CSS in main.css
════════════════════════════════════════════ */
.hp-portal {
background: #0a0a0a;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.hp-portal::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.hp-portal-inner {
max-width: 1380px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 1;
}
/* ── Left content ── */
.hp-portal-title {
font-family: var(--font-display);
font-size: clamp(40px, 5vw, 72px);
font-weight: 900;
text-transform: uppercase;
line-height: 0.9;
color: var(--white);
margin-bottom: 20px;
letter-spacing: -1px;
}
.hp-portal-sub {
font-size: 16px;
color: rgba(255,255,255,0.55);
line-height: 1.75;
margin-bottom: 36px;
max-width: 480px;
}
/* ── Feature cards grid ── */
.hp-portal-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
margin-bottom: 36px;
}
.hp-portal-feature {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 16px;
background: #141414;
border: 1px solid #222;
transition: border-color 0.2s;
}
.hp-portal-feature:hover { border-color: var(--yellow); }
.hp-portal-feature-icon {
width: 36px;
height: 36px;
min-width: 36px;
background: var(--yellow);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hp-portal-feature-icon svg {
width: 18px;
height: 18px;
fill: var(--black);
}
.hp-portal-feature-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.hp-portal-feature-body strong {
font-family: var(--font-display);
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--white);
line-height: 1.2;
}
.hp-portal-feature-body span {
font-size: 12px;
color: rgba(255,255,255,0.4);
line-height: 1.5;
}
/* ── CTAs ── */
.hp-portal-ctas {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.hp-portal-btn-primary {
display: inline-flex;
align-items: center;
padding: 16px 40px;
background: var(--yellow);
color: var(--black);
font-family: var(--font-display);
font-size: 15px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--yellow-border);
transition: all 0.2s;
}
.hp-portal-btn-primary:hover {
background: #fff;
border-color: #fff;
}
.hp-portal-login-line {
font-size: 13px;
color: rgba(255,255,255,0.35);
}
.hp-portal-login-line a {
color: var(--yellow);
text-decoration: none;
font-weight: 700;
transition: color 0.2s;
}
.hp-portal-login-line a:hover { color: var(--white); }
/* ── Right: Dashboard mockup ── */
.hp-portal-dashboard {
background: #111;
border: 1px solid #2a2a2a;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
/* Dashboard header */
.hp-dash-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #161616;
border-bottom: 1px solid #222;
}
.hp-dash-brand {
display: flex;
align-items: center;
gap: 12px;
}
.hp-dash-logo {
width: 36px;
height: 36px;
background: var(--yellow);
color: var(--black);
font-family: var(--font-display);
font-size: 14px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
}
.hp-dash-brand-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.hp-dash-brand-info strong {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--white);
}
.hp-dash-brand-info span {
font-size: 11px;
color: rgba(255,255,255,0.4);
}
.hp-dash-status {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 1px;
color: #4ade80;
}
/* KPI cards */
.hp-dash-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid #1e1e1e;
}
.hp-dash-kpi {
padding: 16px 12px;
text-align: center;
border-right: 1px solid #1e1e1e;
}
.hp-dash-kpi:last-child { border-right: none; }
.hp-dash-kpi-num {
display: block;
font-family: var(--font-display);
font-size: 22px;
font-weight: 900;
color: var(--yellow);
line-height: 1;
margin-bottom: 4px;
}
.hp-dash-kpi-lbl {
display: block;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
}
/* Section label */
.hp-dash-section-label {
padding: 12px 20px 8px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.25);
border-bottom: 1px solid #1a1a1a;
}
/* Order rows */
.hp-dash-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-bottom: 1px solid #1a1a1a;
transition: background 0.15s;
}
.hp-dash-row:hover { background: #161616; }
.hp-dash-check {
width: 14px;
height: 14px;
fill: var(--yellow);
flex-shrink: 0;
}
.hp-dash-row-name {
flex: 1;
font-size: 13px;
color: rgba(255,255,255,0.7);
}
.hp-dash-reorder {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--yellow);
background: rgba(245,200,0,0.08);
border: 1px solid rgba(245,200,0,0.2);
padding: 4px 12px;
cursor: pointer;
transition: all 0.15s;
}
.hp-dash-reorder:hover {
background: var(--yellow);
color: var(--black);
border-color: var(--yellow);
}
/* Dashboard footer */
.hp-dash-footer {
padding: 16px 20px;
background: #0d0d0d;
}
.hp-dash-order-all {
width: 100%;
padding: 12px;
background: var(--yellow);
color: var(--black);
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.hp-dash-order-all:hover { background: #fff; }
/* ── Responsive ── */
@media(max-width: 1100px) {
.hp-portal-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
.hp-portal { padding: 72px 0; }
.hp-portal-dashboard { max-width: 480px; }
}
@media(max-width: 768px) {
.hp-portal-inner { padding: 0 16px; }
.hp-portal-features { grid-template-columns: 1fr; }
.hp-dash-kpis { grid-template-columns: repeat(2, 1fr); }
.hp-portal-title { font-size: clamp(36px, 8vw, 56px); }
}
/* ════════════════════════════════
7. DESIGN ONLINE
════════════════════════════════ */
.hp-design {
background: var(--white);
padding: 100px 0;
}
.hp-design-inner {
max-width: 1380px; margin: 0 auto; padding: 0 40px;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.hp-design-title {
font-family: var(--font-display); font-size: clamp(28px,3.5vw,48px);
font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
color: var(--black); line-height: 1; margin: 0 0 18px;
}
.hp-design-sub { font-size: 16px; color: var(--gray-600); line-height: 1.7; margin-bottom: 24px; }
.hp-design-features { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; }
.hp-design-features li { font-size: 15px; color: var(--gray-600); padding-left: 20px; position: relative; line-height: 1.4; }
.hp-design-features li::before { content: '→'; position: absolute; left: 0; color: var(--yellow-border); font-weight: 700; }
/* Design preview mockup */
.hp-design-preview {
background: var(--gray-100); border: 1px solid var(--gray-200);
overflow: hidden; position: relative;
}
.hp-design-canvas {
padding: 40px 32px; min-height: 280px;
background: linear-gradient(135deg, #f0f0ec 0%, #e8e8e4 100%);
position: relative;
}
.hp-design-vehicle-shape {
width: 80%; height: 60px; background: rgba(0,0,0,0.06);
margin: 0 auto 30px; border-radius: 4px;
position: relative;
}
.hp-design-el {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
letter-spacing: 2px; text-align: center; margin-bottom: 8px;
}
.hp-design-el--1 { font-size: 20px; color: var(--black); }
.hp-design-el--2 { font-size: 15px; color: var(--gray-600); }
.hp-design-el--3 { font-size: 12px; color: var(--gray-400); }
.hp-design-cursor {
width: 2px; height: 18px; background: var(--yellow);
display: inline-block; animation: hp-blink 1s step-end infinite;
margin-left: 4px; vertical-align: middle;
}
@keyframes hp-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hp-design-tools {
display: flex; gap: 1px; background: var(--white);
border-top: 1px solid var(--gray-200); padding: 8px 16px;
}
.hp-design-tools span {
width: 36px; height: 32px; display: flex; align-items: center; justify-content: center;
font-size: 14px; color: var(--gray-400); cursor: default;
border-radius: 3px; transition: background 0.15s;
}
.hp-design-tools span.active { background: var(--yellow); color: var(--black); }
/* ════════════════════════════════
8. HOW IT WORKS
════════════════════════════════ */
.hp-how { background: var(--off-white) !important; }
.hp-how-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; position: relative;
}
.hp-how-step {
padding: 32px 28px; background: var(--white);
border: 1px solid var(--gray-200);
border-right: none; position: relative;
text-align: center;
}
.hp-how-step:last-child { border-right: 1px solid var(--gray-200); }
.hp-how-icon {
width: 56px; height: 56px; background: var(--black);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.hp-how-icon svg { width: 26px; height: 26px; fill: var(--yellow); }
.hp-how-num {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
text-transform: uppercase; color: var(--yellow-border); margin-bottom: 10px;
}
.hp-how-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--black); margin: 0 0 10px; line-height: 1.2; }
.hp-how-desc { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin: 0; }
.hp-how-arrow {
position: absolute; top: 50%; right: -14px;
transform: translateY(-50%);
width: 28px; height: 28px;
background: var(--yellow); color: var(--black);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 900; z-index: 2;
}
.hp-how-ctas { display: flex; justify-content: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
/* ════════════════════════════════
9. NATIONWIDE
════════════════════════════════ */
.hp-national {
background: var(--white);
padding: 100px 0;
}
.hp-national-inner {
max-width: 1380px; margin: 0 auto; padding: 0 40px;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.hp-national-title {
font-family: var(--font-display); font-size: clamp(28px,3.5vw,48px);
font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
color: var(--black); line-height: 1; margin: 0 0 16px;
}
.hp-national-sub { font-size: 16px; color: var(--gray-600); line-height: 1.7; margin-bottom: 24px; }
.hp-national-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.hp-national-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--gray-600); line-height: 1.4; }
.hp-national-list li svg { width: 18px; height: 18px; fill: var(--yellow-border); flex-shrink: 0; margin-top: 2px; }
.hp-national-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
position: sticky; top: 100px;
}
.hp-national-stat {
background: var(--black); padding: 32px 24px;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.hp-national-num { font-family: var(--font-display); font-size: 36px; font-weight: 900; color: var(--yellow); line-height: 1; }
.hp-national-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); }
/* ════════════════════════════════
10. WHY AGWRAPS
════════════════════════════════ */
.hp-why { background: var(--off-white) !important; }
.hp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.hp-why-card { background: var(--white); padding: 32px 28px; border: 1px solid var(--gray-200); }
.hp-why-icon { width: 44px; height: 44px; background: var(--yellow); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.hp-why-icon svg { width: 20px; height: 20px; fill: var(--black); }
.hp-why-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--black); margin: 0 0 10px; line-height: 1.2; }
.hp-why-desc { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin: 0; }
/* ════════════════════════════════
11. RECENT PROJECTS
════════════════════════════════ */
.hp-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.hp-project-card { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.hp-project-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s; }
.hp-project-card:hover .hp-project-img { transform: scale(1.05); }
.hp-project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 60%); }
.hp-project-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 22px; }
.hp-project-type { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); display: block; margin-bottom: 6px; }
.hp-project-title { font-family: var(--font-display); font-size: 15px; font-weight: 800; text-transform: uppercase; color: var(--white); margin: 0 0 10px; line-height: 1.2; }
.hp-project-cta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
.hp-project-card:hover .hp-project-cta { color: var(--yellow); }
/* ════════════════════════════════
12. SHOP BY INDUSTRY
════════════════════════════════ */
.hp-industry { background: var(--white) !important; }
.hp-industry-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.hp-industry-card {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 28px 16px;
background: var(--off-white); border: 1px solid var(--gray-200);
text-decoration: none; transition: all 0.2s;
text-align: center;
}
.hp-industry-card:hover { background: var(--black); border-color: var(--black); }
.hp-industry-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.hp-industry-icon svg { width: 24px; height: 24px; fill: var(--black); transition: fill 0.2s; }
.hp-industry-card:hover .hp-industry-icon svg { fill: var(--yellow); }
.hp-industry-name { font-family: var(--font-display); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--black); transition: color 0.2s; }
.hp-industry-card:hover .hp-industry-name { color: var(--white); }
/* ════════════════════════════════
13. REVIEWS
════════════════════════════════ */
.hp-reviews { background: var(--off-white) !important; }
.hp-reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.hp-review-card { background: var(--white); padding: 32px 28px; border: 1px solid var(--gray-200); }
.hp-review-hdr { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.hp-review-avatar {
width: 44px; height: 44px; background: var(--black); color: var(--yellow);
font-family: var(--font-display); font-size: 16px; font-weight: 900;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hp-review-name { font-family: var(--font-display); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--black); }
.hp-review-biz { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-400); margin-top: 2px; }
.hp-review-stars { color: var(--yellow); font-size: 16px; margin-left: auto; flex-shrink: 0; }
.hp-review-text { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin: 0; font-style: italic; }
/* ════════════════════════════════
14. FAQ
════════════════════════════════ */
.hp-faq { background: var(--white); padding: 80px 0; }
.hp-faq-inner { max-width: 1380px; margin: 0 auto; padding: 0 40px; }
.hp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 40px; }
.hp-faq-item { background: var(--white); border: 1px solid var(--gray-200); }
.hp-faq-q {
width: 100%; display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 20px 24px;
background: none; border: none; cursor: pointer; text-align: left;
font-family: var(--font-display); font-size: 14px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px; color: var(--black);
transition: background 0.15s;
}
.hp-faq-q:hover { background: var(--gray-100); }
.hp-faq-q[aria-expanded="true"] { background: var(--black); color: var(--yellow); }
.hp-faq-chevron { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; transition: transform 0.2s; }
.hp-faq-q[aria-expanded="true"] .hp-faq-chevron { transform: rotate(180deg); }
.hp-faq-a { padding: 0 24px 20px; font-size: 14px; color: var(--gray-600); line-height: 1.7; }
.hp-faq-a p { margin: 0; }
/* ════════════════════════════════════════════
FINAL CTA — redesigned
Replace existing .final-cta block in main.css
════════════════════════════════════════════ */
.final-cta {
background: var(--black);
border-top: 1px solid #1e1e1e;
}
/* ── Top section ── */
.final-cta-top {
max-width: 1380px;
margin: 0 auto;
padding: 100px 40px 60px;
}
.final-cta-headline {
text-align: center;
margin-bottom: 48px;
}
.final-cta-title {
font-family: var(--font-display);
font-size: clamp(48px, 6vw, 88px);
font-weight: 900;
text-transform: uppercase;
color: var(--white);
line-height: 0.88;
letter-spacing: -1px;
margin-bottom: 16px;
}
.final-cta-sub {
font-size: 16px;
color: rgba(255,255,255,0.4);
margin-top: 16px;
}
/* ── Three action cards ── */
.final-cta-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
margin-bottom: 24px;
}
.final-cta-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 32px 28px;
text-decoration: none;
transition: all 0.2s;
position: relative;
}
.final-cta-card-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.final-cta-card-icon svg {
width: 24px;
height: 24px;
}
.final-cta-card strong {
font-family: var(--font-display);
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.1;
}
.final-cta-card span {
font-size: 14px;
line-height: 1.6;
flex: 1;
}
.final-cta-card-arrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 8px;
}
/* Primary — yellow */
.final-cta-card--primary {
background: var(--yellow);
border: 2px solid var(--yellow-border);
}
.final-cta-card--primary .final-cta-card-icon { background: rgba(0,0,0,0.1); }
.final-cta-card--primary .final-cta-card-icon svg { fill: var(--black); }
.final-cta-card--primary strong { color: var(--black); }
.final-cta-card--primary span { color: rgba(0,0,0,0.65); }
.final-cta-card--primary .final-cta-card-arrow { color: var(--black); }
.final-cta-card--primary:hover { background: #fff; border-color: #fff; }
/* Secondary — dark */
.final-cta-card--secondary {
background: #1a1a1a;
border: 2px solid #2a2a2a;
}
.final-cta-card--secondary .final-cta-card-icon { background: rgba(245,200,0,0.1); }
.final-cta-card--secondary .final-cta-card-icon svg { fill: var(--yellow); }
.final-cta-card--secondary strong { color: var(--white); }
.final-cta-card--secondary span { color: rgba(255,255,255,0.45); }
.final-cta-card--secondary .final-cta-card-arrow { color: var(--yellow); }
.final-cta-card--secondary:hover { border-color: var(--yellow); background: #222; }
/* Outline — border only */
.final-cta-card--outline {
background: transparent;
border: 2px solid #2a2a2a;
}
.final-cta-card--outline .final-cta-card-icon { background: rgba(255,255,255,0.05); }
.final-cta-card--outline .final-cta-card-icon svg { fill: rgba(255,255,255,0.5); }
.final-cta-card--outline strong { color: var(--white); }
.final-cta-card--outline span { color: rgba(255,255,255,0.35); }
.final-cta-card--outline .final-cta-card-arrow { color: rgba(255,255,255,0.4); }
.final-cta-card--outline:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.03); }
/* Custom project nudge */
.final-cta-custom {
text-align: center;
font-size: 14px;
color: rgba(255,255,255,0.3);
}
.final-cta-custom a {
color: var(--yellow);
text-decoration: none;
font-weight: 700;
transition: color 0.2s;
}
.final-cta-custom a:hover { color: var(--white); }
/* ── Bottom section ── */
.final-cta-bottom {
border-top: 1px solid #1a1a1a;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
max-width: 1380px;
margin: 0 auto;
padding: 48px 40px;
gap: 60px;
}
/* Every order includes */
.final-cta-includes-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 20px;
}
.final-cta-checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.final-cta-checklist li {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255,255,255,0.7);
}
.final-cta-checklist li svg {
width: 16px;
height: 16px;
fill: var(--yellow);
flex-shrink: 0;
}
/* Divider */
.final-cta-divider {
width: 1px;
height: 160px;
background: #222;
}
/* Contact */
.final-cta-contact-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 20px;
}
.final-cta-contact-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.final-cta-contact-item {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
transition: opacity 0.2s;
}
.final-cta-contact-item:hover { opacity: 0.75; }
.final-cta-contact-icon {
width: 36px;
height: 36px;
min-width: 36px;
background: #1a1a1a;
border: 1px solid #2a2a2a;
display: flex;
align-items: center;
justify-content: center;
}
.final-cta-contact-icon svg {
width: 16px;
height: 16px;
fill: var(--yellow);
}
.final-cta-contact-item > div:last-child {
display: flex;
flex-direction: column;
gap: 2px;
}
.final-cta-contact-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
}
.final-cta-contact-item strong {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--white);
}
/* ── Responsive ── */
@media(max-width: 1100px) {
.final-cta-top { padding: 72px 24px 48px; }
.final-cta-bottom { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; }
.final-cta-divider { width: 100%; height: 1px; }
}
@media(max-width: 768px) {
.final-cta-cards { grid-template-columns: 1fr; }
.final-cta-top { padding: 60px 16px 40px; }
.final-cta-bottom { padding: 32px 16px; }
.final-cta-title { font-size: clamp(40px, 10vw, 64px); }
}
/* ── Final CTA additions ──
Add these to main.css.
Existing .final-cta, .btn-primary, .btn-outline rules unchanged. */
.final-cta-sub {
font-size: 15px;
color: rgba(255,255,255,0.45);
margin-bottom: 28px;
margin-top: -8px;
}
/* Secondary button — dark fill, yellow text */
.btn-secondary {
display: inline-flex;
align-items: center;
padding: 14px 32px;
background: #1a1a1a;
color: var(--yellow);
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #2a2a2a;
transition: all 0.2s;
}
.btn-secondary:hover {
border-color: var(--yellow);
background: #222;
}
/* Custom project nudge */
.final-cta-custom-note {
margin-top: 20px;
font-size: 14px;
color: rgba(255,255,255,0.3);
}
.final-cta-custom-note a {
color: var(--yellow);
font-weight: 700;
text-decoration: none;
transition: color 0.2s;
}
.final-cta-custom-note a:hover { color: var(--white); }
/* ════════════════════════════════
HOMEPAGE RESPONSIVE — TABLET (1100px)
════════════════════════════════ */
@media(max-width:1100px) {
.hp-hero { grid-template-columns: 1fr; min-height: auto; }
.hp-hero-visual { display: none; }
.hp-hero-content { padding: 10px 24px; max-width: 100%; }
.hp-section-inner, .hp-portal-inner, .hp-design-inner, .hp-national-inner, .hp-faq-inner, .hp-final-inner { padding: 0 24px; }
.hp-branding-grid { grid-template-columns: 1fr 1fr; }
.hp-branding-grid .hp-brand-card:first-child { grid-column: span 2; }
.hp-products-grid { grid-template-columns: repeat(2, 1fr); }
.hp-vehicles-grid { grid-template-columns: repeat(2, 1fr); }
.hp-why-grid { grid-template-columns: repeat(2, 1fr); }
.hp-industry-grid { grid-template-columns: repeat(4, 1fr); }
.hp-projects-grid { grid-template-columns: repeat(2, 1fr); }
.hp-portal-inner, .hp-design-inner, .hp-national-inner { grid-template-columns: 1fr; gap: 48px; }
.hp-national-stats { position: static; }
.hp-how-grid { grid-template-columns: repeat(2, 1fr); }
.hp-how-arrow { display: none; }
.hp-how-step { border-right: 1px solid var(--gray-200); }
}
/* ════════════════════════════════
HOMEPAGE RESPONSIVE — MOBILE (768px)
════════════════════════════════ */
@media(max-width:768px) {
.hp-section { padding: 56px 0; }
.hp-section-inner, .hp-portal-inner, .hp-design-inner, .hp-national-inner, .hp-faq-inner, .hp-final-inner { padding: 0 16px; }
.hp-portal { padding: 60px 0; }
.hp-design { padding: 60px 0; }
.hp-national { padding: 60px 0; }
.hp-hero-content { padding: 8px 16px; }
.hp-hero-ctas { flex-direction: column; }
.hp-hero-ctas a { text-align: center; }
.hp-trust-bar { gap: 0; }
.hp-trust-item { padding: 12px 16px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); width: 50%; justify-content: center; }
.hp-branding-grid { grid-template-columns: 1fr; }
.hp-branding-grid .hp-brand-card:first-child { grid-column: span 1; }
.hp-products-grid { grid-template-columns: 1fr 1fr; }
.hp-vehicles-grid { grid-template-columns: 1fr 1fr; }
.hp-why-grid { grid-template-columns: 1fr; }
.hp-industry-grid { grid-template-columns: repeat(3, 1fr); }
.hp-projects-grid { grid-template-columns: 1fr; }
.hp-reviews-grid { grid-template-columns: 1fr; }
.hp-faq-grid { grid-template-columns: 1fr; }
.hp-how-grid { grid-template-columns: 1fr; }
.hp-national-stats { grid-template-columns: 1fr 1fr; }
.hp-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
.hp-section-head .hp-view-all { align-self: flex-start; }
.hp-portal-ctas { flex-direction: column; }
.hp-final-buttons { flex-direction: column; align-items: center; }
.hp-final-contact { flex-direction: column; align-items: center; gap: 16px; }
.hp-design-inner { grid-template-columns: 1fr; }
.hp-design-visual { order: -1; }
}
@media(max-width:480px) {
.hp-products-grid { grid-template-columns: 1fr; }
.hp-vehicles-grid { grid-template-columns: 1fr; }
.hp-industry-grid { grid-template-columns: repeat(2, 1fr); }
.hp-trust-item { width: 100%; }
}
/* ════════════════════════════════════════════
TRUST BAR — Autoplay marquee (CSS only)
Brief: 3M Certified · Ships Nationwide ·
Installation Available · Proof Approval Online · Trusted Since 2006
Mobile: scrolls automatically, no JS needed.
Desktop: centered, all items visible.
════════════════════════════════════════════ */
/* trust-bar black override removed — original yellow styles at line ~561 apply */
/* Ghost button for hero */
.btn-ghost-dark {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
padding: 14px 28px; cursor: pointer; transition: all 0.2s;
clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65);
border: 2px solid rgba(255,255,255,0.15);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.12); color: var(--white); }
/* ════════════════════════════════════════════
BUSINESS PORTAL — Major feature section
════════════════════════════════════════════ */
.hp-portal {
background: var(--black);
padding: 100px 0;
}
.hp-portal-inner {
max-width: 1380px; margin: 0 auto; padding: 0 40px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center;
}
.hp-eyebrow--yellow { color: var(--yellow); font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; display: block; margin-bottom: 10px; }
.hp-portal-title {
font-family: var(--font-display); font-size: clamp(32px,4vw,56px);
font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
color: var(--white); line-height: 1; margin: 0 0 20px;
}
.hp-portal-sub { font-size: 16px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 28px; }
.hp-portal-benefits {
list-style: none; padding: 0; margin: 0 0 32px;
display: flex; flex-direction: column; gap: 12px;
}
.hp-portal-benefits li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.4;
}
.hp-portal-benefits li svg { width: 18px; height: 18px; fill: var(--yellow); flex-shrink: 0; margin-top: 2px; }
.hp-portal-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* Portal mockup */
.hp-portal-mockup {
background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1);
overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.4);
}
.hp-portal-mockup-bar {
background: #111; padding: 10px 16px;
display: flex; align-items: center; gap: 6px;
}
.hp-portal-mockup-bar span {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(255,255,255,0.1); flex-shrink: 0;
}
.hp-portal-mockup-bar em {
font-style: normal; font-family: var(--font-mono); font-size: 10px;
color: rgba(255,255,255,0.3); margin-left: 8px; letter-spacing: 0.5px;
}
.hp-portal-mockup-body { padding: 24px; }
.hp-portal-mockup-hdr {
display: flex; align-items: center; gap: 12px;
margin-bottom: 20px; padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hp-pmh-logo {
width: 36px; height: 36px; background: var(--yellow);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; font-weight: 900;
color: var(--black); flex-shrink: 0;
}
.hp-portal-mockup-hdr strong {
font-family: var(--font-display); font-size: 12px; font-weight: 800;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--white); display: block;
}
.hp-portal-mockup-hdr span {
font-family: var(--font-mono); font-size: 9px;
color: rgba(255,255,255,0.35); letter-spacing: 1px; display: block; margin-top: 2px;
}
.hp-pmh-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hp-pmh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
.hp-pmh-item span:first-of-type { flex: 1; font-size: 13px; color: rgba(255,255,255,0.6); }
.hp-pmh-active { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #4ade80; }
.hp-pmh-footer {
display: flex; gap: 8px; margin-top: 16px; padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.hp-pmh-footer span {
flex: 1; text-align: center; padding: 10px;
border: 1px solid rgba(255,255,255,0.1);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
text-transform: uppercase; color: rgba(255,255,255,0.4); cursor: default;
}
.hp-pmh-btn { background: var(--yellow) !important; color: var(--black) !important; border-color: var(--yellow) !important; font-weight: 700 !important; }
@media(max-width:1100px) {
.hp-portal-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
.hp-portal { padding: 60px 0; }
}
@media(max-width:768px) {
.hp-portal-inner { padding: 0 16px; }
.hp-portal-ctas { flex-direction: column; }
}
/* ════════════════════════════════════════════
DESIGN ONLINE SECTION
════════════════════════════════════════════ */
.hp-design {
background: var(--white);
padding: 100px 0;
}
.hp-design-inner {
max-width: 1380px; margin: 0 auto; padding: 0 40px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center;
}
.hp-design-sub { font-size: 16px; color: var(--gray-600); line-height: 1.7; margin-bottom: 24px; }
.hp-design-features {
list-style: none; padding: 0; margin: 0 0 32px;
display: flex; flex-direction: column; gap: 10px;
}
.hp-design-features li {
font-size: 15px; color: var(--gray-600);
padding-left: 20px; position: relative; line-height: 1.4;
}
.hp-design-features li::before { content: '→'; position: absolute; left: 0; color: var(--yellow-border); font-weight: 700; }
/* Design preview mockup */
.hp-design-preview {
background: var(--gray-100);
border: 1px solid var(--gray-200);
overflow: hidden;
}
.hp-design-canvas {
padding: 40px 32px; min-height: 260px;
background: linear-gradient(135deg, #f0f0ec 0%, #e8e8e4 100%);
position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 8px;
}
.hp-design-vehicle-shape {
width: 80%; height: 50px;
background: rgba(0,0,0,0.06);
border-radius: 4px; margin-bottom: 16px;
}
.hp-design-el {
font-family: var(--font-display); font-weight: 800;
text-transform: uppercase; letter-spacing: 2px; text-align: center;
}
.hp-design-el--1 { font-size: 20px; color: var(--black); }
.hp-design-el--2 { font-size: 15px; color: var(--gray-600); }
.hp-design-el--3 { font-size: 12px; color: var(--gray-400); }
.hp-design-cursor {
display: inline-block; width: 2px; height: 18px;
background: var(--yellow); vertical-align: middle; margin-left: 3px;
animation: hp-blink 1s step-end infinite;
}
@keyframes hp-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hp-design-tools {
display: flex; gap: 1px; background: var(--white);
border-top: 1px solid var(--gray-200); padding: 8px 16px;
}
.hp-design-tools span {
width: 36px; height: 32px; display: flex;
align-items: center; justify-content: center;
font-size: 14px; color: var(--gray-400); border-radius: 3px;
}
.hp-design-tools span.active { background: var(--yellow); color: var(--black); }
@media(max-width:1100px) {
.hp-design-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
.hp-design { padding: 60px 0; }
.hp-design-visual { order: -1; }
}
@media(max-width:768px) {
.hp-design-inner { padding: 0 16px; }
}
/* ════════════════════════════════════════════
HERO CTA BUTTONS — icon + label, mobile-first
Brief: shop.agwraps.com — clean, not crowded on small screens
════════════════════════════════════════════ */
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-cta-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-size: 13px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
padding: 13px 22px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}
.hero-cta-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.hero-cta-btn--primary {
background: var(--yellow); color: var(--black);
border: 2px solid var(--yellow-border);
}
.hero-cta-btn--primary:hover { background: var(--black); color: var(--yellow); border-color: var(--black); }
.hero-cta-btn--outline {
background: transparent; color: var(--white);
border: 2px solid rgba(255,255,255,0.35);
}
.hero-cta-btn--outline:hover { border-color: var(--yellow); color: var(--yellow); }
.hero-cta-btn--ghost {
background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6);
border: 2px solid rgba(255,255,255,0.12);
}
.hero-cta-btn--ghost:hover { background: rgba(255,255,255,0.1); color: var(--white); }
/* Mobile: icon only to save space, label hidden below 480px */
@media(max-width:480px) {
.hero-ctas { gap: 8px; }
.hero-cta-btn { padding: 12px 14px; font-size: 0; gap: 0; }
.hero-cta-btn svg { width: 20px; height: 20px; }
/* Restore label for primary button only — always visible */
.hero-cta-btn--primary { font-size: 12px; gap: 6px; padding: 12px 16px; }
.hero-cta-btn--primary svg { width: 16px; height: 16px; }
}
@media(min-width:481px) and (max-width:768px) {
.hero-ctas { gap: 8px; }
.hero-cta-btn { padding: 12px 16px; font-size: 11px; }
}
/* ════════════════════════════════════════════
WHAT ARE YOU BRANDING?
Layout:
Row 1: Vehicle Graphics large + 2 cards stacked right
Row 2: 3 equal cards
════════════════════════════════════════════ */
.branding-section {
background: var(--off-white);
padding: 0;
}
.branding-inner {
max-width: 1380px;
margin: 0 auto;
padding: 0 40px;
}
.branding-header {
padding: 60px 0 32px;
}
.branding-grid--six {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 260px 260px 260px;
gap: 3px;
padding-bottom: 3px;
}
.branding-card {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
background: var(--black);
min-height: 260px;
}
.branding-card--large {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.branding-card-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.5s ease;
}
.branding-card:hover .branding-card-bg {
transform: scale(1.04);
}
.branding-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.86) 0%,
rgba(0,0,0,0.48) 48%,
rgba(255,255,255,0.72) 100%
);
}
.branding-card-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 28px 32px;
}
.branding-card-title {
font-family: var(--font-display);
font-size: clamp(24px, 2.6vw, 38px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--white);
margin: 0 0 12px;
line-height: 1;
}
.branding-card-cta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
transition: color 0.2s;
}
.branding-card:hover .branding-card-cta {
color: var(--yellow);
}
/* Row placement */
.branding-grid--six .branding-card:nth-child(1) {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.branding-grid--six .branding-card:nth-child(2) {
grid-column: 3;
grid-row: 1;
}
.branding-grid--six .branding-card:nth-child(3) {
grid-column: 3;
grid-row: 2;
}
.branding-grid--six .branding-card:nth-child(4) {
grid-column: 1;
grid-row: 3;
}
.branding-grid--six .branding-card:nth-child(5) {
grid-column: 2;
grid-row: 3;
}
.branding-grid--six .branding-card:nth-child(6) {
grid-column: 3;
grid-row: 3;
}
@media (max-width: 1100px) {
.branding-inner {
padding: 0 24px;
}
.branding-grid--six {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.branding-grid--six .branding-card,
.branding-grid--six .branding-card:nth-child(n) {
grid-column: auto;
grid-row: auto;
aspect-ratio: 4 / 3;
}
.branding-grid--six .branding-card:nth-child(1) {
grid-column: 1 / span 2;
aspect-ratio: 8 / 4;
}
}
@media (max-width: 768px) {
.branding-inner {
padding: 0 16px;
}
.branding-header {
padding: 48px 0 24px;
}
.branding-grid--six {
grid-template-columns: 1fr;
}
.branding-grid--six .branding-card,
.branding-grid--six .branding-card:nth-child(n) {
grid-column: auto;
grid-row: auto;
min-height: 240px;
aspect-ratio: 4 / 3;
}
.branding-card-title {
font-size: clamp(22px, 6vw, 30px);
}
}
/* ════════════════════════════════════════════
VEHICLE GRID — no description, name + CTA only
Updated to hide .vehicle-card-sub on all screens
════════════════════════════════════════════ */
.vehicle-card-sub { display: none !important; }
/* Vehicle grid: up to 9 cards in 3 rows of 3 */
.vehicle-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 3px !important;
}
@media(max-width:1100px) {
.vehicle-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media(max-width:600px) {
.vehicle-grid { grid-template-columns: 1fr 1fr !important; }
}
/* Placeholder fix — use CSS bg from --vehicle-img if set */
.vehicle-card-img {
position: absolute; inset: 0;
background-image: var(--vehicle-img);
background-size: cover; background-position: center;
transition: transform 0.4s;
}
.vehicle-card:hover .vehicle-card-img { transform: scale(1.05); }
/* ════════════════════════════════════════════
GLOBAL IMAGE FIT — site-wide
Brief: "image should fit perfectly in the box"
object-fit: contain so nothing crops or distorts.
════════════════════════════════════════════ */
.product-img-inner,
.arc-card-img,
.hp-product-img,
.hero-vehicle-img,
.branding-card-bg,
.vehicle-card-img,
.ba-slider img,
.woocommerce-product-gallery__image img,
.woocommerce img,
.attachment-woocommerce_thumbnail,
.attachment-woocommerce_single,
.attachment-shop_catalog,
img.wp-post-image {
object-fit: contain !important;
object-position: center !important;
}
/* Product image containers — neutral bg so contain doesn't show void */
.product-img,
.hp-product-img-wrap,
.arc-card-img-wrap,
.woocommerce-product-gallery__image,
.cart-order-item-img,
.qc-order-item-img {
background-color: var(--gray-100) !important;
}
/* ════════════════════════════════════════════
VEHICLE SECTION — white background
════════════════════════════════════════════ */
.vehicle-section--white {
background: var(--white) !important;
}
.vehicle-section--white .section-title,
.vehicle-section--white .view-all { color: var(--black) !important; }
.vehicle-section--white .view-all:hover { color: var(--yellow-border) !important; }
/* Vehicle cards on white — keep dark overlay for text legibility */
.vehicle-section--white .vehicle-card {
background: var(--gray-100);
}
/* ════════════════════════════════════════════
HERO BUTTONS — mobile icon + label
════════════════════════════════════════════ */
@media(max-width:480px) {
.hero-ctas { gap: 8px; flex-wrap: nowrap; }
/* All three buttons: icon top, label below, square-ish */
.hero-cta-btn {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 12px 10px;
font-size: 9px !important;
letter-spacing: 1px;
min-width: 0;
flex: 1;
text-align: center;
}
.hero-cta-btn svg { width: 22px !important; height: 22px !important; }
.hero-cta-btn span { display: block; line-height: 1.2; }
}
/* ════════════════════════════════════════════
HOW IT WORKS — 4 step grid
════════════════════════════════════════════ */
.how-grid--4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
}
@media(max-width:1100px) { .how-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:600px) { .how-grid--4 { grid-template-columns: 1fr 1fr; } }
/* ════════════════════════════════════════════
PORTAL BUTTONS — yellow on dark background
════════════════════════════════════════════ */
.hp-portal-btn-primary {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
padding: 14px 28px; cursor: pointer; transition: all 0.2s;
clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
background: var(--yellow); color: var(--black);
border: 2px solid var(--yellow-border);
}
.hp-portal-btn-primary:hover { background: #ffd700; }
.hp-portal-btn-secondary {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
padding: 14px 28px; cursor: pointer; transition: all 0.2s;
clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
background: transparent; color: rgba(255,255,255,0.7);
border: 2px solid rgba(255,255,255,0.25);
}
.hp-portal-btn-secondary:hover { border-color: var(--white); color: var(--white); }
/* ════════════════════════════════════════════
DESIGN ONLINE — mobile fix
Show on all screen sizes
════════════════════════════════════════════ */
.hp-design { display: block !important; }
.hp-design-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
@media(max-width:1100px) {
.hp-design-inner { grid-template-columns: 1fr; gap: 40px; }
.hp-design-visual { order: -1; }
}
@media(max-width:768px) {
.hp-design { padding: 56px 0; }
.hp-design-inner { gap: 32px; }
.hp-design-preview { max-width: 100%; }
}
/* ════════════════════════════════════════════
PAGE HEADER — .cart-page-header
Moved from cart-checkout.css to main.css so
it applies globally to ALL pages that use it:
cart, checkout, my-account, contact,
business-portal, shop, and any future pages.
════════════════════════════════════════════ */
.cart-page-header {
background: var(--black);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 32px 0 28px;
}
.cart-page-header-inner {
max-width: 1380px;
margin: 0 auto;
padding: 0 40px;
}
.cart-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 16px;
flex-wrap: wrap;
}
.cart-breadcrumb a {
color: rgba(255,255,255,0.35);
text-decoration: none;
transition: color 0.2s;
}
.cart-breadcrumb a:hover { color: var(--yellow); }
.cart-breadcrumb span { color: rgba(255,255,255,0.2); }
.cart-breadcrumb span:last-child { color: rgba(255,255,255,0.65); }
.cart-page-title {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 48px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--white);
line-height: 1;
margin-bottom: 24px;
}
.cart-page-sub {
font-size: 15px;
color: rgba(255,255,255,0.5);
line-height: 1.6;
margin-bottom: 16px;
}
.cart-page-meta {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;
}
.cart-page-count {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
}
/* Step indicator (cart/checkout only — ignored on other pages) */
.cart-steps { display: flex; align-items: center; gap: 0; }
.cart-step { display: flex; align-items: center; gap: 10px; }
.cart-step-num {
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.2);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 14px; font-weight: 700;
color: rgba(255,255,255,0.35);
flex-shrink: 0;
}
.cart-step-num svg { width: 14px; height: 14px; fill: var(--black); }
.cart-step-label {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
white-space: nowrap;
}
.cart-step--active .cart-step-num { background: var(--yellow); border-color: var(--yellow-border); color: var(--black); }
.cart-step--active .cart-step-label { color: var(--yellow); }
.cart-step--done .cart-step-num { background: #1a7a4a; border-color: #1a7a4a; color: var(--white); }
.cart-step--done .cart-step-label { color: rgba(255,255,255,0.5); }
.cart-step-line {
width: 60px; height: 1px;
background: rgba(255,255,255,0.15);
margin: 0 12px; flex-shrink: 0;
}
.cart-step-line--done { background: #1a7a4a; }
/* Responsive */
@media(max-width:1100px) {
.cart-page-header-inner { padding: 0 24px; }
}
@media(max-width:768px) {
.cart-page-header { padding: 18px 0; }
.cart-page-header-inner { padding: 0 16px; }
.cart-step-line { width: 20px; margin: 0 6px; }
.cart-step-label { display: none; }
}
/* ── Global WC notice overflow safety net ──
Catches any notice rendered outside .page-notices-wrap
and prevents it from breaking mobile viewport width. */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
max-width: 100vw !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
word-break: break-word !important;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
display: block !important;
width: 100% !important;
float: none !important;
word-break: break-word !important;
}
/* ════════════════════════════════════════════
TORN PAPER EDGE — exact agwraps.com SVG
Upload paper-cut-black.svg to child theme:
/assets/images/paper-cut-black.svg
════════════════════════════════════════════ */
.hp-hero {
overflow: visible !important;
position: relative;
}
/* Trust bar sits flush below the torn edge */
.hp-trust-bar {
position: relative;
z-index: 5;
margin-top: 4px;
}
/* ════════════════════════════════════════════
TORN PAPER EDGE — inline SVG in header.php
════════════════════════════════════════════ */
.torn-edge {
display: block;
width: 100%;
line-height: 0;
margin-top: -2px;
overflow: hidden;
}
.torn-edge svg {
display: block;
width: 100%;
height: 63px;
}
/* ════════════════════════════════════════════
HOMEPAGE REDESIGN — new sections
Brief sections: 3 Trusted By · 5 Order in Minutes
6 Why Online · 8 Featured Industries · 9 Design Online
13 Recent Projects · 14 Reviews
════════════════════════════════════════════ */
/* ── 3. Trusted By ── */
.hp-clients { background:var(--white); padding:32px 0; border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); overflow:hidden; }
.hp-clients-label { text-align:center; font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gray-400); margin-bottom:20px; display:block; }
.hp-clients-track-wrap { overflow:hidden; }
.hp-clients-track { display:flex; align-items:center; gap:48px; width:max-content; animation:scrollLeft 28s linear infinite; }
.hp-clients-track:hover { animation-play-state:paused; }
.hp-client-item { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hp-client-item img { height:36px; width:auto; max-width:130px; object-fit:contain; filter:grayscale(100%); opacity:0.55; transition:all 0.2s; }
.hp-client-item img:hover { filter:grayscale(0%); opacity:1; }
/* ── 5. Order in Minutes ── */
.hp-quick-order { background:var(--off-white) !important; }
.hp-quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.hp-quick-card {
display:flex; align-items:center; gap:16px;
background:var(--white); padding:20px 24px;
border:1px solid var(--gray-200);
text-decoration:none; transition:all 0.2s;
}
.hp-quick-card:hover { border-color:var(--yellow-border); transform:translateX(4px); }
.hp-quick-icon { width:56px; height:56px; flex-shrink:0; background:var(--gray-100); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hp-quick-icon img { width:100%; height:100%; object-fit:contain; }
.hp-quick-body { flex:1; display:flex; flex-direction:column; gap:3px; }
.hp-quick-name { font-family:var(--font-display); font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--black); line-height:1.2; }
.hp-quick-price { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:var(--yellow-border); }
.hp-quick-arrow { width:18px; height:18px; fill:var(--gray-300); flex-shrink:0; transition:fill 0.2s; }
.hp-quick-card:hover .hp-quick-arrow { fill:var(--yellow-border); }
@media(max-width:1100px) { .hp-quick-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .hp-quick-grid { grid-template-columns:1fr; } }
/* ── 6. Why Order Online ── */
.hp-why-online { background:var(--black); padding:80px 0; }
.hp-why-online-inner { max-width:1380px; margin:0 auto; padding:0 40px; }
.hp-why-online-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:48px; position:relative; }
.hp-why-step { padding:32px 24px; background:#1a1a1a; border-right:1px solid rgba(255,255,255,0.06); position:relative; text-align:center; }
.hp-why-step:last-child { border-right:none; }
.hp-why-step-icon { width:48px; height:48px; background:var(--yellow); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.hp-why-step-icon svg { width:22px; height:22px; fill:var(--black); }
.hp-why-step-title { font-family:var(--font-display); font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--white); margin-bottom:10px; }
.hp-why-step-desc { font-size:13px; color:rgba(255,255,255,0.5); line-height:1.6; }
.hp-why-step-arrow { position:absolute; top:36px; right:-14px; width:28px; height:28px; background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; font-size:16px; z-index:2; }
.hp-why-online .hp-section-head { text-align:center; }
.hp-why-online .section-label { color:rgba(255,255,255,0.35); }
.hp-why-online .section-title { color:var(--white); }
@media(max-width:1100px) { .hp-why-online-steps { grid-template-columns:repeat(2,1fr); } .hp-why-step { border-right:1px solid rgba(255,255,255,0.06); } .hp-why-step-arrow { display:none; } }
@media(max-width:600px) { .hp-why-online-steps { grid-template-columns:1fr; } .hp-why-online-inner { padding:0 16px; } }
/* ── 8. Featured Industries ── */
.hp-industries {
background: var(--white) !important;
}
.hp-industry-groups {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
margin-top: 32px;
}
.hp-industry-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 150px;
padding: 28px 18px;
background: var(--off-white);
border: 1px solid var(--gray-200);
text-decoration: none;
text-align: center;
transition: all 0.2s ease;
}
.hp-industry-card:hover {
background: var(--black);
border-color: var(--black);
transform: translateY(-2px);
}
.hp-industry-card-img {
width: 46px;
height: 46px;
flex-shrink: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.hp-industry-card-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.hp-industry-card-icon svg {
display: none;
}
.hp-industry-card-icon::before {
font-size: 26px;
line-height: 1;
color: var(--black);
transition: color 0.2s ease;
}
.hp-industry-card:hover .hp-industry-card-icon::before {
color: var(--yellow);
}
.hp-industry-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--black);
line-height: 1.1;
transition: color 0.2s ease;
}
.hp-industry-card:hover .hp-industry-name {
color: var(--white);
}
.hp-industry-arrow {
width: 18px;
height: 18px;
fill: var(--black);
flex-shrink: 0;
transition: transform 0.2s ease, fill 0.2s ease;
}
.hp-industry-card:hover .hp-industry-arrow {
fill: var(--yellow);
transform: translateX(4px);
}
.hp-industries-footer {
text-align: center;
margin-top: 32px;
}
@media (max-width: 1024px) {
.hp-industry-groups {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
.hp-industry-groups {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.hp-industry-card {
min-height: 135px;
padding: 22px 12px;
}
.hp-industry-name {
font-size: 14px;
}
.hp-industry-card-icon::before {
font-size: 24px;
}
}
/* ── 9. Design Online + How It Works ── */
.hp-design { background:var(--white); padding:100px 0; }
.hp-design-inner { max-width:1380px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.hp-design-sub { font-size:16px; color:var(--gray-600); line-height:1.7; margin:20px 0 28px; }
.hp-design-how { background:var(--off-white); border:1px solid var(--gray-200); padding:32px; }
.hp-design-how-title { font-family:var(--font-display); font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--black); margin-bottom:24px; }
.hp-design-steps { display:flex; flex-direction:column; gap:0; }
.hp-design-step { display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-bottom:1px solid var(--gray-200); }
.hp-design-step:last-child { border-bottom:none; }
.hp-design-step-num { font-family:var(--font-display); font-size:24px; font-weight:900; color:var(--yellow-border); line-height:1; flex-shrink:0; width:32px; }
.hp-design-step-body { display:flex; flex-direction:column; gap:4px; }
.hp-design-step-body strong { font-family:var(--font-display); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--black); }
.hp-design-step-body span { font-size:13px; color:var(--gray-600); line-height:1.5; }
@media(max-width:1100px) { .hp-design-inner { grid-template-columns:1fr; gap:40px; padding:0 24px; } .hp-design { padding:60px 0; } }
@media(max-width:768px) { .hp-design-inner { padding:0 16px; } }
.hp-design-title{
line-height:1.05;
margin-bottom:20px;
}
.hp-design-title .hp-design-or{
display:block;
font-size:clamp(20px,2vw,30px);
font-weight:500;
text-transform:uppercase;
letter-spacing:2px;
color:var(--gray-500);
margin:10px 0;
}
.hp-design-title .line-yellow{
display:block;
color:var(--yellow-border);
}
/* ── 13. Recent Projects — with products used ── */
.hp-project-products { list-style:none; padding:0; margin:8px 0 12px; display:flex; flex-direction:column; gap:4px; }
.hp-project-products li { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.6); }
.hp-project-products li svg { width:12px; height:12px; fill:var(--yellow); flex-shrink:0; }
.hp-project-cta { font-family:var(--font-display); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--yellow); text-decoration:none; transition:color 0.2s; }
.hp-project-card:hover .hp-project-cta { color:var(--white); }
/* ── 14. Reviews ── */
.hp-reviews-summary { display:flex; align-items:center; gap:12px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.hp-reviews-stars { color:var(--yellow); font-size:20px; letter-spacing:2px; }
.hp-reviews-score { font-family:var(--font-display); font-size:28px; font-weight:900; color:var(--black); line-height:1; }
.hp-reviews-score span { font-size:16px; color:var(--gray-400); }
.hp-reviews-count { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gray-400); }
.hp-review-source { font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray-400); margin-top:2px; }
.hp-reviews-footer { text-align:center; margin-top:32px; }
/* ═══════════════════════════════════════════
FIX #2 — Mobile Hero: one-screen overlay layout
Bronco sits behind text/buttons on right side.
═══════════════════════════════════════════ */
@media (max-width: 768px) {
.hp-hero {
position: relative;
display: block;
min-height: calc(100vh - 90px);
max-height: none;
overflow: hidden;
background: #111;
}
.hp-hero-content {
position: relative;
z-index: 5;
padding: 12px 20px 32px;
min-height: calc(100vh - 90px);
display: flex;
flex-direction: column;
justify-content: center;
}
.hp-hero-visual {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.hp-hero-img {
position: absolute;
right: -52%;
bottom: 55px;
width: 145%;
height: auto;
max-width: none;
object-fit: contain;
object-position: right bottom;
opacity: 0.72;
filter: brightness(0.72);
}
.hp-hero-visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(to right,
rgba(17,17,17,0.98) 0%,
rgba(17,17,17,0.90) 34%,
rgba(17,17,17,0.62) 62%,
rgba(17,17,17,0.22) 100%
),
linear-gradient(to bottom,
rgba(17,17,17,0.90) 0%,
rgba(17,17,17,0.45) 46%,
rgba(17,17,17,0.88) 100%
);
}
.hp-eyebrow {
font-size: 10px;
letter-spacing: 4px;
margin-bottom: 22px;
white-space: nowrap;
}
.hp-hero-h1 {
font-size: clamp(45px, 13vw, 70px);
line-height: 0.92;
letter-spacing: 1px;
margin-bottom: 26px;
max-width: 92%;
}
.hp-hero-sub {
font-size: 15px;
line-height: 1.75;
max-width: 88%;
margin-bottom: 30px;
color: rgba(255,255,255,0.66);
}
.hp-hero-ctas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
margin: 0;
}
.hero-cta-btn {
min-height: 82px;
padding: 10px 6px;
font-size: 9.5px;
letter-spacing: 1.3px;
line-height: 1.1;
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
white-space: normal;
}
.hero-cta-btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.hero-cta-btn span {
display: block;
white-space: normal;
}
}
@media (max-width: 420px) {
.hp-hero {
min-height: calc(100vh - 82px);
}
.hp-hero-content {
min-height: calc(100vh - 82px);
padding: 8px 18px 28px;
}
.hp-hero-img {
right: -60%;
bottom: 72px;
width: 158%;
opacity: 0.68;
}
.hp-eyebrow {
font-size: 9px;
letter-spacing: 3.2px;
margin-bottom: 18px;
}
.hp-hero-h1 {
font-size: clamp(42px, 14vw, 62px);
max-width: 95%;
margin-bottom: 22px;
}
.hp-hero-sub {
font-size: 14.5px;
line-height: 1.68;
max-width: 92%;
margin-bottom: 26px;
}
.hp-hero-ctas {
gap: 6px;
}
.hero-cta-btn {
min-height: 74px;
font-size: 8.8px;
letter-spacing: 1.1px;
padding: 8px 4px;
}
.hero-cta-btn svg {
width: 20px;
height: 20px;
}
}
/* ═══════════════════════════════════════════
ORDER IN MINUTES — Quick Order Cards
═══════════════════════════════════════════ */
.hp-quick-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.hp-quick-card {
display: grid;
grid-template-columns: 54px 1fr auto;
align-items: center;
gap: 18px;
min-height: 96px;
padding: 20px 26px;
background: var(--white);
border: 1px solid var(--gray-200);
text-decoration: none;
color: var(--black);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.hp-quick-card:hover {
border-color: var(--yellow-border);
transform: translateY(-2px);
}
.hp-quick-icon {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
}
.hp-quick-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.hp-quick-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.hp-quick-name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
line-height: 1;
}
.hp-quick-sub {
font-size: 12px;
color: #777;
line-height: 1.3;
}
.hp-quick-arrow,
.hp-quick-card svg {
display: none;
}
.hp-quick-arrow-text {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
line-height: 1;
color: var(--black);
transition: transform 0.2s ease, color 0.2s ease;
}
.hp-quick-card:hover .hp-quick-arrow-text {
color: var(--yellow-border);
transform: translateX(4px);
}
@media (max-width: 1024px) {
.hp-quick-grid {
grid-template-columns: repeat(3, 1fr);
}
.hp-quick-card {
grid-template-columns: 44px 1fr auto;
gap: 12px;
padding: 18px 14px;
}
.hp-quick-icon {
width: 44px;
height: 44px;
}
.hp-quick-name {
font-size: 15px;
}
}
@media (max-width: 768px) {
.hp-quick-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.hp-quick-card {
grid-template-columns: 1fr auto;
min-height: 120px;
padding: 16px 14px;
align-items: start;
}
.hp-quick-icon {
display: none;
}
.hp-quick-body {
align-self: end;
}
.hp-quick-name {
font-size: 15px;
line-height: 1.05;
}
.hp-quick-sub {
font-size: 11px;
}
.hp-quick-arrow-text {
font-size: 20px;
}
}
.hp-national-benefits-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--black);
margin: 28px 0 14px;
}
/* ──────────────────────────────────────────
Business Portal — Full Width CTA
────────────────────────────────────────── */
.bp-section--cta{
width:100%;
background:#111;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
margin:0;
padding:0;
}
.bp-cta-center{
max-width:760px;
margin:0 auto;
text-align:center;
padding:110px 24px;
}
.bp-cta-center .section-label{
color:var(--yellow);
}
.bp-cta-center .section-title{
color:#fff;
margin-top:10px;
}
.bp-cta-desc{
max-width:600px;
margin:22px auto 40px;
font-size:17px;
line-height:1.8;
color:rgba(255,255,255,.72);
}
.bp-cta-buttons{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
}
.bp-cta-buttons .btn-primary{
min-width:220px;
}
.bp-cta-buttons .btn-outline{
min-width:180px;
background:transparent;
color:#fff;
border:1px solid rgba(255,255,255,.25);
}
.bp-cta-buttons .btn-outline:hover{
background:#fff;
color:#111;
border-color:#fff;
}
.bp-cta-note{
max-width:640px;
margin:28px auto 0;
font-size:14px;
line-height:1.7;
color:rgba(255,255,255,.45);
}
.bp-cta-note strong{
color:#fff;
}
@media(max-width:768px){
.bp-cta-center{
padding:80px 20px;
}
.bp-cta-buttons{
flex-direction:column;
align-items:center;
}
.bp-cta-buttons .btn-primary,
.bp-cta-buttons .btn-outline{
width:100%;
max-width:340px;
}
}
/* FORCE Branding Category Layout */
.branding-grid--six {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
grid-template-rows: 260px 260px 260px !important;
gap: 3px !important;
}
.branding-grid--six .branding-card:nth-child(1) {
grid-column: 1 / span 2 !important;
grid-row: 1 / span 2 !important;
}
.branding-grid--six .branding-card:nth-child(2) {
grid-column: 3 !important;
grid-row: 1 !important;
}
.branding-grid--six .branding-card:nth-child(3) {
grid-column: 3 !important;
grid-row: 2 !important;
}
.branding-grid--six .branding-card:nth-child(4) {
grid-column: 1 !important;
grid-row: 3 !important;
}
.branding-grid--six .branding-card:nth-child(5) {
grid-column: 2 !important;
grid-row: 3 !important;
}
.branding-grid--six .branding-card:nth-child(6) {
grid-column: 3 !important;
grid-row: 3 !important;
}
@media (max-width: 1100px) {
.branding-grid--six {
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: auto !important;
}
.branding-grid--six .branding-card,
.branding-grid--six .branding-card:nth-child(n),
.branding-grid--six .branding-card--large {
grid-column: auto !important;
grid-row: auto !important;
min-height: 220px !important;
aspect-ratio: 4 / 3 !important;
}
}
@media (max-width: 768px) {
.branding-grid--six {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
.branding-grid--six .branding-card,
.branding-grid--six .branding-card:nth-child(n),
.branding-grid--six .branding-card--large {
grid-column: auto !important;
grid-row: auto !important;
min-height: 170px !important;
aspect-ratio: 1 / 1 !important;
}
.branding-card-body {
padding: 14px !important;
}
.branding-card-title {
font-size: 17px !important;
letter-spacing: 1px !important;
}
.branding-card-cta {
font-size: 8px !important;
}
}
@media (max-width: 1100px) {
.hp-hero-content {
background: #000000;
}
}
/* FINAL FIX — Mobile homepage hero top spacing */
@media (max-width: 768px) {
.hp-hero {
min-height: auto !important;
display: block !important;
}
.hp-hero-content {
min-height: auto !important;
justify-content: flex-start !important;
padding: 22px 18px 34px !important;
}
.hp-eyebrow {
margin-top: 0 !important;
}
.hp-hero-h1 {
margin-top: 0 !important;
}
}
@media (max-width: 420px) {
.hp-hero-content {
min-height: auto !important;
justify-content: flex-start !important;
padding: 18px 18px 30px !important;
}
}
/* ── Scroll to top ── */
#scroll-top-btn {
position: fixed;
bottom: 32px;
right: 90px;
z-index: 900;
width: 44px;
height: 44px;
background: var(--black);
border: 2px solid rgba(255,255,255,0.15);
color: var(--yellow);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 28px;
font-weight: 900;
line-height: 1;
clip-path: polygon(
0 0,
calc(100% - 6px) 0,
100% 6px,
100% 100%,
6px 100%,
0 calc(100% - 6px)
);
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: opacity 0.2s, transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}
#scroll-top-btn.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
#scroll-top-btn:hover {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
@media(max-width: 1024px) {
#scroll-top-btn {
bottom: 100px;
right: 16px;
}
}
/* ── Font match agwraps.com ── */
--font-mono: 'Barlow Condensed', sans-serif;
--font-body: 'Roboto', 'Figtree', sans-serif;
/* Search overlay close button */
.search-overlay-close {
position: absolute;
top: 24px;
right: 24px;
z-index: 99999;
width: 44px;
height: 44px;
display: flex !important;
align-items: center;
justify-content: center;
background: #ffd000 !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 999px;
color: #111 !important;
cursor: pointer;
opacity: 1 !important;
visibility: visible !important;
}
.search-overlay-close span {
display: block !important;
font-size: 34px !important;
font-weight: 400 !important;
line-height: 1 !important;
color: #111 !important;
transform: translateY(-1px);
}
.search-overlay-close:hover {
background: #fff !important;
}
/* Hero section black background */
.hp-hero {
background: #000 !important;
color: #fff;
}
.final-cta-contact-item:hover {
color: #ffd000;
}