/**
 * Theme Name: Blocksy Child
 * Description: ChungAuto JP Custom Child Theme - Red, Yellow & White Automotive Design
 * Author: ChungAuto JP
 * Template: blocksy
 * Text Domain: blocksy
 * Version: 2.1.0
 */

/* ==========================================================================
   1. GLOBAL VARIABLES & RESET (RED, YELLOW & WHITE PALETTE)
   ========================================================================== */
:root {
    /* Brand Red */
    --ca-red: #d32f2f;
    --ca-red-hover: #b71c1c;
    --ca-red-deep: #991b1b;
    --ca-red-light: #fef2f2;
    --ca-red-tint: rgba(211, 47, 47, 0.08);
    --ca-red-border: #fecaca;

    /* Brand Yellow / Gold */
    --ca-gold: #f59e0b;
    --ca-gold-hover: #d97706;
    --ca-yellow: #ffb703;
    --ca-yellow-light: #fef9c3;
    --ca-yellow-tint: rgba(245, 158, 11, 0.12);

    /* Brand White & Neutrals */
    --ca-white: #ffffff;
    --ca-bg-light: #f8fafc;
    --ca-bg-card: #ffffff;
    --ca-border: #e2e8f0;
    --ca-border-light: #f1f5f9;

    /* Typography & Contrast */
    --ca-dark: #0f172a;
    --ca-text: #334155;
    --ca-text-muted: #64748b;

    /* Effects */
    --ca-radius: 12px;
    --ca-radius-sm: 8px;
    --ca-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --ca-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.07);
    --ca-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --ca-transition: all 0.28s ease;
}

body {
    font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ca-text);
    background-color: var(--ca-bg-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Homepage Clean Fullwidth Layout */
.home .entry-header,
.home .hero-section,
.home [data-id="page-title"] {
    display: none !important;
}

.home .site-main > .ct-container-full,
.home .site-main > .ct-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.home .entry-content {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.home .entry-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Global Container (1180px) */
.ca-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   2. TOPBAR & BLOCKSY HEADER STYLING (SLEEK & COMPACT)
   ========================================================================== */
.ca-header-topbar {
    background: linear-gradient(90deg, #b71c1c 0%, #d32f2f 60%, #c62828 100%);
    color: #ffffff;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 2px solid var(--ca-yellow);
}

.ca-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ca-topbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ca-topbar-left .ca-slogan {
    color: #ffffff;
    font-weight: 500;
}

.ca-topbar-left .ca-slogan strong {
    color: var(--ca-yellow);
    font-weight: 700;
}

.ca-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ca-tb-link {
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    transition: var(--ca-transition);
}

.ca-tb-link:hover {
    color: var(--ca-yellow);
}

.ca-tb-hotline strong {
    color: var(--ca-yellow);
    font-size: 13px;
    font-weight: 800;
    margin-left: 2px;
}

.ca-tb-btn-book {
    background: var(--ca-yellow);
    color: #0f172a;
    padding: 3px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 11.5px;
    transition: var(--ca-transition);
}

.ca-tb-btn-book:hover {
    background: #ffffff;
    color: var(--ca-red);
}

/* Blocksy Header Height Overrides (Compact & Sleek) */
.ct-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--ca-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

[data-device="desktop"] [data-row="middle"] {
    --theme-height: 52px !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 56px !important;
}

.ct-header [data-device="desktop"] [data-row="middle"] > .ct-container {
    height: 52px !important;
    min-height: 52px !important;
    display: flex;
    align-items: center;
}

.site-branding {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Hide text site-title to show only the Flatsome logo image */
.site-branding .site-title-container {
    display: none !important;
}

.site-branding .site-logo-container {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 2px 0 !important;
}

.site-branding .site-logo-container img.default-logo {
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: var(--ca-transition) !important;
}

.site-branding .site-logo-container:hover img.default-logo {
    transform: scale(1.02);
}

/* Mobile logo sizing */
[data-device="mobile"] .site-branding .site-logo-container img.default-logo {
    max-height: 34px !important;
}

/* Desktop Menu Links (Compact) */
.header-menu-1 {
    display: flex;
    align-items: center;
}

.header-menu-1 .menu > li > a {
    color: var(--ca-dark) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 6px 11px !important;
    line-height: 1.4 !important;
    border-radius: 6px;
    transition: var(--ca-transition) !important;
}

.header-menu-1 .menu > li > a:hover,
.header-menu-1 .menu > li.current-menu-item > a {
    color: var(--ca-red) !important;
    background-color: var(--ca-red-light) !important;
}

.header-menu-1 .sub-menu {
    border-top: 2px solid var(--ca-red) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 6px 0 !important;
}

.header-menu-1 .sub-menu li a {
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: var(--ca-transition) !important;
}

.header-menu-1 .sub-menu li a:hover {
    color: var(--ca-red) !important;
    background: var(--ca-red-light) !important;
}

/* ==========================================================================
   MOBILE APP-LIKE COMPACT HEADER (HEIGHT: 48px)
   ========================================================================== */
@media (max-width: 999.98px) {
    /* Sticky App Header Bar (Scoped only to <header> tag to avoid affecting #offcanvas drawer) */
    header.ct-header,
    #header.ct-header,
    header[data-device="mobile"].ct-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        background: #ffffff !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    /* Force compact 48px height across all Blocksy row selectors */
    [data-header*="type-1"] .ct-header [data-row*="middle"],
    .ct-header [data-device="mobile"] [data-row="middle"],
    [data-device="mobile"] [data-row],
    [data-device="mobile"] [data-row="middle"] {
        --height: 48px !important;
        --shrink-height: 48px !important;
        min-height: 48px !important;
        height: 48px !important;
        max-height: 48px !important;
    }

    [data-header*="type-1"] .ct-header [data-row*="middle"] > .ct-container,
    .ct-header [data-device="mobile"] [data-row="middle"] > .ct-container,
    [data-device="mobile"] [data-row] > div,
    [data-device="mobile"] .ct-container {
        --height: 48px !important;
        min-height: 48px !important;
        height: 48px !important;
        max-height: 48px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Columns inside mobile header */
    [data-device="mobile"] [data-column="start"],
    [data-device="mobile"] [data-column="end"] {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* Site Branding: Align logo cleanly */
    [data-device="mobile"] .site-branding {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* Hide redundant text site title on mobile - only show clean app logo */
    [data-device="mobile"] .site-branding .site-title-container,
    [data-device="mobile"] .site-title-container,
    [data-device="mobile"] .site-title {
        display: none !important;
    }

    /* App Logo: 28px height, sharp and proportionate */
    [data-device="mobile"] .site-branding .site-logo-container {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        text-decoration: none !important;
    }

    [data-device="mobile"] .site-branding .site-logo-container img.default-logo,
    [data-device="mobile"] .site-branding .site-logo-container img {
        height: 28px !important;
        max-height: 28px !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Modern Mobile App Hamburger Icon Button (36x36px) */
    [data-device="mobile"] .ct-header-trigger {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        cursor: pointer;
        transition: all 0.2s ease !important;
    }

    [data-device="mobile"] .ct-header-trigger:hover,
    [data-device="mobile"] .ct-header-trigger:active {
        background: #fee2e2 !important;
        border-color: #fca5a5 !important;
    }

    [data-device="mobile"] .ct-header-trigger svg {
        width: 17px !important;
        height: 13px !important;
        fill: #0f172a !important;
        color: #0f172a !important;
        transition: fill 0.2s ease !important;
    }

    [data-device="mobile"] .ct-header-trigger:hover svg,
    [data-device="mobile"] .ct-header-trigger:active svg {
        fill: var(--ca-red) !important;
        color: var(--ca-red) !important;
    }

    /* Hide any text label inside trigger button */
    [data-device="mobile"] .ct-header-trigger .ct-label {
        display: none !important;
    }
}

/* ==========================================================================
   MOBILE OFFCANVAS DRAWER REDESIGN (BRIGHT WHITE AUTOMOTIVE THEME)
   ========================================================================== */
#offcanvas,
.ct-panel[data-id="offcanvas"],
div#offcanvas.ct-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    --theme-palette-color-8: #ffffff !important;
    --theme-text-color: #0f172a !important;
    --theme-link-initial-color: #0f172a !important;
    --theme-link-hover-color: #d32f2f !important;
    --theme-icon-color: #475569 !important;
    --theme-icon-hover-color: #d32f2f !important;
}

#offcanvas .ct-panel-inner,
.ct-panel[data-id="offcanvas"] .ct-panel-inner {
    width: 320px !important;
    max-width: 88vw !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-left: 3px solid var(--ca-red) !important;
    box-shadow: -8px 0 25px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Offcanvas Top Action Bar */
#offcanvas .ct-panel-actions {
    background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 2px solid var(--ca-yellow) !important;
    margin: 0 !important;
    min-height: 50px;
}

.ca-offcanvas-brand-header {
    display: flex;
    align-items: center;
}

.ca-drawer-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ca-drawer-logo {
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

#offcanvas .ct-toggle-close {
    width: 30px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    transition: var(--ca-transition) !important;
    cursor: pointer;
}

#offcanvas .ct-toggle-close:hover {
    background: #ffffff !important;
    color: var(--ca-red) !important;
}

#offcanvas .ct-toggle-close svg {
    fill: currentColor !important;
}

/* Offcanvas Quick Action Buttons (Call & Booking) */
.ca-offcanvas-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0;
}

.ca-m-act {
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--ca-transition);
}

.ca-m-act-call {
    background: var(--ca-red);
    color: #ffffff !important;
}

.ca-m-act-call:hover {
    background: var(--ca-red-hover);
}

.ca-m-act-book {
    background: var(--ca-yellow);
    color: #0f172a !important;
}

.ca-m-act-book:hover {
    background: #0f172a;
    color: #ffffff !important;
}

.ca-m-act .ca-m-icon {
    font-size: 16px;
}

.ca-m-act strong {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.2;
}

.ca-m-act small {
    display: block;
    font-size: 9px;
    opacity: 0.9;
}

/* Mobile Offcanvas Menu Items - Bright Pure White Background */
#offcanvas .ct-panel-content {
    padding: 0 !important;
    flex: 1;
    overflow-y: auto;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

#offcanvas .ct-panel-content-inner {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

#offcanvas .mobile-menu {
    padding: 8px 12px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

#offcanvas .mobile-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

#offcanvas .mobile-menu > ul > li {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 2px !important;
}

#offcanvas .mobile-menu .ct-sub-menu-parent {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

#offcanvas .mobile-menu .ct-menu-link {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 10px 12px !important;
    border-radius: 6px;
    display: flex;
    align-items: center;
    background: #ffffff !important;
    transition: var(--ca-transition) !important;
    text-decoration: none !important;
}

#offcanvas .mobile-menu li.current-menu-item > .ct-menu-link,
#offcanvas .mobile-menu li.current-menu-item > .ct-sub-menu-parent > .ct-menu-link,
#offcanvas .mobile-menu .ct-menu-link:hover {
    color: var(--ca-red) !important;
    background: #fef2f2 !important;
}

#offcanvas .ct-toggle-dropdown-mobile {
    width: 32px !important;
    height: 32px !important;
    background: #f1f5f9 !important;
    border-radius: 6px !important;
    margin-left: auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    transition: var(--ca-transition) !important;
    color: #475569 !important;
    cursor: pointer;
}

#offcanvas .ct-toggle-dropdown-mobile svg {
    fill: #475569 !important;
    transition: var(--ca-transition);
}

#offcanvas .ct-toggle-dropdown-mobile:hover,
#offcanvas .ct-toggle-dropdown-mobile[aria-expanded="true"],
#offcanvas .mobile-menu li.dropdown-active > .ct-sub-menu-parent .ct-toggle-dropdown-mobile {
    background: #fee2e2 !important;
    color: var(--ca-red) !important;
    border-color: #fca5a5 !important;
}

#offcanvas .ct-toggle-dropdown-mobile:hover svg,
#offcanvas .ct-toggle-dropdown-mobile[aria-expanded="true"] svg,
#offcanvas .mobile-menu li.dropdown-active > .ct-sub-menu-parent .ct-toggle-dropdown-mobile svg {
    fill: var(--ca-red) !important;
}

/* Sub-menu styling (crisp light slate background with red accent) */
#offcanvas .mobile-menu .sub-menu {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-left: 3px solid var(--ca-red) !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-right: 1px solid #f1f5f9 !important;
    margin: 4px 0 8px 8px !important;
    padding: 6px 0 !important;
    border-radius: 0 8px 8px 0 !important;
}

#offcanvas .mobile-menu .sub-menu li {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
}

#offcanvas .mobile-menu .sub-menu li a {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    color: #334155 !important;
    background: transparent !important;
    border-radius: 4px;
    display: block;
    transition: var(--ca-transition) !important;
    text-decoration: none !important;
}

#offcanvas .mobile-menu .sub-menu li a:hover,
#offcanvas .mobile-menu .sub-menu li.current-menu-item > a {
    color: var(--ca-red) !important;
    background: #ffffff !important;
    font-weight: 700 !important;
    padding-left: 18px !important;
}

/* Offcanvas Bottom Info Box */
.ca-offcanvas-bottom-info {
    padding: 12px 14px;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0;
    margin-top: auto;
}

.ca-m-info-line {
    font-size: 11.5px;
    color: #475569;
    margin-bottom: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.ca-m-info-line strong {
    color: #0f172a;
}

.ca-m-info-buttons {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.ca-m-btn-map {
    flex: 1;
    background: var(--ca-red);
    color: #ffffff !important;
    padding: 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-m-btn-map:hover {
    background: var(--ca-red-hover);
}

.ca-m-btn-fb {
    flex: 1;
    background: #1877f2;
    color: #ffffff !important;
    padding: 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-m-btn-fb:hover {
    background: #166fe5;
}

/* ==========================================================================
   3. HERO BANNER SECTION (RED, YELLOW & WHITE ACCENTS)
   ========================================================================== */
.ca-hero-section {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #991b1b 85%, #b71c1c 100%);
    color: #ffffff;
    padding: 70px 0 60px 0;
    overflow: hidden;
}

.ca-hero-bg-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.6;
    pointer-events: none;
}

.ca-hero-content {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.ca-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.ca-dot-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--ca-yellow);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px var(--ca-yellow);
}

.ca-tag-badge {
    background: var(--ca-yellow);
    color: #0f172a;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 800;
}

.ca-hero-title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 18px 0;
}

.ca-text-gradient {
    color: var(--ca-yellow);
    text-shadow: 0 2px 10px rgba(255, 183, 3, 0.3);
}

.ca-hero-sub {
    font-size: 16px;
    line-height: 1.7;
    color: #e2e8f0;
    margin: 0 auto 35px auto;
    max-width: 760px;
}

/* Hero Search Box */
.ca-hero-search-box {
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    margin-bottom: 30px;
    text-align: left;
}

.ca-hero-filter-form {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.5fr auto;
    gap: 12px;
    align-items: flex-end;
}

.ca-filter-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ca-filter-group select,
.ca-filter-group input {
    width: 100%;
    height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: #1e293b;
    background-color: #f8fafc;
    box-sizing: border-box;
    transition: var(--ca-transition);
}

.ca-filter-group select:focus,
.ca-filter-group input:focus {
    border-color: var(--ca-red);
    outline: none;
    background-color: #ffffff;
}

.ca-btn-search {
    height: 44px;
    background: var(--ca-red);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--ca-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
}

.ca-btn-search span {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.ca-btn-search small {
    font-size: 10px;
    font-weight: 500;
    color: var(--ca-yellow);
    opacity: 0.95;
    margin-top: 1px;
}

.ca-btn-search:hover {
    background: var(--ca-red-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.35);
}

/* Hero Actions */
.ca-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.ca-btn-primary {
    background: var(--ca-red);
    color: #ffffff;
    padding: 12px 26px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.4);
    transition: var(--ca-transition);
}

.ca-btn-primary:hover {
    background: var(--ca-red-hover);
    transform: translateY(-2px);
    color: #ffffff;
}

.ca-btn-yellow {
    background: var(--ca-yellow);
    color: #0f172a;
    padding: 12px 26px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 4px 15px rgba(255, 183, 3, 0.35);
    transition: var(--ca-transition);
}

.ca-btn-yellow:hover {
    background: #ffffff;
    color: var(--ca-red);
    transform: translateY(-2px);
}

.ca-btn-outline {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    transition: var(--ca-transition);
}

.ca-btn-outline:hover {
    background: #ffffff;
    color: var(--ca-red);
    border-color: #ffffff;
}

.ca-btn-primary span,
.ca-btn-yellow span,
.ca-btn-outline span {
    display: block;
    font-size: 15px;
}

.ca-btn-primary small,
.ca-btn-yellow small,
.ca-btn-outline small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
}

/* Hero Trust Row */
.ca-hero-trust-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 16px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ca-trust-item .num {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: var(--ca-yellow);
}

.ca-trust-item .txt {
    display: block;
    font-size: 13px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.3;
}

.ca-trust-item .sub-jp {
    display: block;
    font-size: 10.5px;
    color: #cbd5e1;
    font-weight: 500;
    margin-top: 2px;
    opacity: 0.9;
}

.ca-trust-divider {
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   4. BRAND BAR SECTION
   ========================================================================== */
.ca-brand-bar-section {
    padding: 35px 0;
    background: #ffffff;
    border-bottom: 1px solid var(--ca-border);
}

.ca-section-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.ca-sub-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ca-red);
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.ca-section-heading-sm {
    font-size: 22px;
    font-weight: 800;
    color: var(--ca-dark);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.ca-section-heading-sm span {
    color: var(--ca-red);
}

.ca-heading-jp {
    font-size: 13px;
    color: var(--ca-text-muted);
    font-weight: 600;
}

.ca-link-more {
    color: var(--ca-red);
    text-decoration: none;
    transition: var(--ca-transition);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.ca-link-more span {
    font-weight: 700;
    font-size: 14px;
}

.ca-link-more small {
    font-size: 11px;
    color: var(--ca-text-muted);
    font-weight: 500;
}

.ca-link-more:hover span {
    color: var(--ca-red-hover);
    text-decoration: underline;
}

.ca-brand-bar-section {
    padding: 36px 0;
    background: #ffffff;
    border-bottom: 1px solid var(--ca-border-light);
}

.ca-brands-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.ca-brand-card {
    background: var(--ca-bg-light);
    border: 1px solid var(--ca-border);
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--ca-transition);
}

.ca-brand-card:hover {
    background: #ffffff;
    border-color: var(--ca-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.12);
}

.ca-brand-all {
    background: var(--ca-red-light);
    border-color: var(--ca-red-border);
}

.ca-brand-icon {
    font-size: 20px;
    margin-bottom: 3px;
    line-height: 1;
}

.ca-brand-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ca-dark);
    margin-bottom: 1px;
    line-height: 1.2;
}

.ca-brand-jp {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ca-red);
    margin-bottom: 2px;
    line-height: 1.2;
}

.ca-brand-card:hover .ca-brand-title {
    color: var(--ca-red);
}

.ca-brand-count {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ca-text-muted);
    line-height: 1.2;
}

/* ==========================================================================
   5. FEATURED CARS INVENTORY (CARD GRID)
   ========================================================================== */
.ca-featured-cars-section {
    padding: 60px 0;
    background: var(--ca-bg-light);
}

.ca-section-heading-center {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 40px auto;
}

.ca-section-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--ca-dark);
    margin: 0 0 10px 0;
}

.ca-section-title span {
    color: var(--ca-red);
}

.ca-section-desc {
    font-size: 15px;
    color: var(--ca-text-muted);
    margin: 0;
}

.ca-car-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

.ca-car-card {
    background: #ffffff;
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    overflow: hidden;
    box-shadow: var(--ca-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: var(--ca-transition);
}

.ca-car-card:hover {
    transform: translateY(-4px);
    border-color: var(--ca-red-border);
    box-shadow: 0 10px 25px rgba(211, 47, 47, 0.12);
}

.ca-car-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e2e8f0;
}

.ca-car-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ca-car-card:hover .ca-car-thumb-wrap img {
    transform: scale(1.05);
}

.ca-car-badge-top {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.ca-tag-hot {
    background: var(--ca-red);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}

.ca-tag-sold {
    background: #475569;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ca-car-card.is-sold .ca-car-thumb-wrap img {
    filter: grayscale(30%);
    opacity: 0.9;
}

.ca-btn-detail.ca-btn-detail-sold {
    background: #64748b;
    border-color: #64748b;
}

.ca-btn-detail.ca-btn-detail-sold:hover {
    background: #475569;
}

.ca-tag-man {
    background: var(--ca-yellow);
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ca-car-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ca-car-meta-line {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ca-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.ca-pill-year {
    background: var(--ca-red-light);
    color: var(--ca-red);
    border: 1px solid var(--ca-red-border);
}

.ca-pill-odo {
    background: var(--ca-yellow-light);
    color: #854d0e;
    border: 1px solid #fef08a;
}

.ca-car-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ca-car-title a {
    color: var(--ca-dark);
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-car-title a:hover {
    color: var(--ca-red);
}

.ca-car-specs-mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    background: var(--ca-bg-light);
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.ca-car-specs-mini .mini-spec-item {
    display: flex;
    justify-content: space-between;
}

.ca-car-specs-mini .k {
    color: var(--ca-text-muted);
}

.ca-car-specs-mini .v {
    font-weight: 600;
    color: var(--ca-dark);
}

.ca-car-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--ca-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ca-car-price-box .price-lbl {
    display: block;
    font-size: 10px;
    color: var(--ca-text-muted);
    font-weight: 600;
}

.ca-car-price-box .price-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.ca-car-price-box .yen-amt {
    font-size: 18px;
    font-weight: 900;
    color: var(--ca-red);
}

.ca-car-price-box .man-amt {
    font-size: 12px;
    font-weight: 700;
    color: var(--ca-gold-hover);
}

.ca-btn-detail {
    background: var(--ca-red-light);
    color: var(--ca-red);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid var(--ca-red-border);
    transition: var(--ca-transition);
    white-space: nowrap;
}

.ca-btn-detail:hover {
    background: var(--ca-red);
    color: #ffffff;
}

.ca-view-all-box {
    text-align: center;
}

.ca-btn-view-all {
    display: inline-block;
    background: #ffffff;
    border: 2px solid var(--ca-red);
    color: var(--ca-red);
    padding: 14px 32px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    box-shadow: var(--ca-shadow-sm);
    transition: var(--ca-transition);
}

.ca-btn-view-all:hover {
    background: var(--ca-red);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.25);
    transform: translateY(-2px);
}

.ca-btn-view-all span {
    display: block;
    font-size: 15px;
}

.ca-btn-view-all small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.85;
}

/* ==========================================================================
   6. SERVICES SECTION (RED, YELLOW & WHITE THEME)
   ========================================================================== */
.ca-services-section {
    padding: 70px 0;
    background: #ffffff;
}

.ca-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ca-service-card {
    background: #ffffff;
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: var(--ca-shadow-sm);
    position: relative;
}

.ca-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(211, 47, 47, 0.12);
    border-color: rgba(211, 47, 47, 0.4);
}

.ca-service-img-wrap {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #e2e8f0;
}

.ca-service-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.ca-service-card:hover .ca-service-img-wrap img {
    transform: scale(1.08);
}

.ca-service-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, var(--ca-red), #991b1b);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.3px;
    z-index: 2;
}

.ca-service-body {
    padding: 18px 16px 20px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ca-service-jp-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ca-red);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.ca-service-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ca-dark);
    margin: 0 0 14px 0;
    line-height: 1.35;
}

.ca-service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ca-service-features li {
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ca-feat-icon {
    width: 16px;
    height: 16px;
    fill: #16a34a;
    flex-shrink: 0;
    margin-top: 2px;
}

.ca-feat-text {
    display: flex;
    flex-direction: column;
}

.ca-feat-vi {
    font-weight: 600;
    color: var(--ca-dark);
    line-height: 1.35;
}

.ca-feat-jp {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
}

.ca-service-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--ca-red);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 13px;
    padding: 9px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    line-height: 1.25;
    box-shadow: 0 3px 10px rgba(211, 47, 47, 0.25);
    margin-top: auto;
}

.ca-service-btn .ca-btn-vi {
    font-weight: 800;
    letter-spacing: 0.2px;
}

.ca-service-btn .ca-btn-jp {
    font-size: 10.5px;
    font-weight: 500;
    opacity: 0.92;
    color: var(--ca-yellow);
    margin-top: 2px;
}

.ca-service-btn:hover {
    background: var(--ca-red-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4);
}

/* ==========================================================================
   7. WHY CHOOSE US & PROCESS
   ========================================================================== */
.ca-why-us-section {
    padding: 70px 0;
    background: var(--ca-bg-light);
}

.ca-why-us-box {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px;
    align-items: center;
}

.ca-why-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--ca-dark);
    margin: 0 0 14px 0;
    line-height: 1.3;
}

.ca-why-title-jp {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ca-red);
    margin-top: 6px;
    line-height: 1.4;
}

.ca-why-desc {
    font-size: 15px;
    color: var(--ca-text-muted);
    margin-bottom: 25px;
}

.ca-why-desc-jp {
    display: block;
    font-size: 13.5px;
    color: var(--ca-text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

.ca-reason-jp {
    font-size: 12px;
    font-weight: 600;
    color: var(--ca-red);
    margin-left: 4px;
}

.ca-warranty-jp {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ca-red);
    margin-top: 2px;
}

.ca-reasons-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ca-reason-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #ffffff;
    padding: 16px;
    border-radius: var(--ca-radius-sm);
    border: 1px solid var(--ca-border);
}

.ca-reason-num {
    background: var(--ca-red);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ca-reason-txt strong {
    display: block;
    font-size: 15px;
    color: var(--ca-dark);
    margin-bottom: 2px;
}

.ca-reason-txt span {
    font-size: 13px;
    color: var(--ca-text-muted);
    line-height: 1.5;
}

.ca-why-us-visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ca-visual-badge {
    background: #ffffff;
    border: 2px solid var(--ca-yellow);
    border-radius: var(--ca-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--ca-shadow-sm);
}

.ca-visual-badge .stars {
    color: var(--ca-yellow);
    font-size: 24px;
    display: block;
    margin-bottom: 6px;
}

.ca-visual-badge strong {
    display: block;
    font-size: 20px;
    color: var(--ca-dark);
}

.ca-visual-badge small {
    color: var(--ca-text-muted);
    font-size: 13px;
}

.ca-visual-card {
    background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
    color: #ffffff;
    border-radius: var(--ca-radius);
    padding: 26px;
    box-shadow: 0 10px 25px rgba(211, 47, 47, 0.3);
}

.ca-visual-card .ca-vc-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.ca-visual-card h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8px 0;
}

.ca-visual-card p {
    font-size: 13px;
    color: #f1f5f9;
    line-height: 1.6;
    margin-bottom: 16px;
}

.ca-btn-call-mini {
    display: inline-block;
    background: var(--ca-yellow);
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-btn-call-mini:hover {
    background: #ffffff;
    color: var(--ca-red);
}

/* Facebook Fanpage Card */
.ca-visual-fb-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ca-radius);
    padding: 20px;
    box-shadow: var(--ca-shadow-sm);
    border-top: 4px solid #1877f2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--ca-transition);
}

.ca-visual-fb-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.15);
    border-color: #1877f2;
}

.ca-fb-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ca-fb-icon {
    width: 38px;
    height: 38px;
    background: #1877f2;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ca-fb-titles strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--ca-dark);
    line-height: 1.25;
}

.ca-fb-titles small {
    display: block;
    font-size: 11px;
    color: #1877f2;
    font-weight: 600;
}

.ca-visual-fb-card p {
    font-size: 12.5px;
    color: var(--ca-text-muted);
    line-height: 1.5;
    margin: 0;
}

.ca-btn-fb-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1877f2;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--ca-transition);
    margin-top: 2px;
}

.ca-btn-fb-link:hover {
    background: #0d65d9;
    color: #ffffff;
}

/* 4-Step Process Grid */
.ca-process-section {
    padding: 70px 0;
    background: #ffffff;
}

.ca-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ca-step-card {
    background: var(--ca-bg-light);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    padding: 24px 18px;
    position: relative;
    text-align: center;
    transition: var(--ca-transition);
}

.ca-step-card:hover {
    background: #ffffff;
    border-color: var(--ca-red-border);
    transform: translateY(-4px);
    box-shadow: var(--ca-shadow-md);
}

.ca-step-card .step-num {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 18px;
    font-weight: 900;
    color: var(--ca-red);
    opacity: 0.35;
}

.ca-step-card .step-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.ca-process-title-jp {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ca-red);
    margin-top: 6px;
    line-height: 1.4;
}

.ca-process-desc-jp {
    display: block;
    font-size: 13px;
    color: var(--ca-text-muted);
    margin-top: 4px;
}

.ca-step-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--ca-dark);
    margin: 0 0 8px 0;
}

.ca-step-card .ca-step-jp {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ca-red);
    margin-top: 3px;
}

.ca-step-card p {
    font-size: 12px;
    color: var(--ca-text-muted);
    line-height: 1.6;
    margin: 0;
}

.ca-step-card .ca-step-desc-jp {
    display: block;
    font-size: 11px;
    color: var(--ca-text-muted);
    margin-top: 5px;
    line-height: 1.4;
}

/* ==========================================================================
   8. BUYBACK BANNER SECTION
   ========================================================================== */
.ca-buyback-banner-section {
    padding: 40px 0;
    background: var(--ca-bg-light);
}

.ca-buyback-card {
    background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 70%, #991b1b 100%);
    color: #ffffff;
    border-radius: 16px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 30px;
    align-items: center;
    box-shadow: 0 12px 35px rgba(211, 47, 47, 0.3);
    border: 2px solid var(--ca-yellow);
}

.ca-bb-badge {
    display: inline-block;
    background: var(--ca-yellow);
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.ca-buyback-text h2 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.3;
    margin: 0 0 12px 0;
}

.ca-bb-title-jp {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ca-yellow);
    margin-top: 6px;
    line-height: 1.4;
}

.ca-buyback-text p {
    font-size: 14px;
    color: #f1f5f9;
    line-height: 1.6;
    margin-bottom: 16px;
}

.ca-bb-desc-jp {
    display: block;
    font-size: 12px;
    color: #fecdd3;
    margin-top: 6px;
    line-height: 1.5;
}

.ca-bb-features {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ca-yellow-light);
}

.ca-buyback-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ca-btn-call-large {
    background: var(--ca-yellow);
    color: #0f172a;
    padding: 14px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: var(--ca-transition);
}

.ca-btn-call-large:hover {
    background: #ffffff;
    color: var(--ca-red);
}

.ca-btn-gold-large {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 14px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    transition: var(--ca-transition);
}

.ca-btn-gold-large:hover {
    background: #ffffff;
    color: var(--ca-red);
}

.ca-btn-call-large span,
.ca-btn-gold-large span {
    display: block;
    font-size: 15px;
}

.ca-btn-call-large small,
.ca-btn-gold-large small {
    display: block;
    font-size: 11px;
    font-weight: 500;
}

/* ==========================================================================
   9. WORKSHOP LOCATION & GOOGLE MAPS
   ========================================================================== */
.ca-location-section {
    padding: 70px 0;
    background: #ffffff;
}

.ca-location-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 25px;
    background: var(--ca-bg-light);
    border: 1px solid var(--ca-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--ca-shadow-sm);
}

.ca-location-info-card {
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.ca-info-header h3 {
    font-size: 22px;
    font-weight: 900;
    color: var(--ca-dark);
    margin: 0 0 2px 0;
}

.ca-info-header .jp {
    font-size: 13px;
    color: var(--ca-red);
    font-weight: 700;
}

.ca-contact-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ca-contact-list li {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--ca-text);
}

.ca-contact-list .icon {
    font-size: 20px;
    flex-shrink: 0;
}

.ca-phone-link {
    color: var(--ca-red);
    font-size: 18px;
    font-weight: 900;
    text-decoration: none;
}

.ca-contact-list .badge-open {
    display: block;
    font-size: 11px;
    color: #16a34a;
    font-weight: 700;
}

.ca-location-btns {
    margin-top: auto;
    display: flex;
    gap: 12px;
}

.ca-btn-map {
    flex: 1;
    background: var(--ca-red);
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    transition: var(--ca-transition);
}

.ca-btn-map:hover {
    background: var(--ca-red-hover);
    color: #ffffff;
}

.ca-btn-book {
    flex: 1;
    background: var(--ca-yellow);
    color: #0f172a;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    transition: var(--ca-transition);
}

.ca-btn-book:hover {
    background: #0f172a;
    color: #ffffff;
}

.ca-btn-map span,
.ca-btn-book span {
    display: block;
}

.ca-btn-map small,
.ca-btn-book small {
    display: block;
    font-size: 10px;
    font-weight: 500;
}

.ca-location-map-wrap {
    min-height: 380px;
}

.ca-location-map-wrap iframe {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: none;
}

/* ==========================================================================
   10. SINGLE PRODUCT & QUICK SPECS STYLING
   ========================================================================== */
.ca-quick-specs-summary {
    background: #ffffff;
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    padding: 20px;
    margin: 20px 0;
    box-shadow: var(--ca-shadow-sm);
}

.ca-specs-badge-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ca-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
}

.ca-badge-verified {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.ca-badge-ready {
    background: var(--ca-red-light);
    color: var(--ca-red);
    border: 1px solid var(--ca-red-border);
}

.ca-badge-sold {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.ca-badge-man {
    background: var(--ca-yellow);
    color: #0f172a;
}

.ca-specs-grid-pill {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.ca-spec-pill-item {
    background: var(--ca-bg-light);
    border: 1px solid var(--ca-border);
    border-radius: 8px;
    padding: 8px 12px;
}

.ca-spec-pill-item .lbl {
    display: block;
    font-size: 11px;
    color: var(--ca-text-muted);
}

.ca-spec-pill-item .val {
    display: block;
    font-size: 13px;
    color: var(--ca-dark);
    font-weight: 800;
}

.ca-single-action-box {
    background: var(--ca-red-light);
    border: 1px solid var(--ca-red-border);
    border-radius: 10px;
    padding: 16px;
}

.ca-cta-header {
    text-align: center;
    margin-bottom: 12px;
}

.ca-cta-header strong {
    display: block;
    font-size: 14px;
    color: var(--ca-red-deep);
}

.ca-cta-header span {
    font-size: 11px;
    color: var(--ca-text-muted);
}

.ca-cta-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ca-cta-btn {
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-cta-call {
    background: var(--ca-red);
    color: #ffffff;
}

.ca-cta-call:hover {
    background: var(--ca-red-hover);
    color: #ffffff;
}

.ca-cta-book {
    background: var(--ca-yellow);
    color: #0f172a;
    font-weight: 800;
}

.ca-cta-book:hover {
    background: #0f172a;
    color: #ffffff;
}

.ca-cta-map {
    background: #ffffff;
    color: var(--ca-dark);
    border: 1px solid var(--ca-border);
}

.ca-cta-map:hover {
    border-color: var(--ca-red);
    color: var(--ca-red);
}

.ca-cta-btn span {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.ca-cta-btn small {
    display: block;
    font-size: 10px;
}

/* Specs Tab Table */
.ca-specs-tab-wrapper {
    padding: 10px 0;
}

.ca-tab-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ca-dark);
    margin: 0 0 4px 0;
}

.ca-tab-sub {
    font-size: 13px;
    color: var(--ca-text-muted);
    margin-bottom: 20px;
}

.ca-specs-detail-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--ca-border);
}

.ca-specs-detail-table th,
.ca-specs-detail-table td {
    padding: 12px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--ca-border);
}

.ca-specs-detail-table th {
    background: var(--ca-bg-light);
    color: #475569;
    font-weight: 700;
    width: 35%;
    text-align: left;
}

.ca-specs-detail-table td {
    color: var(--ca-dark);
    font-weight: 600;
}

.ca-specs-detail-table tr.ca-custom-spec-row {
    background: var(--ca-yellow-light);
}

/* Loop Card Badges */
.ca-loop-brand-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ca-loop-brand-tag {
    background: var(--ca-red-light);
    color: var(--ca-red);
    font-size: 11px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--ca-red-border);
}

.ca-loop-brand-tag.ca-loop-sold-tag {
    background: #475569;
    color: #ffffff;
    border-color: #334155;
}

.ca-loop-brand-tag.ca-loop-stock-tag {
    background: var(--ca-red);
    color: #ffffff;
    border-color: var(--ca-red);
}

.ca-loop-year-tag {
    background: var(--ca-bg-light);
    color: var(--ca-text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--ca-border);
}

.ca-loop-odo-tag {
    background: var(--ca-yellow-light);
    color: #854d0e;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
}

.ca-man-badge {
    background: var(--ca-yellow);
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 6px;
    display: inline-block;
}

/* ==========================================================================
   11. CUSTOM FOOTER (RED, YELLOW & WHITE THEME)
   ========================================================================== */
.ca-custom-footer {
    background: #0f172a;
    color: #94a3b8;
    position: relative;
    padding-top: 50px;
    border-top: 4px solid var(--ca-red);
}

.ca-footer-accent-strip {
    height: 4px;
    background: linear-gradient(90deg, var(--ca-red) 0%, var(--ca-yellow) 50%, var(--ca-red) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.ca-footer-grid-4 {
    display: grid;
    grid-template-columns: 1.4fr 1.1fr 1.3fr 1.4fr;
    gap: 30px;
    padding-bottom: 40px;
}

.ca-f-logo .logo-txt {
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.5px;
    display: block;
}

.ca-f-logo .jp-tag {
    color: var(--ca-yellow);
}

.ca-f-logo .logo-sub {
    font-size: 12px;
    color: #94a3b8;
    display: block;
    margin-bottom: 12px;
}

.ca-f-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 16px;
}

.ca-f-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.f-badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ca-yellow);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

.ca-f-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 16px 0;
    position: relative;
    padding-bottom: 8px;
}

.ca-f-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--ca-red);
}

.ca-f-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.ca-f-list a {
    color: #cbd5e1;
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-f-list a:hover {
    color: var(--ca-yellow);
    padding-left: 4px;
}

.ca-f-posts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ca-f-post-item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ca-f-post-item .f-thumb {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ca-f-post-item .f-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ca-f-post-item .f-pinfo time {
    display: block;
    font-size: 11px;
    color: var(--ca-yellow);
}

.ca-f-post-item .f-pinfo h5 {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    margin: 2px 0 0 0;
}

.ca-f-post-item .f-pinfo h5 a {
    color: #e2e8f0;
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-f-post-item .f-pinfo h5 a:hover {
    color: var(--ca-yellow);
}

.ca-f-hotline-card {
    background: rgba(211, 47, 47, 0.15);
    border: 1px solid var(--ca-red);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.ca-f-hotline-card .label {
    display: block;
    font-size: 11px;
    color: #cbd5e1;
}

.ca-f-hotline-card .phone-num {
    display: block;
    color: var(--ca-yellow);
    font-size: 18px;
    font-weight: 900;
    text-decoration: none;
}

.ca-f-hotline-card .note {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.ca-f-addr {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 14px;
}

.ca-f-addr strong {
    color: #ffffff;
}

.ca-f-actions {
    display: flex;
    gap: 8px;
}

.ca-fb-btn {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-fb-map {
    background: var(--ca-red);
    color: #ffffff;
}

.ca-fb-map:hover {
    background: var(--ca-red-hover);
    color: #ffffff;
}

.ca-fb-book {
    background: var(--ca-yellow);
    color: #0f172a;
    font-weight: 800;
}

.ca-fb-book:hover {
    background: #ffffff;
    color: var(--ca-red);
}

.ca-footer-bottom-bar {
    border-top: 1px solid #1e293b;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
}

.ca-fb-left p {
    margin: 0;
    color: #64748b;
}

.ca-fb-right {
    display: flex;
    gap: 14px;
}

.ca-fb-right a {
    color: #94a3b8;
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-fb-right a:hover {
    color: var(--ca-yellow);
}

/* Hide redundant default Blocksy bottom footer */
#footer.ct-footer {
    display: none !important;
}

/* ==========================================================================
   12. FLOATING ACTION BUTTONS & MOBILE BAR
   ========================================================================== */
.ca-floating-ctas-desktop {
    position: fixed;
    bottom: 30px;
    left: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ca-fcta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 8px 14px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: var(--ca-transition);
}

.ca-fcta-item:hover {
    transform: translateX(4px);
}

.ca-fcta-item.fcta-call {
    border: 2px solid var(--ca-red);
}

.ca-fcta-item.fcta-call .text strong {
    color: var(--ca-red);
}

.ca-fcta-item.fcta-booking {
    border: 2px solid var(--ca-yellow);
    background: linear-gradient(135deg, #ffffff 0%, #fef9c3 100%);
}

.ca-fcta-item.fcta-booking .text strong {
    color: #92400e;
}

.ca-fcta-item .icon {
    font-size: 20px;
}

.ca-fcta-item .text strong {
    display: block;
    font-size: 12px;
    font-weight: 800;
}

.ca-fcta-item .text small {
    display: block;
    font-size: 10px;
    color: #64748b;
}

/* Pulse animation */
@keyframes caPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.ca-fcta-item .icon.pulse {
    display: inline-block;
    animation: caPulse 1.8s infinite ease-in-out;
}

/* Mobile Sticky Bottom Bar */
.ca-mobile-sticky-bar {
    display: none;
}

/* ==========================================================================
   13. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
    .ca-car-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ca-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ca-brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .ca-footer-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .ca-why-us-box,
    .ca-buyback-card,
    .ca-location-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Compact Slim Side Gutters for Native App Feel (Eliminates excessive side margins) */
    .ca-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .entry-content,
    .site-main,
    .ct-container,
    .ct-container-full,
    [class*="ct-container"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ca-header-topbar {
        display: none;
    }

    /* Compact Mobile App-like Hero Section */
    .ca-hero-section {
        padding: 20px 0 16px 0 !important;
    }
    .ca-hero-tag {
        font-size: 11px !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
        gap: 5px !important;
    }
    .ca-hero-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0 0 8px 0 !important;
        font-weight: 800 !important;
    }
    .ca-hero-sub {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin: 0 auto 14px auto !important;
        color: #e2e8f0 !important;
        display: block !important;
        padding: 0 4px !important;
    }

    /* Compact App-like Search Box */
    .ca-hero-search-box {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    }
    .ca-hero-filter-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: flex-end !important;
    }
    .ca-hero-filter-form .ca-filter-group:nth-child(1),
    .ca-hero-filter-form .ca-filter-group:nth-child(2) {
        grid-column: span 1 !important;
    }
    .ca-hero-filter-form .ca-filter-group:nth-child(3) {
        grid-column: 1 / -1 !important;
    }
    .ca-hero-filter-form .ca-filter-btn-wrap {
        grid-column: 1 / -1 !important;
    }
    .ca-filter-group label {
        font-size: 10.5px !important;
        margin-bottom: 3px !important;
        color: #64748b !important;
        font-weight: 700 !important;
    }
    .ca-filter-group select,
    .ca-filter-group input {
        height: 38px !important;
        font-size: 13px !important;
        padding: 0 8px !important;
        border-radius: 6px !important;
    }
    .ca-btn-search {
        height: 40px !important;
        border-radius: 6px !important;
        width: 100% !important;
        flex-direction: row !important;
        gap: 6px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-btn-search span {
        font-size: 13.5px !important;
        font-weight: 800 !important;
    }
    .ca-btn-search small {
        font-size: 11px !important;
        margin-top: 0 !important;
    }

    /* Compact 2-button Grid Actions on Mobile - Perfectly Equal Height */
    .ca-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        align-items: stretch !important;
    }
    .ca-hero-actions .ca-btn-primary,
    .ca-hero-actions .ca-btn-yellow {
        padding: 6px 8px !important;
        border-radius: 8px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        line-height: 1.2 !important;
    }
    .ca-hero-actions .ca-btn-primary span,
    .ca-hero-actions .ca-btn-yellow span {
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    .ca-hero-actions .ca-btn-primary small,
    .ca-hero-actions .ca-btn-yellow small {
        font-size: 9px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }
    .ca-hero-actions .ca-btn-outline {
        display: none !important; /* Phone hotline is already in fixed bottom bar */
    }

    /* 2x2 Grid for 4 Trust Metrics on Mobile */
    .ca-hero-trust-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(8px) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
    }
    .ca-trust-divider {
        display: none !important;
    }
    .ca-trust-item {
        text-align: center !important;
        padding: 6px 4px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 6px !important;
    }
    .ca-trust-item .num {
        font-size: 17px !important;
        font-weight: 900 !important;
        color: var(--ca-yellow) !important;
        line-height: 1.2 !important;
        display: block !important;
    }
    .ca-trust-item .txt {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        line-height: 1.25 !important;
        display: block !important;
        margin-top: 2px !important;
    }
    .ca-trust-item .sub-jp {
        font-size: 9.5px !important;
        color: #cbd5e1 !important;
        opacity: 0.9 !important;
        display: block !important;
        margin-top: 1px !important;
    }
    /* Popular Brands Horizontal Scroll on Mobile */
    .ca-brand-bar-section {
        padding: 22px 0 18px 0;
    }
    .ca-section-header-inline {
        margin-bottom: 12px;
        align-items: center;
        gap: 6px;
    }
    .ca-section-heading-sm {
        font-size: 16px;
    }
    .ca-heading-jp {
        font-size: 11px;
    }
    .ca-link-more span {
        font-size: 12px;
    }
    .ca-link-more small {
        font-size: 10px;
    }
    .ca-brands-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 8px;
        padding: 4px 15px 10px 15px;
        margin-left: -15px;
        margin-right: -15px;
        scrollbar-width: thin;
        scrollbar-color: var(--ca-red) transparent;
    }
    .ca-brands-grid::-webkit-scrollbar {
        height: 3px;
    }
    .ca-brands-grid::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }
    .ca-brands-grid::-webkit-scrollbar-thumb {
        background: var(--ca-red);
        border-radius: 3px;
    }
    .ca-brand-card {
        flex: 0 0 84px;
        min-width: 84px;
        scroll-snap-align: start;
        padding: 8px 4px;
    }
    .ca-brand-all {
        flex: 0 0 105px;
        min-width: 105px;
    }
    .ca-brand-icon {
        font-size: 18px;
        margin-bottom: 2px;
    }
    .ca-brand-title {
        font-size: 12px;
        white-space: nowrap;
    }
    .ca-brand-jp {
        font-size: 9.5px;
        white-space: nowrap;
    }
    .ca-brand-count {
        font-size: 10px;
        white-space: nowrap;
    }
    /* ==========================================================================
       MOBILE APP-LIKE REDESIGN FOR ALL SECTIONS (COMPACT & SLEEK)
       ========================================================================== */
    /* Global Section Compact Spacings */
    .ca-services-section,
    .ca-featured-cars-section,
    .ca-why-us-section,
    .ca-process-section,
    .ca-buyback-banner-section,
    .ca-location-section {
        padding: 24px 0 20px 0 !important;
    }

    .ca-section-heading-center {
        margin-bottom: 14px !important;
    }

    .ca-sub-badge {
        font-size: 10px !important;
        padding: 3px 9px !important;
        margin-bottom: 5px !important;
        letter-spacing: 0.3px !important;
    }

    .ca-section-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0 0 4px 0 !important;
    }

    .ca-section-desc {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
        margin: 0 auto !important;
        color: #64748b !important;
        padding: 0 4px !important;
    }

    /* 1. Services Section: Compact 2-column App Grid (2x2) */
    .ca-services-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .ca-service-card {
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    .ca-service-img-wrap {
        height: 100px !important;
    }

    .ca-service-badge {
        font-size: 9.5px !important;
        padding: 2px 7px !important;
        top: 6px !important;
        left: 6px !important;
    }

    .ca-service-body {
        padding: 10px 8px 12px 8px !important;
    }

    .ca-service-jp-title {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }

    .ca-service-title {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.25 !important;
    }

    .ca-service-features {
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        gap: 4px !important;
    }

    .ca-service-features li {
        gap: 5px !important;
        margin-bottom: 3px !important;
    }

    .ca-service-features .ca-feat-icon {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0 !important;
    }

    .ca-service-features .ca-feat-vi {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    .ca-service-features .ca-feat-jp {
        display: none !important;
    }

    .ca-service-btn {
        padding: 6px 4px !important;
        border-radius: 6px !important;
        height: 32px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .ca-service-btn .ca-btn-vi {
        font-size: 11.5px !important;
        font-weight: 700 !important;
    }

    .ca-service-btn .ca-btn-jp {
        display: none !important;
    }

    /* 2. Car Cards: 2-column Compact Grid */
    .ca-car-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .ca-car-card {
        border-radius: 10px !important;
        padding: 0 !important;
    }

    .ca-car-img-wrap {
        height: 115px !important;
        border-radius: 10px 10px 0 0 !important;
    }

    /* Extra Small & Sleek Stock Badge on Mobile */
    .ca-badge-stock,
    .ca-tag-hot,
    .ca-tag-sold,
    .ca-loop-brand-tag.ca-loop-stock-tag,
    .ca-loop-brand-tag.ca-loop-sold-tag {
        font-size: 8px !important;
        line-height: 1.1 !important;
        padding: 1.5px 5px !important;
        border-radius: 3px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    .ca-car-badge-top {
        top: 6px !important;
        left: 6px !important;
        right: 6px !important;
    }

    .ca-tag-man {
        font-size: 8.5px !important;
        padding: 1.5px 5px !important;
        border-radius: 3px !important;
        line-height: 1.1 !important;
    }

    .ca-car-body {
        padding: 8px !important;
    }

    .ca-car-title {
        font-size: 12.5px !important;
        line-height: 1.25 !important;
        height: 32px !important;
        margin-bottom: 6px !important;
    }

    .ca-car-specs-mini {
        padding: 4px 6px !important;
        font-size: 10.5px !important;
        gap: 2px !important;
        margin-bottom: 8px !important;
        border-radius: 4px !important;
    }

    .ca-car-footer {
        padding-top: 6px !important;
        margin-top: auto !important;
    }

    .ca-car-price-box .yen-amt {
        font-size: 15px !important;
        font-weight: 900 !important;
    }

    .ca-car-price-box .man-amt {
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    .ca-btn-detail {
        font-size: 10.5px !important;
        padding: 4px 8px !important;
        border-radius: 5px !important;
    }

    .ca-btn-view-all {
        padding: 10px 22px !important;
        border-radius: 8px !important;
    }

    .ca-btn-view-all span {
        font-size: 13px !important;
    }

    .ca-btn-view-all small {
        font-size: 10.5px !important;
    }

    /* 3. Why Choose Us Section */
    .ca-why-us-box {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ca-why-title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    .ca-why-title-jp {
        font-size: 12px !important;
    }

    .ca-why-desc {
        font-size: 12px !important;
        margin-bottom: 14px !important;
    }

    .ca-reasons-list {
        gap: 8px !important;
    }

    .ca-reason-item {
        padding: 8px 10px !important;
        gap: 10px !important;
        border-radius: 8px !important;
    }

    .ca-reason-num {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }

    .ca-reason-txt strong {
        font-size: 13px !important;
    }

    .ca-reason-txt span {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
    }

    .ca-visual-badge {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }

    .ca-visual-badge h4 {
        font-size: 15px !important;
    }

    .ca-visual-badge p {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .ca-fanpage-card {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }

    .ca-fanpage-avatar {
        width: 42px !important;
        height: 42px !important;
    }

    .ca-fanpage-title {
        font-size: 13px !important;
    }

    .ca-btn-fb-follow {
        height: 32px !important;
        font-size: 11.5px !important;
        padding: 0 12px !important;
    }

    /* 4. Process Steps: 2x2 App Grid */
    .ca-process-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .ca-step-card {
        padding: 12px 8px !important;
        border-radius: 8px !important;
    }

    .ca-step-card .step-num {
        font-size: 13px !important;
        top: 6px !important;
        right: 8px !important;
    }

    .ca-step-card .step-icon {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }

    .ca-step-card h4 {
        font-size: 12.5px !important;
        margin: 0 0 4px 0 !important;
    }

    .ca-step-card p {
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }

    /* 5. Buyback Banner */
    .ca-buyback-card {
        padding: 18px 14px !important;
        border-radius: 12px !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .ca-buyback-title {
        font-size: 18px !important;
        margin-bottom: 6px !important;
    }

    .ca-buyback-desc {
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }

    .ca-buyback-features {
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    .ca-feat-pill {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    .ca-btn-buyback {
        width: 100% !important;
        height: 40px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        justify-content: center !important;
    }

    /* 6. Location & Map Section */
    .ca-location-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ca-location-info-card {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }

    .ca-loc-line {
        font-size: 12px !important;
        margin-bottom: 8px !important;
        gap: 8px !important;
    }

    .ca-location-map-wrap iframe {
        height: 200px !important;
        border-radius: 10px !important;
    }

    .ca-loc-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .ca-loc-actions a {
        padding: 9px 8px !important;
        font-size: 11.5px !important;
        border-radius: 6px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* 7. Footer Compact & Sticky bar spacing */
    .ca-footer-section {
        padding: 24px 0 85px 0 !important;
    }

    .ca-footer-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ca-fcol-title {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .ca-footer-col p,
    .ca-footer-col li a {
        font-size: 11.5px !important;
    }

    .ca-specs-grid-pill,
    .ca-cta-btns {
        grid-template-columns: 1fr;
    }

    /* Mobile Floating Bar */
    .ca-floating-ctas-desktop {
        display: none;
    }

    .ca-mobile-sticky-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top: 2px solid var(--ca-red);
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
        z-index: 99999;
        justify-content: space-around;
        padding: 6px 0;
    }

    .ca-mobile-sticky-bar .m-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: var(--ca-dark);
        font-size: 11px;
        font-weight: 700;
        flex: 1;
        padding: 4px 0;
    }

    .ca-mobile-sticky-bar .m-item.m-call {
        color: var(--ca-red);
    }

    .ca-mobile-sticky-bar .m-item.m-book {
        color: var(--ca-gold-hover);
    }

    .ca-mobile-sticky-bar .m-icon {
        font-size: 18px;
        margin-bottom: 2px;
    }

    body {
        padding-bottom: 58px;
    }
}


/* ==========================================================================
   14. WOOCOMMERCE ARCHIVE & SHOP STYLING (RED, YELLOW & WHITE THEME)
   ========================================================================== */
.woocommerce ul.products {
    gap: 20px;
}

.woocommerce ul.products li.product {
    background: #ffffff;
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    padding: 16px;
    box-shadow: var(--ca-shadow-sm);
    transition: var(--ca-transition);
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    border-color: var(--ca-red-border);
    box-shadow: var(--ca-shadow-md);
}

.woocommerce ul.products li.product .woocommerce-loop-image-wrapper {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-image-wrapper img {
    transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ca-dark) !important;
    line-height: 1.4 !important;
    margin: 8px 0 10px 0 !important;
    height: 42px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.woocommerce ul.products li.product .price {
    color: var(--ca-red) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    margin-bottom: 12px !important;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.woocommerce ul.products li.product .button {
    background: var(--ca-red) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    text-align: center !important;
    margin-top: auto !important;
    transition: var(--ca-transition) !important;
    border: none !important;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--ca-red-hover) !important;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3) !important;
}

.woocommerce span.onsale {
    background: var(--ca-red) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    min-height: auto !important;
    line-height: 1.4 !important;
}

/* Single Product Tweaks */
.single-product .summary .price {
    color: var(--ca-red) !important;
    font-size: 26px !important;
    font-weight: 900 !important;
}

.single-product .single_add_to_cart_button {
    background: var(--ca-red) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    padding: 14px 28px !important;
    transition: var(--ca-transition) !important;
}

.single-product .single_add_to_cart_button:hover {
    background: var(--ca-red-hover) !important;
    box-shadow: 0 6px 18px rgba(211, 47, 47, 0.35) !important;
}

/* ==========================================================================
   SINGLE PRODUCT GALLERY: 1-ROW THUMBNAIL SLIDER / HORIZONTAL SCROLL
   ========================================================================== */
.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] {
    margin-top: 14px !important;
    position: relative !important;
    width: 100% !important;
}

.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 10px !important;
    padding: 6px 2px 10px 2px !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Custom Sleek Scrollbar for Thumbnail Slider */
.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol::-webkit-scrollbar {
    height: 5px;
}

.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol::-webkit-scrollbar-thumb {
    background: var(--ca-red);
    border-radius: 4px;
}

.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol::-webkit-scrollbar-thumb:hover {
    background: var(--ca-red-hover);
}

/* Thumbnail Items */
.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li {
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li:hover {
    border-color: var(--ca-yellow) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li.active {
    border-color: var(--ca-red) !important;
    box-shadow: 0 0 0 1px var(--ca-red), 0 4px 12px rgba(211, 47, 47, 0.25) !important;
    transform: scale(1.02);
}

.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li .ct-media-container {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

@media (max-width: 689px) {
    .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
    }
}