/* Public storefront visual system. CMS styles and application hooks stay separate. */
:root {
    --primary-red: #d94a2f;
    --primary-red-dark: #ba3823;
    --primary-red-light: #ed694c;
    --gray-50: #f8f7f4;
    --gray-100: #f0eee9;
    --gray-200: #e7e4dc;
    --gray-300: #d7d3ca;
    --gray-500: #8a8d8d;
    --gray-600: #656e72;
    --gray-700: #465157;
    --gray-800: #26363e;
    --gray-900: #14242c;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius-sm: 6px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --shadow-sm: 0 3px 14px rgba(20, 36, 44, .04);
    --shadow-md: 0 12px 32px rgba(20, 36, 44, .08);
    --shadow-lg: 0 20px 44px rgba(20, 36, 44, .12);
}

html { scroll-behavior: smooth; }
body { background: var(--gray-50); color: var(--gray-900); }
.container { max-width: 1320px; padding-inline: clamp(20px, 4vw, 56px); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(217, 74, 47, .6);
    outline-offset: 3px;
}

/* Shared storefront header */
.site-utility { background: #101c22; color: #d8dfdf; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.site-utility-inner { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-utility i { color: #ee795d; margin-right: 7px; }
.site-utility a { color: #d8dfdf; text-decoration: none; letter-spacing: .02em; text-transform: none; font-size: 12px; }
.site-utility a strong { color: #fff; margin-left: 5px; }
.site-utility a i { margin-left: 4px; margin-right: 0; font-size: 10px; }
.navigation { background: #fff; color: var(--gray-900); border-bottom: 1px solid var(--gray-200); box-shadow: 0 5px 18px rgba(20,36,44,.035); }
.desktop-nav-inner { display: flex; align-items: center; gap: clamp(24px, 3.5vw, 58px); min-height: 76px; }
.desktop-logo { min-width: 205px; max-width: 220px; gap: 11px; }
.desktop-logo:hover { transform: none; filter: none; }
.desktop-logo img { height: 38px; width: 56px; border-radius: 7px; object-fit: contain; filter: none; }
.brand-name { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.logo-text { background: none; -webkit-text-fill-color: var(--gray-900); color: var(--gray-900); font-size: 16px; letter-spacing: -.055em; font-weight: 850; text-shadow: none; white-space: normal; line-height: 1.05; }
.nav-menu { width: 100%; justify-content: flex-end; align-items: center; gap: clamp(2px, .8vw, 14px); }
.nav-item > a { color: var(--gray-700); padding: 11px 9px; font-size: 12px; font-weight: 700; border: 0; white-space: nowrap; border-radius: 7px; }
.nav-item > a:hover, .nav-item > a.active { color: var(--primary-red); background: #fbf1ed; border: 0; }
.cart-nav-item { padding: 0 0 0 6px; }
.nav-cart-btn { min-height: 42px; padding: 10px 15px; border-radius: 8px; background: var(--gray-900); box-shadow: none; font-size: 12px; }
.nav-cart-btn:hover { background: var(--primary-red); box-shadow: none; }
.nav-cart-count { color: var(--gray-900); }

/* Home: opening story and search */
main#main-content { overflow: hidden; }
#main-content > .hero { background: #14242c; padding: 0; min-height: 560px; overflow: hidden; }
#main-content > .hero::before { background: radial-gradient(circle at 82% 47%, rgba(231,86,55,.18), transparent 36%), linear-gradient(115deg, transparent 51%, rgba(255,255,255,.025) 51%, rgba(255,255,255,.025) 52%, transparent 52%); }
#main-content > .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent 45%, #000 100%); pointer-events: none; }
#main-content > .hero .container { position: relative; z-index: 1; }
#main-content .hero-content { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); align-items: center; gap: clamp(25px, 5vw, 80px); text-align: left; min-height: 560px; }
.hero-copy { padding: 64px 0 85px; max-width: 680px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: .17em; color: var(--primary-red); text-transform: uppercase; }
.hero-eyebrow { color: #ff9a80; margin-bottom: 22px; }
.eyebrow-line { width: 24px; height: 1px; background: currentColor; }
#main-content .hero h1 { font-size: clamp(48px, 5.5vw, 80px); letter-spacing: -.067em; white-space: normal; line-height: 1.02; margin: 0 0 24px; font-weight: 800; }
#main-content .hero h1 em { color: #f38365; font-style: normal; }
#main-content .hero p { max-width: 550px; margin: 0 0 32px; font-size: clamp(15px, 1.4vw, 18px); color: #c3cdd0; line-height: 1.7; }
.search-label { display: block; color: #fff; font-size: 12px; font-weight: 750; letter-spacing: .02em; margin-bottom: 11px; }
#main-content .hero-search { max-width: 595px; margin: 0; padding: 6px; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.16); }
#main-content .hero-search input { font-size: 14px; min-width: 0; border-radius: 7px; }
#main-content .hero-search button { border-radius: 7px; font-size: 13px; padding: 13px 20px; white-space: nowrap; }
#main-content .hero-search button i { margin-right: 6px; }
.hero-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 11px 21px; margin-top: 18px; font-size: 12px; }
.hero-shortcuts span { color: #92a2a9; }
.hero-shortcuts a { color: #fff; font-weight: 700; text-decoration: none; }
.hero-shortcuts a i { color: #f38365; font-size: 10px; margin-left: 5px; }
.hero-shortcuts a:hover { color: #f38365; }
.hero-visual { height: 440px; position: relative; align-self: center; isolation: isolate; }
.hero-visual::before { content: ''; position: absolute; width: 380px; height: 380px; top: 35px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(228,91,60,.16) 0 16%, transparent 55%), repeating-radial-gradient(circle, transparent 0 38px, rgba(255,255,255,.07) 39px 40px, transparent 41px 68px); }
.visual-index, .visual-caption { position: absolute; color: #a5b5ba; font-size: 10px; letter-spacing: .16em; font-weight: 700; }
.visual-index { top: 5px; left: 10px; }
.visual-caption { bottom: 2px; right: 0; }
.visual-caption span { color: #ff9a80; margin-left: 8px; }
.visual-orbit { position: absolute; border: 1px solid rgba(244,144,115,.35); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.orbit-one { width: 330px; height: 330px; }
.orbit-two { width: 232px; height: 232px; border-style: dashed; border-color: rgba(255,255,255,.26); }
.visual-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 154px; height: 154px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 12px; box-shadow: 0 20px 65px rgba(196,57,36,.4); }
.visual-core img { width: 100%; height: 100%; object-fit: contain; animation: gearFloat 14s ease-in-out infinite; }
@keyframes gearFloat { 50% { transform: rotate(24deg); } }
.visual-card { position: absolute; z-index: 2; display: flex; flex-direction: column; background: rgba(255,255,255,.96); color: var(--gray-900); width: 176px; padding: 16px 17px; border-radius: 11px; box-shadow: 0 18px 45px rgba(4,14,19,.28); }
.visual-card span { color: var(--primary-red); font-size: 9px; letter-spacing: .14em; font-weight: 800; margin-bottom: 8px; }
.visual-card strong { font-size: 15px; letter-spacing: -.03em; }
.visual-card small { font-size: 11px; color: var(--gray-600); margin-top: 3px; }
.visual-card-top { top: 55px; right: 0; }
.visual-card-bottom { bottom: 44px; left: 0; }

/* Home sections */
#main-content .vehicle-selector-section { padding: 0; background: var(--gray-50); border: 0; position: relative; z-index: 2; }
#main-content .vehicle-selector-section > .container { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: var(--shadow-lg); padding-block: 25px 28px; margin-top: -36px; position: relative; }
.selector-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 18px; }
#main-content .vehicle-selector-section h3 { text-align: left; font-size: clamp(22px, 2.4vw, 31px); letter-spacing: -.055em; margin: 3px 0 0; line-height: 1.15; }
.selector-heading p { font-size: 13px; color: var(--gray-600); margin: 0 0 4px; }
#main-content .vehicle-quick-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(130px, .85fr); gap: 9px; }
#main-content .vehicle-field { min-width: 0; }
#main-content .vehicle-field label { display: none; }
#main-content .vehicle-quick-selector .form-control, #main-content .vehicle-quick-selector #findPartsBtn { width: 100%; height: 48px; min-height: 48px; font-size: 13px; border-radius: 8px; padding: 10px 13px; }
#main-content .vehicle-quick-selector .form-control { border: 1px solid var(--gray-300); background-color: #fbfaf8; }
#main-content .vehicle-quick-selector #findPartsBtn { font-weight: 750; }
#main-content .featured-parts, #main-content .popular-categories, #main-content .how-it-works, #main-content .contact-section { padding: clamp(65px, 7vw, 100px) 0; }
#main-content .featured-parts { background: var(--gray-50); }
#main-content .popular-categories { background: #fff; }
#main-content .how-it-works { background: #f0eee9; }
#main-content .contact-section { background: #14242c; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 33px; }
.section-heading h2 { margin: 6px 0 0; font-size: clamp(30px, 3.7vw, 49px); letter-spacing: -.06em; line-height: 1.1; color: var(--gray-900); }
.heading-dot { color: var(--primary-red); }
.section-heading > p { max-width: 350px; color: var(--gray-600); font-size: 14px; line-height: 1.6; }
.section-link { display: inline-flex; align-items: center; gap: 12px; color: var(--gray-900); text-decoration: none; font-weight: 750; font-size: 13px; padding-bottom: 5px; border-bottom: 1px solid var(--primary-red); white-space: nowrap; }
.section-link i { color: var(--primary-red); font-size: 11px; transition: transform .2s ease; }
.section-link:hover i { transform: translateX(4px); }
#main-content .featured-parts .parts-grid, #main-content .categories-grid { margin-top: 0; gap: 20px; }
#main-content .featured-parts .parts-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; }
.category-card { border-radius: 12px; box-shadow: var(--shadow-sm); border-color: var(--gray-200); }
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-red); }
.category-card img { aspect-ratio: 16/9; }
.category-content { text-align: left; padding: 21px; }
.category-card h3 { font-size: 19px; letter-spacing: -.04em; }
#main-content .category-browse-btn { width: 100%; align-self: stretch; min-height: 44px; border-radius: 7px; padding: 10px 14px; justify-content: center; }
#main-content .process-flow { max-width: none; gap: 12px; padding: 0; }
#main-content .process-flow::before, #main-content .process-flow::after { display: none; }
#main-content .process-step { max-width: none; flex: 1; align-items: flex-start; text-align: left; padding: 25px 22px; background: #fff; border: 1px solid #e5e1d9; border-radius: 12px; min-height: 230px; }
#main-content .process-circle { width: 47px; height: 47px; border: 0; box-shadow: none; background: #f9e8e2; margin: 0 0 26px; }
#main-content .process-circle::after { display: none; }
#main-content .process-number { font-size: 18px; text-shadow: none; color: var(--primary-red); }
#main-content .process-content { max-width: none; }
#main-content .process-content h3 { font-size: 17px; letter-spacing: -.035em; }
#main-content .process-content p { font-size: 13px; line-height: 1.65; }
#main-content .process-content a { color: var(--primary-red-dark); }
#main-content .contact-section .section-heading h2 { color: #fff; }
#main-content .contact-section .section-heading > p { color: #c1cbd0; }
#main-content .contact-section .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 0; }
#main-content .stat-card { background: #22353e; color: #fff; border: 1px solid #3c5058; border-radius: 12px; box-shadow: none; display: flex; align-items: center; gap: 23px; text-align: left; padding: 29px; cursor: pointer; }
#main-content .stat-card:hover { background: #2a414c; transform: translateY(-3px); }
#main-content .stat-icon { margin: 0; color: #f38d70; font-size: 27px; width: 52px; height: 52px; background: rgba(243,141,112,.12); display: grid; place-items: center; border-radius: 10px; flex-shrink: 0; }
#main-content .stat-info h3 { color: #fff; font-size: 18px; margin-bottom: 3px; }
#main-content .stat-info p { color: #b9c7cb; font-size: 13px; }

/* Catalog, information pages, forms and footer */
main > .page-hero, main > .page-header { background: #14242c; color: #fff; padding: 53px 0 57px; border: 0; }
main > .page-hero h1, main > .page-header h1 { color: #fff; font-size: clamp(36px, 4vw, 54px); letter-spacing: -.055em; line-height: 1.08; margin-bottom: 12px; }
main > .page-hero p, main > .page-header p { color: #c8d2d4; max-width: 720px; line-height: 1.65; }
/* Header links, lifted verbatim from the <style> block in
   browse-by-category.html - that page was the only one that had them, which
   is why its header was the one that looked right. Scoped to `p a` and
   `.breadcrumb a` separately: a blanket `main > .page-hero a` would outrank
   `.breadcrumb a` and colour the breadcrumb with it. */
main > .page-hero p a, main > .page-header p a { color: var(--primary-red); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: all var(--transition-fast); }
main > .page-hero p a:hover, main > .page-header p a:hover { color: var(--primary-red-dark); border-bottom-color: var(--primary-red-dark); }
.breadcrumb { color: var(--gray-600); font-size: var(--text-sm); margin-bottom: var(--space-3); font-weight: 500; }
.breadcrumb a { color: var(--primary-red); text-decoration: none; font-weight: 600; transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--primary-red-dark); text-decoration: underline; }
.parts-section, .filters-section, .browse-content, .vehicle-selection { background: var(--gray-50); }
.form-control, .search-input, .searchable-input { border-color: var(--gray-300); border-radius: 8px; }
.form-control:focus, .search-input:focus { border-color: var(--primary-red); box-shadow: 0 0 0 3px rgba(217,74,47,.1); }
.btn-primary, .category-browse-btn { background: var(--primary-red); box-shadow: none; }
.btn-primary:hover, .category-browse-btn:hover { background: var(--primary-red-dark); box-shadow: 0 7px 18px rgba(217,74,47,.18); }
.part-card { border-radius: 12px; box-shadow: var(--shadow-sm); border-color: var(--gray-200); }
.part-card:hover { box-shadow: var(--shadow-md); }
.part-image { background: #fff; }
.part-title { letter-spacing: -.035em; }
.part-number { background: var(--gray-100); color: var(--gray-700); }
.part-actions .add-to-cart-btn { background: var(--primary-red); }
.part-actions .add-to-cart-btn:hover { background: var(--primary-red-dark); }
.footer { background: #0d1b21; padding: 65px 0 23px; }
.footer-content { gap: 35px; margin-bottom: 44px; }
.footer-section h3 { color: #fff; font-size: 14px; letter-spacing: -.02em; margin-bottom: 16px; }
.footer-section p, .footer-section a, .footer-section [data-contact="hours"] { color: #aebdc2; font-size: 13px; line-height: 1.9; }
.footer-section a:hover { color: #f68b70; }
.footer-bottom { border-color: #283c44; color: #93a7ae; font-size: 12px; }
.modal-content { border-radius: 15px; box-shadow: 0 24px 70px rgba(10,25,31,.25); }

@media (max-width: 1100px) {
    .desktop-nav { display: none !important; }
    .mobile-header { display: block !important; }
    .site-utility { display: none; }
    main { padding-top: 60px; }
    .mobile-header-content { padding: 0 16px; gap: 10px; }
    .mobile-logo { min-width: 0; gap: 8px; }
    .mobile-logo img { width: 54px; height: 32px; object-fit: contain; flex-shrink: 0; }
    .mobile-logo span { min-width: 0; font-size: 15px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mobile-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .mobile-header-cart, .mobile-menu-btn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; color: var(--gray-900); background: transparent; cursor: pointer; }
    .mobile-header-cart { position: relative; font-size: 17px; }
    .mobile-header-cart-count { display: none; position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; align-items: center; justify-content: center; border-radius: 20px; background: var(--primary-red); color: #fff; font-size: 10px; font-weight: 800; }
    .mobile-menu-btn { flex-direction: column; }
    .mobile-menu-btn span { width: 21px; height: 2px; background: var(--gray-900); }
    .floating-cart { display: none !important; }
    .mobile-menu { width: min(350px, calc(100vw - 35px)); right: -100vw; height: 100dvh; }
    .mobile-menu.show { right: 0; }
    .mobile-menu-header { padding: 17px 19px; }
    .mobile-menu-logo img { max-width: 64px; object-fit: contain; }
    .mobile-search { padding: 15px 18px; }
    .mobile-search-input { border: 1px solid var(--gray-200); border-radius: 9px; }
    .mobile-search-input input { min-width: 0; }
    .mobile-search-input button { min-width: 46px; }
    .mobile-nav-link { min-height: 48px; padding: 12px 20px; font-weight: 650; }
    .mobile-menu-footer { padding: 16px 20px max(18px, env(safe-area-inset-bottom)); }
    .mobile-whatsapp-btn { min-height: 48px; border-radius: 8px; }
}
@media (max-width: 900px) {
    #main-content .hero-content { grid-template-columns: minmax(0, 1fr) 260px; }
    .hero-visual { transform: scale(.8); transform-origin: center; }
    #main-content .vehicle-quick-selector { grid-template-columns: repeat(2, minmax(0,1fr)); }
    #main-content .vehicle-quick-selector #findPartsBtn { grid-column: span 2; }
}
@media (max-width: 768px) {
    .site-utility { display: none; }
    .mobile-header { background: #fff; box-shadow: 0 5px 18px rgba(20,36,44,.08); }
    .mobile-logo img { border-radius: 7px; }
    .mobile-logo span { background: none; color: var(--gray-900); -webkit-text-fill-color: var(--gray-900); }
    .mobile-menu { background: #fff; }
    #main-content > .hero { min-height: auto; }
    #main-content .hero-content { display: block; min-height: auto; }
    .hero-copy { padding: 62px 0 96px; }
    .hero-visual { display: none; }
    #main-content .hero h1 { font-size: clamp(43px, 9vw, 65px); }
    #main-content .hero p { font-size: 15px; }
    #main-content .vehicle-selector-section > .container { margin-top: -43px; width: calc(100% - 28px); padding: 23px; }
    .selector-heading { align-items: start; flex-direction: column; gap: 5px; }
    #main-content .vehicle-quick-selector { grid-template-columns: minmax(0, 1fr); gap: 11px; }
    #main-content .vehicle-quick-selector #findPartsBtn { grid-column: auto; margin-top: 4px; }
    #main-content .vehicle-field label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 750; color: var(--gray-800); }
    #main-content .vehicle-field label span { width: 21px; height: 21px; border-radius: 50%; background: #f9e8e2; color: var(--primary-red-dark); display: inline-grid; place-items: center; font-size: 11px; }
    #main-content .selector-heading { margin-bottom: 12px; }
    #main-content .selector-heading p { display: none; }
    #main-content .vehicle-quick-selector.is-compact .vehicle-field { display: none; }
    #main-content .vehicle-quick-selector.is-compact .vehicle-field.is-active { display: block; }
    #main-content .vehicle-quick-selector.is-compact .vehicle-field label { display: flex; }
    #main-content .vehicle-quick-selector.is-compact.is-loading-step .vehicle-field select { opacity: .6; cursor: progress; }
    #main-content .vehicle-quick-selector.is-compact #findPartsBtn { display: none; }
    #main-content .process-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #main-content .process-step { min-height: 205px; }
    #main-content .process-step:not(:last-child)::after { display: none; }
    .section-heading { align-items: start; }
    main > .page-hero, main > .page-header { padding: 43px 0 48px; }
}
@media (max-width: 560px) {
    .container { padding-inline: 19px; }
    #main-content .hero-copy { padding: 51px 0 83px; }
    #main-content .hero h1 { font-size: clamp(39px, 11vw, 52px); line-height: 1.04; margin-bottom: 17px; }
    #main-content .hero p { line-height: 1.62; margin-bottom: 26px; }
    #main-content .hero-search { flex-direction: column; gap: 5px; }
    #main-content .hero-search button { min-height: 45px; }
    #main-content .vehicle-selector-section > .container { width: calc(100% - 24px); padding: 21px 18px 20px; }
    #main-content .vehicle-quick-selector { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #main-content .vehicle-quick-selector .form-control, #main-content .vehicle-quick-selector #findPartsBtn { min-height: 46px; }
    #main-content .featured-parts, #main-content .popular-categories, #main-content .how-it-works, #main-content .contact-section { padding: 60px 0; }
    .section-heading { flex-direction: column; gap: 12px; }
    .section-heading h2 { font-size: 34px; }
    #main-content .featured-parts .parts-grid,
    main .parts-grid:not(.list-view) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    main .parts-grid:not(.list-view) .part-card { min-width: 0; border-radius: 10px; }
    main .parts-grid:not(.list-view) .part-image { height: 118px; }
    main .parts-grid:not(.list-view) .part-content { padding: 10px; }
    main .parts-grid:not(.list-view) .part-header { margin-bottom: 5px; }
    main .parts-grid:not(.list-view) .part-manufacturer { font-size: 9px; line-height: 1.2; }
    main .parts-grid:not(.list-view) .part-title { font-size: 13px; line-height: 1.23; -webkit-line-clamp: 2; margin-bottom: 4px; }
    main .parts-grid:not(.list-view) .part-description { font-size: 10px; line-height: 1.3; -webkit-line-clamp: 1; }
    main .parts-grid:not(.list-view) .part-number { font-size: 9px; letter-spacing: 0; }
    main .parts-grid:not(.list-view) .part-details { margin: 5px 0 8px; }
    main .parts-grid:not(.list-view) .part-price,
    main .parts-grid:not(.list-view) .promoted-price { font-size: 12px; line-height: 1.25; white-space: normal; }
    main .parts-grid:not(.list-view) .original-price { font-size: 10px; }
    main .parts-grid:not(.list-view) .part-actions { flex-direction: column !important; gap: 5px !important; }
    main .parts-grid:not(.list-view) .part-actions button { flex: none !important; width: 100% !important; min-width: 0; min-height: 42px !important; padding: 7px 5px !important; font-size: 10px !important; border-radius: 7px; }
    main .parts-grid:not(.list-view) .part-status-badge,
    main .parts-grid:not(.list-view) .promotion-badge { font-size: 8px; padding: 4px 6px; }
    #main-content .categories-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
    #main-content .category-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); min-height: 130px; align-items: stretch; }
    #main-content .category-card img { width: 104px; height: 100%; min-height: 130px; aspect-ratio: auto; object-fit: contain; padding: 12px; border-right: 1px solid var(--gray-100); }
    #main-content .category-content { padding: 14px 14px 13px; text-align: left; min-width: 0; }
    #main-content .category-card h3 { font-size: 17px; margin: 0 0 4px; }
    #main-content .category-card p { font-size: 12px; line-height: 1.35; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    #main-content .category-browse-btn { width: 100%; align-self: stretch; font-size: 11px; padding: 7px 10px; min-height: 32px; }
    #main-content .process-flow { grid-template-columns: 1fr; }
    #main-content .process-step { min-height: 0; padding: 22px; }
    #main-content .process-circle { margin-bottom: 15px; }
    #main-content .contact-section .stats-grid { grid-template-columns: 1fr; }
    #main-content .stat-card { padding: 19px; gap: 16px; }
    main > .page-hero, main > .page-header { padding: 34px 0 40px; }
    main > .page-hero h1, main > .page-header h1 { font-size: 34px; }
    main .contact-methods { padding: 37px 0; }
    main .contact-grid { gap: 14px; }
    main .contact-method { padding: 22px; box-shadow: var(--shadow-sm); text-align: left; }
    main .method-icon { width: 54px; height: 54px; margin: 0 0 14px; }
    main .method-icon i { font-size: 23px; }
    main .contact-method h3 { font-size: 21px; margin-bottom: 8px; }
    main .primary-contact { font-size: 16px; margin-bottom: 5px; overflow-wrap: anywhere; }
    main .contact-hours, main .contact-details { font-size: 13px; line-height: 1.5; }
    main .contact-form-section { padding: 38px 0; }
    main .form-container { padding: 23px 19px; box-shadow: var(--shadow-sm); }
    main .form-header { margin-bottom: 24px; }
    main .form-header h2 { font-size: 25px; }
    main .form-header p { font-size: 14px; }
    main .contact-form, main .form-row { gap: 15px; }
    main .submit-btn { width: 100%; min-height: 48px; font-size: 15px; }
    .whatsapp-float { width: 44px !important; height: 44px !important; right: 12px !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; animation: none; }
    .whatsapp-float a { width: 44px; height: 44px; font-size: 19px; }
    .footer-content { gap: 25px 15px; }
    .footer { padding: 50px 0 24px; }
    .footer-section { min-width: 0; }
    .footer-section p, .footer-section a, .footer-section [data-contact="hours"] { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    .visual-core img { animation: none; }
}

@media (max-width: 350px) {
    .mobile-header-content { padding-inline: 10px; }
    .mobile-logo img { width: 44px; }
    .mobile-logo span { font-size: 13px; }
    .mobile-header-cart, .mobile-menu-btn { width: 39px; }
    #main-content .category-card { grid-template-columns: 90px minmax(0, 1fr); }
    #main-content .category-card img { width: 90px; }
    main .parts-grid:not(.list-view) { gap: 7px !important; }
    main .parts-grid:not(.list-view) .part-image { height: 103px; }
    main .parts-grid:not(.list-view) .part-content { padding: 8px; }
    main .parts-grid:not(.list-view) .part-title { font-size: 12px; }
    main .parts-grid:not(.list-view) .part-actions button { font-size: 9px !important; }
}

/* Homepage: plain links to the brand pages (/brands/…) under the vehicle selector. */
.brand-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; font-size: 14px; }
.brand-links span { color: var(--gray-600, #5b6670); margin-right: 4px; }
.brand-links a { padding: 6px 14px; border: 1px solid var(--gray-200, #e2e6ea); border-radius: 999px; color: var(--gray-900, #111); font-weight: 600; text-decoration: none; background: var(--white, #fff); }
.brand-links a:hover { border-color: var(--primary-red, #eb0a1e); color: var(--primary-red, #eb0a1e); }