/* ============================================================
YAMAGUCHI MOTORS — DESIGN SYSTEM
Aesthetic: Tokyo Premium Auto — bold, editorial, automotive
Brand: Red #CC0000 / Black / White
============================================================ */
/* Fonts are loaded via a parallel in header.php (faster than @import). */
/* ---------- CSS VARIABLES ---------- */
:root {
/* Brand colors */
--red: #CC0000;
--red-deep: #A30000;
--red-light: #FFE5E5;
--red-50: #FFF5F5;
/* Neutrals */
--black: #0A0A0A;
--black-soft: #1A1A1A;
--gray-900: #2A2A2A;
--gray-700: #4A4A4A;
--gray-500: #6B6B6B;
--gray-400: #8B8B8B;
--gray-300: #B5B5B5;
--gray-200: #D5D5D5;
--gray-100: #E8E8E8;
--gray-50: #F5F5F5;
--white: #FFFFFF;
--off-white: #FAFAFA;
/* Functional */
--green: #00A651;
--green-light: #E6F7EE;
--amber: #FFB800;
--amber-light: #FFF6E0;
--blue: #0066CC;
/* Typography */
--font-display: 'Oswald', 'Montserrat', system-ui, sans-serif;
--font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--font-jp: 'Noto Sans JP', 'Montserrat', system-ui, sans-serif;
/* Spacing (8px base) */
--s-1: 0.25rem; /* 4 */
--s-2: 0.5rem; /* 8 */
--s-3: 0.75rem; /* 12 */
--s-4: 1rem; /* 16 */
--s-5: 1.5rem; /* 24 */
--s-6: 2rem; /* 32 */
--s-7: 3rem; /* 48 */
--s-8: 4rem; /* 64 */
--s-9: 6rem; /* 96 */
--s-10: 8rem; /* 128 */
/* Layout */
--container-max: 1320px;
--container-pad: 1.5rem;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 30px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.08);
--shadow-xl: 0 24px 60px rgba(0,0,0,0.16);
--shadow-red: 0 8px 24px rgba(204,0,0,0.25);
/* Transitions */
--tr-fast: 0.15s ease;
--tr-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--tr-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
/* Header height */
--header-h: 72px;
--utility-h: 36px;
/* ===== C3a — Premium hybrid palette tokens (foundation only; not yet applied) =====
Added in v0.24.43. These are intentionally UNUSED by components in C3a.
Red stays the action color; navy becomes the premium/trust surface; gold is a small accent. */
--navy: #002B5C; /* premium trust / dark surfaces (future) */
--navy-deep: #001E40; /* navy hover / deepest */
--navy-soft: #0A3A6B; /* lighter navy for hover/secondary */
--navy-tint: #EAF0F7; /* pale navy surface */
--gold: #FFB300; /* approved accent (small use only) */
--gold-soft: #FFF4D6; /* pale gold surface */
--surface: #F7F8FA; /* default light section background (future) */
--surface-2: #FFFFFF; /* card / raised surface */
--ink: #111111; /* primary text ink */
/* Semantic aliases (one-line future re-theming) */
--trust: var(--navy);
--action: var(--red);
--accent: var(--gold);
}
@media (min-width: 768px) {
:root {
--container-pad: 2rem;
}
}
@media (min-width: 1280px) {
:root {
--container-pad: 3rem;
}
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--black);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--tr-fast); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
/* ---------- TYPOGRAPHY ---------- */
.display-xl, .display-l, .display-m,
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--black);
}
.display-xl { font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.95; letter-spacing: -0.02em; }
.display-l { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.0; }
.display-m { font-size: clamp(1.75rem, 4vw, 3rem); }
h1 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.mono { font-family: var(--font-mono); }
.uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.eyebrow {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--red);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.eyebrow::before {
content: "";
display: inline-block;
width: 24px;
height: 2px;
background: var(--red);
}
.muted { color: var(--gray-500); }
.text-white { color: var(--white); }
/* ---------- LAYOUT ---------- */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
width: 100%;
}
.section { padding: var(--s-8) 0; }
@media (min-width: 768px) { .section { padding: var(--s-9) 0; } }
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
/* ---------- BUTTONS ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: var(--radius-sm);
border: 2px solid transparent;
transition: all var(--tr-base);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); transform: translateY(-1px); box-shadow: var(--shadow-red); }
.btn-dark { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-dark:hover { background: var(--navy-soft); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-outline-white { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--black); }
.btn-ghost { background: transparent; color: var(--black); border-color: var(--gray-200); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-whatsapp { background: #25D366; color: var(--white); border-color: #25D366; }
.btn-whatsapp:hover { background: #1EBE57; border-color: #1EBE57; transform: translateY(-1px); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; }
.btn-lg { padding: 1.125rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 0.75rem; }
/* ---------- UTILITY BAR (top thin bar) ---------- */
.utility-bar {
background: var(--navy);
color: rgba(255,255,255,0.82);
height: var(--utility-h);
font-size: 0.75rem;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.utility-bar .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
}
.utility-bar .left, .utility-bar .right {
display: flex;
align-items: center;
gap: var(--s-5);
}
.utility-bar a { color: rgba(255,255,255,0.82); transition: color var(--tr-fast); }
.utility-bar a:hover { color: var(--white); }
.utility-bar .item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.02em;
}
.utility-bar .item svg { width: 13px; height: 13px; opacity: 0.7; }
.utility-bar .util-soc {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--gray-300);
transition: color var(--tr-fast);
border-radius: 3px;
}
.utility-bar .util-soc svg { width: 14px; height: 14px; }
.utility-bar .util-soc:hover { color: var(--red); }
@media (max-width: 767px) {
.utility-bar .left .item:not(:first-child) { display: none; }
.utility-bar .right { gap: var(--s-3); }
}
/* ---------- HEADER ---------- */
.site-header {
background: var(--white);
height: var(--header-h);
border-bottom: 1px solid var(--gray-100);
position: sticky;
top: 0;
z-index: 100;
transition: box-shadow var(--tr-base);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }
.site-header .container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
}
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
text-decoration: none;
}
.brand-logo {
height: 48px;
width: auto;
display: block;
transition: transform var(--tr-fast);
}
.brand:hover .brand-logo { transform: scale(1.03); }
.brand-logo-dark {
filter: brightness(1.05);
/* On dark backgrounds, MOTORS black text won't be visible — add subtle white glow */
}
@media (max-width: 480px) {
.brand-logo { height: 38px; }
}
.brand-tagline {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--gray-500);
padding-left: 0.75rem;
border-left: 1px solid var(--gray-200);
line-height: 1.1;
max-width: 100px;
}
@media (max-width: 767px) { .brand-tagline { display: none; } }
.footer-brand .brand-logo { height: 56px; }
.footer-brand .brand { margin-bottom: var(--s-3); }
.mobile-menu .brand-logo { height: 42px; filter: invert(0); }
.mobile-menu .brand-logo-dark {
background: rgba(255,255,255,0.95);
padding: 4px 10px;
border-radius: 6px;
}
.site-footer .brand-logo-dark {
background: rgba(255,255,255,0.97);
padding: 6px 14px;
border-radius: 8px;
display: inline-block;
}
.main-nav {
display: flex;
align-items: center;
gap: var(--s-5);
}
.main-nav a {
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--black);
padding: 0.5rem 0;
position: relative;
}
.main-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: var(--red);
transition: width var(--tr-base);
}
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.main-nav a.active { color: var(--red); }
.header-cta {
display: flex;
align-items: center;
gap: var(--s-3);
}
.menu-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: var(--navy);
color: var(--white);
border-radius: var(--radius-sm);
}
.menu-toggle svg { width: 22px; height: 22px; }
@media (max-width: 1023px) {
.main-nav { display: none; }
.header-cta .btn:not(.menu-toggle) { display: none; }
.menu-toggle { display: inline-flex; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
.main-nav { display: none; }
.header-cta .btn:not(.menu-toggle) { display: none; }
.menu-toggle { display: inline-flex; }
}
html.ym-menu-open,
html.ym-menu-open body {
overflow: hidden;
}
/* Mobile menu drawer */
.mobile-menu {
position: fixed;
inset: 0;
background: var(--black);
color: var(--white);
z-index: 999;
transform: translateX(100%);
transition: transform var(--tr-slow);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-head {
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--gray-900);
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-menu-close {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gray-900);
border-radius: var(--radius-sm);
color: var(--white);
}
.mobile-menu nav {
padding: var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-1);
}
.mobile-menu nav a {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: var(--s-3) 0;
border-bottom: 1px solid var(--gray-900);
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-menu nav a:hover, .mobile-menu nav a.active { color: var(--red); }
.mobile-menu nav a span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gray-500); }
.mobile-menu .actions {
padding: var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
/* ---------- HERO ---------- */
.hero {
position: relative;
background: var(--navy-deep);
color: var(--white);
overflow: hidden;
padding: var(--s-10) 0 var(--s-9);
min-height: 88vh;
display: flex;
align-items: center;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
/* Self-hosted hero (real Yamaguchi Motors export yard). Dark overlay kept for
white-text readability. Fallback cascade: plain JPEG -> webp via image-set. */
background-image:
linear-gradient(108deg, rgba(0,30,64,0.84) 0%, rgba(0,30,64,0.42) 40%, rgba(0,30,64,0.08) 100%),
url('../assets/hero.jpg');
background-image:
linear-gradient(108deg, rgba(0,30,64,0.84) 0%, rgba(0,30,64,0.42) 40%, rgba(0,30,64,0.08) 100%),
-webkit-image-set(url('../assets/hero.webp') type('image/webp'), url('../assets/hero.jpg') type('image/jpeg'));
background-image:
linear-gradient(108deg, rgba(0,30,64,0.84) 0%, rgba(0,30,64,0.42) 40%, rgba(0,30,64,0.08) 100%),
image-set(url('../assets/hero.webp') type('image/webp'), url('../assets/hero.jpg') type('image/jpeg'));
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
z-index: 0;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 42% at 80% 32%, rgba(204,0,0,0.10), transparent 64%);
z-index: 1;
pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-8);
align-items: center;
}
@media (min-width: 1024px) {
.hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-9); }
}
.hero h1, .hero .display-xl {
color: var(--white);
margin-bottom: var(--s-6);
font-size: clamp(2.75rem, 6vw, 5rem);
line-height: 0.9;
letter-spacing: -0.025em;
}
.hero h1 .accent {
color: var(--red);
display: block;
font-style: italic;
position: relative;
}
.hero .lead {
font-size: clamp(1.125rem, 1.5vw, 1.375rem);
color: var(--gray-300);
max-width: 620px;
margin-bottom: var(--s-7);
line-height: 1.55;
font-weight: 400;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-8); }
.hero-actions .btn-lg { padding: 1.25rem 2.25rem; font-size: 1rem; }
.hero-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-5);
padding-top: var(--s-6);
border-top: 1px solid var(--gray-900);
}
@media (min-width: 640px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
.hero-stats .stat .num {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--white);
line-height: 1;
display: block;
margin-bottom: 0.375rem;
}
.hero-stats .stat .num .unit { color: var(--red); }
.hero-stats .stat .lbl {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--gray-400);
}
/* Hero search card */
.hero-search {
background: var(--white);
border-radius: var(--radius-md);
padding: var(--s-5);
box-shadow: var(--shadow-xl);
color: var(--black);
position: relative;
}
.hero-search-tabs {
display: flex;
gap: 0;
margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-5);
border-bottom: 1px solid var(--gray-100);
}
.hero-search-tabs button {
flex: 1;
padding: var(--s-4);
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-500);
border-bottom: 3px solid transparent;
transition: all var(--tr-base);
}
.hero-search-tabs button.active {
color: var(--red);
border-bottom-color: var(--red);
background: var(--red-50);
}
.search-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
}
@media (min-width: 480px) {
.search-fields { grid-template-columns: 1fr 1fr 1fr; }
}
.search-fields .field { display: flex; flex-direction: column; gap: 0.375rem; }
.search-fields label {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--gray-500);
}
.search-fields select, .search-fields input {
padding: 0.75rem 0.875rem;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
background: var(--white);
font-size: 0.875rem;
font-weight: 500;
transition: border-color var(--tr-fast);
}
.search-fields select:focus, .search-fields input:focus {
outline: none;
border-color: var(--black);
}
.search-fields .full { grid-column: 1 / -1; }
/* ---------- TRUSTBAR ---------- */
.trustbar {
background: var(--off-white);
border-bottom: 1px solid var(--gray-100);
padding: var(--s-5) 0;
}
.trustbar-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-4);
}
@media (min-width: 768px) { .trustbar-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { text-align: center; }
.trust-item .ico { display: inline-flex; width: 36px; height: 36px; margin-bottom: 0.5rem; color: var(--red); }
.trust-item .lbl { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.trust-item .sub { font-size: 0.75rem; color: var(--gray-500); margin-top: 2px; }
/* ---------- SECTION HEADERS ---------- */
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--s-5);
margin-bottom: var(--s-7);
flex-wrap: wrap;
}
.section-head .left { max-width: 720px; }
.section-head h2 { margin-top: var(--s-3); margin-bottom: var(--s-3); }
.section-head p { color: var(--gray-500); font-size: 1.0625rem; line-height: 1.55; }
.section-head .right { display: flex; align-items: center; gap: var(--s-3); }
/* ---------- CAR CARD ---------- */
.car-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--s-5);
}
@media (min-width: 768px) {
.car-grid { gap: var(--s-6); }
}
.car-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
overflow: hidden;
transition: all var(--tr-base);
display: flex;
flex-direction: column;
position: relative;
}
.car-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--gray-200);
}
.car-card .photo {
position: relative;
aspect-ratio: 16 / 11;
overflow: hidden;
background: var(--gray-100);
}
.car-card .photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--tr-slow);
}
.car-card:hover .photo img { transform: scale(1.05); }
.car-card .badges {
position: absolute;
top: var(--s-3);
left: var(--s-3);
display: flex;
gap: 0.375rem;
z-index: 2;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--radius-sm);
background: var(--white);
color: var(--black);
}
.badge-red { background: var(--red); color: var(--white); }
.badge-black { background: var(--black); color: var(--white); }
.badge-grade { background: var(--green); color: var(--white); }
.badge-hot { background: var(--amber); color: var(--black); }
.car-card .save {
position: absolute;
top: var(--s-3);
right: var(--s-3);
width: 36px;
height: 36px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(8px);
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
color: var(--gray-700);
transition: all var(--tr-fast);
}
.car-card .save:hover { color: var(--red); transform: scale(1.05); }
.car-card .save svg { width: 18px; height: 18px; }
.car-card .body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.car-card .name {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.15;
color: var(--black);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.car-card .name .yr { color: var(--gray-500); font-weight: 500; }
.car-card .grade-line {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.car-specs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-2);
padding: var(--s-3) 0;
border-top: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
}
.car-specs .spec { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--gray-700); }
.car-specs .spec svg { width: 14px; height: 14px; color: var(--gray-400); flex-shrink: 0; }
.car-specs .spec .v { font-family: var(--font-mono); font-weight: 500; color: var(--black); }
.car-card .footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
margin-top: auto;
}
.car-card .price { display: flex; flex-direction: column; }
.car-card .price .jpy {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--black);
line-height: 1;
}
.car-card .price .alt { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--gray-500); margin-top: 2px; }
.car-card .view-btn {
padding: 0.5rem 0.875rem;
background: var(--black);
color: var(--white);
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: background var(--tr-fast);
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.car-card .view-btn:hover { background: var(--red); }
.car-card .view-btn svg { width: 14px; height: 14px; }
/* Make the entire card a link with overlay */
.car-card .card-link {
position: absolute;
inset: 0;
z-index: 1;
}
.car-card .save, .car-card .view-btn { position: relative; z-index: 3; }
.car-card .badges { z-index: 3; }
/* ---------- SERVICES GRID ---------- */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--s-4);
}
.service-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-5);
transition: all var(--tr-base);
position: relative;
overflow: hidden;
}
.service-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 0;
background: var(--red);
transition: height var(--tr-base);
}
.service-card:hover {
border-color: var(--gray-200);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.service-card:hover::before { height: 100%; }
.service-card .ico {
width: 48px;
height: 48px;
background: var(--red-50);
color: var(--red);
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--s-4);
}
.service-card .ico svg { width: 24px; height: 24px; }
.service-card h4 {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.service-card p { font-size: 0.875rem; color: var(--gray-500); line-height: 1.55; }
/* ---------- EXPORT MARKETS ---------- */
.export-section {
background: var(--black);
color: var(--white);
position: relative;
overflow: hidden;
}
.export-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 40% at 20% 30%, rgba(204,0,0,0.15), transparent 60%),
radial-gradient(ellipse 50% 40% at 80% 70%, rgba(204,0,0,0.10), transparent 60%);
z-index: 0;
}
.export-section .container { position: relative; z-index: 1; }
.export-section h2 { color: var(--white); }
.export-section .section-head p { color: var(--gray-300); }
.markets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--s-4);
}
.market-card {
background: var(--black-soft);
border: 1px solid var(--gray-900);
border-radius: var(--radius-md);
padding: var(--s-5);
transition: all var(--tr-base);
position: relative;
overflow: hidden;
}
.market-card:hover { border-color: var(--red); transform: translateY(-2px); }
.market-card .flag {
font-size: 2.5rem;
line-height: 1;
margin-bottom: var(--s-3);
display: block;
}
.market-card h4 {
color: var(--white);
font-family: var(--font-display);
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.market-card p { color: var(--gray-300); font-size: 0.875rem; line-height: 1.55; }
.market-card .ports {
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid var(--gray-900);
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.market-card .port {
font-family: var(--font-mono);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-400);
padding: 0.25rem 0.5rem;
border: 1px solid var(--gray-900);
border-radius: 2px;
}
/* ---------- AUCTION SECTION ---------- */
.auction-section {
background: var(--off-white);
border-top: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
}
.auction-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
align-items: center;
}
@media (min-width: 1024px) {
.auction-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
.auction-houses {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-2);
margin-top: var(--s-5);
}
.auction-house {
background: var(--white);
border: 1px solid var(--gray-100);
padding: var(--s-3) var(--s-2);
text-align: center;
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.04em;
transition: all var(--tr-fast);
}
.auction-house:hover { border-color: var(--red); color: var(--red); }
.auction-house .sub { display: block; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; color: var(--gray-500); margin-top: 2px; }
/* ---------- FOOTER ---------- */
.site-footer {
background: var(--navy-deep);
color: rgba(255,255,255,0.74);
padding-top: var(--s-8);
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
padding-bottom: var(--s-7);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s-7); } }
.footer-grid h4,
.footer-grid h5 {
color: var(--white);
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--s-4);
}
.footer-grid ul li { margin-bottom: var(--s-2); }
.footer-grid ul a {
font-size: 0.875rem;
color: var(--gray-300);
transition: color var(--tr-fast);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.footer-grid ul a:hover { color: var(--white); }
.footer-grid ul a::before { content: ""; width: 4px; height: 1px; background: var(--gray-500); transition: width var(--tr-fast); }
.footer-grid ul a:hover::before { width: 8px; background: var(--red); }
.footer-brand .brand-name { color: var(--white); font-size: 1.25rem; }
.footer-brand p { font-size: 0.875rem; line-height: 1.6; color: rgba(255,255,255,0.70); margin-top: var(--s-3); max-width: 360px; }
.footer-contact { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.footer-contact .item { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; }
.footer-contact .item svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.footer-socials { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.footer-socials a {
width: 38px;
height: 38px;
border: 1px solid var(--gray-900);
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gray-300);
transition: all var(--tr-fast);
}
.footer-socials a:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.footer-socials a svg { width: 16px; height: 16px; }
.footer-bottom {
border-top: 1px solid rgba(255,179,0,0.30);
padding: var(--s-4) 0;
display: flex;
flex-direction: column;
gap: var(--s-3);
align-items: center;
text-align: center;
}
.footer-bottom .link-btn { color: rgba(255,255,255,0.72); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-bottom .legal { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--gray-500); letter-spacing: 0.04em; }
.footer-bottom .legal-links { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; }
.footer-bottom .legal-links a { font-size: 0.75rem; color: var(--gray-400); }
.footer-bottom .legal-links a:hover { color: var(--white); }
/* ---------- STOCK PAGE ---------- */
.page-head {
background: var(--off-white);
padding: var(--s-6) 0;
border-bottom: 1px solid var(--gray-100);
}
.breadcrumb {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--gray-500);
letter-spacing: 0.04em;
margin-bottom: var(--s-3);
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { color: var(--gray-300); }
.breadcrumb .current { color: var(--black); }
.stock-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
padding: var(--s-6) 0;
}
@media (min-width: 1024px) {
.stock-layout { grid-template-columns: 280px 1fr; }
}
.filters {
position: sticky;
top: calc(var(--header-h) + var(--s-3));
align-self: start;
max-height: calc(100vh - var(--header-h) - var(--s-5));
overflow-y: auto;
padding-right: var(--s-3);
}
@media (max-width: 1023px) {
.filters { position: static; max-height: none; padding-right: 0; }
.filters-toggle { display: inline-flex; }
.filters.hidden-mobile { display: none; }
}
.filters-toggle { display: none; }
.filter-group {
border-bottom: 1px solid var(--gray-100);
padding: var(--s-4) 0;
}
.filter-group:first-child { padding-top: 0; }
.filter-group h4 {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--s-3);
display: flex;
align-items: center;
justify-content: space-between;
}
.filter-options { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-option {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
cursor: pointer;
color: var(--gray-700);
transition: color var(--tr-fast);
}
.filter-option:hover { color: var(--black); }
.filter-option input[type="checkbox"], .filter-option input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--red);
flex-shrink: 0;
}
.filter-option .count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--gray-500);
}
.filter-input {
width: 100%;
padding: 0.625rem 0.75rem;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
font-size: 0.875rem;
}
.filter-input:focus { outline: none; border-color: var(--black); }
.range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.stock-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding: var(--s-4);
background: var(--off-white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
margin-bottom: var(--s-5);
}
.stock-toolbar .count {
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 600;
}
.stock-toolbar .count .num { color: var(--red); }
.stock-toolbar .controls { display: flex; gap: var(--s-2); align-items: center; }
.stock-toolbar select {
padding: 0.5rem 0.75rem;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
background: var(--white);
}
.no-results {
text-align: center;
padding: var(--s-9) var(--s-5);
background: var(--off-white);
border-radius: var(--radius-md);
border: 1px dashed var(--gray-200);
}
.no-results h3 { margin-bottom: var(--s-2); }
.no-results p { color: var(--gray-500); margin-bottom: var(--s-4); }
/* ---------- CAR DETAIL PAGE ---------- */
.car-detail-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
padding: var(--s-6) 0 var(--s-8);
}
@media (min-width: 1024px) {
.car-detail-grid { grid-template-columns: 1.4fr 1fr; gap: var(--s-7); }
}
/* Gallery */
.gallery .main-photo {
aspect-ratio: 16/10;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--gray-100);
margin-bottom: var(--s-3);
position: relative;
}
.gallery .main-photo img { width: 100%; height: 100%; object-fit: cover; }
.gallery .main-photo .nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(8px);
color: var(--white);
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--tr-fast);
z-index: 2;
}
.gallery .main-photo .nav-btn:hover { background: rgba(0,0,0,0.85); }
.gallery .main-photo .nav-btn.prev { left: var(--s-3); }
.gallery .main-photo .nav-btn.next { right: var(--s-3); }
.gallery .main-photo .counter {
position: absolute;
bottom: var(--s-3);
right: var(--s-3);
background: rgba(0,0,0,0.7);
color: var(--white);
padding: 0.375rem 0.75rem;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.75rem;
z-index: 2;
}
.gallery .thumbs {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--s-2);
}
@media (max-width: 480px) { .gallery .thumbs { grid-template-columns: repeat(4, 1fr); } }
.gallery .thumb {
aspect-ratio: 16/11;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--gray-100);
cursor: pointer;
opacity: 0.65;
transition: opacity var(--tr-fast);
border: 2px solid transparent;
}
.gallery .thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumb.active, .gallery .thumb:hover { opacity: 1; border-color: var(--red); }
/* Car detail sidebar */
.car-info {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-5);
position: sticky;
top: calc(var(--header-h) + var(--s-3));
}
.car-info .id {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.car-info h1 {
font-size: clamp(1.5rem, 3vw, 1.875rem);
margin-bottom: var(--s-2);
line-height: 1.1;
}
.car-info .grade-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: var(--s-4);
}
.car-info .price-block {
padding: var(--s-4);
background: var(--off-white);
border-radius: var(--radius-sm);
margin-bottom: var(--s-4);
}
.car-info .price-jpy {
font-family: var(--font-display);
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
line-height: 1;
color: var(--black);
}
.car-info .price-jpy .currency { color: var(--red); }
.car-info .price-alt {
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--gray-500);
margin-top: 0.5rem;
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
}
.car-info .price-alt span { white-space: nowrap; }
.car-info .actions { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.car-info .quick-specs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-3);
padding-top: var(--s-4);
border-top: 1px solid var(--gray-100);
}
.car-info .quick-specs .qs { display: flex; align-items: center; gap: 0.5rem; }
.car-info .quick-specs .qs svg { width: 18px; height: 18px; color: var(--gray-400); flex-shrink: 0; }
.car-info .quick-specs .qs .l { font-size: 0.6875rem; font-family: var(--font-mono); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; display: block; }
.car-info .quick-specs .qs .v { font-size: 0.875rem; font-weight: 600; }
.share-row {
display: flex;
gap: var(--s-2);
padding-top: var(--s-4);
border-top: 1px solid var(--gray-100);
margin-top: var(--s-4);
}
.share-row .lbl {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.08em;
display: flex;
align-items: center;
margin-right: var(--s-2);
}
.share-row a {
width: 36px;
height: 36px;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gray-700);
transition: all var(--tr-fast);
}
.share-row a:hover { border-color: var(--red); color: var(--red); }
.share-row a svg { width: 16px; height: 16px; }
/* Detail blocks (specs table, description, features) */
.detail-block {
margin-bottom: var(--s-6);
padding-bottom: var(--s-6);
border-bottom: 1px solid var(--gray-100);
}
.detail-block:last-child { border-bottom: none; }
.detail-block h2 {
font-size: 1.5rem;
margin-bottom: var(--s-4);
display: flex;
align-items: center;
gap: var(--s-2);
}
.detail-block h2::before {
content: "";
display: inline-block;
width: 4px;
height: 24px;
background: var(--red);
border-radius: 2px;
}
.specs-table {
display: grid;
grid-template-columns: 1fr;
gap: 0;
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
overflow: hidden;
}
@media (min-width: 640px) { .specs-table { grid-template-columns: 1fr 1fr; } }
.specs-table .row {
display: grid;
grid-template-columns: 140px 1fr;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--gray-100);
font-size: 0.875rem;
align-items: center;
}
.specs-table .row:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 639px) {
.specs-table .row:not(:last-child) { border-bottom: 1px solid var(--gray-100); }
}
.specs-table .row .l { color: var(--gray-500); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); }
.specs-table .row .v { font-weight: 600; color: var(--black); }
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--s-2);
}
.feature-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--off-white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 500;
}
.feature-pill svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }
/* Finance calculator */
.finance-calc {
background: var(--off-white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-5);
}
.finance-fields {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
margin-bottom: var(--s-4);
}
@media (min-width: 640px) { .finance-fields { grid-template-columns: 1fr 1fr 1fr; } }
.finance-fields .f label {
display: block;
font-family: var(--font-mono);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500);
margin-bottom: 0.375rem;
}
.finance-fields .f input, .finance-fields .f select {
width: 100%;
padding: 0.625rem 0.75rem;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
font-size: 0.875rem;
background: var(--white);
}
.finance-result {
background: var(--black);
color: var(--white);
padding: var(--s-4);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s-3);
}
.finance-result .l { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; color: var(--gray-300); letter-spacing: 0.06em; }
.finance-result .v { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; color: var(--white); }
.finance-result .v .currency { color: var(--red); }
/* Mobile sticky bottom bar on car detail */
.mobile-cta {
display: none;
}
@media (max-width: 1023px) {
.mobile-cta {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--white);
border-top: 1px solid var(--gray-100);
padding: 0.625rem var(--container-pad);
gap: 0.5rem;
box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
z-index: 50;
}
.mobile-cta .btn { flex: 1; padding: 0.75rem 0.5rem; font-size: 0.75rem; }
body.has-mobile-cta { padding-bottom: 72px; }
}
/* ---------- CTA BANNER ---------- */
.cta-banner {
background: var(--red);
color: var(--white);
padding: var(--s-7) 0;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, transparent 60%, rgba(0,0,0,0.15) 100%);
z-index: 0;
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner .grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
align-items: center;
}
@media (min-width: 768px) {
.cta-banner .grid { grid-template-columns: 2fr 1fr; gap: var(--s-7); }
}
.cta-banner h2 { color: var(--white); margin-bottom: var(--s-3); }
.cta-banner p { color: rgba(255,255,255,0.9); max-width: 540px; }
.cta-banner .actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
/* ---------- SOCIAL STRIP ---------- */
.social-strip {
padding: var(--s-7) 0;
background: var(--white);
border-top: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
}
.social-strip-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
align-items: center;
}
@media (min-width: 900px) {
.social-strip-grid { grid-template-columns: 1fr 1.6fr; gap: var(--s-7); }
}
.social-strip-buttons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--s-2);
}
.soc-btn {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-sm);
color: var(--black);
transition: all var(--tr-base);
text-decoration: none;
position: relative;
overflow: hidden;
}
.soc-btn::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: currentColor;
opacity: 0;
transition: opacity var(--tr-fast);
}
.soc-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: currentColor; }
.soc-btn:hover::before { opacity: 1; }
.soc-btn svg { flex-shrink: 0; }
.soc-btn .l { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; line-height: 1.1; }
.soc-btn .s { display: block; font-size: 0.6875rem; color: var(--gray-500); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.soc-whatsapp svg { color: #25D366; }
.soc-messenger svg { color: #0084FF; }
.soc-line svg { color: #00C300; }
.soc-instagram svg { color: #E1306C; }
.soc-tiktok svg { color: #000000; }
.soc-call svg { color: var(--red); }
.soc-whatsapp:hover { color: #25D366; }
.soc-messenger:hover { color: #0084FF; }
.soc-line:hover { color: #00C300; }
.soc-instagram:hover { color: #E1306C; }
.soc-tiktok:hover { color: var(--black); }
.soc-call:hover { color: var(--red); }
/* ---------- COUNTRIES MODAL ---------- */
.countries-modal {
position: fixed;
inset: 0;
z-index: 200;
display: none;
align-items: center;
justify-content: center;
padding: var(--s-4);
animation: fadeIn 0.2s ease;
}
.countries-modal.open { display: flex; }
.countries-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
}
.countries-modal-content {
position: relative;
background: var(--white);
border-radius: var(--radius-md);
max-width: 980px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: var(--s-6);
box-shadow: var(--shadow-xl);
animation: slideUp 0.3s var(--tr-base);
}
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes slideUp { from {opacity:0; transform: translateY(20px)} to {opacity:1; transform:translateY(0)} }
.countries-modal-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--s-4);
margin-bottom: var(--s-5);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--gray-100);
}
.countries-modal-close {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gray-50);
border-radius: var(--radius-sm);
color: var(--gray-700);
transition: all var(--tr-fast);
flex-shrink: 0;
}
.countries-modal-close:hover { background: var(--black); color: var(--white); }
.countries-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--s-2);
}
.country-item {
display: grid;
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto;
gap: 2px var(--s-3);
padding: var(--s-3);
border: 1px solid var(--gray-100);
border-radius: var(--radius-sm);
transition: all var(--tr-fast);
text-decoration: none;
color: var(--black);
}
.country-item:hover { border-color: var(--red); background: var(--red-50); transform: translateY(-2px); }
.country-item .cf { font-size: 1.75rem; grid-row: 1 / 3; align-self: center; }
.country-item .cn { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; }
.country-item .cp { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; }
.country-item-cta { background: var(--off-white); border-color: var(--gray-200); }
.country-item-cta:hover { background: var(--red); color: var(--white); border-color: var(--red); }
.country-item-cta:hover .cp { color: rgba(255,255,255,0.85); }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s var(--tr-base) both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
/* ---------- TESTIMONIALS ---------- */
.testimonials-section { background: var(--white); }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--s-4);
}
.testimonial-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-5);
position: relative;
transition: all var(--tr-base);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.testimonial-card:hover { border-color: var(--gray-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.testimonial-card::before {
content: "\201C";
position: absolute;
top: -8px;
left: var(--s-4);
font-family: var(--font-display);
font-size: 5rem;
line-height: 1;
color: var(--red);
opacity: 0.15;
font-weight: 700;
}
.testimonial-card .stars { color: #FFB800; font-size: 1rem; letter-spacing: 2px; }
.testimonial-card .quote {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--gray-700);
font-style: italic;
flex: 1;
}
.testimonial-card .author { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--gray-100); }
.testimonial-card .avatar {
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 600;
color: var(--white);
font-size: 0.9375rem;
flex-shrink: 0;
}
.testimonial-card .name { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; }
.testimonial-card .meta { font-size: 0.75rem; color: var(--gray-500); font-family: var(--font-mono); letter-spacing: 0.02em; margin-top: 2px; }
/* ---------- DELIVERED GALLERY ---------- */
.delivered-section { background: var(--off-white); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.delivered-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--s-3);
}
.delivered-card {
position: relative;
aspect-ratio: 3/4;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--gray-100);
cursor: pointer;
transition: transform var(--tr-base);
}
.delivered-card:hover { transform: translateY(-2px); }
.delivered-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-slow); }
.delivered-card:hover img { transform: scale(1.05); }
.delivered-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
display: flex;
align-items: flex-end;
padding: var(--s-4);
color: var(--white);
gap: var(--s-3);
}
.delivered-flag { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.delivered-info .d-car { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.1; margin-bottom: 2px; }
.delivered-info .d-loc { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--gray-300); text-transform: uppercase; }
/* ---------- EXPORT RULES ---------- */
.export-rules-section { background: var(--white); }
.rules-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
}
@media (min-width: 768px) { .rules-grid { grid-template-columns: 1fr 1fr; } }
.rule-card {
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
background: var(--off-white);
overflow: hidden;
transition: border-color var(--tr-fast);
}
.rule-card[open] { border-color: var(--red); background: var(--white); }
.rule-card summary {
display: flex;
align-items: center;
gap: var(--s-4);
padding: var(--s-4);
cursor: pointer;
list-style: none;
transition: background var(--tr-fast);
}
.rule-card summary::-webkit-details-marker { display: none; }
.rule-card summary:hover { background: var(--gray-50); }
.rule-card[open] summary { border-bottom: 1px solid var(--gray-100); }
.rule-card .rule-flag { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.rule-card summary div { flex: 1; }
.rule-card summary h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.2; margin-bottom: 2px; }
.rule-card summary p { font-size: 0.8125rem; color: var(--gray-500); }
.rule-card .rule-arrow { color: var(--gray-500); transition: transform var(--tr-base); flex-shrink: 0; }
.rule-card[open] .rule-arrow { transform: rotate(180deg); color: var(--red); }
.rule-card .rule-body { padding: var(--s-4) var(--s-5); }
.rule-card .rule-body ul { display: flex; flex-direction: column; gap: 0.625rem; }
.rule-card .rule-body li { font-size: 0.9375rem; line-height: 1.6; color: var(--gray-700); position: relative; padding-left: 1rem; }
.rule-card .rule-body li::before { content: ""; position: absolute; left: 0; top: 0.65rem; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }
.rule-card .rule-body strong { color: var(--black); font-weight: 600; }
/* ---------- RENTAL ---------- */
.rental-section { background: var(--off-white); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.rental-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
align-items: center;
}
@media (min-width: 1024px) { .rental-grid { grid-template-columns: 1fr 1.4fr; gap: var(--s-8); } }
.rental-perks { display: flex; flex-direction: column; gap: 0.625rem; }
.rental-perks li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; color: var(--gray-700); }
.rental-perks li svg { color: var(--green); flex-shrink: 0; }
.rental-tiers {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
}
@media (min-width: 640px) { .rental-tiers { grid-template-columns: repeat(3, 1fr); } }
.rental-tier {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-5);
position: relative;
transition: all var(--tr-base);
}
.rental-tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gray-200); }
.rental-tier.rt-featured { border-color: var(--red); border-width: 2px; transform: scale(1.02); }
@media (min-width: 640px) { .rental-tier.rt-featured { transform: scale(1.05); } }
.rental-tier.rt-featured:hover { transform: scale(1.05) translateY(-2px); }
.rt-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--red);
color: var(--white);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.rt-period { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-500); margin-bottom: 0.5rem; }
.rt-price { font-family: var(--font-display); font-size: 1rem; color: var(--gray-700); }
.rt-price strong { font-size: 1.875rem; color: var(--black); display: block; line-height: 1; margin: 0.25rem 0; }
.rt-desc { font-size: 0.875rem; color: var(--gray-500); margin-bottom: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--gray-100); }
.rental-tier ul { display: flex; flex-direction: column; gap: 0.5rem; }
.rental-tier ul li { font-size: 0.8125rem; color: var(--gray-700); padding-left: 1rem; position: relative; }
.rental-tier ul li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
/* ---------- OFFERINGS / WHAT WE OFFER ---------- */
.offerings-section { background: var(--white); }
.offerings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--s-3);
}
.offering-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-4);
transition: all var(--tr-base);
text-decoration: none;
color: var(--black);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.offering-card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: var(--red);
transition: width var(--tr-base);
}
.offering-card:hover { border-color: var(--gray-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.offering-card:hover::after { width: 100%; }
.offering-emoji { font-size: 2.25rem; line-height: 1; margin-bottom: var(--s-3); }
.offering-card h4 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.375rem; line-height: 1.2; }
.offering-card p { font-size: 0.8125rem; line-height: 1.55; color: var(--gray-500); flex: 1; }
.offering-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: var(--s-3);
padding-top: var(--s-3);
border-top: 1px solid var(--gray-100);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--red);
}
.offering-card-license { background: linear-gradient(135deg, var(--off-white), #fff); border-color: var(--green); }
.offering-card-license .offering-link { color: var(--green); }
.offerings-corporate {
margin-top: var(--s-6);
padding: var(--s-4) var(--s-5);
background: var(--off-white);
border-radius: var(--radius-sm);
border-left: 3px solid var(--red);
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--gray-700);
letter-spacing: 0.02em;
}
.offerings-corporate strong { color: var(--black); font-weight: 600; }
.offerings-corporate > span { display: inline-flex; align-items: center; }
.offerings-corporate > span:not(:last-child)::after { content: "·"; margin-left: var(--s-4); color: var(--gray-300); }
/* ---------- SELL YOUR CAR ---------- */
.sell-section { background: var(--off-white); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.sell-tiers {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
margin-bottom: var(--s-7);
}
@media (min-width: 768px) { .sell-tiers { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.sell-tier {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-5);
position: relative;
transition: all var(--tr-base);
display: flex;
flex-direction: column;
}
.sell-tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sell-tier-featured {
border: 2px solid var(--red);
background: linear-gradient(180deg, #fff 0%, var(--red-50) 100%);
}
.sell-tier-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--red);
color: var(--white);
padding: 0.25rem 0.875rem;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.sell-tier-name {
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gray-500);
margin-bottom: 0.5rem;
}
.sell-tier-price {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--black);
line-height: 1;
margin-bottom: 0.25rem;
}
.sell-tier-desc { font-size: 0.8125rem; color: var(--gray-500); margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--gray-100); }
.sell-tier-features { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: var(--s-5); flex: 1; }
.sell-tier-features li { font-size: 0.875rem; color: var(--gray-700); padding-left: 1.25rem; position: relative; }
.sell-tier-features li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--green);
font-weight: 700;
}
.sell-tier-features li strong { color: var(--black); }
.sell-tier .btn { margin-top: auto; }
.sell-process { margin-bottom: var(--s-7); }
.sell-steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
}
@media (min-width: 640px) { .sell-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sell-steps { grid-template-columns: repeat(4, 1fr); } }
.sell-step {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-4);
position: relative;
}
.ss-num {
position: absolute;
top: var(--s-3);
right: var(--s-3);
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--red);
opacity: 0.2;
line-height: 1;
}
.sell-step h4 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.5rem; padding-right: var(--s-5); }
.sell-step p { font-size: 0.8125rem; color: var(--gray-500); line-height: 1.55; }
.sell-options { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--gray-100); }
.sell-options-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
}
@media (min-width: 900px) { .sell-options-grid { grid-template-columns: repeat(3, 1fr); } }
.sell-option-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.sell-option-emoji { font-size: 2.5rem; line-height: 1; }
.sell-option-card h4 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.sell-option-card p { font-size: 0.9375rem; line-height: 1.55; color: var(--gray-700); flex: 1; }
.sell-option-card strong { color: var(--black); }
.sell-option-card .btn { align-self: flex-start; }
/* ---------- BRANDS GRID ---------- */
.brands-section { background: var(--white); }
.brands-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--s-2);
}
.brand-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-sm);
padding: var(--s-4) var(--s-3);
text-align: center;
transition: all var(--tr-base);
text-decoration: none;
color: var(--black);
position: relative;
overflow: hidden;
}
.brand-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, var(--red) 100%);
opacity: 0;
transition: opacity var(--tr-base);
}
.brand-card > * { position: relative; z-index: 1; transition: color var(--tr-fast); }
.brand-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--white); }
.brand-card:hover::before { opacity: 1; }
.brand-name {
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: 0.01em;
margin-bottom: 0.25rem;
}
.brand-models {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--gray-500);
letter-spacing: 0.02em;
}
.brand-card:hover .brand-models { color: rgba(255,255,255,0.85); }
/* ---------- AIS GRADES ---------- */
.ais-section { background: var(--off-white); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.grades-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--s-3);
}
.grade-tile {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-4);
text-align: center;
transition: all var(--tr-base);
position: relative;
overflow: hidden;
}
.grade-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.grade-tile::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.grade-tile.grade-s::before { background: linear-gradient(90deg, #FFD700, #FFA500); }
.grade-tile.grade-45::before { background: var(--green); }
.grade-tile.grade-4::before { background: #4CAF50; }
.grade-tile.grade-35::before { background: #FFC107; }
.grade-tile.grade-3::before { background: #FF9800; }
.grade-tile.grade-r::before { background: #FF5722; }
.grade-tile.grade-ra::before { background: #B71C1C; }
.grade-num {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 700;
line-height: 1;
color: var(--black);
margin-bottom: 0.5rem;
}
.grade-label {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--red);
margin-bottom: 0.5rem;
}
.grade-desc { font-size: 0.75rem; color: var(--gray-500); line-height: 1.45; }
/* ---------- ORDER PROCESS ---------- */
.process-section { background: var(--white); }
.process-steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
margin-bottom: var(--s-7);
}
@media (min-width: 640px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-steps { grid-template-columns: repeat(4, 1fr); } }
.process-step {
background: var(--off-white);
border-radius: var(--radius-md);
padding: var(--s-5);
position: relative;
transition: all var(--tr-base);
overflow: hidden;
}
.process-step::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: var(--red);
}
.process-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.process-num {
position: absolute;
top: var(--s-3);
right: var(--s-4);
font-family: var(--font-display);
font-size: 3rem;
font-weight: 700;
color: var(--red);
opacity: 0.15;
line-height: 1;
}
.process-icon { font-size: 2.25rem; line-height: 1; margin-bottom: var(--s-3); }
.process-step h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; padding-right: var(--s-5); }
.process-step p { font-size: 0.875rem; color: var(--gray-700); line-height: 1.55; }
.incoterms {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
background: var(--black);
border-radius: var(--radius-md);
padding: var(--s-5);
color: var(--white);
}
@media (min-width: 768px) { .incoterms { grid-template-columns: repeat(3, 1fr); } }
.incoterm-card {
padding: var(--s-3);
border-left: 3px solid var(--red);
}
.incoterm-name {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
color: var(--red);
line-height: 1;
margin-bottom: 0.25rem;
}
.incoterm-full {
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-300);
margin-bottom: 0.75rem;
}
.incoterm-card p { font-size: 0.875rem; color: var(--gray-300); line-height: 1.6; }
.incoterm-card strong { color: var(--white); }
/* ---------- FAQ ---------- */
.faq-section { background: var(--off-white); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.faq-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-2);
max-width: 920px;
margin: 0 auto;
}
.faq-item {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-sm);
overflow: hidden;
transition: border-color var(--tr-fast);
}
.faq-item:hover, .faq-item[open] { border-color: var(--red); }
.faq-item summary {
padding: var(--s-4) var(--s-5);
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
list-style: none;
color: var(--black);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
background: var(--gray-50);
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 400;
color: var(--red);
transition: all var(--tr-fast);
}
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--red); color: var(--white); }
.faq-item p {
padding: 0 var(--s-5) var(--s-4);
font-size: 0.9375rem;
line-height: 1.65;
color: var(--gray-700);
}
/* ---------- CONTACT FORM ---------- */
.contact-section { background: var(--white); }
.contact-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
}
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1.6fr; gap: var(--s-7); } }
.contact-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-3);
}
@media (min-width: 900px) { .contact-info { grid-template-columns: 1fr; gap: var(--s-3); align-self: start; } }
.contact-card {
background: var(--off-white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-4);
transition: all var(--tr-fast);
}
.contact-card:hover { border-color: var(--red); }
.cc-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 0.5rem; }
.cc-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-500);
margin-bottom: 0.375rem;
}
.cc-value {
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
color: var(--black);
line-height: 1.35;
}
.cc-value a { color: var(--black); }
.cc-value a:hover { color: var(--red); }
.contact-form-wrap {
background: var(--off-white);
border-radius: var(--radius-md);
padding: var(--s-6);
border: 1px solid var(--gray-100);
}
.contact-form .form-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
margin-bottom: var(--s-3);
}
@media (min-width: 600px) { .contact-form .form-row { grid-template-columns: 1fr 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: var(--s-3); }
.form-field label {
font-family: var(--font-mono);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500);
font-weight: 600;
}
.form-field input,
.form-field select,
.form-field textarea {
padding: 0.75rem 0.875rem;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--black);
font-size: 0.9375rem;
font-family: var(--font-body);
transition: border-color var(--tr-fast);
width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--red);
}
.form-field textarea { resize: vertical; min-height: 100px; }
.policy-modal {
position: fixed;
inset: 0;
z-index: 300;
display: none;
align-items: center;
justify-content: center;
padding: var(--s-4);
animation: fadeIn 0.2s ease;
}
.policy-modal.open { display: flex; }
.policy-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(4px);
}
.policy-modal-content {
position: relative;
background: var(--white);
border-radius: var(--radius-md);
max-width: 720px;
width: 100%;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-xl);
animation: slideUp 0.3s var(--tr-base);
}
.policy-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s-5);
border-bottom: 1px solid var(--gray-100);
flex-shrink: 0;
}
.policy-modal-head h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.policy-modal-close {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gray-50);
border-radius: var(--radius-sm);
color: var(--gray-700);
transition: all var(--tr-fast);
}
.policy-modal-close:hover { background: var(--black); color: var(--white); }
.policy-modal-body {
padding: var(--s-5);
overflow-y: auto;
flex: 1;
}
.policy-modal-body h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; margin: var(--s-4) 0 var(--s-2); color: var(--black); }
.policy-modal-body h3:first-of-type { margin-top: var(--s-3); }
.policy-modal-body p { font-size: 0.9375rem; line-height: 1.65; color: var(--gray-700); margin-bottom: var(--s-3); }
.policy-modal-body ul, .policy-modal-body ol { margin: var(--s-2) 0 var(--s-3) var(--s-5); display: flex; flex-direction: column; gap: 0.5rem; }
.policy-modal-body ul li, .policy-modal-body ol li { font-size: 0.9375rem; line-height: 1.6; color: var(--gray-700); list-style: disc; }
.policy-modal-body ol li { list-style: decimal; }
.policy-modal-body strong { color: var(--black); font-weight: 600; }
.policy-modal-body em { color: var(--gray-500); font-size: 0.8125rem; }
/* ---------- UTILITY ---------- */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 767px) { .md-up { display: none !important; } }
@media (min-width: 768px) { .md-down { display: none !important; } }
/* Selection */
::selection { background: var(--red); color: var(--white); }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }
/* Focus states */
*:focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
}
/* ---------- LANGUAGE MODAL ---------- */
.lang-modal {
position: fixed;
inset: 0;
z-index: 300;
display: none;
align-items: center;
justify-content: center;
padding: var(--s-4);
}
.lang-modal.open { display: flex; }
.lang-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(4px);
}
.lang-modal-content {
position: relative;
background: var(--white);
border-radius: var(--radius-md);
max-width: 720px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
padding: var(--s-6);
box-shadow: var(--shadow-xl);
}
.lang-modal-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--s-4);
margin-bottom: var(--s-5);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--gray-100);
}
.lang-modal-close {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gray-50);
border-radius: var(--radius-sm);
color: var(--gray-700);
transition: all var(--tr-fast);
flex-shrink: 0;
border: none;
cursor: pointer;
}
.lang-modal-close:hover { background: var(--black); color: var(--white); }
.lang-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--s-2);
}
.lang-item {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem;
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--tr-fast);
font-family: var(--font-body);
}
.lang-item:hover { border-color: var(--red); background: var(--red-50); transform: translateY(-2px); }
.lang-item .lf { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.lang-item .ln { font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; text-align: left; }
/* Hide Google Translate default UI */
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-te-gadget { font-size: 0 !important; height: 0 !important; overflow: hidden !important; }
.goog-te-gadget > span { display: none !important; }
.goog-logo-link { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
#langWrap { user-select: none; }
#langCurrent { font-family: var(--font-mono); font-weight: 600; }
/* ---------- WE BUY ANY CAR ---------- */
.buyany-section { background: var(--white); border-top: 1px solid var(--gray-100); }
.buyany-types {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--s-3);
margin-bottom: var(--s-7);
}
.buyany-type {
background: var(--off-white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-4);
display: flex;
flex-direction: column;
gap: 0.375rem;
transition: all var(--tr-base);
}
.buyany-type:hover { border-color: var(--red); transform: translateY(-2px); }
.bt-emoji { font-size: 2rem; line-height: 1; }
.buyany-type strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.bt-desc { font-size: 0.8125rem; color: var(--gray-500); }
.buyany-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
align-items: start;
}
@media (min-width: 1024px) { .buyany-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-7); } }
.buyany-perks { display: flex; flex-direction: column; gap: var(--s-3); }
.buyany-perks li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: 0.9375rem;
color: var(--gray-700);
line-height: 1.55;
}
.buyany-perks li svg { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.buyany-perks li strong { color: var(--black); font-weight: 600; }
.buyany-form, .loan-form {
background: var(--off-white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.form-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
}
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.375rem; }
.form-field label {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500);
}
.form-field input, .form-field select, .form-field textarea {
padding: 0.75rem 0.875rem;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
font-size: 0.875rem;
background: var(--white);
transition: border-color var(--tr-fast);
font-family: var(--font-body);
width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
outline: none;
border-color: var(--black);
}
.form-field textarea { resize: vertical; min-height: 70px; font-family: var(--font-body); }
/* ---------- LOAN APPLICATION ---------- */
.loan-section { background: var(--off-white); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.loan-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
align-items: start;
}
@media (min-width: 1024px) { .loan-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--s-7); } }
.loan-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
}
.loan-stat {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-4);
text-align: center;
}
.ls-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--black); }
.ls-unit { color: var(--red); font-size: 1.25rem; }
.ls-lbl { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-top: 0.5rem; }
.loan-eligibility { display: flex; flex-direction: column; gap: 0.625rem; }
.loan-eligibility li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; color: var(--gray-700); }
.loan-eligibility li svg { color: var(--green); flex-shrink: 0; }
.loan-form { background: var(--white); }
/* + More Brands card */
.brand-card-more {
background: linear-gradient(135deg, var(--black) 0%, #1a1a1a 100%);
color: var(--white);
border-color: var(--gray-900);
}
.brand-card-more .brand-name { color: var(--white); }
.brand-card-more .brand-models { color: rgba(255,255,255,0.75); }
.brand-card-more:hover { border-color: var(--red); }
.brand-card-more:hover .brand-name { color: var(--red); }
/* ---------- SERVICE MODAL ---------- */
.service-modal {
position: fixed;
inset: 0;
z-index: 350;
display: none;
align-items: center;
justify-content: center;
padding: var(--s-4);
}
.service-modal.open { display: flex; }
.service-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.78);
backdrop-filter: blur(6px);
}
.service-modal-content {
position: relative;
background: var(--white);
border-radius: var(--radius-md);
max-width: 780px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
}
.service-modal-head {
display: flex;
align-items: flex-start;
gap: var(--s-4);
padding: var(--s-5) var(--s-5) var(--s-4);
border-bottom: 1px solid var(--gray-100);
}
.sm-emoji { font-size: 3rem; line-height: 1; flex-shrink: 0; }
.sm-title-wrap { flex: 1; }
.service-modal-close {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gray-50);
border-radius: var(--radius-sm);
color: var(--gray-700);
transition: all var(--tr-fast);
flex-shrink: 0;
border: none;
cursor: pointer;
}
.service-modal-close:hover { background: var(--black); color: var(--white); }
.service-modal-body { padding: var(--s-5); }
.sm-desc { font-size: 1rem; line-height: 1.65; color: var(--gray-700); margin-bottom: var(--s-5); }
.sm-heading {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--s-3);
display: flex;
align-items: center;
gap: 0.5rem;
}
.sm-heading::before { content: ""; display: inline-block; width: 4px; height: 18px; background: var(--red); border-radius: 2px; }
.sm-list { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: var(--s-5); }
.sm-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: var(--gray-700); line-height: 1.5; }
.sm-list li svg { color: var(--green); flex-shrink: 0; margin-top: 4px; }
.sm-meta-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
margin-bottom: var(--s-5);
}
@media (min-width: 600px) { .sm-meta-grid { grid-template-columns: 1fr 1fr; } }
.sm-meta {
padding: var(--s-3) var(--s-4);
background: var(--off-white);
border-left: 3px solid var(--red);
border-radius: var(--radius-sm);
}
.sm-meta-lbl { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-bottom: 0.25rem; }
.sm-meta-val { font-size: 0.9375rem; color: var(--black); font-weight: 500; line-height: 1.4; }
.sm-cta-wrap {
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
padding-top: var(--s-4);
border-top: 1px solid var(--gray-100);
}
.sm-cta-wrap .btn { flex: 1; min-width: 200px; }
/* Service card "Read more" hint */
.service-card { cursor: pointer; }
.service-readmore {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: var(--s-3);
padding-top: var(--s-3);
border-top: 1px solid var(--gray-100);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--red);
transition: gap var(--tr-fast);
}
.service-card:hover .service-readmore { gap: 0.625rem; }
/* ---------- PROCESS DETAILS (expandable) ---------- */
.process-detail {
margin-top: var(--s-3);
padding-top: var(--s-3);
border-top: 1px solid var(--gray-100);
}
.process-detail summary {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--red);
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.process-detail summary::-webkit-details-marker { display: none; }
.process-detail[open] summary { color: var(--black); }
.process-detail[open] summary::after { content: " (close)"; opacity: 0.6; font-weight: 500; }
.process-detail ul {
margin-top: var(--s-3);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.process-detail li {
font-size: 0.8125rem;
color: var(--gray-700);
line-height: 1.55;
padding-left: 1rem;
position: relative;
}
.process-detail li::before {
content: "▸";
position: absolute;
left: 0;
color: var(--red);
}
.process-detail li strong { color: var(--black); font-weight: 600; }
.process-detail ul ul { margin-top: 0.5rem; margin-left: 1rem; }
.process-detail ul ul li::before { content: "•"; color: var(--gray-400); }
/* ============================================================
SECTION BACKGROUND PATTERNS — visual depth for white sections
============================================================ */
/* Subtle dot grid pattern (used on multiple white sections) */
.offerings-section,
.brands-section,
.testimonials-section,
.ais-section,
.process-section,
.buyany-section,
.export-rules-section {
position: relative;
background-color: var(--white);
}
.offerings-section::before,
.brands-section::before,
.testimonials-section::before,
.ais-section::before,
.process-section::before,
.buyany-section::before,
.export-rules-section::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(204,0,0,0.07) 1px, transparent 0);
background-size: 32px 32px;
pointer-events: none;
opacity: 0.6;
z-index: 0;
}
.offerings-section > .container,
.brands-section > .container,
.testimonials-section > .container,
.ais-section > .container,
.process-section > .container,
.buyany-section > .container,
.export-rules-section > .container {
position: relative;
z-index: 1;
}
/* Diagonal red accent stripe for testimonials */
.testimonials-section {
background:
linear-gradient(135deg, var(--white) 0%, var(--white) 70%, var(--red-50) 100%);
}
/* Subtle car silhouette pattern for offerings (What We Offer) */
.offerings-section {
background:
linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
}
/* Service section: warm gradient bg instead of plain off-white */
section#services {
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(204,0,0,0.04), transparent 70%),
linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%) !important;
position: relative;
}
section#services::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 2px 2px, rgba(204,0,0,0.05) 1px, transparent 0);
background-size: 40px 40px;
pointer-events: none;
opacity: 0.7;
z-index: 0;
}
section#services > .container { position: relative; z-index: 1; }
/* Brand grid: subtle racing-stripe background */
.brands-section {
background:
linear-gradient(135deg, var(--white) 0%, var(--off-white) 100%);
}
.brands-section::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
background:
repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(204,0,0,0.04) 10px, rgba(204,0,0,0.04) 12px);
pointer-events: none;
z-index: 0;
}
/* AIS section — gradient backdrop */
.ais-section {
background:
linear-gradient(180deg, var(--white) 0%, var(--off-white) 50%, var(--white) 100%);
}
/* Process section — subtle vertical stripes */
.process-section {
background:
repeating-linear-gradient(90deg, var(--white) 0, var(--white) 80px, var(--off-white) 80px, var(--off-white) 81px);
}
/* Loan section — premium warm gradient */
.loan-section {
background:
radial-gradient(ellipse 60% 50% at 20% 30%, rgba(204,0,0,0.06), transparent 70%),
linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
}
/* Sell section — gradient */
.sell-section {
background:
radial-gradient(ellipse 60% 50% at 80% 30%, rgba(204,0,0,0.05), transparent 70%),
linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
}
/* Buy Any Car section — dark accent */
.buyany-section {
background:
linear-gradient(135deg, var(--white) 0%, var(--white) 80%, rgba(204,0,0,0.04) 100%);
}
/* Add a subtle top "divider" line in red on key sections */
.offerings-section,
.brands-section,
.testimonials-section,
.delivered-section,
.export-section,
.export-rules-section,
.ais-section,
.process-section,
.rental-section,
.sell-section,
.buyany-section,
.loan-section,
.faq-section {
border-top: none;
}
/* Service card background icon (faded) */
.service-card { position: relative; overflow: hidden; }
.service-card::after {
content: attr(data-bg-icon);
position: absolute;
bottom: -20px;
right: -10px;
font-size: 7rem;
line-height: 1;
opacity: 0.04;
pointer-events: none;
z-index: 0;
}
.service-card > * { position: relative; z-index: 1; }
/* ============================================================
STOCK PAGE — AUCTION-STYLE SEARCH (v2)
============================================================ */
/* QUICK SEARCH BAR (top of stock page) */
.quick-search {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
padding: var(--s-4);
box-shadow: var(--shadow-md);
margin-top: var(--s-4);
}
.quick-search-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--s-3);
align-items: end;
}
@media (min-width: 1024px) {
.quick-search-row {
grid-template-columns: 1.1fr 1.2fr 1.1fr 1fr 0.9fr;
}
}
.qs-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.qs-field label {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-700);
}
.qs-field select {
padding: 0.75rem 0.875rem;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
font-size: 0.875rem;
background: var(--white);
font-family: var(--font-body);
width: 100%;
cursor: pointer;
transition: border-color var(--tr-fast);
}
.qs-field select:focus { outline: none; border-color: var(--red); }
.qs-field select:disabled { background: var(--gray-50); color: var(--gray-400); cursor: not-allowed; }
.qs-button-field { justify-content: end; }
.qs-button-field .btn { height: 42px; font-size: 0.875rem; padding: 0 var(--s-3); }
.quick-search-extras {
margin-top: var(--s-3);
padding-top: var(--s-3);
border-top: 1px solid var(--gray-100);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
flex-wrap: wrap;
}
/* LINK BUTTONS (text-style buttons in quick search) */
.link-btn {
background: none;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-700);
padding: 0.5rem 0;
transition: color var(--tr-fast);
}
.link-btn:hover { color: var(--red); }
.link-btn-red { color: var(--red); }
.link-btn-red:hover { color: var(--black); }
/* ACTIVE FILTER CHIPS */
.active-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: var(--s-4);
}
.active-filters:empty { display: none; }
.filter-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 999px;
font-size: 0.75rem;
font-family: var(--font-body);
color: var(--gray-700);
cursor: pointer;
transition: all var(--tr-fast);
}
.filter-chip:hover {
background: var(--red);
color: var(--white);
border-color: var(--red);
}
.filter-chip span {
font-weight: 700;
font-size: 0.9375rem;
line-height: 1;
}
.filter-chip-clear {
padding: 0.4rem 0.875rem;
background: var(--black);
color: var(--white);
border: none;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
transition: background var(--tr-fast);
}
.filter-chip-clear:hover { background: var(--red); }
/* 2-COLUMN FILTER OPTIONS (for many checkboxes) */
.filter-options-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.25rem;
}
.filter-option-feature {
font-size: 0.8125rem;
padding: 0.4rem 0.5rem;
}
.filter-option-feature span { font-size: 0.8125rem; }
/* RANGE INPUTS (year, price) */
.range-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.range-inputs .filter-input { padding: 0.5rem 0.625rem; font-size: 0.875rem; }
/* HIDDEN MOBILE FILTERS */
.filters.hidden-mobile { display: none; }
@media (min-width: 1024px) {
.filters.hidden-mobile { display: block; }
#mobileFilterBar { display: none !important; }
}
/* EXPANDED VIEW (when toggle clicked) */
.filters.expanded-view {
background: var(--off-white);
border-color: var(--red);
}
/* MOBILE-ONLY UTILITY */
.md-down { display: block; }
@media (min-width: 1024px) { .md-down { display: none !important; } }
/* NO RESULTS STATE */
.no-results {
text-align: center;
padding: var(--s-7) var(--s-4);
background: var(--off-white);
border-radius: var(--radius-md);
}
.no-results.hidden { display: none; }
.no-results h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.5rem; }
.no-results p { color: var(--gray-500); max-width: 480px; margin: 0 auto; }
/* ===== Stock filter helpers (Step 3) ===== */
.stock-main { min-width: 0; }
.filter-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s-3); padding-bottom: var(--s-2);
border-bottom: 1px solid var(--line, #e5e5e5);
}
.filter-label {
display: block; font-weight: 700; font-size: 0.8rem;
text-transform: uppercase; letter-spacing: 0.03em;
margin-bottom: 0.4rem; color: var(--ink, #111);
}
.sort-wrap {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.875rem; font-weight: 600;
}
.sort-wrap select { width: auto; min-width: 170px; }
.stock-result-label { font-size: 0.9rem; }
.stock-result-label strong { color: var(--red, #CC0000); }
/* How-to-Buy: 3-up step grid on desktop (6 steps = 2 rows of 3) */
@media (min-width: 1024px) { .process-steps.cols-3 { grid-template-columns: repeat(3, 1fr); } }
/* ============================================================
LOAN APPLICATION POPUP MODAL
============================================================ */
.ym-loan-modal{position:fixed;inset:0;z-index:9999;display:none;}
.ym-loan-modal.is-open{display:block;}
.ym-loan-backdrop{position:absolute;inset:0;background:rgba(10,10,10,0.72);backdrop-filter:blur(3px);animation:ymFade .2s ease;}
.ym-loan-dialog{position:relative;max-width:760px;margin:4vh auto;max-height:92vh;overflow-y:auto;
background:#fff;border-radius:var(--radius-lg,12px);box-shadow:var(--shadow-xl,0 24px 60px rgba(0,0,0,.3));
animation:ymPop .26s cubic-bezier(.2,.8,.2,1);}
@keyframes ymFade{from{opacity:0}to{opacity:1}}
@keyframes ymPop{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.ym-loan-x,.ym-loan-close{position:absolute;top:14px;right:16px;width:38px;height:38px;border:none;border-radius:50%;
background:rgba(0,0,0,.06);color:#222;font-size:26px;line-height:1;cursor:pointer;z-index:2;transition:.15s;}
.ym-loan-x:hover,.ym-loan-close:hover{background:var(--red,#CC0000);color:#fff;transform:rotate(90deg);}
.ym-loan-head{padding:2rem 2.25rem 1rem;border-bottom:1px solid #eee;}
.ym-loan-eyebrow{display:inline-block;font-family:var(--font-display,sans-serif);font-size:.72rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--red,#CC0000);font-weight:700;margin-bottom:.5rem;}
.ym-loan-head h2{font-family:var(--font-display,sans-serif);font-size:1.9rem;line-height:1.1;margin:0 0 .4rem;color:var(--black,#0A0A0A);}
.ym-loan-head p{margin:0;color:#666;font-size:.95rem;}
.ym-loan-form{padding:1.25rem 2.25rem 2rem;}
.ym-loan-section-label{font-family:var(--font-display,sans-serif);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--black,#0A0A0A);font-weight:700;margin:1.25rem 0 .75rem;padding-bottom:.4rem;border-bottom:2px solid var(--red,#CC0000);}
.ym-loan-section-label:first-child{margin-top:0;}
.ym-loan-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.85rem;}
.ym-loan-form .form-field{margin-bottom:.85rem;display:flex;flex-direction:column;}
.ym-loan-form label{font-size:.8rem;font-weight:600;color:#333;margin-bottom:.3rem;}
.ym-loan-form input,.ym-loan-form select,.ym-loan-form textarea{padding:.7rem .8rem;border:1.5px solid #ddd;
border-radius:var(--radius-sm,6px);font:inherit;font-size:.92rem;transition:border-color .15s;background:#fff;color:var(--black,#0A0A0A);width:100%;}
.ym-loan-form input:focus,.ym-loan-form select:focus,.ym-loan-form textarea:focus{outline:none;border-color:var(--red,#CC0000);}
.ym-loan-file{padding:.55rem!important;font-size:.82rem!important;background:var(--off-white,#FAFAFA)!important;cursor:pointer;}
.ym-loan-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem!important;font-weight:400!important;
color:#555!important;line-height:1.5;background:var(--off-white,#FAFAFA);padding:.85rem 1rem;border-radius:var(--radius-sm,6px);margin:1rem 0;}
.ym-loan-consent input{width:auto!important;margin-top:.15rem;flex-shrink:0;}
.ym-loan-msg{display:none;padding:.75rem 1rem;border-radius:var(--radius-sm,6px);font-size:.88rem;margin-bottom:.85rem;}
.ym-loan-msg.is-error{background:#FFE5E5;color:#A30000;border:1px solid #f5b5b5;}
.ym-loan-msg.is-ok{background:#E6F7EE;color:#00753a;border:1px solid #a8e6c4;}
.ym-loan-alt{text-align:center;margin:1rem 0 0;font-size:.85rem;color:#777;}
.ym-loan-alt a{color:#25D366;font-weight:700;text-decoration:none;}
.ym-loan-alt a:hover{text-decoration:underline;}
.ym-loan-done{padding:3rem 2.25rem;text-align:center;}
.ym-loan-check{width:72px;height:72px;margin:0 auto 1.25rem;border-radius:50%;background:var(--green,#00A651);
color:#fff;font-size:40px;line-height:72px;font-weight:700;}
.ym-loan-done h3{font-family:var(--font-display,sans-serif);font-size:1.6rem;margin:0 0 .6rem;color:var(--black,#0A0A0A);}
.ym-loan-done p{color:#666;margin:0 0 1.5rem;font-size:.95rem;}
@media(max-width:640px){
.ym-loan-dialog{margin:0;min-height:100vh;max-height:100vh;border-radius:0;}
.ym-loan-head{padding:1.5rem 1.25rem .85rem;}
.ym-loan-head h2{font-size:1.5rem;}
.ym-loan-form{padding:1rem 1.25rem 2rem;}
.ym-loan-form .form-row{grid-template-columns:1fr;gap:0;}
}
/* Dispatch (派遣社員) conditional block */
.ym-dispatch-block{border:1px solid #f0c9c9;background:#fdf6f6;border-radius:10px;padding:14px 14px 4px;margin:4px 0 14px;}
.ym-dispatch-note{font-size:.82rem;line-height:1.5;color:#7a2a2a;margin:0 0 10px;}
.ym-dispatch-note strong{color:#c00;}
/* Bilingual labels (日本語 / English) */
.ym-loan-form label .ll-en{display:block;font-weight:400;font-size:.78rem;color:#8a8a8a;letter-spacing:.01em;margin-top:1px;}
.ym-loan-form label .ll-req{color:#c00;font-weight:700;}
.ym-loan-section-label .ll-en{font-weight:400;color:#999;text-transform:none;letter-spacing:.02em;font-size:.9em;}
.ym-dispatch-sub{font-family:var(--font-display,sans-serif);font-size:.8rem;font-weight:700;color:#c00;letter-spacing:.04em;margin:12px 0 6px;}
.ym-dispatch-sub:first-of-type{margin-top:4px;}
/* Loan partner-approval disclaimer (inside form) */
.ym-loan-disclaimer{border:1px solid #e2e2e2;background:#fafafa;border-radius:8px;padding:12px 14px;margin:8px 0 14px;font-size:.82rem;line-height:1.6;color:#555;}
.ym-loan-disclaimer strong{color:#333;}
.ym-loan-disclaimer .ll-en{display:block;color:#888;margin-top:3px;}
/* nested dispatch block inside guarantor — slightly different tint so it reads as a sub-box */
#ymGuarantorBlock #g_ymDispatchBlock{background:#fff;border-color:#e6b9b9;}
/* Loan form inline hint (e.g. guarantor "later only") */
.ym-loan-hint{font-size:.82rem;line-height:1.6;color:#666;background:#f6f6f6;border-left:3px solid #c9c9c9;border-radius:4px;padding:9px 12px;margin:-2px 0 14px;}
.ym-loan-hint .ll-en{display:block;color:#8a8a8a;margin-top:2px;}
/* ---- Standalone guarantor form page ---- */
.ym-guar-form{padding:0;max-width:100%;}
.ym-guar-result{margin-top:1.25rem;padding:1.5rem;border-radius:12px;text-align:center;font-size:.95rem;line-height:1.6;}
.ym-guar-result.ok{background:#f3fbf6;border:1px solid #bce6cd;color:#176b3a;}
.ym-guar-result.ok h3{margin:.25rem 0 .5rem;font-size:1.15rem;color:#0a0a0a;}
.ym-guar-result.err{background:#fdf3f3;border:1px solid #f0c9c9;color:#b3261e;text-align:left;}
/* ---- Optional inline guarantor block (main loan form) ---- */
.ym-guar-optional{border:1px dashed #d8b07a;background:#fffdf8;border-radius:10px;padding:14px 14px 4px;margin:2px 0 14px;}
/* ---- Currency switcher: make dropdown options readable (was white-on-white) ---- */
#currencySwitcher{color:#fff;}
#currencySwitcher option,
#currencySwitcher optgroup{color:#111;background:#fff;}
/* ---- Hide Google Translate banner/branding so language change looks native ---- */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate{display:none !important;}
.goog-te-gadget{height:0;overflow:hidden;font-size:0 !important;}
.goog-te-gadget-icon{display:none !important;}
body{top:0 !important;position:static !important;}
#goog-gt-tt,.goog-te-balloon-frame{display:none !important;}
.goog-text-highlight{background:none !important;box-shadow:none !important;}
img.goog-te-gadget-icon{display:none !important;}
/* ---- Destination Country: show ONLY on Export tab (never on Buy in Japan) ---- */
.search-fields .field.ym-export-only[hidden]{display:none !important;}
/* ---- Force header logo to stay inside the header on ALL pages (incl. WooCommerce stock/shop, where a plugin stylesheet was stretching it over the page title) ---- */
.site-header { overflow: visible; }
.site-header .brand-logo,
.site-header img.brand-logo {
height: 48px !important;
width: auto !important;
max-width: 240px !important;
}
@media (max-width: 480px) {
.site-header .brand-logo,
.site-header img.brand-logo { height: 38px !important; }
}
/* ============================================================
RESPONSIVE POLISH — mobile / tablet readability & usability
Additive only; desktop layout unchanged. Breakpoints:
phone ≤480, large-phone/tablet ≤767, tablet ≤1023.
============================================================ */
/* 1. Never allow sideways scroll; media never overflows its box. */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }
/* 2. iOS: stop auto-zoom when tapping a field; keep text crisp. */
@media (max-width: 767px) {
input, select, textarea { font-size: 16px !important; }
html { -webkit-text-size-adjust: 100%; }
}
/* 3. Hero search: single column on small phones for easy tapping
(2-col kicks in ≥420, 3-col ≥480 from existing rules). */
@media (max-width: 419px) {
.search-fields { grid-template-columns: 1fr; }
}
/* 4. Comfortable touch targets + full-width CTAs on phones. */
@media (max-width: 767px) {
.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.hero-actions { width: 100%; }
.hero-actions .btn { flex: 1 1 auto; }
.search-fields select, .search-fields input { min-height: 46px; }
.ym-loan-file { font-size: 14px; }
}
/* 5. Top utility bar wraps gracefully instead of cramming on small screens. */
@media (max-width: 767px) {
.utility-bar .container { flex-wrap: wrap; row-gap: 4px; }
}
/* 6. Real tables scroll instead of overflowing on tiny screens. */
@media (max-width: 600px) {
table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* 7. Loan / guarantor form rows stack on phones (already do at ≥600 the other way). */
@media (max-width: 599px) {
.ym-loan-form .form-row { grid-template-columns: 1fr; }
}
/* ============================================================
MOBILE HARDENING v2 — added by support session 2026-06-16
Scoped to small screens; desktop layout untouched.
Targets remaining horizontal-overflow ("cropped") causes.
============================================================ */
/* Long unbreakable strings (chassis codes, URLs, model names) must wrap. */
@media (max-width: 767px) {
.car-card .name,
.car-card .grade-line,
.specs-table .v,
.single-product .description,
.single-product .description * {
overflow-wrap: anywhere;
word-break: break-word;
}
}
/* Embedded marketing images inside descriptions never exceed the screen. */
.single-product .description img,
.woocommerce-product-details__short-description img,
.entry-content img { max-width: 100% !important; height: auto !important; }
/* On small phones, show one car card per row so 280px cards never overflow. */
@media (max-width: 420px) {
.car-grid { grid-template-columns: 1fr; }
}
/* Spec / delivery tables: allow horizontal scroll instead of cropping. */
@media (max-width: 600px) {
.specs-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ============================================================
MOBILE EXPERIENCE OVERHAUL v3 — 2026-06-16
Full readability pass: top utility bar, hero, stats, nav.
Additive & scoped to phones/tablets; desktop layout untouched.
============================================================ */
/* Blowout guard: let flex/grid children shrink below content width
(this is what stops a long line from forcing sideways overflow). */
.hero-grid > *, .footer-grid > *, .search-fields > * { min-width: 0; }
/* ------------------------------------------------------------
1) TOP UTILITY BAR — phone, currency, language & socials made
clear and tappable (was cramped, slim and clipped).
------------------------------------------------------------ */
@media (max-width: 767px) {
.utility-bar { height: auto; padding: 9px 0; font-size: 0.8rem; }
.utility-bar .container {
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 9px;
row-gap: 9px;
}
.utility-bar .left,
.utility-bar .right {
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
}
/* Phone shown prominently and white; address + hours stay hidden
on phones (they already appear in the footer). */
.utility-bar .left .item:first-child { font-size: 0.9rem; color: #fff; letter-spacing: 0.03em; }
.utility-bar .left .item:first-child svg { width: 16px; height: 16px; opacity: 1; color: var(--red); }
/* Currency + language: larger and easy to read/tap. */
.utility-bar .right .item { font-size: 0.82rem; }
#currencySwitcher { font-size: 0.82rem !important; padding: 5px 7px !important; min-height: 32px; }
#langWrap { padding: 5px 4px; }
/* Social icons: real round touch targets, evenly spaced. */
.utility-bar .util-soc {
width: 36px; height: 36px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 9px;
}
.utility-bar .util-soc svg { width: 18px; height: 18px; }
.utility-bar .util-soc:active { background: var(--red); color: #fff; border-color: var(--red); }
}
/* Extra-small phones: tighten so all five social icons sit on one row. */
@media (max-width: 380px) {
.utility-bar .right { gap: 10px; }
.utility-bar .util-soc { width: 32px; height: 32px; }
.utility-bar .util-soc svg { width: 16px; height: 16px; }
}
/* ------------------------------------------------------------
2) HERO — kill the right-edge clipping. Root cause was the long
eyebrow line refusing to wrap, which over-widened the column.
------------------------------------------------------------ */
@media (max-width: 767px) {
.hero { min-height: 0; padding-top: var(--s-7); padding-bottom: var(--s-8); }
.hero .eyebrow {
display: flex;
flex-wrap: wrap;
font-size: 0.66rem;
letter-spacing: 0.1em;
line-height: 1.5;
row-gap: 2px;
}
.hero h1, .hero .display-xl { font-size: clamp(2.75rem, 13vw, 4.25rem); margin-bottom: var(--s-5); }
.hero .lead { max-width: 100%; font-size: 1.05rem; }
.hero-actions { width: 100%; gap: var(--s-3); }
.hero-actions .btn { flex: 1 1 100%; } /* full-width stacked CTAs — no half-off buttons */
}
/* Hero search card: tabs & fields always fit inside the card. */
@media (max-width: 767px) {
.hero-search { padding: var(--s-4); }
.hero-search-tabs button {
padding: 0.85rem 0.4rem;
font-size: 0.8rem;
letter-spacing: 0.03em;
white-space: nowrap;
}
}
/* ------------------------------------------------------------
3) HERO STATS — keep the 2x2 grid readable on small phones.
------------------------------------------------------------ */
@media (max-width: 480px) {
.hero-stats { gap: var(--s-4); padding-top: var(--s-5); }
.hero-stats .stat .num { font-size: clamp(1.75rem, 8vw, 2.25rem); }
.hero-stats .stat .lbl { font-size: 0.6rem; letter-spacing: 0.1em; }
}
/* ------------------------------------------------------------
4) SECTION HEADINGS — never let a heading word overflow.
------------------------------------------------------------ */
@media (max-width: 767px) {
h1, h2, h3, .display-xl, .display-lg { overflow-wrap: anywhere; }
}
/* ------------------------------------------------------------
5) BRAND NAME beside logo on phones — shows the real company
name "Yamaguchi Motors 合同会社" next to the badge logo.
------------------------------------------------------------ */
.brand-name { display: none; }
@media (max-width: 767px) {
.site-header .brand { gap: 0.55rem; align-items: center; }
.site-header .brand-name {
display: flex;
flex-direction: column;
line-height: 1.08;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.18rem;
color: var(--black);
letter-spacing: -0.01em;
}
.site-header .brand-name em {
font-style: normal;
font-weight: 500;
font-size: 0.9rem;
color: var(--gray-500);
letter-spacing: 0.02em;
}
}
@media (max-width: 360px) {
.site-header .brand-name { font-size: 1rem; }
.site-header .brand-name em { font-size: 0.8rem; }
.site-header .brand-logo, .site-header img.brand-logo { height: 34px !important; }
}
/* ============================================================
PREMIUM 3D / DEPTH LAYER — 2026-06-16
Additive, on-brand (Red/Black/White). Signature: car cards
float with layered depth + a light sweep on the photo.
Mobile gets rich static depth; desktop gets interactive lift.
Reduced-motion + touch are respected.
============================================================ */
:root {
--shadow-3d: 0 1px 2px rgba(10,10,10,.04), 0 6px 14px rgba(10,10,10,.07), 0 14px 28px rgba(10,10,10,.05);
--shadow-3d-hover: 0 10px 20px rgba(10,10,10,.10), 0 24px 48px rgba(10,10,10,.14), 0 36px 70px rgba(204,0,0,.10);
--shadow-float: 0 12px 28px rgba(10,10,10,.10), 0 30px 64px rgba(10,10,10,.14);
}
html { scroll-behavior: smooth; }
/* ---- SIGNATURE: car cards float with real depth ---- */
.car-card {
border-radius: var(--radius-lg);
border-color: rgba(10,10,10,0.06);
box-shadow: var(--shadow-3d);
transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
}
.car-card .photo { border-radius: 0; }
/* Light sweep that glides across the photo on hover (showroom sheen). */
.car-card .photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 48%, rgba(255,255,255,0) 60%);
transform: translateX(-120%);
transition: transform var(--tr-slow);
z-index: 1; pointer-events: none;
}
/* Badges + price lift visually above the card surface. */
.car-card .badge { box-shadow: 0 2px 6px rgba(10,10,10,0.18); }
.badge-red { background: linear-gradient(180deg, #E00000, var(--red-deep)); }
.badge-grade { background: linear-gradient(180deg, #0BB85E, #008A43); }
@media (hover: hover) and (pointer: fine) {
.car-card:hover {
transform: translateY(-10px) scale(1.012);
box-shadow: var(--shadow-3d-hover);
border-color: rgba(204,0,0,0.25);
}
.car-card:hover .photo img { transform: scale(1.08); }
.car-card:hover .photo::after { transform: translateX(120%); }
}
/* ---- Offering ("What we offer") cards: matching depth ---- */
.offering-card {
border-radius: var(--radius-lg);
border-color: rgba(10,10,10,0.06);
box-shadow: var(--shadow-3d);
transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
}
.offering-card .offering-emoji { transition: transform var(--tr-base); }
@media (hover: hover) and (pointer: fine) {
.offering-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-3d-hover);
border-color: rgba(204,0,0,0.22);
}
.offering-card:hover .offering-emoji { transform: scale(1.12) translateY(-2px); }
}
/* ---- Hero search card: elevated glass with a soft red glow ---- */
.hero-search {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-float), 0 0 0 1px rgba(255,255,255,0.5) inset;
position: relative;
}
.hero-search::before {
content: "";
position: absolute; inset: -1px;
border-radius: inherit;
background: radial-gradient(120% 80% at 50% -10%, rgba(204,0,0,0.16), transparent 60%);
z-index: -1; filter: blur(8px);
}
/* ---- Export country chips: become tactile cards ---- */
.country-item {
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
}
@media (hover: hover) and (pointer: fine) {
.country-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--red);
}
}
/* ---- Buttons: glossy depth on the primary actions ---- */
.btn-primary {
background: linear-gradient(180deg, #E60000 0%, var(--red) 55%, var(--red-deep) 100%);
box-shadow: 0 4px 12px rgba(204,0,0,0.28), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.btn-dark { box-shadow: 0 4px 12px rgba(0,43,92,0.28), 0 1px 0 rgba(255,255,255,0.06) inset; }
.btn-whatsapp { box-shadow: 0 4px 12px rgba(37,211,102,0.30), 0 1px 0 rgba(255,255,255,0.25) inset; }
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(204,0,0,0.36); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,43,92,0.32); }
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,211,102,0.4); }
}
.btn-primary:active, .btn-dark:active, .btn-whatsapp:active { transform: translateY(0); }
/* ---- Featured-stock card a touch more elevated than the grid ---- */
.car-card.is-featured, .car-card.featured { box-shadow: var(--shadow-float); }
/* ---- Respect reduced-motion: depth stays, movement stops ---- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.car-card, .offering-card, .country-item, .btn, .car-card .photo img, .car-card .photo::after, .offering-card .offering-emoji {
transition: none !important;
}
.car-card:hover, .offering-card:hover, .country-item:hover, .btn:hover { transform: none !important; }
}
/* ============================================================
STOCK FILTER (mobile) + HERO single-column — 2026-06-16
============================================================ */
/* Premium mobile "Show Filters" button (display handled by existing rules). */
.filters-toggle {
align-items: center;
gap: 0.5rem;
width: 100%;
justify-content: center;
padding: 0.9rem 1rem;
background: var(--black);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.85rem;
cursor: pointer;
box-shadow: var(--shadow-3d);
}
.filters-toggle svg { width: 18px; height: 18px; }
.filters-toggle[aria-expanded="true"] { background: var(--red); }
/* When opened on a phone, the filter panel reads as a clean card. */
@media (max-width: 1023px) {
.filters:not(.hidden-mobile) {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-lg);
padding: var(--s-4);
box-shadow: var(--shadow-3d);
}
}
/* Homepage hero is single-column now that the search box is removed. */
.hero-grid { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-grid > .fade-up { max-width: 900px; }
}
/* ============================================================
DROPDOWN MEGA-MENU (desktop) + grouped mobile menu — 2026-06-16
============================================================ */
/* ---- Desktop dropdowns (only where .main-nav is visible, >=1024) ---- */
.main-nav .nav-item { position: relative; display: flex; align-items: center; }
.main-nav .nav-item > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-caret { font-size: 0.7em; transition: transform var(--tr-base); color: var(--gray-400); }
.main-nav .nav-item:hover .nav-caret,
.main-nav .nav-item:focus-within .nav-caret { transform: rotate(180deg); color: var(--red); }
.main-nav .dropdown {
position: absolute;
top: calc(100% + 0.6rem);
left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 250px;
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
padding: 0.5rem;
display: flex;
flex-direction: column;
gap: 1px;
opacity: 0;
visibility: hidden;
transition: opacity var(--tr-base), transform var(--tr-base), visibility var(--tr-base);
z-index: 200;
}
/* invisible bridge so the menu doesn't close in the gap between link and panel */
.main-nav .dropdown::before { content: ""; position: absolute; top: -0.7rem; left: 0; right: 0; height: 0.7rem; }
.main-nav .nav-item:hover .dropdown,
.main-nav .nav-item:focus-within .dropdown {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.main-nav .dropdown a {
display: block;
padding: 0.7rem 0.9rem;
font-family: var(--font-display);
font-size: 0.82rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.01em;
color: var(--gray-700);
border-radius: var(--radius-sm);
white-space: nowrap;
}
.main-nav .dropdown a::after { display: none; }
.main-nav .dropdown a:hover { background: var(--red-50); color: var(--red); }
.main-nav .dropdown a.dropdown-all {
margin-top: 0.25rem;
border-top: 1px solid var(--gray-100);
color: var(--red);
font-weight: 600;
}
/* ---- Mobile grouped accordion (inside the slide-in drawer) ---- */
.mobile-nav-grouped .m-group { border-bottom: 1px solid var(--gray-900); }
.mobile-nav-grouped .m-group summary {
list-style: none;
cursor: pointer;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #fff;
padding: var(--s-3) 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-nav-grouped .m-group summary::-webkit-details-marker { display: none; }
.mobile-nav-grouped .m-group summary::after {
content: "+"; font-size: 1.6rem; font-weight: 400; color: var(--red); line-height: 1;
}
.mobile-nav-grouped .m-group[open] summary::after { content: "\2013"; }
.mobile-nav-grouped .m-group a {
font-size: 1rem !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--gray-300) !important;
padding: 0.6rem 0 0.6rem 1rem !important;
border-bottom: none !important;
}
.mobile-nav-grouped .m-group a:hover { color: var(--red) !important; }
.mobile-nav-grouped .m-group[open] { padding-bottom: 0.5rem; }
/* ============================================================
EXPORT PAGE — PREMIUM POLISH PASS (v0.12.1)
Brings .rule-card up to the site's 3D depth standard:
resting shadow + hover lift, circular flag medallions,
red accent on open cards, smooth reveal, consistent spacing.
Scoped to export rules; overrides the base block above.
============================================================ */
.export-rules-section .rules-grid {
gap: var(--s-4);
align-items: start; /* collapsed cards don't stretch to an open sibling */
}
@media (min-width: 1100px) {
.export-rules-section .rules-grid { gap: var(--s-5); }
}
/* Card shell — soft resting shadow + smooth lift */
.rule-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
will-change: transform;
}
@media (hover: hover) {
.rule-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--gray-200);
}
}
/* Open — red accent stripe via inset shadow (no layout shift) + lift */
.rule-card[open] {
border-color: var(--red);
box-shadow: inset 3px 0 0 var(--red), var(--shadow-md);
}
@media (hover: hover) {
.rule-card[open]:hover {
transform: translateY(-2px);
box-shadow: inset 3px 0 0 var(--red), var(--shadow-lg);
}
}
/* Summary row */
.rule-card summary { gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.rule-card[open] summary { border-bottom: 1px solid var(--gray-100); background: var(--red-50); }
@media (hover: hover) {
.rule-card summary:hover { background: var(--gray-50); }
.rule-card[open] summary:hover { background: var(--red-50); }
}
/* Flag medallion — uniform circular badge for every country */
.rule-card .rule-flag {
width: 48px; height: 48px;
display: grid; place-items: center;
font-size: 1.6rem; line-height: 1;
background: var(--off-white);
border: 1px solid var(--gray-100);
border-radius: 50%;
box-shadow: var(--shadow-sm);
transition: border-color var(--tr-base), transform var(--tr-base);
}
.rule-card[open] .rule-flag { border-color: var(--red); }
@media (hover: hover) {
.rule-card summary:hover .rule-flag { border-color: var(--red); transform: scale(1.06); }
}
/* Title + teaser tuning */
.rule-card summary h4 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.rule-card summary p { font-size: 0.8125rem; line-height: 1.45; color: var(--gray-500); }
/* Arrow in a soft circle */
.rule-card .rule-arrow {
width: 28px; height: 28px; padding: 4px;
border-radius: 50%; background: var(--gray-50);
transition: transform var(--tr-base), background var(--tr-base), color var(--tr-base);
}
.rule-card[open] .rule-arrow { background: var(--red-50); }
/* Body — roomier padding + gentle reveal + ringed bullets */
.rule-card .rule-body { padding: var(--s-5); }
.rule-card[open] .rule-body { animation: ymRuleReveal var(--tr-base) ease both; }
@keyframes ymRuleReveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.rule-card .rule-body li { padding-left: 1.1rem; }
.rule-card .rule-body li::before { top: 0.6rem; box-shadow: 0 0 0 3px var(--red-50); }
/* Disclaimer box — feels intentional, matches card depth */
.export-rules-section .rules-grid + div {
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-sm);
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.rule-card, .rule-card .rule-flag, .rule-card .rule-arrow { transition: none; }
.rule-card:hover, .rule-card[open]:hover { transform: none; }
.rule-card[open] .rule-body { animation: none; }
}
/* ============================================================
INNER PAGES POLISH PASS (v0.13.0)
Brings Services / Sell & Buy / FAQ cards up to the same
premium depth standard as the Export page rule-cards.
============================================================ */
/* ---- FAQ — match the export rule-card treatment (shadow, lift,
red accent on open, smooth reveal) ---- */
.faq-grid { gap: var(--s-3); }
.faq-item {
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
}
@media (hover: hover) {
.faq-item:hover {
border-color: var(--gray-200);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
}
.faq-item[open] {
border-color: var(--red);
box-shadow: inset 3px 0 0 var(--red), var(--shadow-md);
}
.faq-item summary { font-size: 1rem; }
.faq-icon { box-shadow: var(--shadow-sm); }
.faq-item[open] p { animation: ymRuleReveal var(--tr-base) ease both; }
/* ---- SERVICES — resting depth + stronger hover lift to match
the export grid feel ---- */
.services-grid .service-card {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
.services-grid .service-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
}
}
/* ---- SELL & BUY — option cards get depth + lift; emoji gets a
circular medallion echoing the export flag badges ---- */
.sell-option-card {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
}
@media (hover: hover) {
.sell-option-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--gray-200);
}
}
.sell-option-emoji {
width: 56px; height: 56px;
display: grid; place-items: center;
background: var(--red-50);
border-radius: 50%;
font-size: 1.9rem;
}
/* pricing tiers already lift on hover — give them resting depth too */
.sell-tier, .rental-tier { box-shadow: var(--shadow-sm); }
/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
.faq-item, .sell-option-card, .services-grid .service-card { transition: none; }
.faq-item:hover, .sell-option-card:hover, .services-grid .service-card:hover { transform: none; }
.faq-item[open] p { animation: none; }
}
/* ============================================================
HOMEPAGE TRUST & CONVERSION UPGRADE (v0.14.0)
Phases 1,2,3,4,5,7,8 sections + shared helpers
============================================================ */
/* Centered section header variant */
.section-head.center { text-align: center; display: block; }
.section-head.center > .left { max-width: 720px; margin: 0 auto; }
.section-head.center p { margin-left: auto; margin-right: auto; max-width: 640px; }
/* Buttons used by the new contact blocks */
.btn-line { background: #06C755; border-color: #06C755; color: #fff; }
.btn-line:hover { background: #05b14c; border-color: #05b14c; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-messenger { background: #0084FF; border-color: #0084FF; color: #fff; }
.btn-messenger:hover { background: #0073e0; border-color: #0073e0; transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* ---- Phase 1: Why customers trust ---- */
.trust-why-grid {
display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 600px) { .trust-why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .trust-why-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-why-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-lg);
padding: var(--s-5);
box-shadow: var(--shadow-sm);
transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
}
@media (hover: hover) {
.trust-why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gray-200); }
}
.twc-ico {
width: 52px; height: 52px; display: grid; place-items: center;
background: var(--red-50); color: var(--red);
border-radius: var(--radius-md); margin-bottom: var(--s-4);
}
.trust-why-card h4 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.4rem; }
.trust-why-card p { font-size: 0.9rem; line-height: 1.55; color: var(--gray-500); }
/* ---- Phase 7: Quick vehicle search ---- */
.qs-section { background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%); }
.qs-grid { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.qs-btn {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.7rem 1.25rem;
background: var(--white);
border: 1.5px solid var(--gray-100);
border-radius: var(--radius-pill);
font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
color: var(--black);
box-shadow: var(--shadow-sm);
transition: all var(--tr-base);
}
.qs-btn:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* ---- Phase 3: Statistics ---- */
.stats-section {
background:
radial-gradient(ellipse 60% 60% at 50% 0%, rgba(204,0,0,0.05), transparent 70%),
var(--black);
color: var(--white);
}
.stats-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
text-align: center;
}
@media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(5, 1fr); } }
.stat-num {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; color: var(--white);
letter-spacing: -0.02em;
}
.stat-num::after { content: ""; }
.stat-label { margin-top: 0.5rem; font-size: 0.85rem; color: var(--gray-300); letter-spacing: 0.02em; }
.stat-card { position: relative; }
.stat-card::after {
content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
width: 28px; height: 3px; background: var(--red); border-radius: 2px;
}
/* ---- Phase 2: Real business gallery ---- */
.realbiz-grid {
display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 600px) { .realbiz-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .realbiz-grid { grid-template-columns: repeat(5, 1fr); } }
.realbiz-card {
border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
transition: transform var(--tr-base), box-shadow var(--tr-base);
}
@media (hover: hover) {
.realbiz-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
/* Placeholder — owner replaces background with a real photo (or drops an ![]()
inside) */
.realbiz-ph {
aspect-ratio: 4 / 3;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
background:
repeating-linear-gradient(45deg, var(--gray-50) 0, var(--gray-50) 12px, var(--off-white) 12px, var(--off-white) 24px);
border: 1px dashed var(--gray-200);
color: var(--gray-400);
text-align: center; padding: var(--s-4);
}
.rb-ico { color: var(--red); opacity: 0.8; }
.rb-label { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--gray-700); }
/* ---- Phase 4: Reviews ---- */
.reviews-section { background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%); }
.reviews-grid {
display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 640px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
background: var(--white); border: 1px solid var(--gray-100);
border-radius: var(--radius-lg); padding: var(--s-5);
box-shadow: var(--shadow-sm);
transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
display: flex; flex-direction: column; gap: 0.75rem;
}
@media (hover: hover) {
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gray-200); }
}
.review-head { display: flex; align-items: center; gap: 0.75rem; }
.review-avatar {
width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center;
background: var(--red-50); color: var(--red);
border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
border: 1px solid var(--gray-100);
}
.review-name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.review-meta { font-size: 0.8rem; color: var(--gray-500); }
.review-stars { color: var(--amber); letter-spacing: 2px; font-size: 1rem; }
.review-text { font-size: 0.9rem; line-height: 1.6; color: var(--gray-700); font-style: italic; }
/* ---- Phase 5: Video showcase ---- */
.video-grid {
display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 640px) { .video-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .video-grid { grid-template-columns: repeat(4, 1fr); } }
.video-card {
border-radius: var(--radius-lg); overflow: hidden;
background: var(--white); border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm);
transition: transform var(--tr-base), box-shadow var(--tr-base);
}
@media (hover: hover) {
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}
.video-ph, .video-card iframe {
display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
}
.video-ph {
position: relative; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
background: linear-gradient(135deg, var(--gray-900), var(--black));
color: var(--white);
}
.video-ph .vp-play { opacity: 0.95; transition: transform var(--tr-base); }
.video-card:hover .vp-play { transform: scale(1.1); }
.vp-label { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--gray-300); }
.video-card h4 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; padding: var(--s-3) var(--s-4); }
.video-note { text-align: center; margin-top: var(--s-5); font-size: 0.85rem; color: var(--gray-500); }
.video-note code { background: var(--gray-50); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.8rem; }
/* ---- Phase 8: Company information ---- */
.biz-info-section { background: var(--off-white); border-top: 1px solid var(--gray-100); }
.biz-info-grid {
display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: stretch;
}
@media (min-width: 900px) { .biz-info-grid { grid-template-columns: 1fr 1fr; } }
.biz-info-list { display: flex; flex-direction: column; gap: 0.75rem; margin: var(--s-4) 0 var(--s-5); }
.biz-info-list li {
display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3); align-items: baseline;
padding-bottom: 0.65rem; border-bottom: 1px solid var(--gray-100);
}
.biz-info-list li span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); font-weight: 600; }
.biz-info-list li strong { font-weight: 600; color: var(--black); font-size: 0.95rem; }
.biz-info-list a { color: var(--red); }
.biz-info-btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.biz-info-map {
border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
min-height: 320px; border: 1px solid var(--gray-100);
}
.biz-info-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
/* ============================================================
MOBILE FLOATING CONTACT BAR (Phase 9) — site-wide via footer.php
============================================================ */
.ym-mobile-bar { display: none; }
@media (max-width: 767px) {
.ym-mobile-bar {
display: grid; grid-template-columns: repeat(4, 1fr);
position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
background: var(--white);
border-top: 1px solid var(--gray-100);
box-shadow: 0 -4px 18px rgba(0,0,0,0.10);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.ym-mobile-bar .ymb {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
padding: 0.5rem 0.25rem;
font-family: var(--font-display); font-weight: 600; font-size: 0.68rem;
color: var(--gray-700); text-decoration: none;
border-right: 1px solid var(--gray-100);
}
.ym-mobile-bar .ymb:last-child { border-right: 0; }
.ym-mobile-bar .ymb svg { width: 22px; height: 22px; }
.ym-mobile-bar .ymb.whatsapp { color: #25D366; }
.ym-mobile-bar .ymb.line { color: #06C755; }
.ym-mobile-bar .ymb.call { color: var(--red); }
.ym-mobile-bar .ymb.messenger { color: #0084FF; }
.ym-mobile-bar .ymb:active { background: var(--gray-50); }
/* keep the bar from covering footer content */
body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.trust-why-card, .realbiz-card, .review-card, .video-card, .qs-btn { transition: none; }
.trust-why-card:hover, .realbiz-card:hover, .review-card:hover, .video-card:hover, .qs-btn:hover { transform: none; }
}
/* ============================================================
SEO LANDING PAGES (v0.15.0) — page-landing.php
============================================================ */
.landing-prose { max-width: 820px; margin: 0 auto; }
.landing-lead {
font-size: 1.0625rem; line-height: 1.7; color: var(--gray-700); margin-bottom: var(--s-4);
}
.landing-lead:first-of-type { font-size: 1.15rem; color: var(--black); }
.landing-block { margin-top: var(--s-6); }
.landing-block h2 {
font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
letter-spacing: -0.01em; margin-bottom: var(--s-3);
padding-left: var(--s-3); border-left: 4px solid var(--red);
}
.landing-block p { font-size: 1rem; line-height: 1.7; color: var(--gray-700); margin-bottom: var(--s-3); }
.landing-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--s-2); }
.landing-list li {
position: relative; padding-left: 1.4rem;
font-size: 1rem; line-height: 1.6; color: var(--gray-700);
}
.landing-list li::before {
content: ""; position: absolute; left: 0; top: 0.62rem;
width: 7px; height: 7px; background: var(--red); border-radius: 50%;
box-shadow: 0 0 0 3px var(--red-50);
}
.landing-cta {
display: flex; flex-wrap: wrap; gap: var(--s-3);
margin-top: var(--s-7); padding-top: var(--s-6);
border-top: 1px solid var(--gray-100);
}
/* ============================================================
PHASE 10 — Car page: availability row + export button (v0.16.0)
============================================================ */
.car-info .ym-avail { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--s-4); }
.car-info .ym-av {
display: inline-flex; align-items: center; gap: 0.25rem;
font-size: 0.75rem; font-weight: 600;
color: var(--green); background: var(--green-light);
padding: 0.32rem 0.62rem; border-radius: var(--radius-pill);
line-height: 1.2;
}
.btn.ym-export-btn { background: var(--amber); border-color: var(--amber); color: var(--black); }
.btn.ym-export-btn:hover { background: #E6A600; border-color: #E6A600; transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* 3-up quick specs now that there are 6 items */
@media (min-width: 480px) { .car-info .quick-specs { grid-template-columns: repeat(3, 1fr); } }
/* ============================================================
PHASE 6 — Delivered cards: status badges + customer name (v0.16.0)
============================================================ */
.delivered-card .d-badge {
position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
font-family: var(--font-display); font-weight: 700;
font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
color: #fff; padding: 0.28rem 0.6rem; border-radius: var(--radius-pill);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.delivered-card .d-badge.d-exported { background: var(--blue); }
.delivered-card .d-badge.d-registered { background: var(--green); }
.delivered-card .d-badge.d-delivered { background: var(--red); }
.delivered-info .d-cust {
font-size: 0.78rem; font-weight: 600; color: #fff;
margin-bottom: 3px; line-height: 1.2;
}
/* ============================================================
PHASE 12 — FINAL POLISH & ACCESSIBILITY (v0.17.0)
============================================================ */
/* Smooth in-page scrolling + anchor targets clear the sticky header
(so links like Export ▾ → Rules by Country don't hide behind it) */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 72px) + 24px); }
[id] { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
/* Visible keyboard focus for accessibility (mouse clicks unaffected) */
:focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
border-radius: 3px;
}
/* Consistent media: never overflow their container */
img, svg, video, iframe { max-width: 100%; }
/* Global reduced-motion safety net — respects the visitor's OS setting */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
REAL BUSINESS — real photo cards (v0.17.1)
============================================================ */
/* WebP wrappers must not alter layout: collapse the wrapper box so the
inner ![]()
lays out exactly as a bare ![]()
did (all existing img rules apply). */
.ym-pic { display: contents; }
.realbiz-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.realbiz-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--tr-slow); }
@media (hover: hover) { .realbiz-card:hover .realbiz-photo img { transform: scale(1.06); } }
.realbiz-photo .rb-cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 1.1rem 0.9rem 0.7rem;
font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: #fff;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
}
/* ---------- IN-HOUSE WORKSHOP BAND (services page) ---------- */
.ym-wb { display:grid; grid-template-columns:1.05fr 1fr; gap:2.5rem; align-items:center; }
.ym-wb-media img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md); display:block; box-shadow:var(--shadow-md); }
.ym-wb-copy h2 { margin:0.5rem 0 0.85rem; }
.ym-wb-list { list-style:none; padding:0; margin:1.1rem 0 1.6rem; display:grid; grid-template-columns:1fr 1fr; gap:0.55rem 1rem; }
.ym-wb-list li { position:relative; padding-left:1.4rem; font-size:0.95rem; }
.ym-wb-list li::before { content:"\2713"; position:absolute; left:0; color:var(--red); font-weight:700; }
.ym-wb-cta { display:flex; gap:0.75rem; flex-wrap:wrap; }
@media (max-width:820px){ .ym-wb { grid-template-columns:1fr; gap:1.6rem; } }
/* ---------- REAL BUSINESS CAROUSEL ---------- */
.realbiz-carousel { position: relative; }
.rb-viewport { position: relative; }
.realbiz-track {
display: flex; gap: var(--s-4);
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
padding: 6px 2px; scroll-padding-left: 2px;
}
.realbiz-track::-webkit-scrollbar { display: none; }
.realbiz-track > .realbiz-card { flex: 0 0 82%; scroll-snap-align: start; }
@media (min-width: 600px) { .realbiz-track > .realbiz-card { flex-basis: 46%; } }
@media (min-width: 1000px) { .realbiz-track > .realbiz-card { flex-basis: 31%; } }
.rb-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 46px; height: 46px; border-radius: 50%;
border: 1px solid var(--gray-200); background: rgba(255,255,255,0.96); color: var(--black);
box-shadow: var(--shadow-md); cursor: pointer; z-index: 4;
display: flex; align-items: center; justify-content: center;
font-size: 1.7rem; line-height: 1; padding-bottom: 3px;
transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}
.rb-arrow:hover { background: var(--red); color: #fff; border-color: var(--red); }
.rb-prev { left: -10px; }
.rb-next { right: -10px; }
@media (max-width: 700px) { .rb-arrow { display: none; } }
.rb-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--s-4); }
.rb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); border: none; padding: 0; cursor: pointer; transition: background var(--tr-base), width var(--tr-base); }
.rb-dot.active { background: var(--red); width: 22px; border-radius: 4px; }
/* ---------- AUCTION SOURCING CTA (homepage) ---------- */
.auction-cta-section { background: linear-gradient(135deg,#121212 0%,#1f1f1f 100%); position:relative; overflow:hidden; }
.auction-cta-section::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 15%, rgba(204,0,0,.28), transparent 46%); pointer-events:none; }
.auction-cta-section .container { position:relative; z-index:1; }
.auction-chips { display:flex; flex-wrap:wrap; gap:8px; margin:1.25rem 0 1.85rem; }
.auction-chips span { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; padding:.42rem .72rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:rgba(255,255,255,.85); }
.auction-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:0 0 1.85rem; }
.auction-step { padding:1.1rem 1.15rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius-md); }
.auction-step .n { font-family:var(--font-display); font-weight:700; color:var(--red); font-size:1.5rem; line-height:1; margin-bottom:.35rem; }
.auction-step p { margin:0; color:rgba(255,255,255,.80); font-size:.92rem; line-height:1.5; }
.auction-cta-btns { display:flex; gap:.75rem; flex-wrap:wrap; }
/* auction-cta dark buttons -> consolidated in B8B-1 .on-dark foundation */
@media (max-width:700px){ .auction-steps { grid-template-columns:1fr; } }
/* ============================================================
EXPORT WORK GALLERY
============================================================ */
.exwork-section { background: var(--gray-50); }
.exwork-countries {
display: flex; flex-wrap: wrap; justify-content: center;
gap: var(--s-2); margin-top: var(--s-4);
}
.exwork-countries span {
font-family: 'Montserrat', sans-serif; font-size: .8125rem; font-weight: 600;
letter-spacing: .02em; color: var(--gray-700);
background: #fff; border: 1px solid var(--gray-200);
padding: .35rem .85rem; border-radius: var(--radius-pill);
}
.exwork-countries span:last-child { color: var(--red); border-color: var(--red-light); background: var(--red-50); }
.exwork-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
margin-top: var(--s-6);
}
@media (min-width: 600px) { .exwork-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1000px) { .exwork-grid { grid-template-columns: repeat(4, 1fr); } }
.exwork-item {
position: relative; display: block; width: 100%; padding: 0; border: 0;
aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md);
background: var(--gray-200); cursor: pointer; box-shadow: var(--shadow-sm);
transition: transform var(--tr-base), box-shadow var(--tr-base);
}
.exwork-item:hover, .exwork-item:focus-visible {
transform: translateY(-3px); box-shadow: var(--shadow-lg); outline: none;
}
.exwork-item img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform var(--tr-slow);
}
.exwork-item:hover img { transform: scale(1.06); }
.exwork-cap {
position: absolute; left: 0; right: 0; bottom: 0;
font-family: 'Montserrat', sans-serif; font-size: .75rem; font-weight: 600;
color: #fff; text-align: left; line-height: 1.25;
padding: 1.6rem .6rem .55rem;
background: linear-gradient(to top, rgba(10,10,10,.82), rgba(10,10,10,0));
}
.exwork-note {
text-align: center; color: var(--gray-400); font-size: .8125rem;
margin-top: var(--s-4);
}
.exwork-cta {
display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3);
margin-top: var(--s-3);
}
/* Lightbox */
.exwork-lb {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
background: rgba(10,10,10,.92); padding: env(safe-area-inset-top) 1rem 1rem;
}
.exwork-lb[hidden] { display: none; }
.exwork-lb-fig { margin: 0; max-width: 92vw; max-height: 86vh; text-align: center; }
.exwork-lb-fig img {
max-width: 92vw; max-height: 78vh; width: auto; height: auto;
border-radius: var(--radius-md); box-shadow: var(--shadow-xl);
}
.exwork-lb-fig figcaption {
color: #fff; font-family: 'Montserrat', sans-serif; font-size: .9rem;
font-weight: 600; margin-top: .75rem;
}
.exwork-lb-close {
position: absolute; top: .6rem; right: .9rem; z-index: 2;
width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill);
background: rgba(255,255,255,.12); color: #fff; font-size: 1.8rem; line-height: 1;
cursor: pointer; transition: background var(--tr-fast);
}
.exwork-lb-close:hover { background: rgba(255,255,255,.25); }
.exwork-lb-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 48px; height: 48px; border: 0; border-radius: var(--radius-pill);
background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; line-height: 1;
cursor: pointer; transition: background var(--tr-fast);
}
.exwork-lb-nav:hover { background: rgba(255,255,255,.25); }
.exwork-lb-prev { left: .5rem; }
.exwork-lb-next { right: .5rem; }
@media (min-width: 700px) { .exwork-lb-prev { left: 1.5rem; } .exwork-lb-next { right: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
.exwork-item, .exwork-item img { transition: none; }
.exwork-item:hover { transform: none; }
.exwork-item:hover img { transform: none; }
}
/* ============================================================
MOBILE OVERFLOW FIXES — added 2026-06-21
Scope: prevent horizontal overflow on car/product pages.
Desktop (>=768px) appearance is unchanged.
============================================================ */
/* Safe global guards (no visual change on desktop) */
img, table, iframe, embed, object, video, svg {
max-width: 100%;
}
img, video { height: auto; }
@media (max-width: 767px) {
html, body { overflow-x: hidden; max-width: 100%; }
/* Long URLs / emails / handles in descriptions */
.single-product .woocommerce-product-details__short-description,
.single-product .description,
.single-product .entry-content,
.entry-content,
.ym-contact, .ym-contact * {
overflow-wrap: break-word;
word-break: break-word;
}
/* The red "Visit or Contact Us Today" box */
.single-product div[style*="CC0000"],
.single-product div[style*="cc0000"] {
padding: 14px !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-wrap: break-word;
}
.single-product table {
width: 100% !important;
max-width: 100% !important;
table-layout: fixed;
word-break: break-word;
}
.single-product table td {
white-space: normal !important;
overflow-wrap: break-word;
word-break: break-word;
vertical-align: top;
}
/* Stack label + value vertically so long emails/links get full width */
.single-product table tr {
display: block;
margin-bottom: 10px;
}
.single-product table td {
display: block;
width: 100% !important;
}
}
/* ============================================================
MOBILE OFF-CANVAS & EDGE FIXES — added 2026-06-21 (v2)
Properly contains the off-canvas mobile menu (iOS-safe) and
tidies content edges. Desktop (>=768px) is unchanged.
Menu open-state class confirmed = "open" (#mobileMenu).
============================================================ */
@media (max-width: 767px) {
/* iOS-safe clipping: overflow-x:clip contains position:fixed
children that overflow-x:hidden does NOT clip on Safari. */
html, body {
overflow-x: clip;
max-width: 100%;
}
/* --- Off-canvas mobile menu: truly hidden when closed --- */
.mobile-menu {
max-width: 100vw;
box-sizing: border-box;
transition: transform .25s ease;
}
.mobile-menu:not(.open) {
transform: translateX(100%);
visibility: hidden;
pointer-events: none;
}
.mobile-menu.open {
transform: translateX(0);
visibility: visible;
pointer-events: auto;
}
/* --- Tidy content edges site-wide --- */
.container, .site-header, .site-footer {
max-width: 100%;
box-sizing: border-box;
}
.entry-content, .single-product, .woocommerce {
overflow-wrap: break-word;
word-break: break-word;
}
/* Keep the homepage realbiz carousel a contained swipe strip */
.rb-viewport { overflow: hidden; }
.realbiz-track { max-width: 100%; }
}
/* ============================================================
CAR PAGE ACCORDION — added 2026-06-21
Collapses long detail sections (.detail-block) into tidy,
on-brand accordion cards. Works desktop + mobile.
Paired with js/ym-accordion.js. The .ym-acc classes are
added by JS; if JS is off, sections show fully (graceful).
============================================================ */
.detail-block.ym-acc {
border: 1px solid #ececec;
border-radius: 12px;
margin: 14px 0;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
overflow: hidden;
}
.detail-block.ym-acc > .ym-acc-header {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0;
padding: 18px 20px;
font-size: 1.15rem;
font-weight: 700;
color: #111;
background: #fafafa;
border-left: 4px solid #CC0000;
transition: background .15s ease;
user-select: none;
}
.detail-block.ym-acc > .ym-acc-header:hover { background: #f3f3f3; }
.detail-block.ym-acc > .ym-acc-header:focus-visible {
outline: 2px solid #CC0000;
outline-offset: -2px;
}
.detail-block.ym-acc > .ym-acc-header .ym-acc-icon {
flex: 0 0 auto;
width: 26px; height: 26px;
border-radius: 50%;
background: #CC0000; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1;
transition: transform .25s ease;
}
.detail-block.ym-acc.open > .ym-acc-header .ym-acc-icon { transform: rotate(45deg); }
.detail-block.ym-acc > .ym-acc-panel {
overflow: hidden;
transition: max-height .3s ease, padding .3s ease;
padding: 0 20px;
max-height: 0;
}
.detail-block.ym-acc.open > .ym-acc-panel {
padding: 6px 20px 20px;
max-height: 100000px;
}
/* D4A (v0.25.0): old CSS-only mobile reorder removed — layout is now DOM-first
(gallery > buy box > content in single-product.php). See end of file. */
/* ============================================================
POLISH SECTIONS — About Us + Export Process (added by polish task)
Mobile-first; matches theme tokens.
============================================================ */
/* ---------- About Us ---------- */
.about-us-section { background: var(--off-white); }
.about-us-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
}
.about-us-story .about-lead {
font-size: 1.15rem;
line-height: 1.6;
color: var(--black);
font-weight: 500;
margin-bottom: var(--s-3);
}
.about-us-story p { color: var(--gray-700); line-height: 1.7; }
.about-badges {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
margin-top: var(--s-5);
}
.about-badge {
background: var(--white);
border: 1px solid var(--gray-200);
border-left: 3px solid var(--red);
border-radius: var(--radius-md);
padding: var(--s-3) var(--s-4);
display: flex;
flex-direction: column;
gap: 4px;
}
.about-badge-label {
font-size: .72rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--gray-500);
font-weight: 700;
}
.about-badge-val {
font-family: var(--font-mono, monospace);
font-size: .95rem;
font-weight: 700;
color: var(--black);
}
.about-pillars {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
}
.about-pillar {
display: flex;
gap: var(--s-3);
align-items: flex-start;
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
padding: var(--s-4);
transition: all var(--tr-base);
}
.about-pillar:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.about-pillar-ico { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.about-pillar h4 { margin: 0 0 4px; font-size: 1.02rem; color: var(--black); }
.about-pillar p { margin: 0; font-size: .9rem; color: var(--gray-700); line-height: 1.5; }
/* ---------- Export Process ---------- */
.export-process { margin-top: var(--s-7); }
.export-process-title {
font-family: var(--font-display);
font-size: 1.5rem;
margin: 0 0 var(--s-5);
color: var(--white);
}
.export-steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
margin-bottom: var(--s-6);
}
.export-step {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--radius-md);
padding: var(--s-4);
position: relative;
}
.export-step-num {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--red);
color: #fff;
font-weight: 800;
font-size: 1.1rem;
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--s-3);
box-shadow: var(--shadow-red, 0 4px 14px rgba(204,0,0,.4));
}
.export-step h4 { margin: 0 0 6px; color: #fff; font-size: 1.05rem; }
.export-step p { margin: 0; color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.55; }
.export-extra {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
}
.export-methods, .export-handle {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--radius-md);
padding: var(--s-4);
}
.export-extra-head { margin: 0 0 var(--s-3); color: #fff; font-size: 1.05rem; }
.export-method { margin-bottom: var(--s-3); }
.export-method:last-child { margin-bottom: 0; }
.export-method strong {
display: inline-block;
background: var(--amber, #FFB800);
color: #111;
font-weight: 800;
font-size: .8rem;
padding: 2px 10px;
border-radius: var(--radius-pill);
margin-bottom: 4px;
}
.export-method span { display: block; color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.5; }
.export-handle-list { margin: 0; padding: 0; list-style: none; }
.export-handle-list li {
color: rgba(255,255,255,.85);
font-size: .92rem;
padding: 6px 0 6px 24px;
position: relative;
line-height: 1.4;
}
.export-handle-list li::before {
content: "✓";
position: absolute; left: 0; top: 6px;
color: var(--green, #2BAE66);
font-weight: 800;
}
/* ---------- Tablet / desktop ---------- */
@media (min-width: 768px) {
.about-us-grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-9); align-items: start; }
.export-steps { grid-template-columns: repeat(4, 1fr); }
.export-extra { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 480px) {
.about-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
.about-badges { grid-template-columns: 1fr; }
}
/* ---------- Contact quick-action row (added by polish task) ---------- */
.contact-quick-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
margin: var(--s-5) 0 var(--s-6);
}
.cq-btn {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-radius: var(--radius-md);
text-decoration: none;
border: 1px solid var(--gray-200);
background: var(--white);
transition: all var(--tr-base);
min-height: 64px;
}
.cq-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cq-ico { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.cq-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cq-txt strong { color: var(--black); font-size: 1rem; }
.cq-txt em { font-style: normal; color: var(--gray-500); font-size: .78rem; margin-top: 2px; }
.cq-wa { border-left: 4px solid #25D366; }
.cq-line { border-left: 4px solid #06C755; }
.cq-call { border-left: 4px solid var(--red); }
.cq-mail { border-left: 4px solid var(--blue, #2563EB); }
@media (min-width: 768px) {
.contact-quick-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 360px) {
.contact-quick-row { grid-template-columns: 1fr; }
.cq-btn { min-height: 56px; }
}
/* ---------- Export page closing CTA (added by polish task) ---------- */
.export-cta-section { background: var(--off-white); }
.export-cta-card {
background: linear-gradient(135deg, var(--black) 0%, #1a0000 100%);
border-radius: var(--radius-lg);
padding: var(--s-7) var(--s-5);
text-align: center;
box-shadow: var(--shadow-lg);
}
.export-cta-card h2 {
color: #fff;
font-family: var(--font-display);
font-size: clamp(1.5rem, 5vw, 2.2rem);
margin: 0 0 var(--s-3);
line-height: 1.15;
}
.export-cta-card p {
color: rgba(255,255,255,.82);
max-width: 620px;
margin: 0 auto var(--s-5);
line-height: 1.6;
font-size: 1.02rem;
}
.export-cta-btns {
display: flex;
flex-direction: column;
gap: var(--s-3);
align-items: center;
}
/* B8B-3: removed orphaned .export-cta-wa / .export-cta-call (WhatsApp now uses .btn-whatsapp; Call uses .btn-ghost) */
@media (min-width: 600px) {
.export-cta-card { padding: var(--s-9) var(--s-7); }
.export-cta-btns { flex-direction: row; justify-content: center; }
}
/* ===== HOME CLOSING CTA + TRUST STRIP ===== */
.home-closing-cta{padding-top:var(--s-8);padding-bottom:var(--s-9);}
.hcc-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(135deg,#161616 0%,#2a0a0a 55%,#4a0d0d 100%);color:#fff;padding:clamp(28px,5vw,56px);box-shadow:var(--shadow-lg);}
.hcc-card::before{content:"";position:absolute;top:-40%;right:-10%;width:60%;height:180%;background:radial-gradient(circle,rgba(204,0,0,.35),transparent 70%);pointer-events:none;}
.hcc-inner{position:relative;z-index:1;max-width:760px;}
.hcc-eyebrow{color:var(--amber,#FFB800);}
.hcc-title{color:#fff;margin:8px 0 14px;line-height:1.1;}
.hcc-title span{color:var(--amber,#FFB800);}
.hcc-sub{color:rgba(255,255,255,.82);font-size:1.05rem;line-height:1.6;max-width:620px;margin:0 0 26px;}
.hcc-actions{display:flex;flex-wrap:wrap;gap:12px;}
.hcc-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;letter-spacing:.02em;padding:14px 24px;border-radius:var(--radius-pill,999px);text-decoration:none;transition:transform var(--tr-base,.2s),box-shadow var(--tr-base,.2s),background var(--tr-base,.2s);}
.hcc-btn:hover{transform:translateY(-2px);}
.hcc-btn-wa{background:#25D366;color:#0a2e16;}
.hcc-btn-line{background:#06C755;color:#062e16;}
.hcc-btn-call{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);}
.hcc-btn-call:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.hcc-trust{position:relative;z-index:1;list-style:none;margin:34px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.hcc-trust li{display:flex;flex-direction:column;gap:3px;}
.hcc-trust strong{font-family:var(--font-display);font-size:1.05rem;color:#fff;}
.hcc-trust span{font-size:.82rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.04em;}
@media (max-width:640px){.hcc-actions .hcc-btn{flex:1 1 100%;}.hcc-trust{grid-template-columns:repeat(2,1fr);gap:16px 14px;}.hcc-sub{font-size:1rem;}}
/* ===== SINGLE CAR — WHY BUY TRUST BLOCK ===== */
.single-trust{margin-top:18px;padding:18px 18px 6px;background:var(--off-white,#fafafa);border:1px solid var(--gray-200,#e5e5e5);border-radius:var(--radius-md,12px);}
.single-trust-h{font-family:var(--font-display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-700,#444);margin:0 0 12px;}
.single-trust-list{list-style:none;margin:0;padding:0;}
.single-trust-list li{display:flex;gap:10px;align-items:flex-start;padding:0 0 14px;}
.single-trust-list .st-ic{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--green,#16a34a);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.single-trust-list strong{display:block;font-family:var(--font-display);font-size:.92rem;color:var(--black,#111);line-height:1.25;}
.single-trust-list em{display:block;font-style:normal;font-size:.82rem;color:var(--gray-500,#777);line-height:1.4;margin-top:2px;}
/* ===== NAV NO-WRAP FIX (keep menu items on one line) ===== */
.main-nav .nav-item > a{white-space:nowrap;}
.main-nav > ul,.main-nav ul.nav,.main-nav{flex-wrap:nowrap;}
/* ===== HERO RATING + SEARCH (visible redesign) ===== */
.hero-rating{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);padding:7px 14px;border-radius:var(--radius-pill,999px);margin-bottom:18px;}
.hero-rating .hr-stars{color:var(--amber,#FFB800);letter-spacing:2px;font-size:.95rem;}
.hero-rating .hr-text{color:rgba(255,255,255,.92);font-size:.82rem;}
.hero-rating .hr-text strong{color:#fff;font-family:var(--font-display);}
.hero-rating::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 7px;box-shadow:0 0 0 3px rgba(255,179,0,0.18);}
.hero-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;background:rgba(255,255,255,.96);border-radius:var(--radius-md,12px);padding:16px;margin:26px 0 28px;box-shadow:var(--shadow-lg);max-width:720px;}
.hero-search .hs-field{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;min-width:0;}
.hero-search .hs-field label{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500,#777);}
.hero-search .hs-field select{appearance:none;-webkit-appearance:none;width:100%;padding:11px 30px 11px 12px;border:1px solid var(--gray-200,#e2e2e2);border-radius:var(--radius-sm,8px);background:#fff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2012%2012%27%3E%3Cpath%20fill%3D%27%23999%27%20d%3D%27M3%204.5L6%208l3-3.5z%27/%3E%3C/svg%3E") no-repeat right 10px center;font-size:.92rem;color:var(--black,#111);cursor:pointer;}
.hero-search .hs-field select:focus{outline:none;border-color:var(--red,#CC0000);box-shadow:0 0 0 3px rgba(204,0,0,.12);}
.hero-search .hs-btn{flex:1 1 130px;background:var(--red,#CC0000);color:#fff;border:0;font-family:var(--font-display);font-weight:700;letter-spacing:.02em;padding:13px 22px;border-radius:var(--radius-sm,8px);cursor:pointer;transition:background var(--tr-base,.2s),transform var(--tr-base,.2s);white-space:nowrap;}
.hero-search .hs-btn:hover{background:#a30000;transform:translateY(-1px);}
@media (max-width:640px){.hero-search{padding:14px;gap:10px;}.hero-search .hs-field{flex:1 1 100%;}.hero-search .hs-btn{flex:1 1 100%;}.hero-rating{margin-bottom:14px;}.hero-rating .hr-text{font-size:.76rem;}}
/* ===== BROWSE BY TYPE BAND ===== */
.browse-by-type{padding:42px 0;background:var(--off-white,#fafafa);border-bottom:1px solid var(--gray-200,#ececec);}
.bbt-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;}
.bbt-title{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--black,#111);margin:0;}
.bbt-all{font-weight:700;color:var(--red,#CC0000);text-decoration:none;font-size:.9rem;white-space:nowrap;}
.bbt-all:hover{text-decoration:underline;}
.bbt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.bbt-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:22px 20px;background:#fff;border:1px solid var(--gray-200,#e5e5e5);border-radius:var(--radius-md,14px);text-decoration:none;transition:transform var(--tr-base,.2s),box-shadow var(--tr-base,.2s),border-color var(--tr-base,.2s);}
.bbt-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--red,#CC0000);}
.bbt-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:rgba(204,0,0,.08);color:var(--red,#CC0000);margin-bottom:8px;}
.bbt-ic svg{width:24px;height:24px;}
.bbt-label{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--black,#111);}
.bbt-sub{font-size:.82rem;color:var(--gray-500,#777);}
@media (max-width:760px){.bbt-grid{grid-template-columns:repeat(2,1fr);gap:12px;}.bbt-tile{padding:18px 16px;}}
/* ===== REVIEWS RATING HEADER (visible 5.0 stars) ===== */
.reviews-rating-head{display:inline-flex;align-items:center;gap:18px;margin:0 auto 34px;padding:18px 28px;background:#fff;border:1px solid var(--gray-200,#e8e8e8);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-md);}
.reviews-section .section-head.center + .reviews-rating-head,.reviews-rating-head{display:flex;width:max-content;max-width:100%;}
.reviews-section{text-align:center;}
.reviews-rating-head .rrh-score{font-family:var(--font-display);font-weight:800;font-size:3rem;line-height:1;color:var(--black,#111);}
.reviews-rating-head .rrh-meta{text-align:left;}
.reviews-rating-head .rrh-stars{color:var(--amber,#FFB800);font-size:1.4rem;letter-spacing:3px;line-height:1.1;}
.reviews-rating-head .rrh-count{font-size:.86rem;color:var(--gray-500,#777);margin-top:4px;}
.reviews-grid{text-align:left;}
@media (max-width:640px){.reviews-rating-head{gap:14px;padding:14px 18px;}.reviews-rating-head .rrh-score{font-size:2.4rem;}.reviews-rating-head .rrh-stars{font-size:1.2rem;}}
/* ===== PAGE-HEAD POLISH (premium dark header bar) ===== */
.page-head{position:relative;overflow:hidden;background:linear-gradient(120deg,#141414 0%,#1f0a0a 70%,#3a0c0c 100%)!important;border-bottom:0!important;padding:var(--s-7,40px) 0 var(--s-7,40px)!important;}
.page-head::before{content:"";position:absolute;top:-50%;right:-8%;width:48%;height:200%;background:radial-gradient(circle,rgba(204,0,0,.30),transparent 70%);pointer-events:none;}
.page-head::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--red,#CC0000);}
.page-head .container{position:relative;z-index:1;}
.page-head .eyebrow,.page-head .ym-stock-eyebrow{color:var(--amber,#FFB800)!important;}
.page-head h1,.page-head .ym-stock-title,.page-head .display-l{color:#fff!important;}
.page-head p,.page-head .ym-stock-sub{color:rgba(255,255,255,.82)!important;}
.page-head .crumbs,.page-head .crumbs a{color:rgba(255,255,255,.7)!important;}
.page-head .crumbs a:hover{color:#fff!important;}
/* ===== HOME TRUST BADGES STRIP ===== */
.home-trust-badges{background:var(--off-white,#f7f7f5);}
.home-trust-badges .htb-title{margin-top:var(--s-2,8px);}
.htb-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:var(--s-4,16px);margin-top:var(--s-6,24px);
}
.htb-card{
background:#fff;border:1px solid var(--gray-200,#e6e6e6);
border-radius:var(--radius-lg,16px);padding:var(--s-5,20px);
text-align:center;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06));
transition:transform var(--tr-base,.2s) ease, box-shadow var(--tr-base,.2s) ease;
}
.htb-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md,0 6px 18px rgba(0,0,0,.1));}
.htb-ico{
width:54px;height:54px;margin:0 auto var(--s-3,12px);
display:flex;align-items:center;justify-content:center;
border-radius:50%;background:rgba(204,0,0,.08);color:var(--red,#CC0000);
}
.htb-ico svg{width:28px;height:28px;}
.htb-card h3{font-family:var(--font-display,inherit);font-size:1.05rem;margin:0 0 var(--s-2,8px);color:var(--black,#111);}
.htb-card p{font-size:.9rem;line-height:1.5;color:var(--gray-700,#555);margin:0;}
.htb-creds{
list-style:none;padding:0;margin:var(--s-6,24px) 0 0;
display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4,16px);
border-top:1px solid var(--gray-200,#e6e6e6);padding-top:var(--s-5,20px);
}
.htb-creds li{text-align:center;}
.htb-creds strong{display:block;font-family:var(--font-display,inherit);font-size:1.15rem;color:var(--black,#111);}
.htb-creds span{display:block;font-size:.78rem;color:var(--gray-500,#888);margin-top:2px;}
@media (max-width:860px){
.htb-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
.htb-creds{grid-template-columns:repeat(2,1fr);gap:var(--s-3,12px);}
}
@media (max-width:420px){
.htb-grid{grid-template-columns:1fr;}
.htb-card{text-align:left;display:flex;gap:var(--s-3,12px);align-items:flex-start;}
.htb-card .htb-ico{margin:0;flex:0 0 auto;width:44px;height:44px;}
.htb-card .htb-ico svg{width:22px;height:22px;}
}
/* ===== END HOME TRUST BADGES STRIP ===== */
/* ===== EXPORT PROCESS TIMELINE UPGRADE ===== */
.export-process-title{
text-align:center;font-size:1.7rem;margin-bottom:var(--s-7,32px);
}
.export-steps{
display:grid;grid-template-columns:repeat(4,1fr);
gap:var(--s-4,16px);position:relative;margin-bottom:var(--s-7,32px);
}
/* connecting progress line behind the number badges (desktop) */
.export-steps::before{
content:"";position:absolute;top:27px;left:12%;right:12%;height:3px;
background:linear-gradient(90deg,rgba(204,0,0,.15),var(--red,#CC0000),rgba(204,0,0,.15));
z-index:0;border-radius:2px;
}
.export-step{
position:relative;z-index:1;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.10);
border-radius:var(--radius-lg,16px);
padding:var(--s-5,20px) var(--s-4,16px);
text-align:center;
transition:transform var(--tr-base,.2s) ease, border-color var(--tr-base,.2s) ease, background var(--tr-base,.2s) ease;
}
.export-step:hover{
transform:translateY(-4px);
border-color:rgba(204,0,0,.5);
background:rgba(255,255,255,.06);
}
.export-step-num{
width:54px;height:54px;border-radius:50%;
background:linear-gradient(145deg,#e11,var(--red,#CC0000));
color:#fff;font-weight:800;font-size:1.4rem;
display:flex;align-items:center;justify-content:center;
margin:0 auto var(--s-3,12px);
box-shadow:0 6px 22px rgba(204,0,0,.55), 0 0 0 6px rgba(10,10,10,1), 0 0 0 8px rgba(204,0,0,.25);
border:2px solid rgba(255,255,255,.18);
}
.export-step h4{font-size:1.08rem;margin:0 0 8px;color:#fff;}
.export-step p{color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.55;margin:0;}
/* tablet: 2 columns, line spans each row pair */
@media (max-width:900px){
.export-steps{grid-template-columns:repeat(2,1fr);}
.export-steps::before{display:none;}
}
/* mobile: vertical timeline with a left connecting line */
@media (max-width:560px){
.export-steps{grid-template-columns:1fr;gap:0;padding-left:8px;}
.export-steps::before{
display:block;content:"";top:24px;bottom:24px;left:35px;right:auto;
width:3px;height:auto;
background:linear-gradient(180deg,rgba(204,0,0,.15),var(--red,#CC0000),rgba(204,0,0,.15));
}
.export-step{
text-align:left;display:flex;gap:var(--s-4,16px);align-items:flex-start;
background:transparent;border:0;border-radius:0;padding:var(--s-4,16px) 0;
}
.export-step:hover{transform:none;background:transparent;}
.export-step-num{
margin:0;flex:0 0 auto;width:46px;height:46px;font-size:1.2rem;
box-shadow:0 4px 14px rgba(204,0,0,.5), 0 0 0 5px rgba(10,10,10,1);
}
.export-step h4{margin-top:6px;}
}
/* ===== END EXPORT PROCESS TIMELINE UPGRADE ===== */
/* ===== YM CAR STICKY PRICE+CTA ===== */
.ym-car-sticky{display:none;}
@media (max-width:767px){
.ym-car-sticky{
display:flex;align-items:center;gap:var(--s-3,12px);
position:fixed;left:0;right:0;
bottom:calc(58px + env(safe-area-inset-bottom,0px));
z-index:935;
background:#fff;
border-top:1px solid var(--gray-100,#eee);
box-shadow:0 -6px 20px rgba(0,0,0,.12);
padding:8px 12px;
transform:translateY(130%);
transition:transform .28s cubic-bezier(.4,0,.2,1);
will-change:transform;
}
.ym-car-sticky.show{transform:translateY(0);}
.ycs-info{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
.ycs-title{
font-family:var(--font-display,inherit);font-weight:700;font-size:.78rem;
color:var(--black,#111);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ycs-price{
font-family:var(--font-display,inherit);font-weight:800;font-size:1.05rem;
color:var(--red,#CC0000);line-height:1.1;
}
.ycs-actions{display:flex;gap:8px;flex:0 0 auto;}
.ycs-btn{
display:flex;align-items:center;justify-content:center;gap:6px;
border-radius:var(--radius-pill,999px);text-decoration:none;
font-family:var(--font-display,inherit);font-weight:800;font-size:.85rem;
transition:transform .15s ease, box-shadow .15s ease;
}
.ycs-btn:active{transform:scale(.96);}
.ycs-btn svg{width:20px;height:20px;flex:0 0 auto;}
.ycs-call{
width:46px;height:46px;
color:var(--red,#CC0000);background:rgba(204,0,0,.10);
}
.ycs-inquire{
padding:0 16px;height:46px;color:#fff;
background:linear-gradient(145deg,#2bd06f,#1faa55);
box-shadow:0 6px 18px rgba(31,170,85,.45);white-space:nowrap;
}
}
@media (max-width:360px){
.ycs-inquire span{display:none;}
.ycs-inquire{width:46px;padding:0;}
}
/* ===== END YM CAR STICKY PRICE+CTA ===== */
/* ===== GALLERY POLISH — COLLAPSE + VIEW-ALL ===== */
.gallery .thumb.ym-thumb-hidden{display:none;}
.gallery .thumb.ym-thumb-more{position:relative;opacity:1;}
.gallery .thumb.ym-thumb-more img{filter:brightness(.45);}
.ym-thumb-more-ov{
position:absolute;inset:0;z-index:3;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;
color:#fff;font-family:var(--font-display,inherit);font-weight:800;
font-size:1.05rem;line-height:1;text-align:center;
background:rgba(0,0,0,.30);border-radius:var(--radius-sm,6px);
transition:background var(--tr-fast,.15s) ease;
}
.ym-thumb-more-ov:hover{background:rgba(204,0,0,.45);}
.ym-thumb-more-ov small{
display:block;margin-top:4px;font-size:.6rem;font-weight:600;
letter-spacing:.03em;opacity:.95;white-space:nowrap;
}
/* smoother main photo presentation */
.gallery .main-photo img{transition:opacity .25s ease;}
.gallery .main-photo{box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08));}
.gallery .thumb{transition:opacity var(--tr-fast,.15s) ease, transform var(--tr-fast,.15s) ease, border-color var(--tr-fast,.15s) ease;}
.gallery .thumb:hover{transform:translateY(-2px);}
/* ===== END GALLERY POLISH ===== */
/* ===== CAR ACCORDION PREMIUM POLISH ===== */
.detail-block.ym-acc{
background:#fff;
border:1px solid var(--gray-200,#e6e6e6);
border-radius:var(--radius-lg,16px);
overflow:hidden;
margin-bottom:var(--s-3,12px);
box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06));
transition:box-shadow var(--tr-base,.2s) ease, border-color var(--tr-base,.2s) ease;
}
.detail-block.ym-acc:hover{box-shadow:var(--shadow-md,0 6px 18px rgba(0,0,0,.08));}
.detail-block.ym-acc.open{border-color:rgba(204,0,0,.35);box-shadow:0 8px 24px rgba(204,0,0,.10);}
.ym-acc .ym-acc-header{
background:#fff;border-left:0;
padding:18px 20px;font-size:1.05rem;
position:relative;
}
.ym-acc .ym-acc-header::before{
content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
background:var(--red,#CC0000);border-radius:0 4px 4px 0;
transition:top .25s ease, bottom .25s ease;
}
.ym-acc.open .ym-acc-header{background:linear-gradient(90deg,rgba(204,0,0,.05),transparent);}
.ym-acc .ym-acc-header:hover{background:rgba(204,0,0,.03);}
.ym-acc-icon{
width:28px;height:28px;
background:linear-gradient(145deg,#e11,var(--red,#CC0000));
box-shadow:0 3px 10px rgba(204,0,0,.35);
}
.ym-acc.open .ym-acc-panel{padding-top:4px;padding-bottom:20px;}
/* quick-specs refinement */
.quick-specs{gap:var(--s-2,8px);}
.quick-specs .qs{
background:var(--off-white,#f7f7f5);
border:1px solid var(--gray-100,#eee);
border-radius:var(--radius-md,10px);
padding:10px 12px;
}
.quick-specs .qs .l{
display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--gray-500,#888);margin-bottom:3px;font-family:var(--font-mono,monospace);
}
.quick-specs .qs .v{
display:block;font-family:var(--font-display,inherit);font-weight:700;
font-size:.98rem;color:var(--black,#111);line-height:1.2;
}
/* ===== END CAR ACCORDION PREMIUM POLISH ===== */
/* ===== STOCK PAGE POLISH — COUNT + TOOLBAR ===== */
.ym-stock-hero-stat{
display:inline-flex;flex-direction:column;align-items:center;
margin-top:var(--s-4,16px);
padding:var(--s-3,12px) var(--s-6,24px);
background:rgba(204,0,0,.14);
border:1px solid rgba(204,0,0,.45);
border-radius:var(--radius-lg,16px);
backdrop-filter:blur(4px);
box-shadow:0 8px 26px rgba(204,0,0,.22);
}
.ym-stock-count{line-height:1;}
.ym-stock-count #ym-stock-count, .ym-stock-count > span{
font-family:var(--font-display,inherit);font-weight:800;
font-size:2.6rem;color:#fff;letter-spacing:-.02em;
text-shadow:0 2px 14px rgba(204,0,0,.6);
}
.ym-stock-count-label{
margin-top:4px;font-family:var(--font-mono,monospace);
font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.85);
}
/* toolbar refinement */
.stock-toolbar{box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06));}
.stock-result-label{font-size:.95rem;color:var(--gray-700,#555);}
.stock-result-label strong{
font-family:var(--font-display,inherit);font-size:1.15rem;
color:var(--red,#CC0000);font-weight:800;margin-right:4px;
}
.sort-wrap{color:var(--gray-700,#555);}
.sort-wrap select.filter-input{
font-weight:700;border:1px solid var(--gray-200,#e6e6e6);
background:#fff;border-radius:var(--radius-pill,999px);
padding:.5rem 2.2rem .5rem 1rem;cursor:pointer;
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='%23CC0000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right .9rem center;
-webkit-appearance:none;appearance:none;
transition:border-color var(--tr-fast,.15s) ease, box-shadow var(--tr-fast,.15s) ease;
}
.sort-wrap select.filter-input:hover{border-color:var(--red,#CC0000);}
.sort-wrap select.filter-input:focus{outline:none;border-color:var(--red,#CC0000);box-shadow:0 0 0 3px rgba(204,0,0,.15);}
@media (max-width:560px){
.ym-stock-count #ym-stock-count, .ym-stock-count > span{font-size:2.1rem;}
.ym-stock-hero-stat{padding:10px 18px;}
}
/* ===== END STOCK PAGE POLISH ===== */
/* ===== HERO TRUST MICROCOPY ===== */
.hero-trust-micro{
list-style:none;padding:0;margin:var(--s-4,16px) 0 0;
display:flex;flex-wrap:wrap;gap:var(--s-2,8px) var(--s-5,20px);
}
.hero-trust-micro li{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--font-display,inherit);font-weight:600;
font-size:.85rem;color:rgba(255,255,255,.92);
white-space:nowrap;
}
.hero-trust-micro li svg{
width:16px;height:16px;flex:0 0 auto;
color:#fff;background:var(--red,#CC0000);
border-radius:50%;padding:3px;box-sizing:border-box;
box-shadow:0 2px 8px rgba(204,0,0,.5);
}
@media (max-width:560px){
.hero-trust-micro{gap:8px 16px;}
.hero-trust-micro li{font-size:.8rem;}
}
@media (max-width:380px){
.hero-trust-micro li{white-space:normal;}
}
/* ===== END HERO TRUST MICROCOPY ===== */
/* ===== FOOTER TRUST BAND ===== */
.footer-trust-band{
border-bottom:1px solid rgba(255,255,255,.10);
padding:var(--s-6,24px) 0;
margin-bottom:var(--s-7,32px);
}
.footer-trust-band .ftb-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:var(--s-5,20px);
}
.footer-trust-band .ftb-item{
display:flex;align-items:center;gap:var(--s-3,12px);
}
.footer-trust-band .ftb-ico{
flex:0 0 auto;width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(204,0,0,.15);color:#ff5a5a;
border:1px solid rgba(204,0,0,.35);
}
.footer-trust-band .ftb-ico svg{width:22px;height:22px;}
.footer-trust-band .ftb-txt{display:flex;flex-direction:column;min-width:0;}
.footer-trust-band .ftb-txt strong{
font-family:var(--font-display,inherit);font-weight:700;
font-size:.95rem;color:#fff;line-height:1.2;
}
.footer-trust-band .ftb-txt small{
font-size:.78rem;color:rgba(255,255,255,.6);margin-top:2px;line-height:1.3;
}
@media (max-width:860px){
.footer-trust-band .ftb-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-4,16px);}
}
@media (max-width:480px){
.footer-trust-band{padding:var(--s-5,20px) 0;margin-bottom:var(--s-6,24px);}
.footer-trust-band .ftb-grid{grid-template-columns:1fr;gap:var(--s-3,12px);}
.footer-trust-band .ftb-ico{width:38px;height:38px;}
.footer-trust-band .ftb-ico svg{width:19px;height:19px;}
}
/* ===== END FOOTER TRUST BAND ===== */
/* ===== HOME FAQ ACCORDION ===== */
.home-faq{background:var(--off-white,#f7f7f5);}
.home-faq .hf-sub{margin-top:var(--s-2,8px);color:var(--gray-700,#555);}
.hf-list{
max-width:820px;margin:var(--s-6,24px) auto 0;
display:flex;flex-direction:column;gap:var(--s-3,12px);
}
.hf-item{
background:#fff;border:1px solid var(--gray-200,#e6e6e6);
border-radius:var(--radius-lg,16px);overflow:hidden;
transition:box-shadow var(--tr-base,.2s) ease, border-color var(--tr-base,.2s) ease;
}
.hf-item[open]{border-color:rgba(204,0,0,.35);box-shadow:0 8px 24px rgba(204,0,0,.08);}
.hf-item summary{
list-style:none;cursor:pointer;user-select:none;
display:flex;align-items:center;justify-content:space-between;gap:var(--s-4,16px);
padding:18px 20px;font-family:var(--font-display,inherit);font-weight:700;
font-size:1.02rem;color:var(--black,#111);
transition:background var(--tr-fast,.15s) ease;
}
.hf-item summary::-webkit-details-marker{display:none;}
.hf-item summary:hover{background:rgba(204,0,0,.03);}
.hf-plus{
position:relative;flex:0 0 auto;width:24px;height:24px;border-radius:50%;
background:linear-gradient(145deg,#e11,var(--red,#CC0000));
box-shadow:0 3px 10px rgba(204,0,0,.35);
transition:transform .25s ease;
}
.hf-plus::before,.hf-plus::after{
content:"";position:absolute;top:50%;left:50%;
background:#fff;border-radius:2px;transform:translate(-50%,-50%);
}
.hf-plus::before{width:11px;height:2.4px;}
.hf-plus::after{width:2.4px;height:11px;transition:opacity .25s ease;}
.hf-item[open] .hf-plus{transform:rotate(180deg);}
.hf-item[open] .hf-plus::after{opacity:0;}
.hf-answer{padding:0 20px 18px;}
.hf-answer p{margin:0;color:var(--gray-700,#555);line-height:1.6;font-size:.95rem;}
.hf-cta{
max-width:820px;margin:var(--s-6,24px) auto 0;text-align:center;
}
.hf-cta p{margin:0 0 var(--s-3,12px);font-weight:600;color:var(--black,#111);}
.hf-cta-btns{display:inline-flex;gap:var(--s-3,12px);flex-wrap:wrap;justify-content:center;}
@media (max-width:480px){
.hf-item summary{font-size:.95rem;padding:16px;}
.hf-answer{padding:0 16px 16px;}
.hf-cta-btns{width:100%;}
.hf-cta-btns .btn{flex:1 1 auto;}
}
/* ===== END HOME FAQ ACCORDION ===== */
/* ===== HOME DESTINATIONS BAND ===== */
.home-destinations .dest-sub{max-width:680px;margin:var(--s-2,8px) auto 0;color:var(--gray-700,#555);}
.dest-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:var(--s-4,16px);margin-top:var(--s-6,24px);
}
.dest-tile{
display:flex;align-items:center;gap:var(--s-3,12px);
padding:var(--s-4,16px);text-decoration:none;
background:#fff;border:1px solid var(--gray-200,#e6e6e6);
border-radius:var(--radius-lg,16px);
box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06));
transition:transform var(--tr-base,.2s) ease, box-shadow var(--tr-base,.2s) ease, border-color var(--tr-base,.2s) ease;
}
.dest-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md,0 6px 18px rgba(0,0,0,.1));border-color:rgba(204,0,0,.4);}
.dest-flag{
flex:0 0 auto;font-size:1.9rem;line-height:1;
width:48px;height:48px;display:flex;align-items:center;justify-content:center;
background:var(--off-white,#f7f7f5);border-radius:12px;
}
.dest-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
.dest-txt strong{font-family:var(--font-display,inherit);font-weight:700;font-size:1rem;color:var(--black,#111);line-height:1.2;}
.dest-txt small{font-size:.78rem;color:var(--gray-500,#888);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dest-arrow{flex:0 0 auto;color:var(--red,#CC0000);font-weight:800;font-size:1.1rem;transition:transform var(--tr-fast,.15s) ease;}
.dest-tile:hover .dest-arrow{transform:translateX(4px);}
.dest-tile-all{background:linear-gradient(135deg,#fff,#fdf3f3);border-color:rgba(204,0,0,.25);}
.dest-note{
text-align:center;margin:var(--s-5,20px) auto 0;max-width:640px;
font-size:.9rem;color:var(--gray-700,#555);
}
@media (max-width:900px){
.dest-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
.dest-grid{grid-template-columns:1fr;gap:var(--s-3,12px);}
.dest-flag{width:42px;height:42px;font-size:1.6rem;}
}
/* ===== END HOME DESTINATIONS BAND ===== */
/* === BREADCRUMB NAV === */
.ym-breadcrumb{background:var(--off-white,#f7f7f5);border-bottom:1px solid var(--gray-200,#e6e6e6);font-family:var(--font-body,inherit);}
.ym-breadcrumb .ym-bc-inner{max-width:1200px;margin:0 auto;padding:11px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13px;line-height:1.4;}
.ym-breadcrumb .ym-bc-link{color:var(--gray-700,#555);text-decoration:none;font-weight:600;transition:color var(--tr-fast,.15s) ease;letter-spacing:.01em;}
.ym-breadcrumb .ym-bc-link:hover{color:var(--red,#CC0000);text-decoration:underline;}
.ym-breadcrumb .ym-bc-sep{color:var(--gray-500,#aaa);font-weight:400;user-select:none;}
.ym-breadcrumb .ym-bc-cur{color:var(--black,#111);font-weight:700;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:767px){
.ym-breadcrumb .ym-bc-inner{padding:9px 16px;font-size:12px;gap:6px;}
.ym-breadcrumb .ym-bc-cur{max-width:54vw;}
}
/* === END BREADCRUMB NAV === */
/* === RECENTLY VIEWED === */
.ym-recent{padding:32px 0 8px;}
.ym-recent .container{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px;}
.ym-recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;}
.ym-recent-title{font-family:var(--font-display,inherit);font-size:22px;font-weight:800;margin:0;color:var(--black,#111);position:relative;padding-left:14px;}
.ym-recent-title::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:var(--red,#CC0000);}
.ym-recent-clear{background:none;border:1px solid var(--gray-200,#e2e2e2);color:var(--gray-700,#555);font-size:12px;font-weight:600;padding:6px 14px;border-radius:var(--radius-pill,999px);cursor:pointer;transition:all var(--tr-fast,.15s) ease;}
.ym-recent-clear:hover{border-color:var(--red,#CC0000);color:var(--red,#CC0000);}
.ym-recent-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.ym-recent-row::-webkit-scrollbar{height:6px;}
.ym-recent-row::-webkit-scrollbar-thumb{background:var(--gray-200,#ddd);border-radius:3px;}
.ym-recent-card{flex:0 0 180px;scroll-snap-align:start;background:#fff;border:1px solid var(--gray-100,#eee);border-radius:var(--radius-md,12px);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06));transition:transform var(--tr-base,.2s) ease,box-shadow var(--tr-base,.2s) ease;}
.ym-recent-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.12));}
.ym-recent-photo{aspect-ratio:4/3;background:var(--gray-50,#f4f4f4);overflow:hidden;}
.ym-recent-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.ym-recent-body{padding:10px 12px 12px;}
.ym-recent-name{font-size:13px;font-weight:700;line-height:1.35;color:var(--black,#111);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px;}
.ym-recent-price{margin-top:6px;font-size:14px;font-weight:800;color:var(--red,#CC0000);}
@media (max-width:767px){
.ym-recent{padding:24px 0 4px;}
.ym-recent .container{padding-left:16px;padding-right:16px;}
.ym-recent-title{font-size:19px;}
.ym-recent-card{flex:0 0 150px;}
}
/* === END RECENTLY VIEWED === */
/* === HOW TO BUY STEPS === */
.ym-buysteps{margin:28px 0;background:linear-gradient(180deg,#fafafa 0%,#f4f4f3 100%);border:1px solid var(--gray-100,#ececec);border-radius:var(--radius-lg,16px);overflow:hidden;}
.ym-bs-inner{padding:30px 26px 26px;}
.ym-bs-head{text-align:center;max-width:620px;margin:0 auto 26px;}
.ym-bs-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--red,#CC0000);text-transform:uppercase;margin-bottom:8px;}
.ym-bs-title{font-family:var(--font-display,inherit);font-size:25px;font-weight:800;line-height:1.18;margin:0 0 8px;color:var(--black,#111);}
.ym-bs-sub{font-size:14px;line-height:1.55;color:var(--gray-700,#555);margin:0;}
.ym-bs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ym-bs-card{position:relative;background:#fff;border:1px solid var(--gray-100,#eee);border-radius:var(--radius-md,12px);padding:24px 18px 20px;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.05));transition:transform var(--tr-base,.2s) ease,box-shadow var(--tr-base,.2s) ease;}
.ym-bs-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md,0 10px 28px rgba(0,0,0,.1));}
.ym-bs-num{position:absolute;top:-12px;left:18px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#CC0000,#a30000);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(204,0,0,.35);}
.ym-bs-ico{width:40px;height:40px;color:var(--red,#CC0000);margin:4px 0 14px;}
.ym-bs-ico svg{width:100%;height:100%;display:block;}
.ym-bs-t{font-size:16px;font-weight:800;margin:0 0 7px;color:var(--black,#111);}
.ym-bs-d{font-size:13px;line-height:1.55;color:var(--gray-700,#555);margin:0;}
.ym-bs-note{text-align:center;font-size:13px;color:var(--gray-700,#555);margin:22px 0 0;}
@media (max-width:900px){ .ym-bs-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:767px){
.ym-bs-inner{padding:26px 16px 20px;}
.ym-bs-title{font-size:21px;}
.ym-bs-grid{gap:14px 12px;}
.ym-bs-card{padding:22px 14px 16px;}
}
@media (max-width:380px){ .ym-bs-grid{grid-template-columns:1fr;} }
/* === END HOW TO BUY STEPS === */
/* === COST NOTE === */
.ym-costnote{margin:14px 0 4px;border:1px solid var(--gray-100,#ececec);border-radius:var(--radius-md,12px);background:#fff;overflow:hidden;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.05));}
.ym-cn-toggle{width:100%;border:0;background:linear-gradient(180deg,#fff,#fafafa);padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:left;}
.ym-cn-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;}
.ym-cn-badge{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--red,#CC0000);background:rgba(204,0,0,.08);border:1px solid rgba(204,0,0,.18);padding:3px 8px;border-radius:var(--radius-pill,999px);white-space:nowrap;}
.ym-cn-total{font-size:19px;font-weight:800;color:var(--black,#111);font-family:var(--font-display,inherit);}
.ym-cn-usd{font-size:13px;font-weight:600;color:var(--gray-500,#888);}
.ym-cn-caret{flex:0 0 auto;width:11px;height:11px;border-right:2px solid var(--gray-500,#999);border-bottom:2px solid var(--gray-500,#999);transform:rotate(45deg);transition:transform var(--tr-base,.2s) ease;margin-top:-3px;}
.ym-costnote.open .ym-cn-caret{transform:rotate(-135deg);margin-top:3px;}
.ym-cn-body{max-height:0;overflow:hidden;transition:max-height var(--tr-base,.25s) ease;padding:0 16px;}
.ym-costnote.open .ym-cn-body{max-height:420px;padding:4px 16px 16px;}
.ym-cn-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--gray-100,#eee);font-size:13.5px;}
.ym-cn-l{color:var(--gray-700,#555);line-height:1.4;}
.ym-cn-v{font-weight:700;color:var(--black,#111);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ym-cn-sum{border-bottom:0;border-top:2px solid var(--gray-100,#eee);margin-top:2px;padding-top:12px;}
.ym-cn-sum .ym-cn-l{font-weight:800;color:var(--black,#111);}
.ym-cn-sum .ym-cn-v{color:var(--red,#CC0000);font-size:16px;font-weight:800;}
.ym-cn-note{font-size:11.5px;line-height:1.5;color:var(--gray-500,#888);margin:12px 0 0;}
@media (max-width:767px){
.ym-cn-total{font-size:18px;}
.ym-cn-row{font-size:13px;}
}
/* === END COST NOTE === */
/* === EXPORT WORLD HUB === */
.ymw-export{font-family:var(--font-body,system-ui,sans-serif);color:#111;}.ymw-export *{box-sizing:border-box;}.ymw-wrap{max-width:1140px;margin:0 auto;padding:0 20px;}.ymw-hero{background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 60%,#3a0000 100%);color:#fff;padding:48px 0 40px;}.ymw-hero-in{max-width:1140px;margin:0 auto;padding:0 20px;}.ymw-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;color:#ff5a5a;margin-bottom:14px;}.ymw-hero h1{font-family:var(--font-display,inherit);font-size:34px;line-height:1.12;font-weight:800;margin:0 0 14px;color:#fff;}.ymw-lead{font-size:15px;line-height:1.6;color:#d6d6d6;margin:0 0 22px;max-width:560px;}.ymw-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;}.ymw-hero-trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:#bdbdbd;}.ymw-hero-trust span{white-space:nowrap;}.ymw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14.5px;padding:13px 22px;border-radius:999px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;cursor:pointer;border:0;}.ymw-btn:hover{transform:translateY(-2px);}.ymw-btn-stock{background:#fff;color:#0a0a0a;}.ymw-btn-wa{background:#25D366;color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.35);}.ymw-btn-line{background:#06C755;color:#fff;}.ymw-btn-mail{background:#CC0000;color:#fff;}.ymw-btn-outline{background:transparent;color:#CC0000;border:2px solid #CC0000;}.ymw-btn-outline:hover{background:#CC0000;color:#fff;}.ymw-sec{padding:44px 0;}.ymw-alt{background:#f7f7f5;}.ymw-head{text-align:center;max-width:620px;margin:0 auto 30px;}.ymw-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#CC0000;text-transform:uppercase;margin-bottom:10px;}.ymw-kicker svg{width:15px;height:15px;}.ymw-head h2{font-family:var(--font-display,inherit);font-size:27px;font-weight:800;margin:0 0 8px;line-height:1.2;}.ymw-head p{font-size:14.5px;line-height:1.55;color:#555;margin:0;}.ymw-center{text-align:center;margin-top:24px;}.ymw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}.ymw-card{position:relative;background:#fff;border:1px solid #eee;border-radius:14px;padding:26px 18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:transform .2s ease,box-shadow .2s ease;}.ymw-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.1);}.ymw-num{position:absolute;top:-12px;left:18px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#CC0000,#a30000);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(204,0,0,.35);}.ymw-ico{width:38px;height:38px;color:#CC0000;margin:4px 0 12px;}.ymw-ico svg{width:100%;height:100%;}.ymw-card h3{font-size:16px;font-weight:800;margin:0 0 6px;}.ymw-card p{font-size:13px;line-height:1.5;color:#555;margin:0;}.ymw-countries{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}.ymw-country{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;background:#fff;border:1px solid #eee;border-radius:12px;text-decoration:none;color:#111;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}.ymw-country:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.1);border-color:#CC0000;}.ymw-flag{font-size:30px;line-height:1;}.ymw-cname{font-size:13px;font-weight:700;}.ymw-ships{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}.ymw-ship-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.05);}.ymw-ship-card h4{font-size:18px;font-weight:800;margin:0 0 10px;color:#CC0000;}.ymw-ship-card p{font-size:13.5px;line-height:1.55;color:#555;margin:0 0 12px;}.ymw-ship-card ul{margin:0;padding-left:18px;}.ymw-ship-card li{font-size:13px;color:#333;margin-bottom:5px;}.ymw-cif{max-width:640px;margin:0 auto;background:#fff;border:1px solid #eee;border-radius:14px;padding:26px;box-shadow:0 1px 3px rgba(0,0,0,.05);}.ymw-cif>p{font-size:14px;color:#333;margin:0 0 14px;}.ymw-cif-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed #eee;font-size:13.5px;}.ymw-cif-row span:first-child{color:#555;}.ymw-cif-row span:last-child{font-weight:700;color:#CC0000;white-space:nowrap;}.ymw-cif-note{font-size:12.5px;line-height:1.55;color:#888;margin:14px 0 18px;}.ymw-docs{max-width:620px;margin:0 auto;list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}.ymw-docs li{position:relative;padding:13px 14px 13px 40px;background:#fff;border:1px solid #eee;border-radius:10px;font-size:13.5px;font-weight:600;}.ymw-docs li::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:#CC0000;}.ymw-docs li::after{content:"";position:absolute;left:18px;top:calc(50% - 2px);width:5px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg) translateY(-50%);}.ymw-grades{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}.ymw-grade{background:#fff;border:1px solid #eee;border-radius:12px;padding:18px 14px;text-align:center;}.ymw-grade strong{display:block;font-size:16px;color:#CC0000;margin-bottom:5px;}.ymw-grade span{font-size:12px;color:#555;line-height:1.4;}.ymw-faqs{max-width:680px;margin:0 auto;}.ymw-faq{background:#fff;border:1px solid #eee;border-radius:10px;margin-bottom:10px;overflow:hidden;}.ymw-faq summary{list-style:none;cursor:pointer;padding:15px 46px 15px 16px;font-weight:700;font-size:14.5px;position:relative;}.ymw-faq summary::-webkit-details-marker{display:none;}.ymw-faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:linear-gradient(135deg,#CC0000,#a30000);color:#fff;font-weight:700;}.ymw-faq[open] summary::after{content:"\2212";}.ymw-faq-a{padding:0 16px 16px;font-size:13.5px;line-height:1.6;color:#555;}.ymw-cta{background:linear-gradient(135deg,#CC0000,#8a0000);color:#fff;padding:46px 0;text-align:center;}.ymw-cta h2{font-family:var(--font-display,inherit);font-size:26px;font-weight:800;margin:0 0 10px;color:#fff;}.ymw-cta p{font-size:15px;margin:0 0 22px;color:#ffe0e0;}.ymw-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:18px;}.ymw-cta .ymw-btn-mail{background:#fff;color:#CC0000;}.ymw-cta-stock{color:#fff;font-weight:700;text-decoration:underline;font-size:14px;}.ymw-worldtoggle{display:flex;gap:6px;justify-content:center;padding:8px 10px;background:#0a0a0a;}.ymw-wt{flex:1;max-width:170px;border:1px solid #333;background:#1a1a1a;color:#ccc;font-weight:700;font-size:13px;padding:9px;border-radius:999px;cursor:pointer;font-family:var(--font-body,inherit);transition:all .18s ease;}.ymw-wt.on{background:linear-gradient(135deg,#CC0000,#a30000);color:#fff;border-color:#CC0000;}@media(max-width:900px){.ymw-steps{grid-template-columns:repeat(2,1fr);}.ymw-countries{grid-template-columns:repeat(3,1fr);}.ymw-grades{grid-template-columns:repeat(2,1fr);}}@media(max-width:767px){.ymw-hero h1{font-size:27px;}.ymw-hero{padding:38px 0 32px;}.ymw-head h2{font-size:23px;}.ymw-sec{padding:36px 0;}.ymw-ships{grid-template-columns:1fr;}.ymw-docs{grid-template-columns:1fr;}.ymw-hero-cta .ymw-btn{flex:1;min-width:140px;}}@media(max-width:420px){.ymw-countries{grid-template-columns:repeat(2,1fr);}.ymw-steps{gap:14px;}}@media(max-width:360px){.ymw-grades{grid-template-columns:1fr;}}
/* === END EXPORT WORLD HUB === */
/* ===== HOME WORLD SPLITTER ===== */
.ymw-split{margin:1.6rem 0 1.4rem;max-width:560px}
.ymw-split-q{font-family:var(--font-display,inherit);font-weight:800;font-size:1.05rem;letter-spacing:.01em;color:#fff;margin:0 0 .85rem;text-align:left}
.ymw-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.ymw-split-card{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:.95rem .9rem 1rem;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;box-shadow:0 2px 10px rgba(0,0,0,.12);min-width:0}
.ymw-split-card:hover,.ymw-split-card:focus{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.22)}
.ymw-split-flag{font-size:1.8rem;line-height:1;margin-bottom:.5rem}
.ymw-split-title{font-family:var(--font-display,inherit);font-weight:800;font-size:1rem;color:#111;line-height:1.15}
.ymw-split-sub{font-size:.74rem;color:#555;margin-top:.3rem;line-height:1.35}
.ymw-split-go{margin-top:.7rem;font-weight:800;font-size:.82rem;color:#CC0000;letter-spacing:.01em}
.ymw-split-japan .ymw-split-go{color:#111}
.ymw-split-export{border-top:3px solid #CC0000}
.ymw-split-japan{border-top:3px solid #111}
.ymw-split-skip{margin:.85rem 0 0;font-size:.82rem;color:rgba(255,255,255,.85);text-align:left}
.ymw-split-skip a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(min-width:560px){.ymw-split-flag{font-size:2rem}.ymw-split-title{font-size:1.08rem}.ymw-split-sub{font-size:.78rem}}
/* ===== END HOME WORLD SPLITTER ===== */
/* ===== JAPAN WORLD HUB ===== */
.ymw-jp .ymw-hero-jp{background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 60%,#2a0000 100%)}
.ymw-jp .ymw-accent{color:#CC0000}
.ymw-jp .ymw-svcgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}
.ymw-jp .ymw-svc{display:flex;align-items:center;gap:.55rem;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:.7rem .8rem;box-shadow:0 1px 6px rgba(0,0,0,.06);min-width:0}
.ymw-jp .ymw-svc-ico{font-size:1.3rem;line-height:1;flex:0 0 auto}
.ymw-jp .ymw-svc-name{font-size:.82rem;font-weight:700;color:#111;line-height:1.25;word-break:break-word}
.ymw-jp .ymw-btn-line{background:#06C755;color:#fff}
.ymw-jp .ymw-btn-line:hover{filter:brightness(.93)}
@media(min-width:600px){.ymw-jp .ymw-svcgrid{grid-template-columns:1fr 1fr 1fr}.ymw-jp .ymw-svc-name{font-size:.86rem}}
@media(min-width:900px){.ymw-jp .ymw-svcgrid{grid-template-columns:repeat(4,1fr)}}
/* ===== END JAPAN WORLD HUB ===== */
/* ===== CAR PAGE WORLD-AWARE BUY STEPS ===== */
.ymbs-sec{margin:1.6rem 0;padding:1.4rem 1.1rem;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.ymbs-head h2{font-family:var(--font-display,inherit);font-weight:800;font-size:1.25rem;color:#111;margin:0 0 1rem;line-height:1.2}
.ymbs-title-jp,.ymbs-sec.ymbs-is-jp .ymbs-title-export{display:none}
.ymbs-sec.ymbs-is-jp .ymbs-title-jp{display:block}
.ymbs-grid{display:flex;flex-direction:column;gap:.7rem}
.ymbs-jp-steps{display:none}
.ymbs-sec.ymbs-is-jp .ymbs-jp-steps{display:flex}
.ymbs-sec.ymbs-is-jp .ymbs-export-steps{display:none}
.ymbs-step{display:flex;gap:.75rem;align-items:flex-start;background:#fafafa;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:.8rem .85rem;min-width:0}
.ymbs-num{flex:0 0 auto;width:1.7rem;height:1.7rem;border-radius:50%;background:#CC0000;color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.ymbs-body{min-width:0}
.ymbs-body h3{margin:0 0 .2rem;font-size:.95rem;font-weight:800;color:#111;line-height:1.2}
.ymbs-body p{margin:0;font-size:.82rem;color:#555;line-height:1.4;word-break:break-word}
.ymbs-foot{margin:1rem 0 .8rem;font-size:.82rem;color:#666;line-height:1.4}
.ymbs-cta{display:flex;flex-direction:column;gap:.5rem}
.ymbs-btn{display:block;text-align:center;text-decoration:none;font-weight:800;font-size:.9rem;padding:.85rem 1rem;border-radius:12px}
.ymbs-btn-export{background:#CC0000;color:#fff}
.ymbs-btn-jp{background:#06C755;color:#fff;display:none}
.ymbs-sec.ymbs-is-jp .ymbs-btn-jp{display:block}
.ymbs-sec.ymbs-is-jp .ymbs-btn-export{display:none}
@media(min-width:700px){.ymbs-grid{display:grid;grid-template-columns:1fr 1fr}.ymbs-sec.ymbs-is-jp .ymbs-jp-steps{display:grid}.ymbs-cta{flex-direction:row}.ymbs-btn{flex:1}}
/* ===== END CAR PAGE WORLD-AWARE BUY STEPS ===== */
/* ============================================================
GLOBAL POLISH LAYER v1 (additive, mobile-first)
Added by redesign pass — refines spacing, hero density,
card depth, and mobile speed-to-car. Fully reversible.
============================================================ */
/* ---- 1. Card depth + hover lift (premium feel) ---- */
.car-card{
transition: transform .22s ease, box-shadow .22s ease;
will-change: transform;
}
.car-card:hover{
transform: translateY(-4px);
box-shadow: 0 14px 34px rgba(10,10,10,.16);
}
.car-card .photo img{ transition: transform .4s ease; }
.car-card:hover .photo img{ transform: scale(1.04); }
/* ---- 2. Heading rhythm + section spacing (desktop generous) ---- */
@media (min-width: 1025px){
section{ scroll-margin-top: 90px; }
}
/* ---- 3. MOBILE HERO COMPRESSION — speed to the car ---- */
@media (max-width: 768px){
.hero .container,
section.hero .container{ padding-top: 26px; padding-bottom: 26px; }
.hero .fade-up > *{ margin-top: 0; }
.hero .display-xl,
.hero h1.display-xl{
line-height: .98;
margin: 6px 0 10px;
font-size: clamp(40px, 13vw, 60px);
}
.hero .lead{
font-size: 15px;
line-height: 1.5;
margin: 0 0 14px;
max-width: 36ch;
}
.hero .hero-rating{ margin-bottom: 8px; }
.hero .eyebrow{ margin-bottom: 4px; }
/* Splitter stays prominent, just tighter */
.hero .ymw-split{ margin: 4px 0 14px; }
/* Compact the in-hero search into a single tidy row */
.hero .hero-search{ margin: 0 0 10px; gap: 8px; }
/* Push stats below the fold — they're nice-to-have, not blockers */
.hero .hero-stats{
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.12);
}
/* Tighten the Featured-cars section header so cars rise */
section .section-head{ margin-bottom: 14px; }
section .section-head .display-m{
line-height: 1.05;
margin: 4px 0 6px;
font-size: clamp(26px, 7.5vw, 34px);
}
}
/* ---- 4. Even tighter on small phones ---- */
@media (max-width: 430px){
.hero .container,
section.hero .container{ padding-top: 20px; padding-bottom: 20px; }
.hero .display-xl,
.hero h1.display-xl{ font-size: clamp(38px, 12vw, 52px); }
.hero .hero-stats{ display: flex; flex-wrap: wrap; gap: 10px; }
}
/* ---- 5. Button consistency ---- */
.btn-outline{ transition: background .2s ease, color .2s ease, border-color .2s ease; }
/* ===== END GLOBAL POLISH LAYER v1 ===== */
/* ---- 6. AGGRESSIVE mobile hero trim (phones only) ---- */
@media (max-width: 600px){
/* Search form is redundant on phones: splitter + Browse + sticky bar cover it */
.hero .hero-search{ display: none !important; }
/* Trust micro row + stats: keep ONE, drop the heavier stats above the fold */
.hero .hero-stats{ display: none !important; }
.hero .lead{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero .container, section.hero .container{ padding-top: 16px; padding-bottom: 18px; }
.hero .display-xl, .hero h1.display-xl{ font-size: clamp(34px, 11vw, 46px); margin: 4px 0 8px; }
.hero .hero-actions{ margin-top: 8px; }
}
/* ===== END POLISH v1+v2 ===== */
/* ============================================================
LOAN FORM POLISH (CSS-only, no markup/text/value changes)
Modernizes the Car Loan Application modal: softer inputs,
clean focus ring, better rhythm, refined dialog + buttons.
============================================================ */
/* Dialog: refined depth + smoother corners */
.ym-loan-dialog{
border-radius: 14px !important;
box-shadow: 0 24px 60px rgba(10,10,10,.28) !important;
/* B9-3a fix: must scroll vertically when the form is taller than the viewport
(previously overflow:hidden clipped the form and trapped scrolling on mobile).
overflow-x stays hidden so rounded corners still clip horizontally. */
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Inputs & selects: neutral default border, soft radius, smooth focus */
.ym-loan-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ym-loan-form select,
.ym-loan-form textarea{
border: 1px solid var(--gray-100, #E8E8E8) !important;
border-radius: 9px !important;
padding: 12px 14px !important;
font-size: 15px !important;
background: #FCFCFC !important;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.ym-loan-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.ym-loan-form select:hover,
.ym-loan-form textarea:hover{
border-color: #C9C9C9 !important;
}
.ym-loan-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.ym-loan-form select:focus,
.ym-loan-form textarea:focus{
border-color: var(--red, #CC0000) !important;
box-shadow: 0 0 0 3px rgba(204,0,0,.12) !important;
background: #fff !important;
outline: none !important;
}
/* Field & row rhythm: a touch more air */
.ym-loan-form .form-field{ gap: 7px !important; margin-bottom: 18px !important; }
.ym-loan-form .form-row{ gap: 18px !important; margin-bottom: 4px !important; }
/* Section labels: crisper, with subtle red tick */
.ym-loan-section-label{
letter-spacing: .04em;
font-weight: 800 !important;
padding-bottom: 10px !important;
margin-bottom: 16px !important;
}
/* Buttons inside the form: consistent premium feel */
.ym-loan-form .btn-primary,
.ym-loan-form .btn-block{
border-radius: 10px !important;
font-weight: 800 !important;
letter-spacing: .03em;
transition: transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
}
.ym-loan-form .btn-primary:hover{
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(204,0,0,.22);
}
/* Hints & disclaimer: softer, readable */
.ym-loan-hint{ color: #8A8A8A !important; font-size: 12.5px !important; }
.ym-loan-disclaimer{ line-height: 1.55 !important; }
/* Close button: clearer target */
.ym-loan-x{ transition: background .15s ease, transform .15s ease !important; }
.ym-loan-x:hover{ transform: rotate(90deg); }
/* Mobile: full-height comfortable sheet */
@media (max-width: 600px){
.ym-loan-dialog{ border-radius: 0 !important; }
.ym-loan-form .form-row{ gap: 0 !important; }
.ym-loan-form .form-field{ margin-bottom: 16px !important; }
}
/* ===== END LOAN FORM POLISH ===== */
/* D4A (v0.25.0): CSS-only price-first reorder removed — handled by DOM order. */
/* ============================================================
YM PART5 PREMIUM POLISH — modern, spacious, calm/digital feel
Additive overrides only. Tokens reused. Red stays an accent.
============================================================ */
/* 1) More breathing room between sections */
.section { padding: var(--s-9) 0; }
@media (max-width: 768px){ .section { padding: var(--s-8) 0; } }
/* 2) Section headings: a touch more space below for calm rhythm */
.section-head, .section-head.center { margin-bottom: var(--s-7); }
/* 3) Premium card language — soft shadow, rounded, gentle hover lift */
.car-card, .service-card, .market-card, .delivered-card,
.trust-why-card, .stat-card, .realbiz-card, .review-card,
.offering-card, .brand-card, .sell-option-card, .contact-card,
.incoterm-card, .rule-card, .export-cta-card, .video-card {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform .28s var(--tr-base, ease), box-shadow .28s var(--tr-base, ease);
will-change: transform;
}
.car-card:hover, .service-card:hover, .market-card:hover,
.delivered-card:hover, .trust-why-card:hover, .realbiz-card:hover,
.review-card:hover, .offering-card:hover, .brand-card:hover,
.sell-option-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
/* 4) Car card: clean white, crisp image radius, scannable */
.car-card { background: var(--white); overflow: hidden; }
.car-card img { border-radius: 0; display:block; }
/* 5) Buttons: one consistent language, subtle depth on primary */
.btn-primary { box-shadow: var(--shadow-red); transition: transform .2s ease, box-shadow .2s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(204,0,0,0.32); }
/* 6) Hero: a bit more depth + calmer gradient veil over photo */
.hero::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: linear-gradient(180deg, rgba(0,30,64,0.35) 0%, rgba(0,30,64,0.55) 100%);
z-index:0;
}
.hero > .container { position: relative; z-index: 1; }
/* 7) Gentle scroll fade-ins — SAFE: only hide when JS adds .ym-reveal, so no-JS shows everything */
.ym-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.ym-reveal.ym-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
.ym-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}
/* 8) The neutral export splitter line — make it clean & premium */
.export-splitter-line { padding: var(--s-7) 0; }
.export-line-inner{
display:flex; align-items:center; justify-content:center; gap: var(--s-4);
flex-wrap:wrap; text-align:center;
}
.export-line-text{ font-size:1.15rem; color: var(--gray-700); }
.export-line-link{
font-weight:700; color: var(--red); text-decoration:none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.export-line-link:hover{ border-color: var(--red); }
/* 9) Utility bar slim — calm, right-aligned, premium */
.utility-bar-slim{ background: var(--black); }
.utility-bar-slim .utility-inner{ display:flex; justify-content:flex-end; align-items:center; padding-top:.4rem; padding-bottom:.4rem; }
.utility-bar-slim .utility-right{ display:flex; align-items:center; gap: var(--s-4); }
.utility-bar-slim a{ color: var(--gray-200); text-decoration:none; }
/* 10) Footer columns: ensure even, breathing grid on desktop; tidy stack on mobile */
.footer-grid{ gap: var(--s-7); }
@media (max-width: 768px){ .footer-grid{ gap: var(--s-6); } }
/* END YM PART5 PREMIUM POLISH */
/* ============================================================
CUSTOMER PATH CARDS — premium navigation cards (Master brief)
============================================================ */
.customer-paths .cpath-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); }
@media (max-width:1024px){ .customer-paths .cpath-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .customer-paths .cpath-grid{ grid-template-columns:1fr; gap:var(--s-5); } }
.cpath-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform .3s var(--tr-base,ease), box-shadow .3s var(--tr-base,ease), border-color .3s ease; }
.cpath-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--gray-200); }
.cpath-media{ position:relative; height:170px; background:linear-gradient(135deg,#1A1A1A 0%,#2A2A2A 60%,#0A0A0A 100%); background-size:cover; background-position:center; }
.cpath-media::after{ content:""; position:absolute; left:0; bottom:0; width:64px; height:4px; background:var(--red); }
.cpath-japan .cpath-media{ background:linear-gradient(135deg,#2A2A2A,#0A0A0A); }
.cpath-export .cpath-media{ background:linear-gradient(135deg,#3A0000,#0A0A0A); }
.cpath-auction .cpath-media{ background:linear-gradient(135deg,#1A1A1A,#330000); }
.cpath-service .cpath-media{ background:linear-gradient(135deg,#222,#000); }
.cpath-rental .cpath-media{ background:linear-gradient(135deg,#2A2A2A,#1A1A1A); }
.cpath-body{ padding:var(--s-5); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.cpath-title{ font-family:var(--font-display); font-size:1.35rem; line-height:1.1; margin:0; color:var(--black); }
.cpath-desc{ color:var(--gray-700); font-size:.95rem; margin:0; }
.cpath-list{ list-style:none; padding:0; margin:.2rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.cpath-list li{ font-size:.78rem; color:var(--gray-700); background:var(--gray-50); border:1px solid var(--gray-100); border-radius:var(--radius-pill); padding:.25rem .7rem; }
.cpath-btn{ margin-top:auto; padding-top:.8rem; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--red); letter-spacing:.02em; }
.cpath-arrow{ transition:transform .25s ease; }
.cpath-card:hover .cpath-arrow{ transform:translateX(5px); }
/* END CUSTOMER PATH CARDS */
/* ===== Trust band (Phase B1) — verified facts only, below hero ===== */
.trust-band { background: var(--surface); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); padding: 1.15rem 0; }
.trust-band-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: center; }
.trust-band .trust-item { display: flex; align-items: center; gap: .6rem; }
.trust-band .trust-item svg { width: 26px; height: 26px; flex: 0 0 26px; stroke: #CC0000; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trust-band .trust-item strong { display: block; font-size: .85rem; line-height: 1.2; color: var(--ink); }
.trust-band .trust-item span { display: block; font-size: .72rem; line-height: 1.25; color: #555; }
.trust-band .trust-item a { color: var(--red); text-decoration: none; font-weight: 600; }
.trust-band .trust-item a:hover { text-decoration: underline; }
/* C3e-1: subtle gold accent on the licence/trust item (first) */
.trust-band .trust-item:first-child svg { stroke: var(--gold); }
.trust-band .trust-item:first-child { border-left: 2px solid rgba(255,179,0,0.55); padding-left: .65rem; }
@media (max-width: 1023px) { .trust-band-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem 1.2rem; } }
@media (max-width: 520px) { .trust-band-grid { grid-template-columns: 1fr; } .trust-band { padding: .85rem 0; } }
/* ===== Product page conversion blocks (Phase B2) ===== */
.ym-branch { margin: 1rem 0 1.25rem; display: grid; gap: .5rem; }
.ym-branch-h { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #555; }
.ym-branch-opt { position: relative; display: block; padding: .7rem 2rem .7rem .9rem; border: 1px solid #e2e2e2; border-radius: 10px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ym-branch-opt:hover { border-color: #CC0000; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.ym-branch-opt strong { display: block; color: #1a1a1a; font-size: .95rem; }
.ym-branch-opt em { display: block; font-style: normal; color: #666; font-size: .8rem; margin-top: .1rem; }
.ym-branch-arrow { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: #CC0000; font-size: 1.1rem; font-weight: 700; }
.ym-nextsteps .ym-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .7rem; }
.ym-steps li { display: flex; gap: .7rem; align-items: flex-start; }
.ym-step-n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #CC0000; color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.ym-steps strong { display: block; color: #1a1a1a; font-size: .95rem; }
.ym-steps em { display: block; font-style: normal; color: #666; font-size: .85rem; line-height: 1.45; }
.ym-docs { border: 1px solid #e2e2e2; border-radius: 10px; background: #fafafa; padding: 0 1rem; }
.ym-docs > summary { cursor: pointer; padding: .9rem 0; font-weight: 700; color: #1a1a1a; list-style: none; }
.ym-docs > summary::-webkit-details-marker { display: none; }
.ym-docs > summary::before { content: "+"; color: #CC0000; font-weight: 700; margin-right: .5rem; }
.ym-docs[open] > summary::before { content: "\2212"; }
.ym-docs-hint { font-weight: 400; color: #888; font-size: .8rem; }
.ym-docs-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 0 0 1rem; }
.ym-docs-col h4 { margin: 0 0 .4rem; font-size: .9rem; color: #1a1a1a; }
.ym-docs-col ul { margin: 0 0 .4rem; padding-left: 1.1rem; }
.ym-docs-col li { font-size: .85rem; color: #555; line-height: 1.5; }
.ym-docs-sub { font-size: .8rem; font-weight: 700; color: #777; margin: .3rem 0 .2rem; }
.ym-docs-note { font-size: .78rem; color: #888; font-style: italic; margin: .2rem 0 0; }
@media (max-width: 600px) { .ym-docs-body { grid-template-columns: 1fr; gap: .8rem; } }
/* ===== Delivered Cars & Customer Reviews page (Phase B3) ===== */
.ym-dc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ym-export-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ym-dc-item { background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; }
.ym-dc-item img { width: 100%; display: block; object-fit: cover; }
.ym-dc-grid .ym-dc-item img { aspect-ratio: 3 / 4; }
.ym-export-strip .ym-dc-item img { aspect-ratio: 4 / 3; }
.ym-dc-cap { padding: .6rem .8rem; font-size: .85rem; color: #444; font-weight: 600; }
.ym-dc-note { margin-top: 1.25rem; font-size: .85rem; color: #777; font-style: italic; text-align: center; }
@media (max-width: 980px) { .ym-dc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .ym-dc-grid { grid-template-columns: repeat(2, 1fr); } .ym-export-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ym-dc-grid, .ym-export-strip { grid-template-columns: 1fr; } }
/* ===== Contact page quick links (Phase B4) ===== */
.ym-contact-links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 28px; }
.ym-contact-links a { display: inline-block; padding: .55rem 1rem; border: 1px solid #e2e2e2; border-radius: 999px; background: #fff; color: #1a1a1a; text-decoration: none; font-size: .9rem; font-weight: 600; transition: border-color .15s, color .15s; }
.ym-contact-links a:hover { border-color: #CC0000; color: #CC0000; }
/* ============================================================
PHASE B4A — Global colour / contrast hardening (v0.24.11)
Additive + scoped. No palette change, no layout change.
============================================================ */
/* 1) Dark-hero outline buttons: white text + visible border at rest;
invert to dark-on-white on hover/focus. Fixes the Contact "Call"
button and every dark-hero outline button site-wide. Scoped to
.ym-stock-hero so white-section outline buttons are untouched. */
/* ym-stock-hero dark buttons -> consolidated in B8B-1 .on-dark foundation */
/* 2) Global focus-visible ring — keyboard focus is always visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
}
/* 3) Top bar (utility) links — brighter, readable; white on hover. */
.utility-bar a { color: var(--gray-200); }
.utility-bar a:hover { color: var(--white); }
/* 4) Header dropdown — explicit dark text on white panel; readable hover. */
.main-nav .dropdown a { color: var(--gray-900); }
.main-nav .dropdown a:hover { background: var(--red-50); color: var(--red); }
/* 5) Mobile menu links — brighter on the dark menu; preserve red hover. */
.mobile-menu .mobile-nav-grouped .m-group a,
.mobile-nav-grouped .m-group a { color: var(--gray-100) !important; }
.mobile-menu .mobile-nav-grouped .m-group a:hover,
.mobile-nav-grouped .m-group a:hover { color: var(--red) !important; }
/* 6) Footer links — brighter normal state; white on hover (already set). */
.footer-grid ul a { color: rgba(255,255,255,0.84); }
/* 7) Footer logo — CSS light chip so the full-colour logo (incl. black
"MOTORS" + ring) reads on the dark footer. No new asset. */
.site-footer .footer-brand .brand-logo {
background: #ffffff;
padding: 10px 14px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
/* 8) Forms / inputs — explicit readable text, placeholder, focus ring. */
.form-field input,
.form-field select,
.form-field textarea,
.contact-form input,
.contact-form select,
.contact-form textarea { color: var(--black); }
.form-field input::placeholder,
.form-field textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--gray-500); opacity: 1; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.12);
}
/* ============================================================
PHASE B4B — First-screen rebuild (header + hero) v0.24.12
============================================================ */
/* Header: persistent separation from the dark hero (always-on subtle shadow) */
.site-header { box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.05); }
/* Brand: the logo already carries the name — hide the duplicate text label;
keep a small uppercase tagline on desktop only. */
.brand .brand-name { display: none; }
.brand .brand-tagline { display: none; }
@media (min-width: 1024px) {
.brand .brand-tagline {
display: block; font-size: 0.7rem; line-height: 1; letter-spacing: 0.05em;
color: var(--gray-500); text-transform: uppercase; margin-top: 2px;
}
}
/* Dropdown: feel attached to the nav — no gap, red top accent, stronger shadow */
.main-nav .dropdown {
margin-top: 0;
border-top: 3px solid var(--red);
box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}
/* Compact Japan / Export segmented control (replaces the big split cards) */
.ymw-seg { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 1.3rem 0 1.6rem; }
.ymw-seg-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.ymw-seg-ctrl { display: inline-flex; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 4px; backdrop-filter: blur(4px); }
.ymw-seg-opt { display: inline-flex; align-items: center; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: #fff; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; }
.ymw-seg-opt:hover, .ymw-seg-opt:focus-visible { background: var(--red); color: #fff; }
/* Hero search moved below the hero — light band */
.hero-search-band { background: var(--gray-50); border-bottom: 1px solid var(--gray-100); padding: 1.4rem 0; }
.hero-search-band .hero-search { margin: 0 auto; }
/* Slightly tighter hero so the search/trust bands come into view sooner */
@media (min-width: 1024px) { .hero { min-height: 78vh; } }
@media (max-width: 600px) {
.ymw-seg { gap: 0.5rem; }
.ymw-seg-ctrl { width: 100%; }
.ymw-seg-opt { flex: 1; justify-content: center; padding: 0.6rem 0.4rem; }
}
/* ============================================================
PHASE B4C — First-screen cleanup follow-up (v0.24.13)
============================================================ */
/* Safety net: the legacy JS-injected Japan/Export bar is removed at source
(footer.php). This hides it too, in case any cached script still runs. */
.ymw-worldtoggle { display: none !important; }
/* ===== Rental Vehicles & Japan Travel Support page (Phase B5) ===== */
.ym-rent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.ym-rent-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 1rem 1.1rem; font-size: 0.95rem; font-weight: 600; color: #1a1a1a; line-height: 1.4; }
.ym-rent-list { margin: 0; padding-left: 1.2rem; max-width: 720px; }
.ym-rent-list li { font-size: 1rem; color: #4A4A4A; line-height: 1.6; margin-bottom: 0.5rem; }
.ym-rent-note { background: #fff; border: 1px solid #ececec; border-left: 4px solid #CC0000; border-radius: 12px; padding: 1.4rem 1.6rem; max-width: 820px; }
.ym-rent-note h3 { margin: 0 0 0.8rem; font-size: 1.15rem; color: #1a1a1a; }
.ym-rent-note ul { margin: 0; padding-left: 1.2rem; }
.ym-rent-note li { font-size: 0.95rem; color: #555; line-height: 1.55; margin-bottom: 0.4rem; }
@media (max-width: 860px) { .ym-rent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ym-rent-grid { grid-template-columns: 1fr; } }
/* ===== Export Cars to Pakistan page (Phase B6) ===== */
.ympk-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.ympk-imggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ympk-imgfig { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #ececec; }
.ympk-imgfig picture, .ympk-imgfig img { display: block; width: 100%; height: 220px; object-fit: cover; }
.ympk-imgfig figcaption { padding: 0.6rem 0.8rem; font-size: 0.82rem; color: #666; }
@media (max-width: 860px) { .ympk-imggrid { grid-template-columns: repeat(2, 1fr); } .ympk-reviews { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ympk-imggrid { grid-template-columns: 1fr; } }
/* ============================================================
PHASE B7 — Export Markets hub (cards, filter, modal)
============================================================ */
.ympk-filterbar { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.ympk-search { flex: 1 1 280px; min-width: 200px; padding: 0.7rem 1rem; border: 1px solid #d8d8d8; border-radius: 10px; font-size: 0.95rem; color: #1a1a1a; background: #fff; }
.ympk-search:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(204,0,0,0.12); }
.ympk-regionchips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ympk-chip { border: 1px solid #d8d8d8; background: #fff; color: #444; font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; }
.ympk-chip:hover { border-color: var(--red); color: var(--red); }
.ympk-chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.ympk-noresults { background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 1rem 1.2rem; color: #555; }
.ympk-noresults a { color: var(--red); font-weight: 600; }
.ympk-region { margin-bottom: 2rem; }
.ympk-region-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #1a1a1a; margin: 0 0 0.9rem; padding-bottom: 0.4rem; border-bottom: 2px solid #eee; }
.ympk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ympk-card { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.ympk-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.10); border-color: #ddd; }
.ympk-card-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.ympk-flag { font-size: 2rem; line-height: 1; }
.ympk-cname { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 0; color: #1a1a1a; }
.ympk-region-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #999; }
.ympk-popular { font-size: 0.9rem; color: #444; margin: 0 0 0.4rem; }
.ympk-port { font-size: 0.82rem; color: #666; margin: 0 0 0.4rem; }
.ympk-caution { font-size: 0.78rem; color: #b00; margin: 0 0 0.9rem; }
.ympk-card-actions { margin-top: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Modal */
.ympk-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ympk-modal[hidden] { display: none; }
.ympk-modal-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.55); backdrop-filter: blur(2px); }
.ympk-modal-box { position: relative; z-index: 1; background: #fff; border-radius: 16px; max-width: 540px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.6rem 1.7rem 1.7rem; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.ympk-modal-close { position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: none; font-size: 1.7rem; line-height: 1; color: #888; cursor: pointer; }
.ympk-modal-close:hover { color: #111; }
.ympk-modal-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.ympk-modal-flag { font-size: 2.4rem; line-height: 1; }
.ympk-modal-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin: 0; color: #1a1a1a; }
.ympk-modal-overview { font-size: 0.95rem; color: #444; line-height: 1.55; margin: 0 0 1rem; }
.ympk-modal-rows { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.ympk-modal-row { display: grid; grid-template-columns: 150px 1fr; gap: 0.6rem; font-size: 0.88rem; }
.ympk-modal-row strong { color: #1a1a1a; }
.ympk-modal-row span { color: #555; }
.ympk-modal-caution { font-size: 0.82rem; color: #777; line-height: 1.5; background: #faf7f7; border-left: 3px solid var(--red); padding: 0.7rem 0.9rem; border-radius: 8px; margin: 0 0 1rem; }
.ympk-modal-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ympk-modal-pagelink { color: var(--red); font-weight: 600; font-size: 0.85rem; margin-left: auto; }
/* Custom inquiry */
.ympk-inq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.ympk-inq label { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 600; color: #444; gap: 0.3rem; }
.ympk-inq input, .ympk-inq textarea { padding: 0.55rem 0.7rem; border: 1px solid #d8d8d8; border-radius: 8px; font-size: 0.9rem; color: #1a1a1a; background: #fff; font-weight: 400; }
.ympk-inq input:focus, .ympk-inq textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(204,0,0,0.12); }
.ympk-inq-msg { margin: 0.7rem 0 0.9rem; }
@media (max-width: 900px) { .ympk-cards { grid-template-columns: repeat(2, 1fr); } .ympk-inq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ympk-cards { grid-template-columns: 1fr; } .ympk-inq-grid { grid-template-columns: 1fr; } .ympk-modal-row { grid-template-columns: 1fr; gap: 0.1rem; } .ympk-modal-pagelink { margin-left: 0; } }
/* Visually-hidden utility (used by export-markets search label) */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* B7B safety: ensure [hidden] modal rows/links actually hide despite display:grid */
.ympk-modal-row[hidden], .ympk-modal-pagelink[hidden] { display: none !important; }
/* B8A export-cta-card dark buttons -> consolidated in B8B-1 .on-dark foundation (below) */
/* ============================================================
PHASE B8B-1 — Global button system foundation (CSS-only)
Canonical button behavior. Markup unchanged. Appended last so it is
the single source of truth for the properties below. Consolidates the
former per-section dark overrides (auction / stock-hero / export-cta).
============================================================ */
/* (a) Canonical button colors on LIGHT backgrounds */
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-outline { background: transparent; color: var(--black); border-color: var(--black); }
.btn-ghost { background: transparent; color: var(--black); border-color: var(--gray-200); }
/* (b) Radius: every .btn is a consistent rounded-rectangle (no pills) */
.btn { border-radius: var(--radius-sm); }
/* (c) GLOBAL DARK CONTEXT — one rule for all dark surfaces.
Mark any dark container .on-dark; the known dark panels/heroes are
aliased here too, so existing markup needs no change. */
.on-dark .btn-outline, .on-dark .btn-ghost,
.export-cta-card .btn-outline, .export-cta-card .btn-ghost,
.auction-cta-section .btn-outline, .auction-cta-section .btn-ghost,
.ym-stock-hero .btn-outline, .ym-stock-hero .btn-ghost {
color: #fff;
border-color: rgba(255,255,255,0.55);
background: transparent;
}
.on-dark .btn-outline:hover, .on-dark .btn-outline:focus-visible,
.on-dark .btn-ghost:hover, .on-dark .btn-ghost:focus-visible,
.export-cta-card .btn-outline:hover, .export-cta-card .btn-outline:focus-visible,
.export-cta-card .btn-ghost:hover, .export-cta-card .btn-ghost:focus-visible,
.auction-cta-section .btn-outline:hover, .auction-cta-section .btn-outline:focus-visible,
.auction-cta-section .btn-ghost:hover, .auction-cta-section .btn-ghost:focus-visible,
.ym-stock-hero .btn-outline:hover, .ym-stock-hero .btn-outline:focus-visible,
.ym-stock-hero .btn-ghost:hover, .ym-stock-hero .btn-ghost:focus-visible {
background: #fff;
color: #0a0a0a;
border-color: #fff;
}
/* (d) Outline/ghost hover on LIGHT backgrounds — readable, never hover-only */
.btn-outline:hover, .btn-outline:focus-visible {
background: var(--navy); color: #fff; border-color: var(--navy);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
background: transparent; color: var(--navy); border-color: var(--navy);
}
/* ============================================================
B9-2a — Dedicated /car-loan/ page (container, intro, checklist).
Form fields reuse the existing .ym-loan-form styling.
============================================================ */
.ym-carloan-wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.ym-carloan-intro { background: #0a0a0a; color: #fff; padding: 48px 0 40px; }
.ym-carloan-intro .ym-carloan-eyebrow { display: inline-block; font-family: var(--font-display, sans-serif); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #ff5a5a; font-weight: 700; margin-bottom: 12px; }
.ym-carloan-intro h1 { font-family: var(--font-display, sans-serif); font-size: 2rem; line-height: 1.12; margin: 0 0 12px; color: #fff; }
.ym-carloan-lead { font-size: 1rem; line-height: 1.6; color: #d6d6d6; margin: 0 0 18px; max-width: 640px; }
.ym-carloan-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 680px; }
.ym-carloan-notes li { position: relative; padding-left: 22px; font-size: .9rem; line-height: 1.5; color: #cfcfcf; }
.ym-carloan-notes li::before { content: "›"; position: absolute; left: 6px; top: 0; color: #ff5a5a; font-weight: 700; }
.ym-carloan-notes strong { color: #fff; }
.ym-carloan-section { padding: 36px 0 56px; background: #fafafa; }
.ym-carloan-form { background: #fff; border: 1px solid var(--gray-100, #eee); border-radius: var(--radius-lg, 12px); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ym-carloan-sub { font-size: .85rem; color: #666; margin: .25rem 0 .85rem; }
.ym-req { color: var(--red, #CC0000); font-weight: 700; }
.ym-carloan-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: .5rem; }
.ym-check { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; color: #333; padding: .5rem .6rem; border: 1px solid var(--gray-100, #eee); border-radius: var(--radius-sm, 6px); background: #fafafa; cursor: pointer; line-height: 1.4; }
.ym-check input { width: auto; margin-top: .15rem; flex-shrink: 0; }
.ym-check:hover { border-color: var(--red, #CC0000); }
.ym-carloan-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
.ym-carloan-done { padding: 3rem 1.5rem; text-align: center; }
.ym-carloan-done .ym-loan-done-ic { width: 56px; height: 56px; border-radius: 50%; background: #E6F7EE; color: #00A651; font-size: 30px; line-height: 56px; margin: 0 auto 1rem; }
@media (max-width: 600px) {
.ym-carloan-checklist { grid-template-columns: 1fr; }
.ym-carloan-intro h1 { font-size: 1.6rem; }
}
/* ============================================================
B9-2a HOTFIX (v0.24.29) — /car-loan/ scroll guarantee
The /car-loan/ page is a long, single-scroll application form. The site-wide
loan modal (footer-injected on every page) sets body{overflow:hidden} while
open; on this full-length page any residual lock traps scrolling. Force this
ONE page to always scroll. Scoped to the car-loan template body class only —
product pages and the modal's background-scroll-lock everywhere else are
completely untouched.
============================================================ */
body.page-template-page-car-loan-php,
body.page-template-page-car-loan {
overflow-y: auto !important;
height: auto !important;
position: static !important;
}
html:has(body.page-template-page-car-loan-php),
html:has(body.page-template-page-car-loan) {
overflow-y: auto !important;
height: auto !important;
}
/* B9-3c — "Applying for: " note on /car-loan/ when prefilled from a product */
.ym-carloan-applying {
display: inline-block;
margin: 14px 0 0;
padding: 8px 14px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-sm, 6px);
font-size: .9rem;
color: #fff;
}
.ym-carloan-applying strong { color: #ff5a5a; }
/* ============================================================
B9-4a — /car-loan/ public UX polish (legend, doc reminder,
success next-steps, mobile spacing). Scoped to .ym-carloan-*
and .ym-carloan-form so the loan MODAL (.ym-loan-form) is untouched.
============================================================ */
.ym-carloan-legend {
font-size: .85rem; color: #555; margin: 0 0 1.25rem;
padding: 8px 12px; background: #f7f7f8; border-radius: var(--radius-sm, 6px);
}
.ym-carloan-legend .ym-req { margin-right: 2px; }
.ym-carloan-docnote {
margin: 0 0 1rem; padding: 14px 16px;
background: #fff8f8; border: 1px solid #f0d9d9; border-left: 4px solid var(--red, #CC0000);
border-radius: var(--radius-sm, 6px); font-size: .9rem; color: #444;
}
.ym-carloan-docnote strong { display: block; margin-bottom: 6px; color: #1a1a1a; }
.ym-carloan-docnote ul { margin: 0 0 8px; padding-left: 20px; }
.ym-carloan-docnote li { margin: 2px 0; line-height: 1.45; }
.ym-carloan-docnote-foot { display: block; font-size: .82rem; color: #777; }
.ym-carloan-next {
text-align: left; max-width: 360px; margin: .5rem auto 1rem; padding-left: 22px;
}
.ym-carloan-next li { margin: 6px 0; line-height: 1.5; }
.ym-carloan-next-note { font-size: .85rem; color: #777; margin: 0 0 1.25rem; }
/* Cleaner field rhythm + larger tap targets on the page form (NOT the modal) */
.ym-carloan-form .ym-loan-section-label { margin-top: 2rem; margin-bottom: .85rem; }
.ym-carloan-form .form-row { margin-bottom: 2px; }
.ym-carloan-form .form-field { margin-bottom: 14px; }
.ym-carloan-form .form-field label { margin-bottom: 5px; font-weight: 600; }
.ym-carloan-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ym-carloan-form select,
.ym-carloan-form textarea { min-height: 46px; }
@media (max-width: 600px) {
.ym-carloan-form { padding: 1.1rem 1.1rem 1.6rem; }
.ym-carloan-form .ym-loan-section-label { margin-top: 1.6rem; font-size: 1rem; }
.ym-carloan-form .form-field { margin-bottom: 16px; }
.ym-carloan-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ym-carloan-form select,
.ym-carloan-form textarea { min-height: 48px; font-size: 16px; } /* 16px avoids iOS zoom */
.ym-carloan-actions .btn { min-height: 50px; }
.ym-carloan-checklist { gap: 10px; }
.ym-check { padding: .7rem .75rem; }
}
/* ============================================================
B9-4b — /car-loan/ multi-step wizard. Steps are visible by default
(no-JS fallback = one scroll). JS adds .is-wizard to hide inactive
steps. All scoped to .ym-carloan-form / .ym-step / .ym-wizard-* so
the loan MODAL (.ym-loan-form) is untouched.
============================================================ */
.ym-carloan-form.is-wizard .ym-step { display: none; }
.ym-carloan-form.is-wizard .ym-step.is-active { display: block; animation: ymStepIn .22s ease; }
@keyframes ymStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ym-wizard-progress { margin: 0 0 1.4rem; }
.ym-wizard-progress-label { display: flex; gap: 8px; align-items: baseline; font-size: .85rem; margin-bottom: 7px; }
.ym-wpl-step { font-weight: 800; color: var(--red, #CC0000); letter-spacing: .02em; }
.ym-wpl-title { color: #555; }
.ym-wizard-progress-track { height: 6px; background: #ececec; border-radius: 999px; overflow: hidden; }
.ym-wizard-progress-fill { height: 100%; width: 20%; background: var(--red, #CC0000); border-radius: 999px; transition: width .3s ease; }
.ym-wizard-nav { display: flex; gap: 12px; margin-top: 1.6rem; }
.ym-wizard-nav .ym-wiz-back { flex: 0 0 auto; min-width: 96px; }
.ym-wizard-nav .ym-wiz-next { flex: 1 1 auto; }
@media (max-width: 600px) {
/* compact sticky progress under the sticky header */
.ym-carloan-form.is-wizard .ym-wizard-progress {
position: sticky; top: var(--header-h, 72px); z-index: 6;
background: #fff; padding: 9px 0 7px; margin: -2px 0 1.1rem;
box-shadow: 0 4px 8px -4px rgba(0,0,0,.12);
}
.ym-wizard-progress-label { font-size: .8rem; margin-bottom: 5px; }
.ym-wizard-progress-track { height: 5px; }
.ym-wizard-nav .btn { min-height: 50px; }
.ym-wizard-nav .ym-wiz-back { min-width: 84px; }
}
/* ===================================================================
C3c — Shared premium card base (v0.24.46) — safe content cards only.
Placed at EOF to win the cascade over the earlier -6px hover block.
EXCLUDES: car-card (/shop/), export-cta-card, realbiz-card,
incoterm-card, cpath-media, market/delivered/brand cards.
=================================================================== */
.service-card,
.trust-why-card,
.review-card,
.contact-card,
.offering-card,
.sell-option-card {
background: var(--surface-2);
border: 1px solid var(--gray-100);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--s-5);
}
.service-card h3, .service-card h4,
.trust-why-card h3, .trust-why-card h4,
.review-card h3, .review-card h4,
.contact-card h3, .contact-card h4,
.offering-card h3, .offering-card h4,
.sell-option-card h3, .sell-option-card h4 {
color: var(--navy);
}
@media (hover: hover) {
.service-card:hover,
.trust-why-card:hover,
.review-card:hover,
.contact-card:hover,
.offering-card:hover,
.sell-option-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--gray-200);
}
}
@media (max-width: 768px) {
.service-card,
.trust-why-card,
.review-card,
.contact-card,
.offering-card,
.sell-option-card {
padding: var(--s-4);
}
}
/* ym-rent-card: tokenize raw #fff / #ececec / 12px (no shape change) */
.ym-rent-card { background: var(--surface-2); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); }
/* ===================================================================
C3e-2 — Homepage middle-section polish (v0.24.48). CSS-only.
Sections: Customer Paths, Featured (spacing), Why Choose,
How It Works (contrast fix), Services Overview.
=================================================================== */
/* --- How It Works: fix white-on-white + premium light-section cards --- */
.ym-process-steps .auction-step {
background: var(--surface-2);
border: 1px solid var(--gray-100);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--s-5);
}
.ym-process-steps .auction-step .n { color: var(--navy); }
.ym-process-steps .auction-step p { color: var(--gray-700); }
.ym-process-steps .auction-step strong { color: var(--ink); }
@media (hover: hover) {
.ym-process-steps .auction-step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--gray-200);
}
}
.ym-home-process .auction-steps { gap: var(--s-5); }
/* --- Customer Paths: -4px hover, navy media, navy title --- */
.cpath-card:hover { transform: translateY(-4px); }
.cpath-title { color: var(--navy); }
.cpath-media { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); }
.cpath-japan .cpath-media { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); }
.cpath-export .cpath-media { background: linear-gradient(135deg, var(--navy-soft) 0%, var(--navy-deep) 100%); }
.cpath-auction .cpath-media { background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%); }
.cpath-service .cpath-media { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); }
.cpath-rental .cpath-media { background: linear-gradient(135deg, var(--navy-soft) 0%, var(--navy) 100%); }
/* red keyline (.cpath-media::after) intentionally left intact */
/* --- Services Overview: small navy category label --- */
.offerings-section .offering-emoji {
color: var(--navy);
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.72rem;
}
/* --- Section-head rhythm across these middle sections --- */
.customer-paths .section-head,
.trust-why-section .section-head,
.ym-home-process .section-head,
.offerings-section .section-head { margin-bottom: var(--s-7); }
/* ===================================================================
C3e-3 — Homepage Reviews + Contact polish (v0.24.49). CSS-only.
=================================================================== */
/* --- Reviews: "Customer experience" -> small navy trust tag (no stars/amber) --- */
.review-stars {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--navy);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.review-stars::before {
content: "";
width: 14px;
height: 2px;
background: var(--navy);
border-radius: 2px;
}
/* --- Contact: channel-colored quick-contact badges --- */
.cq-ico {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 46px;
height: 34px;
padding: 0 0.5rem;
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: #fff;
}
.cq-wa .cq-ico { background: #25D366; }
.cq-line .cq-ico { background: #06C755; }
.cq-call .cq-ico { background: var(--red); }
.cq-mail .cq-ico { background: var(--navy); }
.cq-mail { border-left: 4px solid var(--navy); } /* was blue -> navy */
/* --- Contact info cards: small navy label hierarchy --- */
.contact-info .cc-icon {
font-size: 0.72rem;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--navy);
margin-bottom: 0.35rem;
}
/* --- Contact form: navy focus ring --- */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(0,43,92,0.14);
}
/* --- Spacing rhythm --- */
.contact-section .section-head { margin-bottom: var(--s-6); }
.contact-quick-row { gap: var(--s-3); }
/* ===================================================================
C3f — Sitewide social icon system (footer + contact). CSS-only here.
Circular, navy default, white glyph, red hover lift, focus-visible.
=================================================================== */
.footer-socials, .ym-social-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.footer-socials { margin-top: var(--s-4); }
.footer-socials a, .ym-social-row a {
width: 40px; height: 40px; flex: 0 0 40px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--navy); color: #fff; border: 1px solid var(--navy);
border-radius: 50%;
transition: transform var(--tr-base), background var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base);
}
.footer-socials a svg, .ym-social-row a svg { width: 18px; height: 18px; fill: currentColor; }
.footer-socials a:hover, .ym-social-row a:hover {
background: var(--red); border-color: var(--red); color: #fff;
transform: translateY(-3px); box-shadow: var(--shadow-md);
}
.footer-socials a:focus-visible, .ym-social-row a:focus-visible {
background: var(--red); border-color: var(--red); color: #fff;
transform: translateY(-3px); outline: none; box-shadow: 0 0 0 3px rgba(204,0,0,0.35);
}
.ym-social-block { margin-top: var(--s-5); }
.ym-social-label {
font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy); margin-bottom: var(--s-2);
}
/* ===================================================================
C3f-3 — Messenger quick-contact variant + "Chat with us" label.
=================================================================== */
.cq-msg { border-left: 4px solid #0084FF; }
.cq-msg .cq-ico { background: #0084FF; }
.cq-row-label {
font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy); margin-bottom: var(--s-2);
}
/* allow the quick-row to flow cleanly with 5 buttons (was 1fr 1fr) */
.contact-quick-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* ===================================================================
C6 — Services page (scoped). Quick-nav, alt sections, navy booking
CTA (services-only), pricing-text sizing. No /shop/ or shared edits.
=================================================================== */
/* alternating section surface (was inline) */
.ym-svc-alt { background: var(--off-white); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
/* category quick-nav */
.ym-svc-nav-section { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.ym-svc-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.ym-svc-nav a {
display: inline-flex; align-items: center;
padding: 0.5rem 1rem; border-radius: var(--radius-pill, 999px);
background: var(--surface-2); border: 1px solid var(--gray-100);
color: var(--navy); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
text-decoration: none; transition: background var(--tr-base), border-color var(--tr-base), color var(--tr-base);
}
.ym-svc-nav a:hover, .ym-svc-nav a:focus-visible {
background: var(--navy); border-color: var(--navy); color: #fff; outline: none;
}
/* jump targets land below the sticky header */
#inspection-maintenance, #diagnostics-repair, #body-paint, #tyres-roadside,
#parts-components, #rental, #commercial-equipment { scroll-margin-top: 90px; }
/* "Other service areas" link row (was inline flex) */
.ym-svc-links { display: flex; gap: 0.75rem; flex-wrap: wrap; }
/* booking CTA — navy variant, services page ONLY (export-cta-card stays black elsewhere) */
.export-cta-card.ym-svc-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); }
/* pricing text "Estimate required" sized to fit the tier slot (not the 30px price size) */
.rt-price-est strong { font-size: 1.05rem; line-height: 1.25; }
/* ===================================================================
C7a — page-export.php polish (scoped). Alt sections, navy quote CTA
(export page only), "what you provide" list. No sitewide/shared edits.
=================================================================== */
.ym-export-alt { background: var(--off-white); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.export-cta-card.ym-export-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); }
.ym-export-provide { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.ym-export-provide li { position: relative; padding-left: 1.1rem; color: rgba(255,255,255,0.85); font-size: 0.9rem; }
.ym-export-provide li::before { content: "\2713"; position: absolute; left: 0; color: rgba(255,255,255,0.55); font-weight: 700; }
.ym-export-inq { margin: var(--s-4) 0 0; }
.ym-export-inq a { color: #fff; font-weight: 600; text-decoration: underline; }
.ym-export-inq a:hover { color: var(--gold); }
/* ===================================================================
C7b — Export Markets hub polish. Region-tag contrast, prominent
inquiry card. Reuses .ym-export-alt (C7a). JS/data untouched.
=================================================================== */
.ympk-region-tag { color: var(--gray-500); }
.ym-mkt-inq-card {
background: var(--surface-2);
border: 1px solid var(--gray-200);
border-left: 4px solid var(--navy);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--s-6);
}
.ym-mkt-inq-card .eyebrow { color: var(--navy); }
.ym-mkt-inq-card h3 { color: var(--navy); margin: 0.25rem 0 0.6rem; }
/* ============================================================
D4A (v0.25.0) — SINGLE PRODUCT LAYOUT
DOM order = mobile order: gallery -> buy box -> content.
Desktop >=1024px: two-column premium layout via grid areas,
buy box spans the right side; related cars live OUTSIDE the
grid, full-width at the very bottom (.ym-related).
============================================================ */
.car-detail-grid.ym-cdg-v2 > .ym-col-content { min-width: 0; }
@media (max-width: 1023px) {
/* buy box card should not be sticky while stacked in the flow */
.ym-cdg-v2 .car-info { position: static; }
}
@media (min-width: 1024px) {
.car-detail-grid.ym-cdg-v2 {
grid-template-columns: 1.4fr 1fr;
grid-template-areas:
"gallery side"
"content side";
align-items: start;
}
.ym-cdg-v2 > .ym-col-gallery { grid-area: gallery; min-width: 0; }
.ym-cdg-v2 > .ym-col-buybox { grid-area: side; }
.ym-cdg-v2 > .ym-col-content { grid-area: content; }
/* keep the premium sticky sidebar behavior */
.ym-cdg-v2 .car-info { position: sticky; top: calc(var(--header-h) + var(--s-3)); }
}
/* Related cars — full-width bottom section */
.ym-related { border-top: 1px solid var(--gray-100); background: var(--gray-50, #fafafa); }
.ym-related .ym-related-title {
font-size: 1.5rem;
margin-bottom: var(--s-4);
display: flex;
align-items: center;
gap: var(--s-2);
}
.ym-related .ym-related-title::before {
content: "";
width: 4px; height: 1.35em;
background: var(--red);
border-radius: 2px;
}
/* ===== END D4A ===== */