/* ═══════════════════════════════════════════════════
LAND CRUISER HEAVEN — WORDPRESS THEME
Dark-first, rugged-bold aesthetic
Toyota Tri-Stripe: Red #CC2200 / Orange #F07800 / Yellow #FFCC00
═══════════════════════════════════════════════════ */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,700;1,800&display=swap');
/* ─── DESIGN TOKENS ─── */
:root {
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
--text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
--text-hero: clamp(3rem, 0.5rem + 7vw, 7rem);
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
--space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
--font-display: 'Clash Display', 'Arial Black', sans-serif;
--font-logo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
--font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
--content-default: 1200px;
--content-wide: 1440px;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.875rem;
--transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
/* Toyota Tri-Stripe */
--toyota-red: #CC2200;
--toyota-orange: #F07800;
--toyota-yellow: #FFCC00;
--tristripe-h: linear-gradient(to right,
var(--toyota-red) 0%, var(--toyota-red) 33.3%,
var(--toyota-orange) 33.3%, var(--toyota-orange) 66.6%,
var(--toyota-yellow) 66.6%, var(--toyota-yellow) 100%);
/* Dark theme (default) */
--color-bg: #0e0e0d;
--color-surface: #141413;
--color-surface-2: #1a1a18;
--color-surface-3: #222220;
--color-border: #2a2a28;
--color-divider: #1e1e1c;
--color-text: #e8e6e1;
--color-text-muted: #8a8880;
--color-text-faint: #4a4a48;
--color-primary: #CC2200;
--color-primary-hover:#e02800;
--color-accent: #F07800;
--color-accent-hover: #ff8800;
--color-accent-dim: rgba(240,120,0,0.15);
--color-gold: #FFCC00;
--color-gold-dim: rgba(255,204,0,0.15);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
--shadow-md: 0 4px 16px rgba(0,0,0,0.5);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
}
/* ─── BASE RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-padding-top: 5rem;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--color-text);
background-color: var(--color-bg);
line-height: 1.6;
min-height: 100dvh;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; }
p { max-width: 72ch; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ─── ANNOUNCEMENT BAR ─── */
/* ─── TICKER BAR ─── */
.lch-ticker-bar {
background: linear-gradient(to right,
#CC2200 0%, #CC2200 33%,
#F07800 33%, #F07800 66%,
#FFCC00 66%);
overflow: hidden;
height: 32px;
display: flex;
align-items: center;
position: relative;
}
.lch-ticker-track {
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
}
.lch-ticker-inner {
display: flex;
align-items: center;
white-space: nowrap;
animation: lchTicker 40s linear infinite;
will-change: transform;
}
.lch-ticker-inner:hover {
animation-play-state: paused;
}
@keyframes lchTicker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.lch-ticker-item {
display: inline-flex;
align-items: center;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.35);
padding: 0 20px;
}
.lch-ticker-item a {
color: #fff;
text-decoration: underline;
text-underline-offset: 2px;
}
.lch-ticker-item a:hover {
opacity: 0.85;
}
.lch-ticker-sep {
color: rgba(255,255,255,0.4);
font-size: 0.5rem;
flex-shrink: 0;
}
/* ─── HEADER ─── */
.lch-header {
position: sticky;
top: 0;
z-index: 200;
background: var(--color-bg);
box-shadow:
0 3px 0 0 var(--toyota-red),
0 5px 0 0 var(--toyota-orange),
0 7px 0 0 var(--toyota-yellow),
var(--shadow-sm);
}
.lch-header-inner {
max-width: var(--content-wide);
margin: 0 auto;
padding: var(--space-3) var(--space-8);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.lch-logo-link {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
gap: 0;
text-decoration: none;
}
.lch-logo-byline {
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: -2px;
padding-left: 2px;
line-height: 1;
white-space: nowrap;
}
.lch-logo-img {
height: 40px !important;
width: auto !important;
max-width: 180px !important;
object-fit: contain;
display: block;
filter: brightness(1);
transition: opacity var(--transition), height var(--transition);
}
.lch-logo-img:hover { opacity: 0.85; }
/* Header search (WooCommerce native) */
.lch-header-search {
position: relative;
display: flex;
align-items: center;
width: 260px;
flex-shrink: 0;
}
.lch-header-search .search-icon {
position: absolute;
left: var(--space-4);
color: var(--color-text-muted);
pointer-events: none;
}
.lch-header-search input[type="search"],
.lch-header-search .woocommerce-product-search input[type="search"] {
width: 100%;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
font-size: var(--text-sm);
color: var(--color-text);
transition: border-color var(--transition), box-shadow var(--transition);
}
.lch-header-search input[type="search"]::placeholder { color: var(--color-text-faint); }
.lch-header-search input[type="search"]:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-dim);
}
.lch-header-actions {
display: flex;
align-items: center;
gap: var(--space-6);
}
.lch-header-phone {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-muted);
transition: color var(--transition);
white-space: nowrap;
}
.lch-header-phone:hover { color: var(--color-accent); }
.lch-header-icon {
position: relative;
color: var(--color-text-muted);
transition: color var(--transition);
}
.lch-header-icon:hover { color: var(--color-text); }
/* WooCommerce cart icon badge */
.lch-cart-count {
position: absolute;
top: -6px;
right: -8px;
background: var(--color-accent);
color: #0e0e0d;
font-size: 10px;
font-weight: 700;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ─── NAV ─── */
.lch-nav {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.lch-nav-inner {
max-width: var(--content-wide);
margin: 0 auto;
padding: 0 var(--space-8);
display: flex;
align-items: stretch;
}
.lch-nav-inner ul { display: flex; align-items: stretch; width: 100%; }
.lch-nav-inner ul li a,
.lch-nav-shop-btn {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
border-bottom: 2px solid transparent;
transition: color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.lch-nav-inner ul li a:hover { color: var(--color-text); border-bottom-color: var(--color-accent); }
.lch-nav-shop-btn {
background: var(--color-surface-3);
font-weight: 600;
color: var(--color-text);
margin-right: var(--space-4);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border-bottom: 2px solid var(--color-accent);
border: none;
cursor: pointer;
}
.lch-nav-cta a {
color: var(--color-accent) !important;
font-weight: 600 !important;
}
.lch-nav-cta a:hover { color: var(--color-accent-hover) !important; }
/* WordPress menu current item */
.lch-nav-inner ul .current-menu-item > a { color: var(--color-text); border-bottom-color: var(--color-accent); }
/* ─── BUTTONS ─── */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-6);
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
border: 2px solid transparent;
letter-spacing: 0.02em;
text-decoration: none;
}
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
background: var(--color-primary);
color: #fff !important;
border-color: var(--color-primary);
}
.btn-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-accent,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
background: var(--color-accent);
color: #0e0e0d !important;
border-color: var(--color-accent);
}
.btn-accent:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
transform: translateY(-1px);
}
.btn-ghost {
background: transparent;
color: var(--color-text);
border-color: var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-text-muted); background: var(--color-surface-2); }
.btn-outline {
background: transparent;
color: var(--color-accent);
border-color: var(--color-accent);
}
.btn-outline:hover { background: var(--color-accent); color: #0e0e0d; transform: translateY(-1px); }
/* ─── SECTION COMMON ─── */
.section-eyebrow {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.section-title {
font-family: var(--font-logo);
font-size: var(--text-2xl);
font-weight: 800;
font-style: italic;
text-transform: uppercase;
color: var(--color-text);
margin-bottom: var(--space-4);
letter-spacing: 0.01em;
}
.section-sub {
font-size: var(--text-base);
color: var(--color-text-muted);
max-width: 54ch;
line-height: 1.7;
}
.section-header { text-align: center; margin-bottom: var(--space-12); }
.section-header .section-sub { margin: 0 auto; }
/* ─── HERO ─── */
.lch-hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
overflow: hidden;
}
.lch-hero-bg { position: absolute; inset: 0; z-index: 0; }
.lch-hero-bg-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 0.8fr;
height: 100%;
gap: 2px;
}
.lch-hero-bg-cell {
background-size: cover;
background-position: center;
filter: brightness(0.45) saturate(0.7);
}
.lch-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(105deg,
rgba(14,14,13,0.92) 0%,
rgba(14,14,13,0.75) 40%,
rgba(14,14,13,0.3) 100%);
z-index: 1;
}
.lch-hero-content {
position: relative;
z-index: 2;
max-width: var(--content-wide);
margin: 0 auto;
padding: var(--space-24) var(--space-16);
width: 100%;
}
.lch-hero-eyebrow {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-5);
display: flex;
align-items: center;
gap: var(--space-3);
}
.lch-hero-eyebrow::before {
content: '';
display: block;
width: 36px;
height: 6px;
background: linear-gradient(to bottom,
var(--toyota-red) 0%, var(--toyota-red) 33.3%,
var(--toyota-orange) 33.3% 66.6%,
var(--toyota-yellow) 66.6% 100%);
border-radius: 1px;
flex-shrink: 0;
}
.lch-hero-heading {
font-family: var(--font-logo);
font-size: var(--text-hero);
font-weight: 800;
font-style: italic;
line-height: 0.95;
color: var(--color-text);
margin-bottom: var(--space-8);
max-width: 14ch;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.lch-hero-accent { color: var(--color-accent); display: block; }
.lch-hero-sub {
font-size: var(--text-lg);
color: rgba(232,230,225,0.8);
max-width: 52ch;
margin-bottom: var(--space-10);
line-height: 1.65;
}
.lch-hero-ctas {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-16);
flex-wrap: wrap;
}
.lch-hero-stats {
display: flex;
align-items: center;
gap: var(--space-8);
}
.lch-hero-stat { text-align: left; }
.stat-num {
display: block;
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text);
line-height: 1;
}
.stat-label {
display: block;
font-size: var(--text-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: var(--space-1);
}
.lch-hero-stat-divider { width: 1px; height: 40px; background: var(--color-border); }
/* ─── TRUST BAR ─── */
.lch-trust-bar {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: var(--space-6) 0;
}
.lch-trust-bar-inner {
max-width: var(--content-wide);
margin: 0 auto;
padding: 0 var(--space-8);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.lch-trust-item { display: flex; align-items: center; gap: var(--space-4); }
.lch-trust-item svg { flex-shrink: 0; }
.lch-trust-item strong { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--color-text); line-height: 1.3; }
.lch-trust-item span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
/* ─── SERIES SECTION ─── */
.lch-series-section {
padding: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-8);
max-width: var(--content-wide);
margin: 0 auto;
}
.lch-series-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto auto;
gap: var(--space-3);
}
.lch-series-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
cursor: pointer;
display: block;
text-decoration: none;
}
.lch-series-card--featured { grid-column: span 1; grid-row: span 1; aspect-ratio: auto; }
.lch-series-card--featured-right{ grid-column: span 2; aspect-ratio: auto; min-height: 220px; }
.lch-series-card--wide { grid-column: span 2; aspect-ratio: auto; min-height: 180px; }
.lch-series-card-img {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.lch-series-card:hover .lch-series-card-img { transform: scale(1.06); }
.lch-series-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(175deg, rgba(14,14,13,0.1) 0%, rgba(14,14,13,0.75) 100%);
transition: background var(--transition);
}
.lch-series-card:hover .lch-series-card-overlay {
background: linear-gradient(175deg, rgba(14,14,13,0.15) 0%, rgba(14,14,13,0.85) 100%);
}
.lch-series-card-content {
position: absolute; bottom: 0; left: 0; right: 0;
padding: var(--space-6);
display: flex; flex-direction: column; gap: var(--space-1);
}
.lch-series-badge {
display: inline-block;
font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--color-primary); color: #fff;
padding: 2px var(--space-3); border-radius: var(--radius-sm);
margin-bottom: var(--space-2); width: fit-content;
}
.lch-series-badge--gold { background: var(--color-accent); color: #0e0e0d; }
.lch-series-name {
font-family: var(--font-logo);
font-size: var(--text-xl); font-weight: 800; font-style: italic;
text-transform: uppercase; color: #fff; line-height: 1.0; letter-spacing: 0.01em;
}
.lch-series-card--featured .lch-series-name { font-size: var(--text-2xl); }
.lch-series-years { font-size: var(--text-xs); color: rgba(255,255,255,0.65); letter-spacing: 0.05em; }
.lch-series-arrow {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background: var(--color-accent); border-radius: 50%; color: #0e0e0d;
position: absolute; bottom: var(--space-6); right: var(--space-6);
opacity: 0; transform: translateX(-8px);
transition: opacity var(--transition), transform var(--transition);
}
.lch-series-card:hover .lch-series-arrow { opacity: 1; transform: translateX(0); }
/* ─── PRODUCTS SECTION ─── */
.lch-products-section {
padding: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-8);
background: var(--color-surface);
}
.lch-products-section .section-header {
max-width: var(--content-wide);
margin: 0 auto var(--space-12);
text-align: left;
}
.lch-products-grid {
max-width: var(--content-wide);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.lch-product-card {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.lch-product-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-accent);
}
.lch-product-img-wrap {
position: relative; display: block;
aspect-ratio: 16/10; overflow: hidden;
}
.lch-product-img {
width: 100%; height: 100%;
background-size: cover; background-position: center;
transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.lch-product-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.lch-product-card:hover .lch-product-img,
.lch-product-card:hover .lch-product-img img { transform: scale(1.04); }
.lch-product-badge {
position: absolute; top: var(--space-3); left: var(--space-3);
background: var(--color-surface-3); color: var(--color-text-muted);
font-size: var(--text-xs); font-weight: 700;
padding: 3px var(--space-3); border-radius: var(--radius-sm);
letter-spacing: 0.05em; text-transform: uppercase;
border: 1px solid var(--color-border);
}
.lch-product-badge--sale { background: var(--color-primary); color: #fff; border-color: transparent; }
.lch-product-badge--new { background: var(--color-accent); color: #0e0e0d; border-color: transparent; }
.lch-product-info {
padding: var(--space-5);
display: flex; flex-direction: column; gap: var(--space-2);
}
.lch-product-series-tag {
font-size: var(--text-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--color-accent);
}
.lch-product-name {
font-family: var(--font-display);
font-size: var(--text-lg); font-weight: 600; line-height: 1.2;
}
.lch-product-name a { transition: color var(--transition); }
.lch-product-name a:hover { color: var(--color-accent); }
.lch-product-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.lch-product-footer {
display: flex; align-items: center; justify-content: space-between;
margin-top: var(--space-3); padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.lch-product-price {
font-family: var(--font-display);
font-size: var(--text-xl); font-weight: 700; color: var(--color-text);
}
.lch-products-cta {
max-width: var(--content-wide);
margin: var(--space-12) auto 0;
text-align: center;
}
/* ─── WOOCOMMERCE SHOP PAGE ─── */
.lch-shop-page {
max-width: var(--content-wide);
margin: 0 auto;
padding: var(--space-12) var(--space-8);
}
.lch-shop-header { margin-bottom: var(--space-10); }
.lch-shop-header h1 {
font-family: var(--font-logo);
font-size: var(--text-3xl); font-weight: 800; font-style: italic;
text-transform: uppercase; color: var(--color-text);
}
/* WooCommerce product grid override — reset ALL WC/block column rules */
.woocommerce ul.products,
ul.products.columns-3,
ul.products.columns-2,
ul.products.columns-4 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--space-6) !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
/* Kill any wc-blocks CSS custom property columns */
--wc-columns: 3 !important;
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
clear: none !important;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-accent);
}
/* ─── PRODUCT IMAGE WRAPPER — hard-clipped div, immune to srcset/attribute sizes ─── */
.lch-product-img-wrap {
width: 100%;
height: 200px;
min-height: 200px;
max-height: 200px;
overflow: hidden;
display: block;
background: var(--color-surface-3);
flex-shrink: 0;
}
.lch-product-img-link {
display: block;
width: 100%;
height: 100%;
}
.lch-product-img-wrap img,
.lch-product-img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
/* Neutralize any HTML width/height attribute influence */
max-width: 100% !important;
min-height: 0 !important;
}
.lch-product-info {
display: flex;
flex-direction: column;
flex: 1;
padding: 0;
}
/* Outer WC link wrapper — containment rules so it can NEVER inflate image height */
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
display: contents !important; /* collapses to invisible box, children lay out normally */
}
/* Fallback for browsers that don't support display:contents on */
@supports not (display: contents) {
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
display: block !important;
padding: 0 !important;
margin: 0 !important;
height: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
}
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font-display) !important;
font-size: var(--text-base) !important;
font-weight: 600 !important;
color: var(--color-text) !important;
padding: var(--space-4) var(--space-4) var(--space-2) !important;
line-height: 1.3 !important;
min-height: 4.5rem !important;
}
.woocommerce ul.products li.product .price {
font-family: var(--font-display) !important;
font-size: var(--text-lg) !important;
font-weight: 700 !important;
color: var(--color-text) !important;
padding: 0 var(--space-4) var(--space-3) !important;
display: block !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .price del { color: var(--color-text-muted); font-size: var(--text-sm); }
.woocommerce ul.products li.product .button {
margin: 0 var(--space-4) var(--space-4) !important;
display: block !important;
width: calc(100% - 2rem) !important;
text-align: center !important;
margin-top: auto !important;
}
/* ── Product card: flex column so button always pins to bottom ── */
.woocommerce ul.products li.product {
display: flex !important;
flex-direction: column !important;
}
/* WooCommerce sidebar/widgets */
.lch-shop-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--space-10);
align-items: start;
}
.lch-shop-sidebar { position: sticky; top: 8rem; }
/* ─── SIDEBAR CATEGORY LIST ─── */
.lch-sidebar-heading {
font-family: var(--font-display);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
.lch-sidebar-cats,
.lch-sidebar-cats ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 2px;
}
.lch-sidebar-cats li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Top-level items */
.lch-sidebar-cats > li > a {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text);
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
line-height: 1.4;
transition: color var(--transition);
}
.lch-sidebar-cats > li > a:hover { color: var(--color-accent); }
.lch-sidebar-cats > li.current-cat > a,
.lch-sidebar-cats > li.current-cat-parent > a { color: var(--color-accent); }
/* Child items — indented with left border */
.lch-sidebar-cats ul {
padding-left: var(--space-3) !important;
margin: 2px 0 var(--space-2) !important;
border-left: 2px solid var(--color-border) !important;
}
.lch-sidebar-cats ul li a {
font-size: var(--text-xs);
font-weight: 400;
color: var(--color-text-muted);
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 0;
line-height: 1.4;
transition: color var(--transition);
}
.lch-sidebar-cats ul li a:hover { color: var(--color-accent); }
.lch-sidebar-cats ul li.current-cat > a { color: var(--color-accent); font-weight: 600; }
/* Count badge */
.lch-sidebar-cats a .count,
.lch-sidebar-cats a span {
font-size: 0.62rem;
color: var(--color-text-faint);
margin-left: var(--space-1);
}
/* Legacy widget fallback */
.lch-widget-title {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
/* WooCommerce breadcrumbs */
.woocommerce-breadcrumb {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-8);
}
.woocommerce-breadcrumb a { color: var(--color-text-muted); transition: color var(--transition); }
.woocommerce-breadcrumb a:hover { color: var(--color-accent); }
/* ─── SINGLE PRODUCT ─── */
.lch-single-product {
max-width: var(--content-wide);
margin: 0 auto;
padding: var(--space-10) var(--space-8);
}
/* Quantity + Add to cart row */
.woocommerce div.product form.cart {
display: flex !important;
align-items: center !important;
gap: var(--space-4) !important;
flex-wrap: nowrap !important;
margin-bottom: var(--space-6) !important;
}
.woocommerce div.product form.cart .qty,
.woocommerce div.product form.cart input[type="number"] {
width: 80px !important;
height: 52px !important;
font-size: var(--text-base) !important;
font-weight: 700 !important;
text-align: center !important;
background: var(--color-surface-2) !important;
border: 2px solid var(--color-border) !important;
border-radius: var(--radius-md) !important;
color: var(--color-text) !important;
padding: 0 var(--space-3) !important;
flex-shrink: 0 !important;
}
.woocommerce div.product form.cart .qty:focus,
.woocommerce div.product form.cart input[type="number"]:focus {
border-color: var(--color-accent) !important;
outline: none !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
flex: 1 !important;
height: 52px !important;
font-size: var(--text-base) !important;
font-weight: 700 !important;
background: var(--color-accent) !important;
color: #0e0e0d !important;
border: none !important;
border-radius: var(--radius-md) !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background var(--transition), transform var(--transition) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
background: var(--color-accent-hover) !important;
transform: translateY(-1px) !important;
}
.woocommerce div.product {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product .summary { grid-column: 2; }
.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title,
.single-product .product_title,
.single-product h1.entry-title,
body.single-product h1.product_title {
font-family: var(--font-logo) !important;
font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem) !important;
font-weight: 800 !important;
font-style: italic !important;
text-transform: uppercase !important;
color: var(--color-text) !important;
line-height: 1.15 !important;
margin-bottom: var(--space-4) !important;
word-break: break-word !important;
}
.woocommerce div.product .price {
font-family: var(--font-display) !important;
font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem) !important;
font-weight: 700 !important;
color: var(--color-text) !important;
margin-bottom: var(--space-6) !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: var(--space-8);
}
/* Full product description */
.woocommerce div.product .woocommerce-Tabs-panel {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-8);
color: var(--color-text-muted);
line-height: 1.8;
}
/* ── Product description rich text ───────────────────────────────────── */
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-lg);
color: var(--color-text);
margin: var(--space-8) 0 var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.woocommerce-Tabs-panel--description h3:first-child,
.woocommerce-Tabs-panel--description h4:first-child {
margin-top: 0;
}
.woocommerce-Tabs-panel--description p {
margin-bottom: var(--space-4);
}
.woocommerce-Tabs-panel--description ul {
list-style: disc !important;
padding-left: var(--space-6) !important;
margin-bottom: var(--space-4);
}
.woocommerce-Tabs-panel--description ul li {
list-style: disc !important;
margin-bottom: var(--space-2);
color: var(--color-text-muted);
line-height: 1.7;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex; gap: var(--space-2);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-6);
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: var(--space-3) var(--space-5);
font-size: var(--text-sm); font-weight: 600;
color: var(--color-text-muted);
border-bottom: 2px solid transparent;
transition: color var(--transition), border-color var(--transition);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--color-text);
border-bottom-color: var(--color-accent);
}
/* ─── BUILDS CALLOUT ─── */
.lch-builds-callout {
padding: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-8);
background: var(--color-bg);
}
.lch-builds-callout-inner {
max-width: var(--content-wide);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.lch-builds-callout-text .section-title { text-align: left; }
.lch-builds-callout-text p {
color: var(--color-text-muted); line-height: 1.7;
margin-bottom: var(--space-8); max-width: 52ch;
}
.lch-builds-list {
display: flex; flex-direction: column;
gap: var(--space-3); margin-bottom: var(--space-10);
}
.lch-builds-list li {
display: flex; align-items: center;
gap: var(--space-3);
font-size: var(--text-sm); font-weight: 500; color: var(--color-text);
}
.lch-builds-list li:nth-child(3n+1) svg { color: var(--toyota-red); }
.lch-builds-list li:nth-child(3n+2) svg { color: var(--toyota-orange); }
.lch-builds-list li:nth-child(3n+3) svg { color: var(--toyota-yellow); }
.lch-builds-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--space-3); height: 460px;
}
.lch-builds-img {
border-radius: var(--radius-lg);
background-size: cover; background-position: center; overflow: hidden;
}
.lch-builds-img-1 { grid-column: 1; grid-row: 1 / span 2; }
.lch-builds-img-2 { grid-column: 2; grid-row: 1; }
.lch-builds-img-3 { grid-column: 2; grid-row: 2; }
/* ─── WHY LCH ─── */
.lch-why-section {
background: var(--color-surface);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.lch-why-inner {
max-width: var(--content-wide);
margin: 0 auto;
padding: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-8);
}
.lch-why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-8);
}
.lch-why-card {
padding: var(--space-8) var(--space-6);
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color var(--transition), transform var(--transition);
}
.lch-why-card:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.lch-why-icon {
width: 52px; height: 52px; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--space-5);
}
.lch-why-card:nth-child(4n+1) .lch-why-icon { background: rgba(204,34,0,0.12); color: var(--toyota-red); }
.lch-why-card:nth-child(4n+2) .lch-why-icon { background: rgba(240,120,0,0.12); color: var(--toyota-orange); }
.lch-why-card:nth-child(4n+3) .lch-why-icon { background: rgba(255,204,0,0.12); color: var(--toyota-yellow); }
.lch-why-card:nth-child(4n+4) .lch-why-icon { background: rgba(204,34,0,0.12); color: var(--toyota-red); }
.lch-why-card h3 {
font-family: var(--font-display); font-size: var(--text-lg);
font-weight: 600; margin-bottom: var(--space-3); color: var(--color-text);
}
.lch-why-card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; }
/* ─── CTA BANNER ─── */
.lch-cta-banner {
background: linear-gradient(135deg, #1a0800 0%, #220a00 50%, #1a0600 100%);
padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-8);
position: relative;
}
.lch-cta-banner::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 5px; background: var(--tristripe-h);
}
.lch-cta-banner::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
height: 5px; background: var(--tristripe-h);
}
.lch-cta-banner-inner {
max-width: var(--content-wide);
margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-10); flex-wrap: wrap;
}
.lch-cta-banner-text h2 {
font-family: var(--font-display); font-size: var(--text-2xl);
font-weight: 700; color: #fff; margin-bottom: var(--space-2);
}
.lch-cta-banner-text p { font-size: var(--text-base); color: rgba(255,255,255,0.65); }
.lch-cta-banner-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
/* ─── FOOTER ─── */
.lch-footer {
background: var(--color-surface);
padding: 0 var(--space-8);
position: relative;
}
.lch-footer-tristripe {
height: 4px;
background: var(--tristripe-h);
width: 100%;
margin-bottom: clamp(var(--space-16), 6vw, var(--space-24));
}
.lch-footer-inner {
max-width: var(--content-wide);
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr repeat(4, 1fr);
gap: var(--space-12);
padding-bottom: var(--space-16);
border-bottom: 1px solid var(--color-border);
}
.lch-footer-logo-img {
height: 36px; width: auto; max-width: 220px;
object-fit: contain; margin-bottom: var(--space-4);
opacity: 0.85; display: block;
}
.lch-footer-logo-byline {
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-top: -6px;
margin-bottom: var(--space-3);
}
.lch-footer-tagline {
font-size: var(--text-sm); color: var(--color-text-muted);
line-height: 1.6; margin-bottom: var(--space-6); max-width: 28ch;
}
.lch-footer-social { display: flex; gap: var(--space-4); }
.lch-footer-social a { color: var(--color-text-muted); transition: color var(--transition); }
.lch-footer-social a:hover { color: var(--color-accent); }
.lch-footer-col h4 {
font-family: var(--font-display); font-size: var(--text-sm);
font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--color-text); margin-bottom: var(--space-5);
}
.lch-footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.lch-footer-col li a,
.lch-footer-col li span {
font-size: var(--text-sm); color: var(--color-text-muted);
transition: color var(--transition);
}
.lch-footer-col li a:hover { color: var(--color-accent); }
.lch-footer-disclaimer {
border-top: 1px solid var(--color-border);
padding: var(--space-6) var(--space-8);
max-width: var(--content-wide);
margin: 0 auto;
}
.lch-footer-disclaimer p {
font-size: 0.68rem;
color: var(--color-text-faint);
line-height: 1.7;
text-align: center;
font-style: italic;
max-width: 80ch;
margin: 0 auto;
}
.lch-footer-bottom {
max-width: var(--content-wide);
margin: 0 auto;
padding: var(--space-6) 0;
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-6);
}
.lch-footer-bottom p { font-size: var(--text-xs); color: var(--color-text-faint); }
.lch-footer-legal { display: flex; gap: var(--space-6); }
.lch-footer-legal a { font-size: var(--text-xs); color: var(--color-text-faint); transition: color var(--transition); }
.lch-footer-legal a:hover { color: var(--color-text-muted); }
/* ─── WC CART / CHECKOUT ─── */
.woocommerce-cart .lch-page-content,
.woocommerce-checkout .lch-page-content,
.woocommerce-account .lch-page-content {
max-width: var(--content-wide);
margin: 0 auto;
padding: var(--space-12) var(--space-8);
}
.woocommerce table.shop_table {
border-collapse: collapse; width: 100%;
background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden;
}
.woocommerce table.shop_table th {
background: var(--color-surface-3);
color: var(--color-text-muted); font-size: var(--text-xs);
font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: var(--space-4) var(--space-6); border: none;
}
.woocommerce table.shop_table td {
color: var(--color-text); padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-border); vertical-align: middle;
}
.woocommerce table.shop_table .product-name a { color: var(--color-text); transition: color var(--transition); }
.woocommerce table.shop_table .product-name a:hover { color: var(--color-accent); }
.woocommerce .cart-collaterals { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); }
.woocommerce .cart_totals h2 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-4); color: var(--color-text); }
/* Checkout form */
.woocommerce .woocommerce-billing-fields h3,
.woocommerce .woocommerce-shipping-fields h3,
.woocommerce #order_review_heading {
font-family: var(--font-display); font-size: var(--text-xl);
font-weight: 700; color: var(--color-text); margin-bottom: var(--space-6);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
background: var(--color-surface-2) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-md) !important;
color: var(--color-text) !important;
padding: var(--space-3) var(--space-4) !important;
font-family: var(--font-body) !important;
transition: border-color var(--transition), box-shadow var(--transition) !important;
width: 100% !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
outline: none !important;
border-color: var(--color-accent) !important;
box-shadow: 0 0 0 3px var(--color-accent-dim) !important;
}
.woocommerce form .form-row label { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-2); display: block; }
/* ─── WC NOTICES ─── */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
border-radius: var(--radius-md) !important;
border-left: 4px solid var(--color-accent) !important;
background: var(--color-surface) !important;
color: var(--color-text) !important;
padding: var(--space-4) var(--space-6) !important;
margin-bottom: var(--space-3) !important;
padding-left: 2.5rem !important;
position: relative !important;
/* auto-dismiss animation */
transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease !important;
overflow: hidden !important;
}
.woocommerce-message.lch-notice-hiding {
opacity: 0 !important;
transform: translateY(-6px) !important;
max-height: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
pointer-events: none !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
position: absolute !important;
left: 0.75rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
/* ensure the ::before pseudo-element is vertically centered on the flex row */
line-height: 1 !important;
}
/* The notice content is flex — align icon with first line of text */
.woocommerce-message {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
flex-wrap: wrap !important;
}
/* The ::before checkmark icon */
.woocommerce-message::before {
position: static !important;
transform: none !important;
flex-shrink: 0 !important;
margin-left: -1.75rem !important;
align-self: center !important;
}
.woocommerce-error { border-left-color: var(--color-primary) !important; }
/* ─── CART ITEM META (selected options) ─── */
/* WC Blocks cart — product title */
.wc-block-components-product-name {
font-size: 1.15rem !important;
font-weight: 700 !important;
color: #e8e6e1 !important;
line-height: 1.3 !important;
margin-bottom: 0.25rem !important;
}
/* WC Blocks cart — option label (field name) */
.wc-block-components-product-details__name {
font-size: 1.05rem !important;
font-weight: 600 !important;
color: rgba(232,230,225,0.9) !important;
}
/* WC Blocks cart — option value */
.wc-block-components-product-details__value {
font-size: 1.05rem !important;
color: rgba(232,230,225,0.72) !important;
}
/* The whole details row */
.wc-block-components-product-details,
.wc-block-components-product-details__row,
[class*="wc-block-components-product-details__"] {
font-size: 1.05rem !important;
line-height: 1.7 !important;
}
/* Classic cart fallback */
td.product-name dl.variation dt,
td.product-name .wc-item-meta dt {
font-size: 1.05rem !important;
font-weight: 600 !important;
color: rgba(232,230,225,0.9) !important;
}
td.product-name dl.variation dd,
td.product-name .wc-item-meta dd {
font-size: 1.05rem !important;
color: rgba(232,230,225,0.72) !important;
}
/* ─── CART THUMBNAIL ─── */
/* WC Blocks cart thumbnail */
.wc-block-cart-item__image img,
.wc-block-cart-item__image a img {
width: 110px !important;
height: 110px !important;
object-fit: cover !important;
border-radius: 6px !important;
}
/* Classic cart fallback */
td.product-thumbnail img {
width: 110px !important;
height: 110px !important;
object-fit: cover !important;
border-radius: 6px !important;
}
/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
.lch-trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
.lch-series-grid { grid-template-columns: repeat(2, 1fr); }
.lch-series-card--featured,
.lch-series-card--featured-right,
.lch-series-card--wide { grid-column: span 2; }
.lch-products-grid { grid-template-columns: repeat(2, 1fr); }
.lch-why-grid { grid-template-columns: repeat(2, 1fr); }
.lch-footer-inner { grid-template-columns: 1fr 1fr 1fr; }
.lch-footer-brand { grid-column: span 3; }
.lch-builds-callout-inner { grid-template-columns: 1fr; }
.lch-builds-gallery { height: 340px; }
.lch-shop-layout { grid-template-columns: 1fr; }
.woocommerce div.product { grid-template-columns: 1fr; }
.woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
.lch-header-inner { grid-template-columns: auto auto; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.lch-header-search { display: none; }
.lch-header-phone span { display: none; }
.lch-nav-inner { overflow-x: auto; padding: 0 var(--space-4); }
.lch-hero-content { padding: var(--space-16) var(--space-6); }
.lch-hero-stats { flex-wrap: wrap; gap: var(--space-5); }
.lch-trust-bar-inner { grid-template-columns: 1fr; }
.lch-series-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.lch-products-grid { grid-template-columns: 1fr; }
.lch-why-grid { grid-template-columns: 1fr; }
.lch-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.lch-footer-brand { grid-column: span 2; }
.lch-cta-banner-inner { flex-direction: column; text-align: center; }
.lch-footer-bottom { flex-direction: column; text-align: center; }
.woocommerce ul.products { grid-template-columns: 1fr !important; }
.lch-shop-page, .lch-single-product { padding: var(--space-8) var(--space-4); }
/* Product title — tighter on mobile */
.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title,
.single-product h1.entry-title,
body.single-product h1.product_title {
font-size: 1.4rem !important;
margin-bottom: var(--space-2) !important;
}
.woocommerce div.product .price {
font-size: 1.4rem !important;
margin-bottom: var(--space-3) !important;
}
/* Reduce summary top padding so form is higher on screen */
.woocommerce div.product .summary {
padding-top: var(--space-4);
}
}
/* ─── SCROLL REVEAL ─── */
.lch-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.lch-revealed {
opacity: 1;
transform: translateY(0);
}
/* ─── HEADER SCROLLED STATE ─── */
.lch-header--scrolled .lch-header-inner {
padding-top: var(--space-2);
padding-bottom: var(--space-2);
}
.lch-header--scrolled .lch-logo-img { height: 34px; max-width: 180px; }
/* ─── WC PAGINATION ─── */
.woocommerce nav.woocommerce-pagination ul {
display: flex; gap: var(--space-2); justify-content: center;
border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li {
border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
background: var(--color-surface) !important;
color: var(--color-text-muted) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-2) var(--space-4) !important;
font-weight: 600 !important;
transition: all var(--transition) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--color-accent) !important;
color: #0e0e0d !important;
border-color: var(--color-accent) !important;
}
/* ─── STAR RATINGS ─── */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--toyota-yellow) !important; }
/* ─── GENERIC PAGE STYLES ─── */
.lch-page-content h1,
.lch-page-content h2,
.lch-page-content h3 { color: var(--color-text); margin-bottom: var(--space-4); }
.lch-page-content p { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-4); }
/* ═══════════════════════════════════════════════════════
HOMEPAGE — HERO SLIDER
═══════════════════════════════════════════════════════ */
.lch-hero--home { position: relative; min-height: 100vh; display: flex; align-items: center; }
.lch-hero-slides { position: absolute; inset: 0; }
.lch-hero-slide {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0; transition: opacity 1.2s ease;
}
.lch-hero-slide--active { opacity: 1; }
.lch-hero-dots {
position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
display: flex; gap: .75rem; z-index: 10;
}
.lch-hero-dot {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.5);
cursor: pointer; transition: background .3s, transform .3s;
}
.lch-hero-dot--active { background: var(--toyota-red); transform: scale(1.3); }
/* ═══════════════════════════════════════════════════════
SERVICES ICON BAR
═══════════════════════════════════════════════════════ */
.lch-services-bar {
background: #161614;
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 3px solid var(--toyota-red);
}
.lch-services-bar-inner {
max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
display: flex; justify-content: space-between; align-items: stretch;
flex-wrap: wrap; gap: 0;
}
.lch-svc-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .6rem; padding: 1.5rem 1rem;
color: var(--text-primary); text-decoration: none;
border-right: 1px solid rgba(255,255,255,.06);
flex: 1 1 120px; min-width: 100px;
transition: background .2s, color .2s;
text-align: center;
}
.lch-svc-item:last-child { border-right: none; }
.lch-svc-item:hover { background: rgba(204,34,0,.1); color: var(--toyota-red); }
.lch-svc-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.lch-svc-icon svg { width: 32px; height: 32px; stroke: var(--toyota-orange); fill: none; stroke-width: 1.5; }
.lch-svc-item:hover .lch-svc-icon svg { stroke: var(--toyota-red); }
.lch-svc-label { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
/* ═══════════════════════════════════════════════════════
3D CONFIGURATOR SECTION
═══════════════════════════════════════════════════════ */
.lch-configurator-section {
background: #111110;
padding: 5rem 1.5rem;
text-align: center;
}
.lch-configurator-inner { max-width: 1100px; margin: 0 auto; }
.lch-configurator-sub { color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem; font-size: 1.1rem; }
.lch-configurator-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;
text-align: left;
}
.lch-config-card {
background: #1a1a18; border: 1px solid rgba(255,255,255,.08);
border-radius: 8px; overflow: hidden;
transition: transform .3s, border-color .3s;
}
.lch-config-card:hover { transform: translateY(-4px); border-color: var(--toyota-orange); }
.lch-config-card-img { height: 220px; background-size: cover; background-position: center; }
.lch-config-card-body { padding: 1.75rem; }
.lch-config-badge {
display: inline-block; background: var(--toyota-red); color: #fff;
font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
padding: .25rem .75rem; border-radius: 3px; margin-bottom: 1rem;
}
.lch-config-card-body h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: .75rem; color: var(--text-primary); }
.lch-config-card-body p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .95rem; }
/* ═══════════════════════════════════════════════════════
RESURRECTION & RESTORATION PANELS
═══════════════════════════════════════════════════════ */
.lch-service-panels { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) { .lch-service-panels { grid-template-columns: 1fr; } }
.lch-service-panel {
position: relative; min-height: 600px;
display: flex; align-items: flex-end;
overflow: hidden;
}
.lch-service-panel-img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transition: transform .6s ease;
}
.lch-service-panel:hover .lch-service-panel-img { transform: scale(1.04); }
.lch-service-panel-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,10,9,.88) 30%, rgba(10,10,9,.25) 100%);
}
.lch-service-panel-content {
position: relative; z-index: 2;
padding: 3rem 2.5rem;
}
.lch-service-panel-content .section-eyebrow { margin-bottom: .5rem; }
.lch-service-panel-content h2 {
font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem);
color: var(--text-primary); margin-bottom: 1rem;
}
.lch-service-panel-content p { color: rgba(232,230,225,.75); font-size: .95rem; line-height: 1.7; margin-bottom: 1rem; }
.lch-service-panel--resurrection { border-right: 1px solid rgba(255,255,255,.06); }
/* ═══════════════════════════════════════════════════════
BLOG SECTION
═══════════════════════════════════════════════════════ */
.lch-blog-section { padding: 5rem 1.5rem; background: #0e0e0d; }
.lch-blog-grid {
max-width: 1200px; margin: 0 auto 2.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 1.5rem;
}
.lch-blog-card {
background: #161614; border: 1px solid rgba(255,255,255,.07);
border-radius: 8px; overflow: hidden;
transition: border-color .3s, transform .3s;
}
.lch-blog-card:hover { border-color: var(--toyota-orange); transform: translateY(-3px); }
.lch-blog-card--featured {
grid-column: 1 / -1;
display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
.lch-blog-grid { grid-template-columns: 1fr; }
.lch-blog-card--featured { grid-template-columns: 1fr; }
}
.lch-blog-card-img-wrap { display: block; overflow: hidden; }
.lch-blog-card-img-wrap img { width: 100%; height: 220px; object-fit: cover; transition: transform .4s; }
.lch-blog-card--featured .lch-blog-card-img-wrap img { height: 100%; min-height: 280px; }
.lch-blog-card:hover .lch-blog-card-img-wrap img { transform: scale(1.04); }
.lch-blog-card-img-placeholder { width: 100%; height: 220px; background: #1e1e1c; }
.lch-blog-card--featured .lch-blog-card-img-placeholder { min-height: 280px; }
.lch-blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.lch-blog-card-meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.lch-blog-tag {
background: var(--toyota-red); color: #fff;
font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
padding: .2rem .6rem; border-radius: 3px;
}
.lch-blog-date { color: var(--text-muted); font-size: .8rem; }
.lch-blog-card-title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; margin-bottom: .75rem; }
.lch-blog-card-title a { color: var(--text-primary); text-decoration: none; }
.lch-blog-card-title a:hover { color: var(--toyota-orange); }
.lch-blog-card-excerpt { color: var(--text-muted); font-size: .9rem; line-height: 1.7; margin-bottom: 1rem; }
.lch-blog-read-more { color: var(--toyota-orange); font-size: .85rem; font-weight: 600; text-decoration: none; }
.lch-blog-read-more:hover { color: var(--toyota-yellow); }
.lch-blog-cta { text-align: center; }
/* ═══════════════════════════════════════════════════════
TESTIMONIALS / REVIEWS
═══════════════════════════════════════════════════════ */
.lch-reviews-section { padding: 5rem 1.5rem; background: #111110; }
.lch-reviews-rating {
display: flex; align-items: center; gap: 1rem; justify-content: center;
flex-wrap: wrap; margin-top: 1rem;
}
.lch-reviews-stars { display: flex; gap: 3px; }
.lch-reviews-score { font-family: var(--font-display); font-size: 2rem; color: var(--toyota-yellow); font-weight: 700; }
.lch-reviews-count { color: var(--text-muted); font-size: .9rem; }
.lch-reviews-powered { color: var(--text-muted); font-size: .8rem; }
.lch-reviews-grid {
max-width: 1400px; margin: 3rem auto 2.5rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.25rem;
}
@media (max-width: 1100px) {
.lch-reviews-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.lch-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.lch-reviews-grid { grid-template-columns: 1fr; }
}
.lch-review-card {
background: #1a1a18; border: 1px solid rgba(255,255,255,.07);
border-radius: 8px; padding: 1.25rem;
transition: border-color .3s;
display: flex; flex-direction: column;
height: 240px;
}
.lch-review-card:hover { border-color: var(--toyota-yellow); }
.lch-review-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.lch-review-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--toyota-red); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
flex-shrink: 0;
}
.lch-review-avatar--photo {
object-fit: cover;
background: none;
}
.lch-review-name { font-weight: 600; font-size: .9rem; color: var(--text-primary); }
.lch-review-date { font-size: .75rem; color: var(--text-muted); }
.lch-review-stars-sm { display: flex; gap: 2px; margin-left: auto; }
.lch-review-text {
color: rgba(232,230,225,.75); font-size: .88rem; line-height: 1.6;
flex: 1; overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
}
.lch-reviews-cta { text-align: center; }
/* ═══════════════════════════════════════════════════════
INSTAGRAM FEED
═══════════════════════════════════════════════════════ */
.lch-instagram-section { padding: 5rem 1.5rem; background: #0e0e0d; }
.lch-instagram-grid {
max-width: 1200px; margin: 0 auto 2.5rem;
display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem;
}
@media (max-width: 900px) { .lch-instagram-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .lch-instagram-grid { grid-template-columns: repeat(2, 1fr); } }
.lch-ig-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; display: block; }
.lch-ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.lch-ig-item:hover img { transform: scale(1.08); }
.lch-ig-overlay {
position: absolute; inset: 0;
background: rgba(204,34,0,.5);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .3s;
}
.lch-ig-item:hover .lch-ig-overlay { opacity: 1; }
.lch-instagram-cta { text-align: center; }
/* ═══════════════════════════════════════════════════════
LET'S TALK CTA BANNER
═══════════════════════════════════════════════════════ */
.lch-cta-banner {
background: linear-gradient(135deg, #1a0a08 0%, #1a0e00 50%, #1a1500 100%);
border-top: 1px solid rgba(204,34,0,.3);
border-bottom: 1px solid rgba(204,34,0,.3);
padding: 4rem 1.5rem;
}
.lch-cta-banner-inner {
max-width: 1000px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; flex-wrap: wrap;
}
.lch-cta-banner-text h2 {
font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.8rem);
color: var(--text-primary); margin-bottom: .5rem;
}
.lch-cta-banner-text p { color: var(--text-muted); font-size: 1.05rem; max-width: 480px; }
.lch-cta-banner-actions { display: flex; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 700px) {
.lch-cta-banner-inner { text-align: center; justify-content: center; }
.lch-cta-banner-actions { justify-content: center; }
}
/* ═══════════════════════════════════════════════════════
SERVICE PAGES
═══════════════════════════════════════════════════════ */
/* Hero */
.lch-svc-hero {
position: relative; min-height: 70vh;
display: flex; align-items: center;
}
.lch-svc-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.lch-svc-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(10,10,9,.92) 50%, rgba(10,10,9,.5) 100%);
}
/* Overland Outfitting — sunset photo needs lighter overlay */
.page-id-1278 .lch-svc-hero-overlay {
background: linear-gradient(to right, rgba(10,10,9,.72) 40%, rgba(10,10,9,.25) 100%);
}
.lch-svc-hero-content {
position: relative; z-index: 2;
max-width: 1200px; margin: 0 auto; padding: 6rem 1.5rem 4rem;
max-width: 700px;
}
.lch-breadcrumb {
display: flex; align-items: center; gap: .5rem;
font-size: .8rem; color: var(--text-muted); margin-bottom: 1.5rem;
}
.lch-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.lch-breadcrumb a:hover { color: var(--text-primary); }
.lch-breadcrumb span { opacity: .5; }
.lch-svc-hero-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.5rem);
color: var(--text-primary); margin: .5rem 0 1.25rem; line-height: 1.1;
}
.lch-svc-hero-sub {
color: rgba(232,230,225,.75); font-size: 1.1rem;
line-height: 1.7; max-width: 580px; margin-bottom: 2rem;
}
/* Process */
.lch-svc-process { padding: 5rem 1.5rem; background: #111110; }
.lch-svc-process-inner { max-width: 900px; margin: 0 auto; }
.lch-svc-phases { display: flex; flex-direction: column; gap: 0; margin-top: 3rem; }
.lch-svc-phase {
display: grid; grid-template-columns: 80px 1fr;
gap: 1.5rem; padding: 2rem 0;
border-bottom: 1px solid rgba(255,255,255,.06);
position: relative;
}
.lch-svc-phase:first-child { border-top: 1px solid rgba(255,255,255,.06); }
.lch-svc-phase-num {
font-family: var(--font-display); font-size: 2.5rem;
font-weight: 800; color: var(--svc-color, #CC2200);
opacity: .35; line-height: 1; padding-top: .25rem;
flex-shrink: 0;
}
.lch-svc-phase-body h3 {
font-family: var(--font-display); font-size: 1.2rem;
color: var(--text-primary); margin-bottom: .5rem;
}
.lch-svc-phase-body p { color: var(--text-muted); font-size: .95rem; line-height: 1.7; }
/* What's Included */
.lch-svc-includes { padding: 5rem 1.5rem; background: #0e0e0d; }
.lch-svc-includes-inner {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 380px; gap: 4rem; align-items: start;
}
@media (max-width: 900px) { .lch-svc-includes-inner { grid-template-columns: 1fr; } }
.lch-wp-content { color: var(--color-text-muted); line-height: 1.8; margin-bottom: 2rem; }
.lch-wp-content > p:first-child { font-size: var(--text-base); color: var(--color-text); line-height: 1.85; margin-bottom: 1.5rem; }
.lch-wp-content p { margin-bottom: 1rem; font-size: var(--text-sm); }
.lch-wp-content h2 {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 800;
color: var(--color-text);
margin: 2.25rem 0 0.6rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
letter-spacing: 0.01em;
}
.lch-wp-content h3 {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
margin: 2rem 0 0.5rem;
padding-left: 0.75rem;
border-left: 3px solid #FFCC00;
letter-spacing: 0.01em;
line-height: 1.3;
}
.lch-wp-content ul {
list-style: none;
padding: 0;
margin: 0.5rem 0 1.5rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.35rem 1.5rem;
}
.lch-wp-content ul li {
font-size: var(--text-sm);
color: var(--color-text-muted);
padding-left: 1.1rem;
position: relative;
line-height: 1.5;
}
.lch-wp-content ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 5px;
height: 5px;
border-radius: 50%;
background: #FFCC00;
opacity: 0.75;
}
@media (max-width: 640px) {
.lch-wp-content ul { grid-template-columns: 1fr; }
.lch-wp-content h3 { font-size: var(--text-base); }
}
.lch-svc-features-list { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: .75rem; }
.lch-svc-features-list li { display: flex; align-items: center; gap: .75rem; color: var(--text-primary); font-size: .95rem; }
.lch-svc-features-list svg { flex-shrink: 0; }
.lch-svc-brands { margin-top: 2rem; }
.lch-svc-brands-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .75rem; }
.lch-svc-brands-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.lch-brand-chip {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
color: var(--text-primary); font-size: .8rem; font-weight: 600;
padding: .3rem .9rem; border-radius: 20px;
}
/* CTA Card (sidebar) */
.lch-svc-cta-card {
background: #161614; border: 1px solid rgba(255,255,255,.1);
border-top: 3px solid var(--svc-color, #CC2200);
border-radius: 8px; padding: 2rem;
position: sticky; top: 100px;
}
.lch-svc-cta-card h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: .75rem; color: var(--text-primary); }
.lch-svc-cta-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.7; margin-bottom: 1.5rem; }
.lch-svc-cta-card .btn { width: 100%; justify-content: center; }
.lch-svc-cta-divider { text-align: center; color: var(--text-muted); font-size: .8rem; margin: 1.25rem 0 .75rem; position: relative; }
.lch-svc-cta-divider::before, .lch-svc-cta-divider::after {
content: ''; position: absolute; top: 50%; width: 35%; height: 1px;
background: rgba(255,255,255,.1);
}
.lch-svc-cta-divider::before { left: 0; }
.lch-svc-cta-divider::after { right: 0; }
.lch-svc-cta-phone { display: block; text-align: center; font-family: var(--font-display); font-size: 1.3rem; color: var(--text-primary); text-decoration: none; font-weight: 700; }
.lch-svc-cta-phone:hover { color: var(--toyota-orange); }
.lch-svc-cta-hours { text-align: center; color: var(--text-muted); font-size: .75rem; margin-top: .4rem; }
/* Other Services */
.lch-svc-other { padding: 4rem 1.5rem; background: #111110; }
.lch-svc-other-inner { max-width: 1200px; margin: 0 auto; }
.lch-svc-other-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 2.5rem;
}
.lch-other-svc-card {
flex: 0 1 260px;
}
.lch-other-svc-card {
background: #1a1a18; border: 1px solid rgba(255,255,255,.07);
border-radius: 6px; padding: 1.25rem 1.25rem 1.25rem 1rem;
display: flex; align-items: center; gap: .75rem;
color: var(--text-primary); text-decoration: none;
transition: border-color .25s, background .25s;
overflow: hidden; position: relative;
}
.lch-other-svc-card:hover { background: #1e1e1c; border-color: rgba(255,255,255,.2); }
.lch-other-svc-accent { width: 3px; height: 100%; position: absolute; left: 0; top: 0; }
.lch-other-svc-card span { flex: 1; font-size: .9rem; font-weight: 500; }
.lch-other-svc-card svg { flex-shrink: 0; opacity: .4; }
.lch-other-svc-card:hover svg { opacity: 1; }
/* ── Service Page Estimate Form Section ──────────────────────────────────── */
.lch-svc-estimate {
background: #0e0e0d;
padding: 5rem 1.5rem;
border-top: 1px solid rgba(255,255,255,.06);
}
.lch-svc-estimate-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
@media (max-width: 900px) {
.lch-svc-estimate-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
.lch-svc-estimate-text .section-title { margin: .3rem 0 1rem; }
.lch-svc-estimate-body {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 1.75rem;
}
.lch-svc-estimate-features {
display: flex;
flex-direction: column;
gap: .7rem;
margin-bottom: 2rem;
}
.lch-svc-est-feat {
display: flex;
align-items: center;
gap: .6rem;
font-size: .9rem;
color: var(--text-primary);
}
.lch-svc-estimate-phone {
display: flex;
align-items: center;
gap: .6rem;
font-size: .9rem;
color: var(--text-muted);
flex-wrap: wrap;
}
.lch-svc-estimate-phone a { text-decoration: none; font-size: 1.1rem; }
.lch-svc-estimate-phone a:hover { text-decoration: underline; }
/* ── Services Dropdown Navigation ────────────────────────────────────────── */
.lch-nav .menu-item-has-children {
position: relative;
}
/* Chevron indicator on parent */
.lch-nav .menu-item-has-children > a::after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
margin-left: 6px;
opacity: 0.6;
transition: transform 0.2s ease, opacity 0.2s ease;
vertical-align: middle;
}
.lch-nav .menu-item-has-children:hover > a::after,
.lch-nav .menu-item-has-children.lch-open > a::after {
transform: rotate(-135deg) translateY(-2px);
opacity: 1;
}
/* Dropdown panel */
.lch-nav .sub-menu {
display: block;
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: #1a1a18;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
min-width: 240px;
padding: 0.5rem 0;
list-style: none;
margin: 0;
z-index: 1000;
box-shadow: 0 16px 40px rgba(0,0,0,0.5);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Arrow pointer */
.lch-nav .sub-menu::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background: #1a1a18;
border-left: 1px solid rgba(255,255,255,0.1);
border-top: 1px solid rgba(255,255,255,0.1);
}
/* Show on hover (desktop) */
.lch-nav .menu-item-has-children:hover > .sub-menu,
.lch-nav .menu-item-has-children.lch-open > .sub-menu {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Dropdown items */
.lch-nav .sub-menu li {
list-style: none;
margin: 0;
}
.lch-nav .sub-menu li a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.25rem;
font-size: 0.88rem;
font-weight: 500;
color: rgba(232,230,225,0.8);
text-decoration: none;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.lch-nav .sub-menu li a::before {
content: '';
display: inline-block;
width: 3px;
height: 3px;
background: #F07800;
border-radius: 50%;
opacity: 0;
transition: opacity 0.15s;
flex-shrink: 0;
}
.lch-nav .sub-menu li a:hover {
color: #e8e6e1;
background: rgba(240,120,0,0.08);
}
.lch-nav .sub-menu li a:hover::before {
opacity: 1;
}
/* Divider after last item before "All Services" if added later */
.lch-nav .sub-menu li:last-child a {
border-top: none;
}
/* Mobile: stack dropdown inline */
@media (max-width: 900px) {
.lch-nav .sub-menu {
position: static;
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: none;
background: rgba(255,255,255,0.04);
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
display: none;
}
.lch-nav .sub-menu::before { display: none; }
.lch-nav .menu-item-has-children.lch-open > .sub-menu {
display: block;
}
.lch-nav .sub-menu li a {
padding: 0.5rem 1rem 0.5rem 2rem;
font-size: 0.85rem;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
}
/* ── Shop Mega-Menu ───────────────────────────────────────────────────────── */
.lch-shop-dropdown-wrap {
position: relative;
}
/* Button label update */
.lch-nav-shop-btn {
display: flex;
align-items: center;
gap: 6px;
}
.lch-shop-chevron {
transition: transform 0.2s ease;
opacity: 0.6;
}
.lch-nav-shop-btn[aria-expanded="true"] .lch-shop-chevron,
.lch-shop-dropdown-wrap:hover .lch-shop-chevron {
transform: rotate(180deg);
opacity: 1;
}
/* Mega panel */
.lch-shop-mega {
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 680px;
background: #1a1a18;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
box-shadow: 0 20px 50px rgba(0,0,0,0.6);
z-index: 1000;
transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
overflow: hidden;
}
/* Arrow */
.lch-shop-mega::before {
content: '';
position: absolute;
top: -5px;
left: 28px;
width: 10px;
height: 10px;
background: #1a1a18;
border-left: 1px solid rgba(255,255,255,0.1);
border-top: 1px solid rgba(255,255,255,0.1);
transform: rotate(45deg);
}
/* Show on hover or aria-expanded */
.lch-shop-dropdown-wrap:hover .lch-shop-mega,
.lch-shop-mega.lch-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Top accent stripe */
.lch-shop-mega::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #CC2200 0%, #F07800 50%, #FFCC00 100%);
}
.lch-shop-mega-inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
padding-top: 3px; /* offset the accent stripe */
}
/* Columns */
.lch-shop-col {
padding: 1.5rem 1.25rem;
border-right: 1px solid rgba(255,255,255,0.06);
}
.lch-shop-col:last-child {
border-right: none;
}
.lch-shop-col-label {
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #F07800;
margin-bottom: 0.85rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* Items */
.lch-shop-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.42rem 0;
font-size: 0.875rem;
color: rgba(232,230,225,0.75);
text-decoration: none;
transition: color 0.15s;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lch-shop-item:last-of-type { border-bottom: none; }
.lch-shop-item:hover { color: #e8e6e1; }
.lch-shop-item--all {
font-weight: 600;
color: rgba(232,230,225,0.9);
margin-bottom: 0.25rem;
}
.lch-shop-item--all:hover { color: #F07800; }
.lch-shop-item--sale {
color: #FFCC00;
}
.lch-shop-item--sale:hover { color: #ffe066; }
.lch-shop-count {
font-size: 0.72rem;
background: rgba(255,255,255,0.08);
color: rgba(232,230,225,0.45);
border-radius: 20px;
padding: 1px 7px;
font-weight: 600;
flex-shrink: 0;
}
/* CTA block in col 3 */
.lch-shop-cta {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(255,255,255,0.08);
}
/* Mobile: full-width stacked */
@media (max-width: 900px) {
.lch-shop-mega {
position: fixed;
top: auto;
left: 0;
right: 0;
width: 100%;
border-radius: 0;
transform: none;
max-height: 80vh;
overflow-y: auto;
}
.lch-shop-mega::before { display: none; }
.lch-shop-mega-inner {
grid-template-columns: 1fr;
}
.lch-shop-col {
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 1.25rem;
}
}
/* ============================================================
LOCATIONS PAGE
============================================================ */
.lch-locations-hero {
background: linear-gradient(135deg, #0e0e0d 0%, #1a1a18 60%, #0e0e0d 100%);
border-bottom: 3px solid #CC2200;
text-align: center;
padding: 100px 24px 80px;
display: flex;
align-items: center;
justify-content: center;
}
.lch-locations-hero .lch-page-hero-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.lch-locations-hero .lch-page-hero-eyebrow {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #CC2200;
margin: 0 0 12px;
}
.lch-locations-hero .lch-page-hero-title {
font-family: 'Clash Display', sans-serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 700;
color: #e8e6e1;
margin: 0 0 20px;
line-height: 1.05;
}
.lch-locations-hero .lch-page-hero-sub {
font-family: 'Satoshi', sans-serif;
font-size: 1.1rem;
color: rgba(232,230,225,0.6);
max-width: 600px;
margin: 0 auto;
line-height: 1.65;
}
.lch-locations-section {
padding: 80px 24px;
max-width: 1280px;
margin: 0 auto;
}
.lch-locations-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
@media (max-width: 900px) {
.lch-locations-grid {
grid-template-columns: 1fr;
}
}
/* Location Card */
.lch-location-card {
background: #1a1a18;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
padding: 40px;
position: relative;
overflow: hidden;
transition: border-color 0.3s ease;
}
.lch-location-card:hover {
border-color: rgba(204,34,0,0.4);
}
.lch-location-card--hq {
border-top: 3px solid #CC2200;
}
.lch-location-card--uae {
border-top: 3px solid #F07800;
}
.lch-location-card-badge {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #CC2200;
background: rgba(204,34,0,0.1);
border: 1px solid rgba(204,34,0,0.3);
padding: 3px 10px;
border-radius: 2px;
margin-bottom: 20px;
}
.lch-location-card--uae .lch-location-card-badge {
color: #F07800;
background: rgba(240,120,0,0.1);
border-color: rgba(240,120,0,0.3);
}
.lch-location-card-flag {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
color: rgba(232,230,225,0.6);
font-size: 0.85rem;
font-family: 'Satoshi', sans-serif;
}
.lch-location-card-flag svg {
border-radius: 2px;
flex-shrink: 0;
}
.lch-location-card-name {
font-family: 'Clash Display', sans-serif;
font-size: 2rem;
font-weight: 700;
color: #e8e6e1;
margin: 0 0 4px;
line-height: 1.1;
}
.lch-location-card-city {
font-family: 'Satoshi', sans-serif;
color: rgba(232,230,225,0.5);
font-size: 0.9rem;
margin: 0 0 32px;
}
/* Detail rows */
.lch-location-details {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.lch-location-detail {
display: flex;
align-items: flex-start;
gap: 12px;
color: rgba(232,230,225,0.8);
font-family: 'Satoshi', sans-serif;
font-size: 0.9rem;
line-height: 1.6;
}
.lch-location-detail a {
color: rgba(232,230,225,0.8);
text-decoration: none;
transition: color 0.2s;
}
.lch-location-detail a:hover {
color: #FFCC00;
}
.lch-loc-icon {
color: #CC2200;
flex-shrink: 0;
margin-top: 2px;
}
.lch-location-card--uae .lch-loc-icon {
color: #F07800;
}
.lch-location-detail-sub {
font-size: 0.78rem;
color: rgba(232,230,225,0.45);
}
.lch-location-detail div p {
margin: 0;
}
/* Description */
.lch-location-card-desc {
background: rgba(255,255,255,0.03);
border-left: 3px solid #F07800;
padding: 16px 20px;
margin-bottom: 28px;
border-radius: 0 2px 2px 0;
}
.lch-location-card-desc p {
font-family: 'Satoshi', sans-serif;
font-size: 0.88rem;
color: rgba(232,230,225,0.65);
line-height: 1.65;
margin: 0;
}
/* Actions */
.lch-location-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 28px;
}
/* WhatsApp Button */
.btn-whatsapp {
display: inline-flex;
align-items: center;
gap: 8px;
background: #25D366;
color: #fff !important;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.9rem;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 10px 20px;
border-radius: 2px;
text-decoration: none;
transition: background 0.2s ease, transform 0.15s ease;
border: none;
}
.btn-whatsapp:hover {
background: #1ebe5b;
transform: translateY(-1px);
color: #fff !important;
}
.btn-whatsapp--outline {
background: transparent;
border: 2px solid #25D366;
color: #25D366 !important;
}
.btn-whatsapp--outline:hover {
background: #25D366;
color: #fff !important;
}
/* Map */
.lch-location-map {
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
}
/* Global Reach Strip */
.lch-locations-global {
background: #141412;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 48px 24px;
}
.lch-locations-global-inner {
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
flex-wrap: wrap;
}
.lch-global-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 48px;
text-align: center;
}
.lch-global-stat-num {
font-family: 'Clash Display', sans-serif;
font-size: 2.2rem;
font-weight: 700;
color: #FFCC00;
line-height: 1;
margin-bottom: 6px;
}
.lch-global-stat-label {
font-family: 'Satoshi', sans-serif;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(232,230,225,0.45);
}
.lch-global-divider {
width: 1px;
height: 48px;
background: rgba(255,255,255,0.1);
}
@media (max-width: 600px) {
.lch-global-divider { display: none; }
.lch-global-stat { padding: 12px 24px; }
.lch-locations-global-inner { gap: 8px; }
.lch-location-actions { flex-direction: column; }
}
/* ============================================================
INTERACTIVE WORLD MAP
============================================================ */
.lch-world-map-section {
background: #0e0e0d;
padding: 60px 0 40px;
overflow: hidden;
}
.lch-world-map-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.lch-world-map-container {
position: relative;
width: 100%;
border-radius: 6px;
overflow: visible;
background: #111110;
border: 1px solid rgba(255,255,255,0.06);
}
.lch-world-map-img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
/* Tint the map to match our dark theme */
filter: brightness(0.35) sepia(0.3) hue-rotate(180deg);
user-select: none;
pointer-events: none;
}
/* ── Pin ── */
.lch-map-pin {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 10;
}
.lch-map-pin:focus {
outline: none;
}
.lch-pin-dot {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
transition: transform 0.2s ease;
box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
.lch-map-pin:hover .lch-pin-dot,
.lch-map-pin.is-active .lch-pin-dot {
transform: scale(1.2);
}
.lch-pin-dot--red { background: #CC2200; }
.lch-pin-dot--orange { background: #F07800; }
/* Pulse ring */
.lch-pin-pulse {
position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
top: 0;
left: 0;
z-index: 1;
animation: lchPinPulse 2.2s ease-out infinite;
}
.lch-pin-pulse--red { background: rgba(204,34,0,0.5); }
.lch-pin-pulse--orange { background: rgba(240,120,0,0.5); }
@keyframes lchPinPulse {
0% { transform: scale(1); opacity: 0.8; }
70% { transform: scale(2.8); opacity: 0; }
100% { transform: scale(2.8); opacity: 0; }
}
/* Pin label */
.lch-pin-label {
position: absolute;
top: 34px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #e8e6e1;
background: rgba(14,14,13,0.85);
padding: 2px 7px;
border-radius: 2px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.lch-map-pin:hover .lch-pin-label,
.lch-map-pin.is-active .lch-pin-label {
opacity: 1;
}
/* ── Popup Card ── */
.lch-map-popup {
position: absolute;
top: 36px;
width: 280px;
background: #1a1a18;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px;
box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.5);
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(0.97);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
pointer-events: none;
}
.lch-map-popup--left { left: 50%; transform-origin: top left; }
.lch-map-popup--right { right: 50%; transform-origin: top right; }
.lch-map-pin.is-active .lch-map-popup {
opacity: 1;
visibility: visible;
transform: translateY(12px) scale(1);
pointer-events: auto;
}
/* Popup arrow */
.lch-map-popup::before {
content: '';
position: absolute;
top: -7px;
width: 12px;
height: 12px;
background: #1a1a18;
border-left: 1px solid rgba(255,255,255,0.1);
border-top: 1px solid rgba(255,255,255,0.1);
transform: rotate(45deg);
}
.lch-map-popup--left::before { left: 20px; }
.lch-map-popup--right::before { right: 20px; }
/* Popup header */
.lch-popup-header {
padding: 16px 18px 14px;
border-bottom: 1px solid rgba(255,255,255,0.07);
border-radius: 4px 4px 0 0;
}
.lch-popup-header--red { border-top: 3px solid #CC2200; }
.lch-popup-header--orange { border-top: 3px solid #F07800; }
.lch-popup-badge {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #CC2200;
background: rgba(204,34,0,0.1);
border: 1px solid rgba(204,34,0,0.25);
padding: 2px 8px;
border-radius: 2px;
margin-bottom: 8px;
}
.lch-popup-badge--orange {
color: #F07800;
background: rgba(240,120,0,0.1);
border-color: rgba(240,120,0,0.25);
}
.lch-popup-header h3 {
font-family: 'Clash Display', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #e8e6e1;
margin: 0 0 2px;
line-height: 1.2;
}
.lch-popup-header p {
font-family: 'Satoshi', sans-serif;
font-size: 0.75rem;
color: rgba(232,230,225,0.45);
margin: 0;
}
/* Popup body rows */
.lch-popup-body {
padding: 12px 18px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.lch-popup-row {
display: flex;
align-items: flex-start;
gap: 9px;
font-family: 'Satoshi', sans-serif;
font-size: 0.8rem;
color: rgba(232,230,225,0.7);
text-decoration: none;
padding: 5px 6px;
border-radius: 3px;
transition: background 0.15s, color 0.15s;
line-height: 1.4;
}
.lch-popup-row svg {
flex-shrink: 0;
margin-top: 1px;
color: rgba(232,230,225,0.4);
}
.lch-popup-row:hover {
background: rgba(255,255,255,0.05);
color: #e8e6e1;
}
.lch-popup-row:hover svg {
color: #FFCC00;
}
/* WhatsApp button inside popup */
.lch-popup-whatsapp {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
background: #25D366;
color: #fff !important;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 9px 14px;
border-radius: 3px;
text-decoration: none;
transition: background 0.2s;
justify-content: center;
}
.lch-popup-whatsapp:hover {
background: #1ebe5b;
}
/* Map hint text */
.lch-map-hint {
text-align: center;
font-family: 'Satoshi', sans-serif;
font-size: 0.78rem;
color: rgba(232,230,225,0.3);
margin-top: 16px;
letter-spacing: 0.06em;
}
/* Mobile — stack popups below pins */
@media (max-width: 768px) {
.lch-map-popup {
width: 220px;
font-size: 0.85em;
}
.lch-pin-label { display: none; }
.lch-world-map-section { padding: 40px 0 24px; }
}
@media (max-width: 480px) {
.lch-map-popup {
position: fixed;
bottom: 20px;
left: 50% !important;
right: auto !important;
top: auto !important;
transform: translateX(-50%) !important;
width: calc(100vw - 48px);
max-width: 340px;
}
.lch-map-pin.is-active .lch-map-popup {
transform: translateX(-50%) !important;
}
.lch-map-popup::before { display: none; }
}
/* ── Locations page CTA — fully centered ── */
.lch-locations-page .lch-cta-banner-inner {
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
}
.lch-locations-page .lch-cta-banner-text p {
max-width: 480px;
margin: 0 auto;
}
.lch-locations-page .lch-cta-banner-actions {
justify-content: center;
}
/* ============================================================
GET A QUOTE PAGE
============================================================ */
/* Hero */
.lch-quote-hero {
background: linear-gradient(135deg, #0e0e0d 0%, #1a1a18 60%, #0e0e0d 100%);
border-bottom: 3px solid #CC2200;
padding: 100px 24px 80px;
text-align: center;
}
.lch-quote-hero-inner {
max-width: 760px;
margin: 0 auto;
}
.lch-quote-eyebrow {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #CC2200;
margin: 0 0 12px;
}
.lch-quote-title {
font-family: 'Clash Display', sans-serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 700;
color: #e8e6e1;
margin: 0 0 20px;
line-height: 1.05;
}
.lch-quote-subtitle {
font-family: 'Satoshi', sans-serif;
font-size: 1.05rem;
color: rgba(232,230,225,0.6);
line-height: 1.65;
max-width: 580px;
margin: 0 auto 28px;
}
.lch-quote-hero-trust {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.lch-quote-hero-trust span {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Satoshi', sans-serif;
font-size: 0.82rem;
color: rgba(232,230,225,0.55);
}
.lch-quote-hero-trust svg {
color: #FFCC00;
flex-shrink: 0;
}
/* Body layout */
.lch-quote-body {
padding: 72px 24px 80px;
max-width: 1200px;
margin: 0 auto;
}
.lch-quote-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 48px;
align-items: start;
}
@media (max-width: 960px) {
.lch-quote-layout { grid-template-columns: 1fr; }
.lch-quote-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lch-quote-sidebar-hours { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.lch-quote-sidebar { grid-template-columns: 1fr; }
.lch-quote-sidebar-hours { grid-column: auto; }
}
/* Tab Switcher */
.lch-quote-tabs {
display: flex;
background: #141412;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
padding: 4px;
gap: 4px;
margin-bottom: 32px;
}
.lch-quote-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
background: transparent;
border: none;
border-radius: 3px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(232,230,225,0.45);
cursor: pointer;
transition: all 0.2s ease;
}
.lch-quote-tab:hover {
color: rgba(232,230,225,0.8);
background: rgba(255,255,255,0.04);
}
.lch-quote-tab.is-active {
background: #CC2200;
color: #fff;
}
.lch-quote-tab.is-active svg {
stroke: #fff;
}
/* Panels */
.lch-quote-panel {
display: none;
}
.lch-quote-panel.is-active {
display: block;
animation: lchFadeIn 0.25s ease;
}
@keyframes lchFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Form fields */
.lch-quote-form-col .lch-form {
background: #1a1a18;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
padding: 40px;
}
.lch-form-row { display: flex; gap: 20px; }
.lch-form-row--2col > .lch-form-field { flex: 1; }
.lch-form-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
}
.lch-form-field label {
font-family: 'Satoshi', sans-serif;
font-size: 0.82rem;
font-weight: 600;
color: rgba(232,230,225,0.7);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.lch-required { color: #CC2200; }
.lch-optional { color: rgba(232,230,225,0.35); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.lch-form-field input,
.lch-form-field select,
.lch-form-field textarea {
background: #0e0e0d;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 3px;
color: #e8e6e1;
font-family: 'Satoshi', sans-serif;
font-size: 0.95rem;
padding: 12px 14px;
transition: border-color 0.2s;
width: 100%;
box-sizing: border-box;
}
.lch-form-field select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
.lch-form-field input:focus,
.lch-form-field select:focus,
.lch-form-field textarea:focus {
outline: none;
border-color: #CC2200;
}
.lch-form-field textarea { resize: vertical; min-height: 100px; }
.lch-form-field input::placeholder,
.lch-form-field textarea::placeholder { color: rgba(232,230,225,0.25); }
/* Submit row */
.lch-form-submit {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 8px;
}
.lch-form-note {
font-family: 'Satoshi', sans-serif;
font-size: 0.78rem;
color: rgba(232,230,225,0.35);
margin: 0;
}
/* Success / error message */
.lch-form-message {
margin-top: 16px;
padding: 14px 18px;
border-radius: 3px;
font-family: 'Satoshi', sans-serif;
font-size: 0.9rem;
line-height: 1.5;
}
.lch-form-message.is-success {
background: rgba(37,211,102,0.1);
border: 1px solid rgba(37,211,102,0.3);
color: #25D366;
}
.lch-form-message.is-error {
background: rgba(204,34,0,0.1);
border: 1px solid rgba(204,34,0,0.35);
color: #ff6b6b;
}
/* Sidebar */
.lch-quote-sidebar-card {
background: #1a1a18;
border: 1px solid rgba(255,255,255,0.08);
border-top: 3px solid #CC2200;
border-radius: 4px;
padding: 28px;
margin-bottom: 20px;
}
.lch-quote-sidebar-card--dark {
border-top-color: #F07800;
}
.lch-quote-sidebar-card h3 {
font-family: 'Clash Display', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #e8e6e1;
margin: 0 0 8px;
}
.lch-quote-sidebar-card p {
font-family: 'Satoshi', sans-serif;
font-size: 0.85rem;
color: rgba(232,230,225,0.55);
line-height: 1.55;
margin: 0 0 16px;
}
.lch-sidebar-contact-row {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Satoshi', sans-serif;
font-size: 0.85rem;
color: rgba(232,230,225,0.7);
text-decoration: none;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: color 0.2s;
}
.lch-sidebar-contact-row:last-child { border-bottom: none; }
.lch-sidebar-contact-row:hover { color: #FFCC00; }
.lch-sidebar-contact-row svg { color: rgba(232,230,225,0.3); flex-shrink: 0; }
.lch-sidebar-wa svg { color: #25D366; }
.lch-sidebar-services-list {
list-style: none;
margin: 0;
padding: 0;
}
.lch-sidebar-services-list li {
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lch-sidebar-services-list li:last-child { border-bottom: none; }
.lch-sidebar-services-list a {
display: block;
font-family: 'Satoshi', sans-serif;
font-size: 0.85rem;
color: rgba(232,230,225,0.6);
text-decoration: none;
padding: 8px 0;
transition: color 0.2s, padding-left 0.2s;
}
.lch-sidebar-services-list a:hover {
color: #FFCC00;
padding-left: 6px;
}
/* Hours card */
.lch-quote-sidebar-hours {
background: #141412;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 4px;
padding: 24px 28px;
}
.lch-quote-sidebar-hours h4 {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(232,230,225,0.4);
margin: 0 0 12px;
}
.lch-quote-sidebar-hours table {
width: 100%;
border-collapse: collapse;
}
.lch-quote-sidebar-hours td {
font-family: 'Satoshi', sans-serif;
font-size: 0.82rem;
color: rgba(232,230,225,0.6);
padding: 5px 0;
}
.lch-quote-sidebar-hours td:first-child {
color: rgba(232,230,225,0.4);
width: 90px;
}
@media (max-width: 640px) {
.lch-quote-form-col .lch-form { padding: 24px; }
.lch-form-row { flex-direction: column; gap: 0; }
}
/* ── Service page — Get a Quote CTA (replaces inline estimate form) ── */
.lch-svc-quote-cta {
background: #141412;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 80px 24px;
}
.lch-svc-quote-cta-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 40px;
align-items: center;
}
.lch-svc-quote-cta-icon svg {
display: block;
}
.lch-svc-quote-cta-eyebrow {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0 0 8px;
}
.lch-svc-quote-cta-text h2 {
font-family: 'Clash Display', sans-serif;
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 700;
color: #e8e6e1;
margin: 0 0 12px;
}
.lch-svc-quote-cta-text p {
font-family: 'Satoshi', sans-serif;
font-size: 0.95rem;
color: rgba(232,230,225,0.6);
line-height: 1.6;
margin: 0 0 16px;
max-width: 500px;
}
.lch-svc-quote-cta-checks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.lch-svc-quote-cta-checks li {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Satoshi', sans-serif;
font-size: 0.85rem;
color: rgba(232,230,225,0.55);
}
.lch-svc-quote-cta-checks svg {
color: #FFCC00;
flex-shrink: 0;
}
.lch-svc-quote-cta-actions {
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
min-width: 220px;
}
.lch-svc-quote-cta-actions .btn {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
@media (max-width: 900px) {
.lch-svc-quote-cta-inner {
grid-template-columns: 1fr;
text-align: center;
}
.lch-svc-quote-cta-icon { display: none; }
.lch-svc-quote-cta-checks { align-items: center; }
.lch-svc-quote-cta-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; min-width: auto; }
.lch-svc-quote-cta-text p { max-width: 100%; }
}
/* ── Header search — hide submit label + vertical align fix ── */
.lch-header-search .woocommerce-product-search button[type="submit"],
.lch-header-search button[type="submit"] {
display: none;
}
.lch-header-search form,
.lch-header-search .woocommerce-product-search {
width: 100%;
margin: 0;
padding: 0;
}
.lch-header-actions {
align-items: center;
}
/* ============================================================
WOOCOMMERCE PRODUCT GALLERY — LCH Override
============================================================ */
/* Remove numbered list styling */
.woocommerce-product-gallery ol,
.woocommerce-product-gallery ul,
.flex-control-nav {
list-style: none !important;
counter-reset: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-product-gallery ol li::before,
.woocommerce-product-gallery ol li::marker,
.flex-control-nav li::before,
.flex-control-nav li::marker {
content: none !important;
display: none !important;
}
/* Main gallery wrapper */
.woocommerce-product-gallery {
position: relative;
width: 100%;
}
/* Main image */
.woocommerce-product-gallery__wrapper {
margin: 0 !important;
}
.woocommerce-product-gallery__image {
cursor: zoom-in;
}
.woocommerce-product-gallery__image img {
width: 100%;
height: auto;
border-radius: 4px;
display: block;
}
/* Thumbnail strip — horizontal row below main image */
.flex-control-nav.flex-control-thumbs {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 12px !important;
padding: 0 !important;
list-style: none !important;
}
.flex-control-nav.flex-control-thumbs li {
list-style: none !important;
counter-increment: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.flex-control-nav.flex-control-thumbs li::before,
.flex-control-nav.flex-control-thumbs li::marker {
content: none !important;
display: none !important;
}
.flex-control-nav.flex-control-thumbs li img {
width: 80px !important;
height: 80px !important;
object-fit: cover !important;
border-radius: 3px !important;
border: 2px solid rgba(255,255,255,0.08) !important;
cursor: pointer !important;
opacity: 0.65 !important;
transition: opacity 0.2s ease, border-color 0.2s ease !important;
display: block !important;
}
.flex-control-nav.flex-control-thumbs li img:hover,
.flex-control-nav.flex-control-thumbs li img.flex-active {
opacity: 1 !important;
border-color: #CC2200 !important;
}
/* Zoom icon — hide default WC magnifier */
.woocommerce-product-gallery__trigger {
display: none !important;
}
/* Photoswipe lightbox — dark theme */
.pswp {
--pswp-bg: #0e0e0d;
}
.pswp__bg { background: rgba(14,14,13,0.96) !important; }
.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
background-color: rgba(204,34,0,0.15);
}
.pswp__counter {
color: rgba(232,230,225,0.6);
font-family: 'Satoshi', sans-serif;
font-size: 0.85rem;
}
/* Make entire image clickable to open lightbox */
.woocommerce-product-gallery__image a {
display: block;
cursor: zoom-in;
}
/* Flexslider navigation arrows — hide (thumbnails handle navigation) */
.flex-direction-nav { display: none !important; }
/* WC general style overrides for dark theme */
.woocommerce div.product div.images {
float: none !important;
width: 100% !important;
}
@media (max-width: 768px) {
.flex-control-nav.flex-control-thumbs li img {
width: 60px !important;
height: 60px !important;
}
}
/* ── Product gallery — lightbox click mode (zoom disabled) ── */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a {
cursor: pointer !important;
}
/* Subtle expand icon overlay on hover */
.woocommerce-product-gallery__image {
position: relative;
overflow: hidden;
}
.woocommerce-product-gallery__image::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") no-repeat center center;
opacity: 0;
transition: opacity 0.25s ease, background-color 0.25s ease;
pointer-events: none;
border-radius: 4px;
}
.woocommerce-product-gallery__image:hover::after {
opacity: 1;
background-color: rgba(0,0,0,0.3);
}
/* Ensure zoom plugin cursor override is removed */
.woocommerce-product-gallery .zoomImg { display: none !important; }
/* ── Related products & all product grids — alignment fix ── */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.related ul.products li.product,
.related ul.products li.product.first {
clear: none !important;
float: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure the related products section uses the same grid */
.related.products ul.products,
.upsells.products ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--space-6) !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* WC general stylesheet adds width:48% to .first items — kill it */
.woocommerce ul.products li.product.first { width: auto !important; }
/* ── Related products — force grid start at column 1, no phantom gap ── */
.related.products ul.products li.product:first-child,
.upsells.products ul.products li.product:first-child,
.woocommerce ul.products li.product:first-child {
grid-column: 1 !important;
grid-row: auto !important;
}
/* Nuke WC general's float-based layout completely for all product lists */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none !important;
}
.woocommerce ul.products li.product {
grid-column: auto !important;
grid-row: auto !important;
}
/* ═══════════════════════════════════════════════════
BLOG ARCHIVE (home.php)
═══════════════════════════════════════════════════ */
/* Hero Banner */
.lch-blog-hero {
background: var(--color-surface);
padding: var(--space-20) var(--space-8) var(--space-12);
text-align: center;
position: relative;
overflow: hidden;
}
.lch-blog-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(204,34,0,0.07) 0%, transparent 70%);
pointer-events: none;
}
.lch-blog-hero-eyebrow {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.lch-blog-hero-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-4);
line-height: 1.1;
}
.lch-blog-hero-sub {
font-size: var(--text-base);
color: var(--color-text-muted);
max-width: 50ch;
margin: 0 auto;
line-height: 1.7;
}
.lch-blog-hero-stripe {
height: 3px;
background: var(--tristripe-h);
margin-top: var(--space-10);
}
/* Featured Post */
.lch-blog-featured {
padding: var(--space-12) var(--space-8);
max-width: var(--content-wide);
margin: 0 auto;
}
.lch-blog-featured-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 420px;
}
.lch-blog-featured-img-wrap {
position: relative;
display: block;
overflow: hidden;
}
.lch-blog-featured-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.lch-blog-featured-img-wrap:hover img { transform: scale(1.03); }
.lch-blog-featured-img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent 60%, rgba(14,14,13,0.5));
pointer-events: none;
}
.lch-blog-featured-img-placeholder {
width: 100%; height: 100%;
background: var(--color-surface-3);
min-height: 420px;
}
.lch-blog-featured-content {
padding: var(--space-12) var(--space-10);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-5);
}
.lch-blog-featured-meta {
display: flex;
align-items: center;
gap: var(--space-4);
}
.lch-blog-meta-date {
font-size: var(--text-xs);
color: var(--color-text-faint);
}
.lch-blog-featured-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
line-height: 1.15;
color: var(--color-text);
}
.lch-blog-featured-title a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
.lch-blog-featured-title a:hover { color: var(--color-accent); }
.lch-blog-featured-excerpt {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.7;
}
/* Archive Grid */
.lch-blog-archive {
padding: 0 var(--space-8) var(--space-20);
}
.lch-blog-archive-inner {
max-width: var(--content-wide);
margin: 0 auto;
}
.lch-blog-archive-header {
margin-bottom: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}
.lch-blog-archive-title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
}
.lch-blog-archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
/* Card — archive variant */
.lch-blog-card--archive {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color var(--transition), transform var(--transition);
}
.lch-blog-card--archive:hover {
border-color: var(--color-accent);
transform: translateY(-3px);
}
.lch-blog-card--archive .lch-blog-card-img-wrap {
display: block;
overflow: hidden;
height: 200px;
}
.lch-blog-card--archive .lch-blog-card-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.lch-blog-card--archive:hover .lch-blog-card-img-wrap img { transform: scale(1.05); }
.lch-blog-card--archive .lch-blog-card-body {
padding: var(--space-6);
display: flex;
flex-direction: column;
flex: 1;
gap: var(--space-3);
}
.lch-blog-card--archive .lch-blog-card-meta {
display: flex;
align-items: center;
gap: var(--space-3);
}
.lch-blog-card--archive .lch-blog-card-title {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 700;
line-height: 1.3;
color: var(--color-text);
}
.lch-blog-card--archive .lch-blog-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
.lch-blog-card--archive .lch-blog-card-title a:hover { color: var(--color-accent); }
.lch-blog-card--archive .lch-blog-card-excerpt {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.6;
flex: 1;
}
.lch-blog-read-more {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition);
margin-top: auto;
}
.lch-blog-read-more:hover { color: var(--color-accent-hover); }
/* Pagination */
.lch-blog-pagination {
margin-top: var(--space-12);
display: flex;
justify-content: center;
}
.lch-blog-pagination .page-numbers {
display: flex;
gap: var(--space-2);
list-style: none;
}
.lch-blog-pagination .page-numbers li a,
.lch-blog-pagination .page-numbers li span {
display: flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-muted);
background: var(--color-surface);
border: 1px solid var(--color-border);
text-decoration: none;
transition: all var(--transition);
}
.lch-blog-pagination .page-numbers li a:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.lch-blog-pagination .page-numbers li .current {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* Shared tag pill */
.lch-blog-tag {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
background: rgba(204,34,0,0.12);
border: 1px solid rgba(204,34,0,0.25);
border-radius: 999px;
padding: 0.2em 0.7em;
text-decoration: none;
}
/* ═══════════════════════════════════════════════════
SINGLE POST (single.php)
═══════════════════════════════════════════════════ */
/* Hero */
.lch-single-hero {
position: relative;
min-height: 480px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.lch-single-hero-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-color: var(--color-surface-3);
}
.lch-single-hero-img--no-photo {
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-3) 100%);
}
.lch-single-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(14,14,13,0.92) 0%, rgba(14,14,13,0.5) 50%, rgba(14,14,13,0.15) 100%);
}
.lch-single-hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
width: 100%;
padding: var(--space-16) var(--space-8) var(--space-12);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.lch-single-hero-meta {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.lch-single-meta-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: rgba(232,230,225,0.55);
}
.lch-single-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
line-height: 1.1;
color: var(--color-text);
}
.lch-single-lead {
font-size: var(--text-base);
color: rgba(232,230,225,0.75);
line-height: 1.7;
max-width: 65ch;
}
.lch-single-author {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
color: rgba(232,230,225,0.65);
}
.lch-single-author-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
color: #fff;
flex-shrink: 0;
}
/* Body layout */
.lch-single-body {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--space-12);
max-width: var(--content-wide);
margin: 0 auto;
padding: var(--space-12) var(--space-8) var(--space-16);
align-items: start;
}
/* Article content */
.lch-single-content {
color: var(--color-text);
font-size: var(--text-base);
line-height: 1.85;
}
.lch-single-content h2,
.lch-single-content h3,
.lch-single-content h4 {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-text);
margin: var(--space-10) 0 var(--space-4);
line-height: 1.2;
}
.lch-single-content h2 { font-size: var(--text-lg); }
.lch-single-content h3 { font-size: var(--text-base); }
.lch-single-content p { margin-bottom: var(--space-5); color: var(--color-text-muted); }
.lch-single-content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.lch-single-content ul,
.lch-single-content ol {
margin: 0 0 var(--space-5) var(--space-6);
color: var(--color-text-muted);
line-height: 1.8;
}
.lch-single-content li { margin-bottom: var(--space-2); }
.lch-single-content blockquote {
border-left: 3px solid var(--color-primary);
padding: var(--space-4) var(--space-6);
margin: var(--space-8) 0;
background: var(--color-surface);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.lch-single-content blockquote p {
font-size: var(--text-lg);
font-style: italic;
color: var(--color-text);
margin: 0;
}
.lch-single-content img {
max-width: 100%;
border-radius: var(--radius-md);
margin: var(--space-8) 0;
}
.lch-single-content hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-10) 0;
}
/* Tags */
.lch-single-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-10);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}
.lch-single-tag {
font-size: var(--text-xs);
color: var(--color-text-muted);
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 0.25em 0.8em;
text-decoration: none;
transition: border-color var(--transition), color var(--transition);
}
.lch-single-tag:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* Share bar */
.lch-single-share {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}
.lch-single-share-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-right: var(--space-2);
}
.lch-single-share-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-muted);
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.4em 0.9em;
text-decoration: none;
cursor: pointer;
font-family: var(--font-body);
transition: all var(--transition);
}
.lch-single-share-btn:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* Sidebar */
.lch-single-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-6);
position: sticky;
top: 100px;
}
.lch-single-sidebar-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.6;
}
.lch-single-sidebar-card--cta {
border-color: rgba(204,34,0,0.3);
background: linear-gradient(135deg, var(--color-surface) 0%, rgba(204,34,0,0.05) 100%);
}
.lch-sidebar-logo {
height: 28px; width: auto; opacity: 0.8;
display: block; margin-bottom: var(--space-4);
}
.lch-sidebar-cta-eyebrow {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--space-2);
}
.lch-single-sidebar-card h3 {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-3);
line-height: 1.2;
}
.lch-sidebar-section-title {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text);
margin-bottom: var(--space-5);
}
.lch-sidebar-recent {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.lch-sidebar-recent li a {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: 1.4;
transition: color var(--transition);
}
.lch-sidebar-recent li a:hover { color: var(--color-accent); }
.lch-sidebar-recent img,
.lch-sidebar-recent-placeholder {
width: 52px; height: 40px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
background: var(--color-surface-3);
}
/* Prev / Next nav */
.lch-single-nav {
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.lch-single-nav-inner {
max-width: var(--content-wide);
margin: 0 auto;
padding: var(--space-8);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.lch-single-nav-item {
display: flex;
flex-direction: column;
gap: var(--space-2);
text-decoration: none;
padding: var(--space-5);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
transition: border-color var(--transition), background var(--transition);
}
.lch-single-nav-item:hover {
border-color: var(--color-accent);
background: rgba(240,120,0,0.04);
}
.lch-single-nav-item--next { text-align: right; }
.lch-single-nav-dir {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-faint);
}
.lch-single-nav-item--next .lch-single-nav-dir { justify-content: flex-end; }
.lch-single-nav-title {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-text);
line-height: 1.3;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.lch-blog-featured-inner { grid-template-columns: 1fr; min-height: auto; }
.lch-blog-featured-img-wrap { height: 280px; }
.lch-blog-archive-grid { grid-template-columns: repeat(2, 1fr); }
.lch-single-body { grid-template-columns: 1fr; }
.lch-single-sidebar { position: static; }
}
@media (max-width: 640px) {
.lch-blog-archive-grid { grid-template-columns: 1fr; }
.lch-single-nav-inner { grid-template-columns: 1fr; }
.lch-single-hero-content { padding: var(--space-10) var(--space-5) var(--space-8); }
.lch-blog-featured-content { padding: var(--space-8) var(--space-6); }
.lch-blog-archive { padding: 0 var(--space-5) var(--space-12); }
}
/* ═══════════════════════════════════════════════════
RESURRECTION DETAIL SECTION
═══════════════════════════════════════════════════ */
.lch-resurrection-detail {
background: var(--color-bg);
padding: var(--space-20) var(--space-8);
}
.lch-resurrection-detail-inner {
max-width: var(--content-wide);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.lch-resurrection-detail .section-header {
margin-bottom: var(--space-4);
}
/* Phase card */
.lch-res-phase {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.lch-res-phase-header {
display: flex;
align-items: flex-start;
gap: var(--space-6);
padding: var(--space-8) var(--space-8) var(--space-6);
border-bottom: 1px solid var(--color-border);
}
.lch-res-phase-badge {
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
padding: 0.35em 0.9em;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
margin-top: 4px;
}
.lch-res-phase-header h3 {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-2);
line-height: 1.2;
}
.lch-res-phase-header p {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.6;
margin: 0;
}
.lch-res-phase-body {
padding: var(--space-6) var(--space-8) var(--space-8);
}
.lch-res-phase-goal {
font-size: var(--text-sm);
color: var(--color-text-muted);
background: var(--color-surface-2);
border-left: 3px solid var(--color-primary);
padding: var(--space-3) var(--space-5);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin-bottom: var(--space-6);
line-height: 1.6;
}
.lch-res-phase-goal strong {
color: var(--color-text);
}
/* Work item grid */
.lch-res-work-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.lch-res-work-grid ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.lch-res-work-grid ul li {
font-size: var(--text-sm);
color: var(--color-text-muted);
padding-left: var(--space-5);
position: relative;
line-height: 1.5;
}
.lch-res-work-grid ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary);
flex-shrink: 0;
}
/* Important note */
.lch-res-note {
display: flex;
gap: var(--space-5);
align-items: flex-start;
background: rgba(204,34,0,0.06);
border: 1px solid rgba(204,34,0,0.2);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-8);
margin-top: var(--space-4);
}
.lch-res-note-icon {
color: var(--color-primary);
flex-shrink: 0;
margin-top: 2px;
}
.lch-res-note strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-2);
}
.lch-res-note p {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.7;
margin: 0;
}
/* Responsive */
@media (max-width: 1024px) {
.lch-res-work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.lch-res-work-grid { grid-template-columns: 1fr; }
.lch-res-phase-header { flex-direction: column; gap: var(--space-3); }
.lch-resurrection-detail { padding: var(--space-12) var(--space-5); }
.lch-res-phase-body { padding: var(--space-5); }
}
/* ============================================================
TEKMETRIC APPOINTMENT BOOKING SECTION
Full Service Repair page only — .lch-appt-*
============================================================ */
.lch-appt-section {
background: var(--color-bg);
padding: var(--space-20) var(--space-6);
border-top: 1px solid rgba(255,255,255,0.06);
}
.lch-appt-inner {
max-width: 1200px;
margin: 0 auto;
}
.lch-appt-header {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-14);
}
.lch-appt-sub {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.75;
margin-top: var(--space-4);
}
/* Two-column layout */
.lch-appt-layout {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--space-14);
align-items: start;
}
/* ---- LEFT: info + steps ---- */
.lch-appt-steps {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-bottom: var(--space-10);
}
.lch-appt-step {
display: flex;
gap: var(--space-5);
align-items: flex-start;
}
.lch-appt-step-num {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
line-height: 1;
color: #FFCC00;
flex-shrink: 0;
width: 3rem;
opacity: 0.85;
}
.lch-appt-step h4 {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 700;
color: var(--color-text);
margin: 0 0 var(--space-1);
letter-spacing: 0.01em;
}
.lch-appt-step p {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.65;
margin: 0;
}
/* Info cards row */
.lch-appt-info-cards {
display: flex;
flex-direction: column;
gap: var(--space-3);
border-top: 1px solid rgba(255,255,255,0.07);
padding-top: var(--space-8);
}
.lch-appt-info-card {
display: flex;
align-items: flex-start;
gap: var(--space-4);
background: var(--color-surface);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: var(--space-4) var(--space-5);
}
.lch-appt-info-card svg {
flex-shrink: 0;
margin-top: 2px;
}
.lch-appt-info-card strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 2px;
}
.lch-appt-info-card span {
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.4;
}
.lch-appt-info-card span a {
color: #FFCC00;
text-decoration: none;
}
.lch-appt-info-card span a:hover {
text-decoration: underline;
}
/* ---- RIGHT: widget frame ---- */
.lch-appt-widget-wrap {
position: sticky;
top: 100px;
}
.lch-appt-widget-frame {
background: var(--color-surface);
border: 1px solid rgba(255, 204, 0, 0.18);
border-radius: 16px;
overflow: hidden;
min-height: 420px;
}
/* Live widget: when Tekmetric iframe is present, let it fill the frame */
.lch-appt-widget-frame iframe {
display: block;
width: 100%;
min-height: 640px;
border: none;
background: #fff;
}
/* Placeholder state — shown until widget is live */
.lch-appt-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-16) var(--space-10);
gap: var(--space-5);
min-height: 420px;
}
.lch-appt-placeholder svg {
opacity: 0.7;
}
.lch-appt-placeholder h3 {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text);
margin: 0;
}
.lch-appt-placeholder p {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.7;
max-width: 340px;
margin: 0;
}
.lch-appt-placeholder-actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-2);
}
/* Responsive */
@media (max-width: 1024px) {
.lch-appt-layout {
grid-template-columns: 1fr;
}
.lch-appt-widget-wrap {
position: static;
}
}
@media (max-width: 640px) {
.lch-appt-section {
padding: var(--space-14) var(--space-5);
}
.lch-appt-step-num {
font-size: 1.5rem;
width: 2.4rem;
}
.lch-appt-placeholder {
padding: var(--space-12) var(--space-6);
}
}
/* ============================================================
AUTHORIZED DEALER BRAND LOGOS — Overland Outfitting page
============================================================ */
.lch-dealer-brands {
background: var(--color-surface);
padding: var(--space-20) var(--space-6);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
width: 100%;
box-sizing: border-box;
}
.lch-dealer-brands-inner {
max-width: 1100px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.lch-dealer-brands-header {
text-align: center;
max-width: 100%;
width: 100%;
margin: 0 auto var(--space-14);
}
.lch-dealer-brands-sub {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.75;
margin-top: var(--space-4);
text-align: center;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.lch-brand-logo-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
align-items: center;
}
.lch-brand-logo-item {
flex: 0 0 calc(25% - var(--space-4));
max-width: 240px;
min-width: 180px;
background: #111110;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
padding: var(--space-6) var(--space-5);
display: flex;
align-items: center;
justify-content: center;
min-height: 90px;
transition: border-color 0.2s ease, background 0.2s ease;
}
.lch-brand-logo-item:hover {
border-color: rgba(240, 120, 0, 0.35);
background: #161614;
}
.lch-brand-logo-item img {
max-width: 100%;
max-height: 52px;
width: auto;
height: auto;
object-fit: contain;
/* Force all logos to white regardless of source color */
filter: grayscale(1) brightness(0) invert(1);
opacity: 0.78;
transition: opacity 0.2s ease;
}
.lch-brand-logo-item:hover img {
opacity: 1;
}
@media (max-width: 900px) {
.lch-brand-logo-item { flex: 0 0 calc(33.333% - var(--space-4)); }
}
@media (max-width: 600px) {
.lch-brand-logo-item { flex: 0 0 calc(50% - var(--space-4)); min-width: 0; min-height: 70px; padding: var(--space-4); }
}
/* ============================================================
ACCORDION — lch-wp-content h3 sections
Full Service Repair (and any service page with post content)
============================================================ */
.lch-accordion-item {
border-bottom: 1px solid rgba(255,255,255,0.07);
margin-bottom: 0;
}
.lch-accordion-item:first-child {
border-top: 1px solid rgba(255,255,255,0.07);
}
.lch-accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
padding: 1.1rem 0;
cursor: pointer;
text-align: left;
gap: 1rem;
}
.lch-accordion-trigger h3 {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 700;
color: var(--color-text);
margin: 0;
padding: 0;
border: none;
letter-spacing: 0.01em;
line-height: 1.3;
flex: 1;
}
.lch-accordion-trigger:hover h3 {
color: #FFCC00;
}
.lch-accordion-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.2);
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s, background 0.2s, transform 0.3s;
}
.lch-accordion-icon svg {
transition: transform 0.3s ease;
}
.lch-accordion-trigger[aria-expanded="true"] .lch-accordion-icon {
border-color: #FFCC00;
background: rgba(255,204,0,0.1);
}
.lch-accordion-trigger[aria-expanded="true"] .lch-accordion-icon svg {
transform: rotate(45deg);
}
.lch-accordion-body {
overflow: hidden;
max-height: 0;
transition: max-height 0.35s ease, padding 0.2s ease;
padding-bottom: 0;
}
.lch-accordion-body.is-open {
max-height: 1200px;
padding-bottom: 1.25rem;
}
.lch-accordion-body p {
margin-bottom: 0.75rem;
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.75;
}
.lch-accordion-body ul {
list-style: none;
padding: 0;
margin: 0.25rem 0 0.75rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.3rem 1.25rem;
}
.lch-accordion-body ul li {
font-size: var(--text-sm);
color: var(--color-text-muted);
padding-left: 1rem;
position: relative;
line-height: 1.5;
}
.lch-accordion-body ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 4px;
height: 4px;
border-radius: 50%;
background: #FFCC00;
opacity: 0.7;
}
@media (max-width: 640px) {
.lch-accordion-body ul { grid-template-columns: 1fr; }
}
/* ============================================================
VEHICLE GALLERY PAGE
============================================================ */
/* Hero */
.lch-gallery-hero {
background: var(--color-bg);
padding: 7rem var(--space-6) 5rem;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.06);
position: relative;
overflow: hidden;
}
.lch-gallery-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,204,0,0.06) 0%, transparent 70%);
pointer-events: none;
}
.lch-gallery-hero-inner {
position: relative;
z-index: 1;
max-width: 700px;
margin: 0 auto;
}
.lch-gallery-hero-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 900;
font-style: italic;
text-transform: uppercase;
color: var(--color-text);
letter-spacing: -0.01em;
margin: 0.5rem 0 1rem;
line-height: 1;
}
.lch-gallery-hero-sub {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.75;
max-width: 540px;
margin: 0 auto;
}
/* Series Grid */
.lch-gallery-series-section {
background: var(--color-surface);
padding: var(--space-20) var(--space-6);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lch-gallery-series-inner {
max-width: 1400px;
margin: 0 auto;
text-align: center;
}
.lch-gallery-series-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-4);
}
.lch-gallery-series-grid .lch-series-card {
text-align: left;
background: var(--color-bg);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: var(--space-6) var(--space-5);
text-decoration: none;
display: flex !important;
flex-direction: column !important;
gap: var(--space-3);
cursor: pointer;
transition: border-color 0.2s, transform 0.2s, background 0.2s;
border-top: 3px solid var(--series-color);
aspect-ratio: unset !important;
overflow: visible !important;
position: relative;
}
.lch-gallery-series-grid .lch-series-card:hover {
border-color: var(--series-color);
background: #161614;
transform: translateY(-3px);
}
.lch-gallery-series-grid .lch-series-card-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.lch-gallery-series-grid .lch-series-card-label {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 800;
color: var(--color-text);
line-height: 1;
}
.lch-gallery-series-grid .lch-series-card-years {
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
}
.lch-gallery-series-grid .lch-series-card-models {
font-size: var(--text-xs);
color: var(--series-color);
font-weight: 600;
letter-spacing: 0.04em;
}
.lch-gallery-series-grid .lch-series-card-desc {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: 1.65;
margin: 0;
flex: 1;
}
.lch-gallery-series-grid .lch-series-card-cta {
font-size: var(--text-xs);
font-weight: 700;
color: var(--series-color);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: auto;
}
.lch-gallery-series-grid .lch-series-card-cta span { margin-left: 4px; transition: margin 0.2s; }
.lch-gallery-series-grid .lch-series-card:hover .lch-series-card-cta span { margin-left: 8px; }
/* Filter bar */
.lch-gallery-grid-section {
background: var(--color-bg);
padding: var(--space-16) var(--space-6) var(--space-20);
}
.lch-gallery-grid-inner {
max-width: 1200px;
margin: 0 auto;
}
.lch-gallery-filters {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
margin-bottom: var(--space-10);
justify-content: center;
}
.lch-gallery-filter {
background: var(--color-surface);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 100px;
color: var(--color-text-muted);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
padding: 0.45rem 1.1rem;
cursor: pointer;
transition: all 0.2s;
letter-spacing: 0.02em;
}
.lch-gallery-filter:hover {
border-color: rgba(255,204,0,0.4);
color: var(--color-text);
}
.lch-gallery-filter.is-active {
background: #FFCC00;
border-color: #FFCC00;
color: #0e0e0d;
}
/* Masonry grid */
.lch-masonry-grid {
columns: 4;
column-gap: var(--space-4);
}
.lch-masonry-item {
break-inside: avoid;
margin-bottom: var(--space-4);
}
.lch-masonry-card {
border-radius: 10px;
overflow: hidden;
position: relative;
background: var(--color-surface);
border: 1px solid rgba(255,255,255,0.07);
}
.lch-masonry-card.has-photo {
cursor: pointer;
}
.lch-masonry-card.has-photo img {
width: 100%;
display: block;
transition: transform 0.4s ease;
}
.lch-masonry-card.has-photo:hover img {
transform: scale(1.04);
}
.lch-masonry-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10,10,9,0.85) 0%, transparent 50%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-4);
gap: var(--space-1);
opacity: 0;
transition: opacity 0.2s;
}
.lch-masonry-card.has-photo:hover .lch-masonry-overlay {
opacity: 1;
}
.lch-masonry-series-tag {
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 700;
color: #FFCC00;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.lch-masonry-type-tag {
font-size: var(--text-xs);
color: rgba(255,255,255,0.8);
}
/* Placeholder card */
.lch-masonry-card.is-placeholder {
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed rgba(255,255,255,0.12);
background: #111110;
}
/* Vary placeholder heights for visual rhythm */
.lch-masonry-item:nth-child(3n) .lch-masonry-card.is-placeholder { min-height: 300px; }
.lch-masonry-item:nth-child(5n) .lch-masonry-card.is-placeholder { min-height: 180px; }
.lch-masonry-placeholder-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
color: rgba(255,255,255,0.2);
text-align: center;
padding: var(--space-6);
}
.lch-masonry-placeholder-inner span {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
color: rgba(255,255,255,0.25);
}
.lch-masonry-placeholder-inner small {
font-size: var(--text-xs);
color: rgba(255,255,255,0.15);
}
/* Empty state */
.lch-gallery-empty {
text-align: center;
padding: var(--space-16);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* Lightbox */
.lch-lightbox {
position: fixed;
inset: 0;
background: rgba(5,5,5,0.96);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.lch-lightbox.is-open {
opacity: 1;
pointer-events: all;
}
.lch-lightbox-content {
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.lch-lightbox-content img {
max-width: 90vw;
max-height: 82vh;
object-fit: contain;
border-radius: 6px;
}
.lch-lightbox-caption {
font-size: var(--text-sm);
color: rgba(255,255,255,0.5);
}
.lch-lightbox-close {
position: fixed;
top: 1.5rem;
right: 1.5rem;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
color: white;
border-radius: 50%;
width: 44px;
height: 44px;
font-size: 1.4rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
line-height: 1;
}
.lch-lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lch-lightbox-prev,
.lch-lightbox-next {
position: fixed;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
color: white;
border-radius: 50%;
width: 48px;
height: 48px;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.lch-lightbox-prev { left: 1.5rem; }
.lch-lightbox-next { right: 1.5rem; }
.lch-lightbox-prev:hover,
.lch-lightbox-next:hover { background: rgba(255,255,255,0.18); }
/* CTA */
.lch-gallery-cta {
background: var(--color-surface);
padding: var(--space-20) var(--space-6);
text-align: center;
border-top: 1px solid rgba(255,255,255,0.06);
}
.lch-gallery-cta-inner {
max-width: 640px;
margin: 0 auto;
}
.lch-gallery-cta h2 {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 900;
font-style: italic;
text-transform: uppercase;
color: var(--color-text);
margin: 0 0 var(--space-4);
}
.lch-gallery-cta p {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.75;
margin: 0 0 var(--space-8);
}
.lch-gallery-cta-actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
/* Responsive */
@media (max-width: 1100px) {
.lch-gallery-series-grid { grid-template-columns: repeat(3, 1fr); }
.lch-masonry-grid { columns: 3; }
}
@media (max-width: 768px) {
.lch-gallery-series-grid { grid-template-columns: repeat(2, 1fr); }
.lch-masonry-grid { columns: 2; }
.lch-gallery-series-grid .lch-series-card { overflow: visible !important; }
}
@media (max-width: 480px) {
.lch-gallery-series-grid { grid-template-columns: 1fr 1fr; }
.lch-masonry-grid { columns: 1; }
.lch-lightbox-prev { left: 0.5rem; }
.lch-lightbox-next { right: 0.5rem; }
}
/* ═══════════════════════════════════════════════
SERVICES OVERVIEW PAGE
═══════════════════════════════════════════════ */
/* Hero */
.lch-page-hero--services {
position: relative;
height: 480px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.lch-page-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 30%;
transform: scale(1.05);
}
.lch-page-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(14,14,13,0.55) 0%, rgba(14,14,13,0.82) 100%);
}
.lch-page-hero-content {
position: relative;
z-index: 2;
max-width: 700px;
padding: 0 2rem;
}
.lch-page-hero-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: clamp(3rem, 7vw, 5.5rem);
color: #e8e6e1;
text-transform: uppercase;
line-height: 1;
margin: 0.4rem 0 1rem;
}
.lch-page-hero-sub {
font-size: 1.05rem;
color: rgba(232,230,225,0.75);
max-width: 560px;
margin: 0 auto;
line-height: 1.6;
}
.lch-tristripe-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
height: 8px;
z-index: 3;
}
.lch-tristripe-bar span { flex: 1; }
/* Services Grid */
.lch-services-overview-section {
background: #0e0e0d;
padding: 5rem 2rem;
}
.lch-services-overview-grid {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* Featured card spans 2 cols */
.lch-svc-card--featured {
grid-column: span 2;
}
.lch-svc-card--featured .lch-svc-card-img {
height: 340px;
}
/* Card base */
.lch-svc-card {
background: #1a1a18;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.lch-svc-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.lch-svc-card-img-wrap {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
}
.lch-svc-card-img {
height: 240px;
background-size: cover;
background-position: center;
transition: transform 0.5s ease;
}
.lch-svc-card:hover .lch-svc-card-img {
transform: scale(1.04);
}
.lch-svc-card-img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(14,14,13,0.7) 100%);
}
.lch-svc-card-eyebrow {
position: absolute;
top: 1rem;
left: 1rem;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
padding: 0.3rem 0.75rem;
border-radius: 4px;
}
.lch-svc-card-body {
padding: 1.75rem;
display: flex;
flex-direction: column;
flex: 1;
}
.lch-svc-card-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 1.7rem;
text-transform: uppercase;
color: #e8e6e1;
margin: 0 0 0.75rem;
line-height: 1.1;
}
.lch-svc-card-desc {
font-size: 0.9rem;
color: rgba(232,230,225,0.65);
line-height: 1.65;
margin: 0 0 1.25rem;
flex: 1;
}
.lch-svc-card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1.5rem;
}
.lch-svc-tag {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(232,230,225,0.5);
border: 1px solid rgba(232,230,225,0.15);
padding: 0.2rem 0.6rem;
border-radius: 4px;
}
.lch-svc-card-btn {
align-self: flex-start;
font-size: 0.85rem;
padding: 0.6rem 1.4rem;
}
.lch-svc-card-accent {
height: 4px;
width: 100%;
}
/* Bottom CTA Band */
.lch-services-cta-band {
background: #1a1a18;
border-top: 1px solid rgba(232,230,225,0.08);
padding: 5rem 2rem;
text-align: center;
}
.lch-services-cta-inner {
max-width: 640px;
margin: 0 auto;
}
.lch-services-cta-inner h2 {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: clamp(2rem, 4vw, 3rem);
text-transform: uppercase;
color: #e8e6e1;
margin: 0 0 1rem;
}
.lch-services-cta-inner p {
color: rgba(232,230,225,0.65);
font-size: 1rem;
margin: 0 0 2rem;
line-height: 1.6;
}
.lch-services-cta-inner .btn + .btn {
margin-left: 1rem;
}
/* Responsive */
@media (max-width: 1024px) {
.lch-services-overview-grid { grid-template-columns: repeat(2, 1fr); }
.lch-svc-card--featured { grid-column: span 2; }
}
@media (max-width: 640px) {
.lch-services-overview-grid { grid-template-columns: 1fr; }
.lch-svc-card--featured { grid-column: span 1; }
.lch-svc-card--featured .lch-svc-card-img { height: 220px; }
.lch-page-hero--services { height: 360px; }
}
/* ============================================================
WCPA PRODUCT ADD-ONS — LCH Dark Theme
v1.3.4
============================================================ */
/* Outer wrapper */
.wcpa_form_outer {
margin: 1.5rem 0 2rem;
width: 100%;
}
/* ── GRID LAYOUT: section_body is the grid container ── */
.wcpa_section_body {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem 1.5rem;
}
/* Each row becomes a grid item (already block, no change needed) */
.wcpa_row {
margin: 0 !important;
}
/* Full-width slots: kit upgrade, expedite, cushions, perforation, 2nd row */
.wcpa_row:has(select[name*="kit_upgrade"]),
.wcpa_row:has(select[name*="expedite"]),
.wcpa_row:has(select[name*="cushion"]),
.wcpa_row:has(select[name*="perforation"]),
.wcpa_row:has(select[name*="2nd_row"]) {
grid-column: 1 / -1;
}
/* ── FIELD WRAP ── */
.wcpa_wrap .wcpa_field_wrap {
margin: 0;
padding: 0;
}
/* ── LABEL ── */
.wcpa_wrap .wcpa_field_label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.85rem;
color: rgba(232, 230, 225, 0.65);
margin: 0 0 5px 0;
display: block;
line-height: 1;
}
/* Required asterisk */
.wcpa_wrap .wcpa_required_ast {
color: #CC2200;
margin-left: 2px;
}
/* ── SELECT DROPDOWN ── */
.wcpa_wrap select,
.wcpa_wrap .wcpa_field_wrap select {
width: 100%;
background-color: #161614;
color: #e8e6e1;
border: 1px solid rgba(232, 230, 225, 0.12);
border-radius: 4px;
padding: 0.6rem 2.25rem 0.6rem 0.8rem;
font-family: 'Satoshi', sans-serif;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23F07800' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.8rem center;
cursor: pointer;
transition: border-color 0.18s ease, background-color 0.18s ease;
box-shadow: none;
outline: none;
}
.wcpa_wrap select:hover {
border-color: rgba(240, 120, 0, 0.4);
background-color: #1e1e1c;
}
.wcpa_wrap select:focus {
border-color: #F07800;
background-color: #1e1e1c;
outline: none;
box-shadow: 0 0 0 2px rgba(240, 120, 0, 0.12);
}
/* Select option items */
.wcpa_wrap select option {
background-color: #161614;
color: #e8e6e1;
}
/* ── PRICE SUMMARY BLOCK ── */
.wcpa_price_summary {
background: #161614;
border: 1px solid rgba(232, 230, 225, 0.1);
border-radius: 6px;
padding: 1rem 1.25rem;
margin-top: 1.5rem;
grid-column: 1 / -1;
}
.wcpa_price_summary h4 {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-style: italic;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.06em;
color: rgba(232, 230, 225, 0.5);
margin: 0 0 0.75rem;
}
.wcpa_price_summary .wcpa_options_total,
.wcpa_price_summary .wcpa_product_total,
.wcpa_price_summary .wcpa_total {
color: #e8e6e1;
font-size: 0.88rem;
}
.wcpa_price_summary .wcpa_total {
border-top: 1px solid rgba(232, 230, 225, 0.1);
padding: 0.75rem 0 0;
margin-top: 0.5rem;
font-size: 1rem;
font-weight: 700;
color: #FFCC00;
}
/* ── ERROR STATES ── */
.wcpa_wrap .wcpa_field_error p {
color: #CC2200;
font-size: 0.75rem;
}
/* ── RESPONSIVE: stack to 1 col on mobile ── */
@media (max-width: 640px) {
.wcpa_section_body {
grid-template-columns: 1fr !important;
}
.wcpa_row:has(select) {
grid-column: 1 / -1 !important;
}
}
/* ── LCH Live Price Summary ── */
.lch-live-price {
display: none;
background: #161614;
border: 1px solid rgba(232,230,225,0.1);
border-radius: 6px;
padding: 1rem 1.25rem;
margin: 1rem 0 1.5rem;
}
.lch-live-price-inner {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.lch-price-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Satoshi', sans-serif;
font-size: 0.875rem;
color: rgba(232,230,225,0.7);
}
.lch-price-row span:last-child {
font-weight: 600;
color: #e8e6e1;
}
.lch-price-row.lch-price-addon {
font-size: 0.82rem;
color: rgba(232,230,225,0.5);
}
.lch-price-row.lch-price-addon span:last-child {
color: #F07800;
font-weight: 500;
}
.lch-price-row.lch-price-total {
border-top: 1px solid rgba(232,230,225,0.1);
padding-top: 0.6rem;
margin-top: 0.25rem;
font-size: 1rem;
font-weight: 700;
color: #e8e6e1;
}
.lch-price-row.lch-price-total span:last-child {
color: #FFCC00;
font-size: 1.1rem;
}
/* ── Luxury-only color notice ── */
.lch-field-note {
margin-top: 0.5rem;
font-size: 0.78rem;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
font-style: italic;
color: #F07800;
opacity: 0.85;
letter-spacing: 0.02em;
line-height: 1.4;
}
/* ============================================================
WC BLOCKS CHECKOUT & CART — Dark Theme Overrides
v1.4.1
============================================================ */
/* ── Text inputs (first name, last name, address, email, phone, etc.) ── */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="number"] {
background-color: #1a1a18 !important;
color: #e8e6e1 !important;
border: 1px solid rgba(232,230,225,0.2) !important;
border-radius: 6px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-text-input input[type="tel"]:focus,
.wc-block-components-text-input input[type="password"]:focus,
.wc-block-components-text-input input[type="number"]:focus {
background-color: #1a1a18 !important;
color: #e8e6e1 !important;
border-color: #CC2200 !important;
box-shadow: 0 0 0 2px rgba(204,34,0,0.25) !important;
outline: none !important;
}
.wc-block-components-text-input input::placeholder {
color: rgba(232,230,225,0.35) !important;
}
/* ── Address card — secondary line (street/city/state) ── */
.wc-block-components-address-card address .wc-block-components-address-card__address-section--secondary {
color: rgba(232,230,225,0.75) !important;
}
/* Primary name line */
.wc-block-components-address-card address .wc-block-components-address-card__address-section--primary {
color: #e8e6e1 !important;
}
/* Card border */
.wc-block-components-address-card {
border-color: rgba(232,230,225,0.15) !important;
color: #e8e6e1 !important;
}
/* Edit button */
.wc-block-components-address-card__edit {
color: rgba(232,230,225,0.7) !important;
}
.wc-block-components-address-card__edit:hover {
color: #F07800 !important;
}
/* ── Order summary thumbnail quantity badge ── */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
background: #CC2200 !important;
border: 2px solid #0e0e0d !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
color: #ffffff !important;
font-weight: 700 !important;
}
/* ── Floating label ── */
.wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-text-input label {
color: rgba(232,230,225,0.6) !important;
}
.wc-block-components-text-input.is-active label {
color: rgba(232,230,225,0.45) !important;
}
/* ── Select / Country / State dropdowns ── */
.wc-block-components-select-input select,
.wc-blocks-components-select select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
background-color: #1a1a18 !important;
color: #e8e6e1 !important;
border: 1px solid rgba(232,230,225,0.2) !important;
border-radius: 6px !important;
}
.wc-block-components-select-input select:focus,
.wc-blocks-components-select select:focus {
border-color: #CC2200 !important;
box-shadow: 0 0 0 2px rgba(204,34,0,0.25) !important;
outline: none !important;
}
/* Select label */
.wc-block-components-select-input label,
.wc-blocks-components-select label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
color: rgba(232,230,225,0.6) !important;
}
/* Select wrapper background */
.wc-blocks-components-select__container,
[class*="wc-blocks-components-select"] {
background-color: #1a1a18 !important;
border: 1px solid rgba(232,230,225,0.2) !important;
border-radius: 6px !important;
color: #e8e6e1 !important;
}
/* ── Checkout form section headings ── */
.wc-block-checkout .wc-block-components-title,
.wc-block-checkout h2,
.wc-block-checkout h3 {
color: #e8e6e1 !important;
}
/* ── Order summary / sidebar ── */
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
background-color: #1a1a18 !important;
border: 1px solid rgba(232,230,225,0.12) !important;
border-radius: 8px !important;
color: #e8e6e1 !important;
}
/* ── Checkout totals rows ── */
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
color: #e8e6e1 !important;
border-color: rgba(232,230,225,0.1) !important;
}
/* ── Coupon input ── */
.wc-block-components-totals-coupon__input input {
background-color: #1a1a18 !important;
color: #e8e6e1 !important;
border: 1px solid rgba(232,230,225,0.2) !important;
border-radius: 6px !important;
}
/* ── Checkbox (save address, create account) ── */
.wc-block-components-checkbox__input,
.wc-block-components-checkbox input[type="checkbox"] {
accent-color: #CC2200 !important;
}
.wc-block-components-checkbox__label {
color: rgba(232,230,225,0.8) !important;
}
/* ── Payment method section ── */
.wc-block-components-payment-methods,
.wc-block-components-radio-control-accordion-content {
background-color: #161614 !important;
border: 1px solid rgba(232,230,225,0.1) !important;
border-radius: 8px !important;
color: #e8e6e1 !important;
}
.wc-block-components-radio-control__label {
color: #e8e6e1 !important;
}
.wc-block-components-radio-control__description {
color: rgba(232,230,225,0.6) !important;
}
.wc-block-components-radio-control__input {
accent-color: #CC2200 !important;
}
/* ── Place order button ── */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button {
background-color: #CC2200 !important;
color: #fff !important;
border: none !important;
border-radius: 6px !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 800 !important;
font-style: italic !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
font-size: 1.05rem !important;
padding: 0.85rem 2rem !important;
cursor: pointer !important;
transition: background-color 0.2s !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button:hover {
background-color: #a81c00 !important;
}
/* ── Quantity stepper (cart) ── */
.wc-block-components-quantity-selector {
color: #e8e6e1 !important;
border: 1px solid rgba(232,230,225,0.25) !important;
border-radius: 6px !important;
background-color: #1a1a18 !important;
}
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
background: transparent !important;
color: #e8e6e1 !important;
border: none !important;
}
.wc-block-components-quantity-selector__button {
color: #e8e6e1 !important;
background: transparent !important;
opacity: 0.7 !important;
}
.wc-block-components-quantity-selector__button:hover {
opacity: 1 !important;
color: #F07800 !important;
}
/* ── Remove item link ── */
.wc-block-cart-item__remove-link,
a.wc-block-cart-item__remove-link {
color: rgba(204,34,0,0.8) !important;
}
.wc-block-cart-item__remove-link:hover,
a.wc-block-cart-item__remove-link:hover {
color: #CC2200 !important;
}
/* ── Cart order totals ── */
.wc-block-cart__submit-container {
background-color: #1a1a18 !important;
border-radius: 8px !important;
padding: 1rem !important;
}
.wc-block-cart__submit-button {
background-color: #CC2200 !important;
color: #fff !important;
border: none !important;
border-radius: 6px !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 800 !important;
font-style: italic !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
font-size: 1.05rem !important;
padding: 0.85rem 2rem !important;
width: 100% !important;
cursor: pointer !important;
transition: background-color 0.2s !important;
}
.wc-block-cart__submit-button:hover {
background-color: #a81c00 !important;
}