body[data-app="car-care"] { --accent:#377b93; --accent-dark:#265a70; --accent-light:#e8f1f6; --canvas:#f4f7fa; --line:#e5edf2; --ink:#263e4b; color:var(--ink); }
.care-brand strong { color:#284e61; }
.care-brand small { font-size:7px; letter-spacing:1.5px; }
.care-main { padding-top:4px; }
.care-location { display:flex; align-items:center; justify-content:space-between; gap:7px; margin:3px 0 13px; }
.care-location > span:first-child { display:flex; align-items:center; gap:5px; color:#8098a3; font-size:10px; }
.care-location svg { width:13px; height:13px; color:#57869b; }
.care-hero { position:relative; isolation:isolate; overflow:hidden; border-radius:16px; min-height:213px; padding:22px 18px; background:linear-gradient(135deg,#dbeaf1,#edf3f5); }
.care-hero::after { content:""; position:absolute; top:-90px; right:-46px; width:225px; height:260px; border:1px solid #ffffffc0; border-radius:50%; z-index:-1; transform:rotate(-20deg); }
.care-hero-copy { position:relative; z-index:2; }
.care-hero .eyebrow { color:#7797a7; font-size:7px; letter-spacing:1.4px; }
.care-hero h1 { margin:12px 0 10px; font-size:26px; line-height:1.37; color:#2c5366; font-weight:750; }
.care-hero p { font-size:10px; color:#839daa; margin:0; }
.care-hero .hero-cta { padding:8px 12px; min-height:32px; margin-top:18px; font-size:9px; background:#377b93; gap:8px; }
.care-art { position:absolute; width:205px; height:131px; right:-23px; bottom:-5px; z-index:1; }
.care-art svg { width:100%; height:100%; stroke:none; }
.care-road { position:absolute; z-index:0; width:230px; height:90px; border-radius:50%; right:-53px; bottom:-62px; background:#c7dce6; }
.vehicle-reminder { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #e1eaf1; border-radius:12px; padding:13px 12px; margin-top:15px; }
.vehicle-reminder > .quick-icon { width:37px; height:40px; border-radius:10px; background:#eaf2f6; }
.vehicle-reminder > .quick-icon svg { width:23px; height:23px; color:#779cb0; }
.vehicle-reminder > div { flex:1; min-width:0; }
.vehicle-reminder strong { display:block; font-size:11px; font-weight:650; color:#486676; overflow-wrap:anywhere; }
.vehicle-reminder small { display:block; margin-top:6px; font-size:8px; color:#9cacb9; }
.vehicle-reminder > button { min-height:30px; flex-shrink:0; padding:5px 0 5px 6px; font-size:9px; display:flex; align-items:center; color:#6b91a8; gap:2px; }
.vehicle-reminder > button svg { width:12px; height:12px; }
.care-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:19px 0 15px; }
.care-shortcuts button { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:0; }
.care-shortcuts .quick-icon { width:43px; height:43px; background:#e4eff5; color:#7095ad; border-radius:12px; }
.care-shortcuts button:nth-child(2) .quick-icon { background:#e5f1ed; color:#72a091; }
.care-shortcuts button:nth-child(3) .quick-icon { background:#f3ece1; color:#b09b73; }
.care-shortcuts button:nth-child(4) .quick-icon { background:#ebebf5; color:#9595b9; }
.care-shortcuts svg { width:23px; height:23px; }
.care-shortcuts strong { color:#6a8495; font-size:10px; font-weight:500; }
.care-benefits { display:flex; align-items:center; justify-content:space-between; gap:6px; border-top:1px solid #e3ebf0; border-bottom:1px solid #e3ebf0; padding:11px 4px; }
.care-benefits span { display:flex; align-items:center; gap:3px; color:#93a6b2; font-size:8px; }
.care-benefits svg { width:12px; height:12px; color:#7196a9; }
.care-main .section-head { margin:20px 0 12px; }
.care-main .section-kicker { font-size:7px; letter-spacing:1.5px; color:#8ca6b5; }
.care-main .section-head h2 { font-size:18px; color:#3b5a6e; }
.care-main .category-tabs { gap:3px; }
.care-main .category-tabs button { padding:8px 10px; font-size:10px; color:#9aaebb; }
.care-main .category-tabs button.active { color:#fff; }
.care-projects { display:grid; gap:11px; }
.care-project { display:block; width:100%; background:#fff; border:1px solid #e3ebf2; border-radius:12px; padding:13px; text-align:left; }
.care-project-main { display:flex; gap:12px; align-items:center; }
.care-project-visual { position:relative; width:76px; height:84px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#e7f0f5,#d5e4ed); color:#769ab1; }
.care-project-visual::after { content:""; position:absolute; right:-12px; bottom:-14px; width:55px; height:55px; border:1px solid #ffffffd0; border-radius:50%; }
.care-project-visual svg { width:39px; height:39px; stroke-width:1.2; }
.care-project[data-kind="wash"] .care-project-visual { background:linear-gradient(145deg,#e7f3ee,#d7ebe3); color:#8cb6a7; }
.care-project[data-kind="tire"] .care-project-visual { background:linear-gradient(145deg,#f4efe4,#ece3ce); color:#b4a786; }
.care-project[data-kind="air"] .care-project-visual { background:linear-gradient(145deg,#eeedf7,#e2e0ee); color:#a6a1c0; }
.care-project[data-kind="safety"] .care-project-visual { background:linear-gradient(145deg,#f0f3f5,#e2e8ed); color:#95a8b7; }
.care-project-copy { flex:1; min-width:0; }
.care-project-copy .service-tag { color:#7b99ad; background:#eff4f8; font-size:7px; }
.care-project-copy h3 { font-size:15px; color:#3b596c; margin:8px 0 7px; }
.care-project-copy p { font-size:9px; color:#9dacba; line-height:1.7; margin:0 0 8px; }
.care-project-copy > small { display:flex; align-items:center; gap:5px; font-size:8px; color:#acbac6; }
.care-project-copy > small svg { width:11px; height:11px; }
.care-project-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eef3f7; margin-top:12px; padding-top:11px; gap:8px; }
.care-project-footer .price { font-size:19px; color:#377b93; }
.care-project-footer .price em { color:#b0bec9; }
.care-project-footer > span:last-child { display:flex; align-items:center; gap:3px; color:#7297ac; font-size:10px; }
.care-project-footer > span:last-child svg { width:12px; height:12px; }
.care-main .notice { color:#b2c0cc; }
.care-detail-summary { display:flex; align-items:center; gap:14px; background:#f3f7fa; border:1px solid #e8eff4; border-radius:12px; margin:6px 0 17px; padding:15px; }
.care-detail-summary > .quick-icon { width:53px; height:61px; color:#7099af; border-radius:10px; flex-shrink:0; }
.care-detail-summary svg { width:32px; height:32px; stroke-width:1.3; }
.care-detail-summary h3 { margin:0 0 9px; font-size:19px; color:#3f5e70; }
.care-detail-summary p { margin:0; color:#9cafbd; font-size:9px; line-height:1.8; }
.care-includes { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 18px; }
.care-includes span { display:flex; align-items:center; gap:4px; font-size:8px; color:#91a7b7; background:#f7f9fc; border:1px solid #e8eef5; border-radius:5px; padding:6px 7px; }
.care-includes svg { width:11px; height:11px; color:#74a0b5; }
.care-sheet .spec-group { margin-top:21px; }
.care-sheet .spec-group h4 { font-size:11px; color:#738ea2; margin-bottom:11px; }
.care-vehicle-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.care-vehicle-option { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; border:1px solid #e3edf3; border-radius:9px; padding:11px 4px; color:#9aafbd; background:#f8fafc; }
.care-vehicle-option svg { width:23px; height:23px; stroke-width:1.3; }
.care-vehicle-option strong { font-size:9px; font-weight:500; }
.care-vehicle-option small { font-size:8px; color:#b0bec8; }
.care-vehicle-option.active { border-color:#377b93; background:#edf5f8; color:#377b93; }
.care-vehicle-option.active small { color:#8aa8b9; }
.care-package-options { display:grid; gap:8px; }
.care-package-option { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #e3edf4; border-radius:8px; color:#8ca5b5; background:#f8fafc; width:100%; text-align:left; }
.care-package-option > span { flex:1; min-width:0; }
.care-package-option strong { display:block; font-size:11px; font-weight:500; }
.care-package-option small { display:block; margin-top:6px; font-size:8px; line-height:1.7; color:#adbdc9; }
.care-package-option > b { font-size:14px; font-weight:600; white-space:nowrap; }
.care-package-option.active { border-color:#377b93; color:#377b93; background:#edf5f8; }
.care-package-option > svg { width:14px; height:14px; }
.care-sheet .date-choice { border-color:#e7edf4; background:#f8fafc; color:#9db0bf; }
.care-sheet .date-choice.active { border-color:#377b93; background:#edf5f8; color:#377b93; }
.care-sheet .time-grid .choice { border-color:#e4ecf4; background:#f8fafc; color:#9bafbe; }
.care-sheet .time-grid .choice.active { border-color:#377b93; background:#edf5f8; color:#377b93; }
.care-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.care-sheet .form-label { color:#90a8b9; font-size:10px; margin-top:19px; }
.care-sheet .form-label input { background:#f7fafc; border-color:#e2ecf3; color:#829ead; padding:12px 10px; }
.care-fee-breakdown { display:grid; gap:9px; margin-top:24px; padding:15px 0 13px; border-top:1px solid #e9eff5; border-bottom:1px solid #e9eff5; }
.care-fee-breakdown > div { display:flex; justify-content:space-between; gap:10px; font-size:9px; color:#9bb0bf; }
.care-fee-breakdown strong { font-weight:500; color:#80a0b4; }
.care-total { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:14px; }
.care-total span { font-size:10px; color:#8fa8b8; }
.care-total strong { font-size:23px; color:#377b93; }
.care-sheet .demo-note { background:#f6f9fc; color:#a7bac8; font-size:9px; }
.care-sheet .primary-button { background:#377b93; }
.care-order { background:#fff; border:1px solid #e5edf3; border-radius:13px; padding:16px 14px; margin-bottom:16px; }
.care-order-head { display:flex; align-items:center; justify-content:space-between; gap:9px; padding-bottom:14px; border-bottom:1px solid #edf2f6; margin-bottom:15px; }
.care-order-head strong { display:block; font-size:11px; color:#67889c; }
.care-order-head small { display:block; margin-top:6px; font-size:8px; color:#acbdc9; }
.care-order-status { font-size:9px; color:#377b93; background:#edf5f8; padding:5px 7px; border-radius:5px; white-space:nowrap; }
.care-order-service { display:flex; align-items:center; gap:12px; }
.care-order-service > .quick-icon { width:60px; height:66px; border-radius:10px; color:#7f9fb4; flex-shrink:0; }
.care-order-service svg { width:30px; height:30px; stroke-width:1.3; }
.care-order-service h3 { color:#486b81; font-size:15px; margin:0 0 9px; }
.care-order-service p { color:#a0b4c2; font-size:9px; margin:0; line-height:1.8; }
.care-order-appointment { display:flex; gap:8px; align-items:center; color:#96afbe; background:#f6f9fc; border-radius:8px; padding:12px; margin-top:16px; }
.care-order-appointment svg { width:16px; height:16px; color:#739bb1; }
.care-order-appointment strong { display:block; font-size:10px; font-weight:500; }
.care-order-appointment small { display:block; margin-top:5px; font-size:8px; color:#adbeca; overflow-wrap:anywhere; }
.care-order-vehicle { display:flex; align-items:center; gap:7px; font-size:9px; color:#93adbd; margin-top:12px; overflow-wrap:anywhere; }
.care-order-vehicle svg { width:15px; height:15px; color:#6b9db5; }
.care-order .order-progress { margin:21px 0 17px; }
.care-order-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #eaf1f5; padding-top:14px; }
.care-order-summary span { color:#b0c0cc; font-size:8px; line-height:1.8; }
.care-order-summary strong { color:#377b93; font-size:20px; }
.care-order-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:15px; }
.care-order-actions .secondary-button { min-height:34px; border-color:#80a4b9; font-size:9px; }
.care-order-actions .text-button { font-size:9px; color:#a1b6c6; }
.care-profile .profile-card h1 { font-size:21px; }
.care-profile .section-kicker { font-size:7px; }
.care-profile .profile-card p { overflow-wrap:anywhere; line-height:1.8; }
.care-profile .profile-card > div { min-width:0; }
.care-profile .profile-card .tiny-chip { font-size:8px; }
.care-profile .membership-card { background:linear-gradient(135deg,#397b92,#285c72); }
.care-profile .menu-list { margin-top:19px; }
.care-profile .menu-list button { color:#7594a8; }
.vehicle-file { position:relative; isolation:isolate; overflow:hidden; margin:4px 0 20px; padding:22px 18px; background:linear-gradient(130deg,#e5f0f5,#dce8f0); border:1px solid #d8e5ee; border-radius:14px; }
.vehicle-file .section-kicker { font-size:7px; color:#82a4b7; }
.vehicle-file h2 { margin:13px 0 8px; color:#52768b; font-size:22px; overflow-wrap:anywhere; }
.vehicle-file p { margin:0; color:#96afc0; font-size:10px; }
.vehicle-file > svg { position:absolute; right:-4px; bottom:-10px; z-index:-1; color:#c2d8e5; width:105px; height:105px; stroke-width:.9; }
.vehicle-file > button { color:#6d93aa; background:#ffffffab; margin-top:19px; min-height:31px; padding:7px 10px; border-radius:5px; font-size:9px; }
.care-helper { display:flex; align-items:center; gap:10px; padding:14px 12px; border:1px solid #e5edf4; border-radius:11px; background:#fff; margin-top:17px; color:#8ba7ba; }
.care-helper svg { width:24px; height:24px; flex-shrink:0; color:#789fb4; }
.care-helper strong { font-size:11px; font-weight:500; display:block; }
.care-helper small { font-size:8px; display:block; margin-top:7px; color:#b4c4ce; line-height:1.7; }
@media(max-width:359px){ .care-hero { padding-left:15px; min-height:205px; } .care-hero h1 { font-size:23px; } .care-hero p { font-size:9px; } .care-art { width:177px; right:-26px; height:116px; } .care-hero .eyebrow { font-size:6px; letter-spacing:1px; } .care-project-visual { width:66px; } .care-project-main { gap:10px; } .care-project-copy h3 { font-size:14px; } .care-project-copy p { font-size:8px; } .care-main .category-tabs button { font-size:9px; padding:8px 8px; } .care-vehicle-option strong { font-size:8px; } .care-package-option { padding:10px 9px; gap:7px; } .care-package-option strong { font-size:10px; } .care-package-option small { font-size:7px; } .care-package-option > b { font-size:13px; } .care-profile .profile-card { gap:8px; } .care-profile .profile-card h1 { font-size:18px; } }