/* AP Locksmith dealer portal — catalog styles (tokens from the main site) */
:root {
  --gold: #FCAE1E; --gold-dark: #E09900;
  --black: #000; --dark: #111; --dark-2: #1A1A1A; --dark-3: #2D2D2D;
  --g-600: #666; --g-400: #ABABAB; --g-300: #D1D5DB; --g-100: #F3F4F6; --g-50: #F9FAFB;
  --white: #fff; --red: #DC2626; --text: #333;
  --r-ctl: 8px; --r-card: 12px;
  --shadow-card: 0 10px 30px rgba(0,0,0,.08); --shadow-btn: 0 4px 15px rgba(0,0,0,.2);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Roboto, -apple-system, 'Segoe UI', Arial, sans-serif; background: var(--g-100); color: var(--text); line-height: 1.5; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* header */
.p-header { background: var(--g-50); box-shadow: 0 2px 4px rgba(0,0,0,.1); position: sticky; top: 0; z-index: 30; }
.p-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.p-logo img { height: 46px; width: auto; }
.p-menu { display: flex; align-items: center; margin: 0 auto; }
.p-menu a { color: var(--black); text-decoration: none; font-weight: 600; font-size: 1.15rem; padding: 24px 16px; transition: color .2s; }
.p-menu a:hover { color: var(--gold); }
.p-nav { display: flex; align-items: center; gap: 8px; }
.p-burger { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-ctl); background: var(--g-300); font-size: 22px; cursor: pointer; }
.p-link { background: none; border: 0; padding: 10px 14px; border-radius: var(--r-ctl); font-weight: 500; cursor: pointer; color: var(--dark); }
.p-link:hover { background: var(--g-100); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font-weight: 700; border-radius: var(--r-ctl); padding: 11px 18px; background: var(--gold); color: var(--black); box-shadow: var(--shadow-btn); transition: background .15s, transform .05s; }
.btn:hover { background: var(--gold-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--g-100); color: var(--g-400); box-shadow: none; cursor: not-allowed; }
.btn-outline { background: var(--white); color: var(--gold-dark); border: 1.5px solid var(--gold); box-shadow: none; }
.btn-outline:hover { background: #FFF6E5; }
.btn-dark { background: var(--dark); color: var(--gold); }
.btn-dark:hover { background: var(--dark-3); }
.btn svg, .p-link svg { width: 20px; height: 20px; flex: none; }
.demo-bar-unused { background: var(--dark); color: var(--gold); text-align: center; font-size: .82rem; padding: 6px 12px; letter-spacing: .02em; }

/* search hero */
.search-hero { background: linear-gradient(135deg, var(--dark-2), var(--dark)); border-radius: var(--r-card) var(--r-card) 0 0; margin-top: 24px; padding: 28px 28px 24px; position: relative; overflow: hidden; }
.search-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); }
.search-hero h1 { color: var(--white); font-size: 1.9rem; font-weight: 900; letter-spacing: -.01em; }
.search-hero h1 span { color: var(--gold); }
.search-hero p { color: var(--g-400); font-size: .92rem; margin: 4px 0 16px; }
.search-box { display: flex; gap: 10px; background: var(--white); border-radius: var(--r-ctl); padding: 6px; box-shadow: 0 0 0 2px rgba(252,174,30,.0); transition: box-shadow .15s; }
.search-box:focus-within { box-shadow: 0 0 0 3px rgba(252,174,30,.55); }
.search-box svg { width: 22px; height: 22px; align-self: center; margin-left: 10px; color: var(--g-600); flex: none; }
.search-box input { flex: 1; border: 0; outline: 0; font-size: 1.05rem; padding: 10px 6px; min-width: 0; background: none; }
.search-box .btn { box-shadow: none; padding: 10px 26px; }

/* vehicle bar */
.vehicle-bar { background: var(--white); border-radius: 0 0 var(--r-card) var(--r-card); padding: 18px 28px; display: grid; grid-template-columns: 230px 1fr 1fr 1fr auto; gap: 14px; align-items: center; box-shadow: var(--shadow-card); }
.vb-title { display: flex; align-items: center; gap: 12px; }
.vb-ico { width: 42px; height: 42px; background: var(--gold); border-radius: var(--r-ctl); display: grid; place-items: center; flex: none; }
.vb-ico svg { width: 24px; height: 24px; }
.vb-title b { display: block; line-height: 1.2; color: var(--dark); }
.vb-title small { color: var(--g-600); font-size: .78rem; }
.sel { width: 100%; height: 46px; border: 1px solid var(--g-300); border-radius: var(--r-ctl); background: var(--white); padding: 0 12px; cursor: pointer; font-size: .98rem; }
.sel:focus, .num:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.sel:disabled { background: var(--g-50); color: var(--g-400); cursor: not-allowed; }

/* layout */
.layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; margin: 24px 0 56px; align-items: start; }
.filters { background: var(--white); border-radius: var(--r-card); padding: 20px; box-shadow: var(--shadow-card); position: sticky; top: 96px; }
.filters h2 { font-size: 1.15rem; margin-bottom: 14px; color: var(--dark); display: grid; grid-template-columns: 78px 1fr 78px; align-items: center; text-align: center; }
.h-side { display: flex; }
.h-side:last-child { justify-content: flex-end; }
.ico-btn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--g-100); color: var(--dark); cursor: pointer; display: inline-grid; place-items: center; font-size: 16px; transition: background .15s, transform .25s; }
.ico-btn:hover { background: #FFF3DC; color: var(--gold-dark); }
.ico-btn svg { width: 18px; height: 18px; }
/* Compact brand reset control; accessible name is on the button. */
.reset-pill { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--gold); border-radius: 50%; background: var(--dark); color: var(--gold); cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.reset-pill svg { display: block; width: 18px; height: 18px; stroke-width: 2; }
.reset-pill:hover { background: var(--gold); color: var(--black); }
.reset-pill:active { background: var(--dark-3); color: var(--gold); transform: scale(.94); }
.reset-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .reset-pill { transition: none; } }
.f-group { border-top: 1px solid var(--g-100); padding: 16px 0; }
.f-group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--g-600); margin-bottom: 10px; }
.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: .95rem; }
.check input { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }
.check .cnt { margin-left: auto; color: var(--g-400); font-size: .82rem; }
.toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 500; }
.toggle input { position: absolute; opacity: 0; }
.toggle .sw { width: 46px; height: 26px; background: var(--g-300); border-radius: 13px; position: relative; transition: background .15s; flex: none; }
.toggle .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.toggle input:checked + .sw { background: var(--gold); }
.toggle input:checked + .sw::after { left: 23px; }
.toggle input:focus-visible + .sw { outline: 2px solid var(--gold); outline-offset: 2px; }
#brandList, #typeList { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.f-stack { display: grid; gap: 10px; }
.f-stack .sel { height: 42px; }
.price-row { display: flex; align-items: center; gap: 8px; }
.num { width: 100%; height: 40px; border: 1px solid var(--g-300); border-radius: var(--r-ctl); padding: 0 10px; }
.btn-clear { width: 100%; margin-top: 6px; }

/* results */
.res-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.res-head h2 { font-size: 1.5rem; color: var(--dark); line-height: 1.15; }
.res-head small { color: var(--g-600); }
.res-tools { display: flex; align-items: center; gap: 10px; }
.res-tools .sel { width: 220px; height: 42px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; min-height: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #FFF3DC; border: 1px solid #F5D9A1; color: #7A4F00; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .85rem; }
.chip button { border: 0; background: rgba(0,0,0,.08); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 14px; }
.chip button:hover { background: rgba(0,0,0,.18); }
.chip-clear { background: none; border: 0; color: var(--g-600); text-decoration: underline; cursor: pointer; font-size: .85rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; position: relative; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.card:focus-visible { outline: 3px solid var(--gold); }
.thumb { aspect-ratio: 4/3; background: var(--g-50); display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--g-100); }
.thumb img { width: 58%; height: 78%; object-fit: contain; }
.badge { position: absolute; top: 12px; right: 12px; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.b-in { background: var(--gold); color: var(--black); }
.b-low { background: var(--dark); color: var(--gold); }
.b-out { background: var(--red); color: var(--white); }
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card .t { font-weight: 700; color: var(--dark); line-height: 1.25; }
.card .s { color: var(--g-600); font-size: .9rem; }
.card .pn { color: var(--g-600); font-size: .82rem; }
.tag { display: inline-block; background: var(--g-100); color: var(--dark-3); border-radius: 999px; padding: 2px 10px; font-size: .78rem; margin-top: 4px; align-self: flex-start; }
.card .buy { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-size: 1.45rem; font-weight: 900; color: var(--black); }
.card.out .thumb img { opacity: .45; filter: grayscale(.6); }
.empty { grid-column: 1/-1; background: var(--white); border-radius: var(--r-card); padding: 56px 24px; text-align: center; box-shadow: var(--shadow-card); }
.empty h3 { font-size: 1.3rem; color: var(--dark); margin-bottom: 6px; }
.empty p { color: var(--g-600); margin-bottom: 16px; }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 60; }
.overlay.open { display: flex; }
.modal { background: var(--white); border-radius: var(--r-card); width: 100%; max-width: 900px; max-height: 92vh; overflow: auto; position: relative; padding: 28px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; }
.modal .x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; background: var(--g-100); border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; }
.modal .x:hover { background: var(--g-300); }
.m-img { background: var(--g-50); border: 1px solid var(--g-100); border-radius: var(--r-card); display: grid; place-items: center; aspect-ratio: 1; }
.m-img img { width: 62%; }
.modal h2 { font-size: 1.6rem; color: var(--dark); line-height: 1.15; padding-right: 36px; }
.modal .sub { color: var(--g-600); margin: 2px 0 10px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; font-size: .95rem; margin: 14px 0; }
.kv dt { color: var(--g-600); }
.kv dd { color: var(--dark); font-weight: 500; }
.m-price { border-top: 1px solid var(--g-100); border-bottom: 1px solid var(--g-100); padding: 12px 0; display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 16px; }
.m-price b { font-size: 1.9rem; font-weight: 900; color: var(--black); }
.qty-row { display: flex; gap: 12px; align-items: center; }
.qty { display: flex; border: 1px solid var(--g-300); border-radius: var(--r-ctl); overflow: hidden; }
.qty button { width: 40px; height: 44px; border: 0; background: var(--g-50); cursor: pointer; font-size: 20px; }
.qty button:hover { background: var(--g-100); }
.qty input { width: 52px; text-align: center; border: 0; font-weight: 700; }
.qty-row .btn { flex: 1; height: 46px; }
.note { background: var(--g-50); border: 1px solid var(--g-100); border-radius: var(--r-ctl); padding: 10px 12px; font-size: .86rem; color: var(--g-600); margin-top: 14px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--dark); color: var(--white); padding: 12px 20px; border-radius: var(--r-ctl); opacity: 0; pointer-events: none; transition: .2s; z-index: 80; border-left: 4px solid var(--gold); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.only-mobile { display: none; }

/* responsive */
@media (max-width: 1100px) { .vehicle-bar { grid-template-columns: 1fr 1fr 1fr; } .vb-title { grid-column: 1/-1; } .vehicle-bar .btn { grid-column: 1/-1; } }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .only-mobile { display: inline-flex; }
  .filters { position: fixed; inset: 0 0 0 auto; width: min(340px, 92vw); z-index: 70; border-radius: 0; transform: translateX(105%); transition: transform .2s; overflow: auto; top: 0; }
  .filters.open { transform: none; }
  .modal { grid-template-columns: 1fr; padding: 20px; }
  .m-img { aspect-ratio: 4/3; }
  .m-img img { width: 40%; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 14px; }
  .search-hero { padding: 20px 16px 18px; } .search-hero h1 { font-size: 1.45rem; }
  .search-box .btn span { display: none; } .search-box .btn { padding: 10px 14px; }
  .vehicle-bar { grid-template-columns: 1fr; padding: 16px; }
  .p-header .wrap { height: 62px; } .p-logo img { height: 38px; }
  .p-link { display: none; }
  .res-tools { width: 100%; } .res-tools .sel { flex: 1; width: auto; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card .body { padding: 10px 10px 12px; } .price { font-size: 1.15rem; }
  .card .buy .btn { padding: 8px 10px; font-size: .85rem; }
  .card .buy .btn svg { display: none; }
}
@media (max-width: 380px) { .grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .p-burger { display: inline-grid; place-items: center; }
  .p-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--g-50); flex-direction: column; align-items: stretch; margin: 0; box-shadow: 0 8px 16px rgba(0,0,0,.12); }
  .p-menu.open { display: flex; }
  .p-menu a { padding: 16px 24px; border-top: 1px solid var(--g-100); }
  .p-header .wrap { position: relative; }
  .p-nav { margin-left: auto; }
}

/* ---- stronger hover states (clearly visible) ---- */
.btn, .p-link, .ico-btn, .reset-pill, .qty button, .chip button, .modal .x, .sel, .check { transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.btn:hover:not(:disabled) { background: var(--dark); color: var(--gold); box-shadow: 0 8px 20px rgba(0,0,0,.35); transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.btn-outline:hover:not(:disabled) { background: var(--gold); color: var(--black); border-color: var(--gold); box-shadow: 0 6px 16px rgba(252,174,30,.45); }
.btn-dark:hover:not(:disabled) { background: var(--gold); color: var(--black); box-shadow: 0 6px 16px rgba(252,174,30,.45); }
.p-link:hover { background: var(--dark); color: var(--gold); }
.p-menu a:hover { color: var(--gold-dark); box-shadow: inset 0 -4px 0 var(--gold); }
.ico-btn:hover { background: var(--gold); color: var(--black); }
.reset-pill:hover { background: var(--gold); color: var(--black); box-shadow: 0 4px 12px rgba(252,174,30,.5); }
.chip button:hover { background: var(--gold-dark); color: var(--white); }
.qty button:hover { background: var(--gold); }
.modal .x:hover { background: var(--dark); color: var(--white); }
.sel:hover:not(:disabled), .num:hover { border-color: var(--gold); }
.check:hover { background: #FFF3DC; border-radius: var(--r-ctl); }
.check { padding-left: 6px; padding-right: 6px; margin: 0 -6px; }
.card:hover { box-shadow: 0 0 0 2px var(--gold), 0 14px 34px rgba(0,0,0,.16); }
.chip-clear:hover { color: var(--gold-dark); }
#brandList, #typeList { overflow-x: hidden; }
.f-group .check { margin: 0; }

/* ---- compact search block (~25% shorter) ---- */
.search-hero { padding: 18px 28px 16px; }
.search-hero h1 { font-size: 1.65rem; line-height: 1.15; }
.search-hero p { font-size: .88rem; line-height: 1.3; margin: 2px 0 10px; }
.search-box { padding: 4px; }
.search-box input { padding: 8px 6px; }
.search-box .btn { padding: 8px 24px; }
.vehicle-bar { padding: 10px 28px; gap: 12px; }
.vehicle-bar .sel { height: 40px; }
.vb-ico { width: 36px; height: 36px; }
@media (max-width: 600px) { .search-hero { padding: 14px 16px 14px; } .vehicle-bar { padding: 12px 16px; } }

/* ---- key details modal (redesign) ---- */
.overlay { background: rgba(10,10,10,.72); backdrop-filter: blur(3px); }
.modal { display: grid; grid-template-columns: 400px 1fr; gap: 0; padding: 0; max-width: 1000px; border-radius: 16px; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.modal .x { top: 14px; right: 14px; z-index: 3; background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.m-panel { position: relative; background: radial-gradient(circle at 50% 38%, #3a3a3a 0%, var(--dark-2) 62%, var(--dark) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 28px 28px; min-height: 440px; border-bottom: 4px solid var(--gold); }
.m-panel .badge { top: 18px; left: 18px; right: auto; font-size: .8rem; padding: 4px 12px; }
.m-panel img { width: 52%; max-height: 270px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.m-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.m-facts span { border: 1px solid rgba(252,174,30,.5); color: var(--gold); border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 500; }
.m-info { padding: 36px 40px 24px; display: flex; flex-direction: column; min-width: 0; }
.m-eyebrow { color: var(--gold-dark); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.modal h2 { font-size: 2rem; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; padding-right: 40px; }
.nw { white-space: nowrap; }
.m-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 10px 0 22px; color: var(--g-600); }
.m-sub b { background: var(--g-100); color: var(--dark); border-radius: 999px; padding: 3px 12px; font-size: .88rem; }
.m-price { background: var(--g-50); border: 1px solid var(--g-100); border-left: 4px solid var(--gold); border-radius: var(--r-card); padding: 14px 20px; margin: 0 0 18px; display: flex; align-items: flex-end; justify-content: space-between; }
.m-price small { display: block; color: var(--g-600); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.m-price b { font-size: 2.4rem; line-height: 1.05; font-weight: 900; color: var(--black); }
.m-price span { color: var(--g-400); font-size: .85rem; padding-bottom: 6px; }
.qty-row .btn { white-space: nowrap; font-size: 1.05rem; height: 50px; }
.qty button, .qty input { height: 48px; }
.m-avail { margin-top: 10px; color: var(--g-600); font-size: .88rem; }
.m-tabs { grid-column: 1 / -1; padding: 0 40px 32px; border-top: 1px solid var(--g-100); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--g-300); margin-bottom: 18px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 16px 18px 12px; font-weight: 700; color: var(--g-600); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .15s, border-color .15s; }
.tabs button:hover { color: var(--black); border-color: var(--g-300); }
.tabs button.on { color: var(--black); border-color: var(--gold); }
.tab { display: none; } .tab.on { display: block; }
.m-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.m-table th, .m-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--g-100); }
.m-table thead th { background: var(--g-100); color: var(--g-600); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.kv2 th { width: 190px; color: var(--g-600); font-weight: 400; } .kv2 td { font-weight: 700; color: var(--dark); }
.m-prog { border-radius: var(--r-card); padding: 16px 20px; }
.m-prog.req { background: #FFF3DC; border: 1px solid #F5D9A1; } .m-prog.no { background: var(--g-50); border: 1px solid var(--g-100); }
.m-prog p { color: var(--g-600); margin-top: 4px; }
.modal .note { margin-top: 12px; }
@media (max-width: 820px) {
  .modal { grid-template-columns: 1fr; max-height: 94vh; }
  .m-panel { min-height: 250px; padding: 48px 20px 20px; }
  .m-panel img { width: 34%; max-height: 170px; }
  .m-facts { margin-top: 16px; }
  .m-info { padding: 22px 20px 12px; }
  .modal h2 { font-size: 1.55rem; }
  .m-price b { font-size: 2rem; }
  .m-tabs { padding: 0 20px 24px; }
  .kv2 th { width: 120px; }
}
.tabs { overflow-y: hidden; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
@media (max-width: 820px) {
  .modal { grid-template-columns: minmax(0, 1fr); }
  .m-panel, .m-info, .m-tabs { min-width: 0; }
  .tab { overflow-x: auto; }
  .m-table { min-width: 420px; }
  .kv2 { min-width: 0; }
  .qty-row .btn { min-width: 0; }
}

/* ---- page background and thin gray outlines ---- */
body { background: #F4F4F4; }
.filters, .card, .vehicle-bar, .empty, .modal { border: 1px solid #D9D9D9; }
.vehicle-bar { border-top: 0; }
.card:hover { border-color: var(--gold); }
.thumb { border-bottom-color: #E6E6E6; }

/* ---- results header centered + calmer card typography ---- */
.res-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.res-head > div:first-child { grid-column: 2; text-align: center; }
.res-head .res-tools { grid-column: 3; justify-self: end; }
.res-head h2 { font-weight: 700; letter-spacing: 0; }
@media (max-width: 700px) {
  .res-head { grid-template-columns: 1fr; }
  .res-head > div:first-child, .res-head .res-tools { grid-column: 1; }
  .res-head .res-tools { justify-self: stretch; }
}

/* ---- mobile fixes ---- */
.btn > span { white-space: nowrap; }
@media (max-width: 600px) {
  .search-hero { margin-top: 14px; border-radius: 12px 12px 0 0; }
  .search-hero h1 { font-size: 1.4rem; }
  .search-hero p { display: none; }
  .search-hero h1 { margin-bottom: 10px; }
  .search-box input { font-size: 1rem; }
  .vehicle-bar { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px 14px; }
  .vb-title { grid-column: 1 / -1; gap: 10px; }
  .vb-title small { display: none; }
  .vb-ico { width: 30px; height: 30px; } .vb-ico svg { width: 18px; height: 18px; }
  #fMake { grid-column: 1 / -1; }
  .vehicle-bar .btn { grid-column: auto; height: 40px; padding: 0 10px; }
  .layout { margin-top: 16px; gap: 14px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .thumb { aspect-ratio: 1 / 1; }
  .thumb img { width: 60%; height: 70%; }
  .badge { top: 8px; right: 8px; font-size: .68rem; padding: 2px 8px; }
  .card .body { padding: 10px 10px 12px; }
  .card .t { font-size: .92rem; } .card .s, .card .pn { font-size: .78rem; }
  .card .buy { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
  .card .buy .btn { width: 100%; padding: 9px 8px; font-size: .88rem; }
  .card .buy .btn svg { display: none; }
  .price { font-size: 1.2rem; }
  .res-head h2 { font-size: 1.3rem; }
  .p-nav .btn { padding: 9px 12px; }
}
@media (max-width: 340px) { .grid { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  .search-box .btn { padding: 8px 14px; }
  .vb-title { grid-column: 1; grid-row: 1; }
  .vehicle-bar .btn { grid-column: 2; grid-row: 1; justify-self: end; width: auto; padding: 0 16px; height: 36px; }
}
@media (max-width: 600px) { .vb-ico { display: none; } .vb-title b { font-size: 1.02rem; white-space: nowrap; } }

/* ---- mobile filter drawer extras ---- */
.drawer-backdrop, .drawer-foot { display: none; }
@media (max-width: 900px) {
  .drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .drawer-backdrop.on { opacity: 1; pointer-events: auto; }
  .filters { border-left: 0; border-radius: 0; padding-bottom: 0; }
  .drawer-foot { display: block; position: sticky; bottom: 0; background: var(--white); border-top: 1px solid #E6E6E6; margin: 14px -20px 0; padding: 12px 20px; }
  .drawer-foot .btn { width: 100%; height: 48px; }
}

/* ---- key modal v3: light layout (reference) ---- */
.overlay { background: rgba(20,20,20,.55); }
.modal { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 0 32px; padding: 28px 32px 8px; max-width: 1040px; border-radius: 14px; border: 0; }
.modal .x { top: 14px; right: 16px; background: none; box-shadow: none; font-size: 28px; color: var(--dark); width: 36px; height: 36px; }
.modal .x:hover { background: var(--g-100); color: var(--black); }
.mk-media { background: var(--g-50); border: 1px solid #E3E3E3; border-radius: 12px; display: grid; place-items: center; min-height: 380px; }
.mk-media img { width: 50%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0,0,0,.18)); }
.mk-main { min-width: 0; display: flex; flex-direction: column; }
.mk-crumb { color: var(--g-600); font-size: .85rem; padding-right: 40px; margin-bottom: 8px; }
.mk-crumb i { font-style: normal; margin: 0 4px; color: var(--g-400); }
.modal h2 { font-size: 1.75rem; font-weight: 800; line-height: 1.15; padding-right: 36px; margin-bottom: 14px; }
.mk-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mk-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: .9rem; }
.mk-pill svg { width: 17px; height: 17px; }
.mk-pill.dark { background: var(--dark); color: var(--white); }
.mk-pill.gold { background: #FFE2A6; color: #6B4300; border: 1px solid var(--gold); }
.mk-pill.low { background: var(--dark); color: var(--gold); }
.mk-pill.red { background: var(--red); color: var(--white); }
.mk-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; align-items: stretch; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; padding: 14px 0; margin-bottom: 6px; }
.mk-row > div { padding: 0 18px; border-left: 1px solid #E6E6E6; display: flex; flex-direction: column; justify-content: center; }
.mk-row > div:first-child { padding-left: 0; border-left: 0; }
.mk-row small { color: var(--g-600); font-size: .82rem; }
.mk-row b { font-size: 1.25rem; font-weight: 800; color: var(--black); white-space: nowrap; }
.mk-price b { font-size: 1.75rem; line-height: 1.1; }
.mk-note { background: var(--g-100); border-radius: var(--r-ctl); padding: 10px 14px !important; border-left: 0 !important; }
.mk-note b { font-size: .85rem; } .mk-note span { color: var(--g-600); font-size: .75rem; }
.mk-specs { margin-bottom: 14px; }
.mk-spec { display: grid; grid-template-columns: 28px 140px 1fr; align-items: center; padding: 11px 0; border-bottom: 1px solid #EDEDED; font-size: .95rem; }
.mk-ico { color: var(--dark); display: inline-flex; } .mk-ico svg { width: 20px; height: 20px; }
.mk-k { color: var(--g-600); } .mk-v { color: var(--dark); font-weight: 500; }
.mk-qlabel { font-size: .88rem; color: var(--g-600); margin-bottom: 6px; }
.modal .qty-row .btn { height: 52px; font-size: 1.1rem; }
.modal .qty button, .modal .qty input { height: 50px; }
.m-tabs { border-top: 0; padding: 14px 0 22px; }
.tabs { border-bottom: 1px solid #DADADA; }
.tabs button { flex: 1; text-align: center; }
.mk-compat { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; align-items: center; border: 1px solid #E3E3E3; border-radius: 12px; padding: 18px 22px; background: var(--g-50); }
.mk-compat b { font-size: 1.05rem; } .mk-compat p { color: var(--g-600); font-size: .9rem; margin-top: 4px; } .mk-compat .mk-nt { color: #7A4F00; }
.mk-compat .m-table { background: var(--white); border: 1px solid #E3E3E3; border-radius: 8px; }
@media (max-width: 820px) {
  .modal { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 4px; gap: 14px; }
  .mk-media { min-height: 190px; padding: 24px 0; } .mk-media img { width: 32%; max-height: 150px; }
  .modal h2 { font-size: 1.4rem; }
  .mk-row { grid-template-columns: 1fr 1fr; row-gap: 12px; } .mk-note { grid-column: 1 / -1; }
  .mk-row > div:nth-child(2) { border-left: 1px solid #E6E6E6; }
  .mk-spec { grid-template-columns: 26px 110px 1fr; }
  .mk-compat { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .m-tabs { padding: 10px 0 18px; }
}

/* ---- cart / order page ---- */
a.btn, a.p-link { text-decoration: none; }
.p-link { display: inline-flex; align-items: center; color: var(--dark); }
.page-head { margin: 26px 0 18px; }
.page-head h1 { font-size: 2rem; font-weight: 800; color: var(--dark); margin-top: 6px; }
.back { color: var(--g-600); text-decoration: none; font-size: .92rem; }
.back:hover { color: var(--gold-dark); }
.panel { background: var(--white); border: 1px solid #D9D9D9; border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin-bottom: 56px; }
.cart-layout[hidden], .empty-cart[hidden], .done[hidden] { display: none; }
.cart-head, .line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px 100px 36px; gap: 14px; align-items: center; padding: 14px 20px; }
.cart-head { background: var(--g-50); border-bottom: 1px solid #E6E6E6; border-radius: var(--r-card) var(--r-card) 0 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--g-600); font-weight: 700; }
.line { border-bottom: 1px solid #EDEDED; }
.line:last-child { border-bottom: 0; }
.l-item { display: flex; gap: 14px; align-items: center; min-width: 0; }
.l-item img { width: 64px; height: 64px; object-fit: contain; background: var(--g-50); border: 1px solid #E6E6E6; border-radius: 10px; padding: 6px; flex: none; }
.l-item div { display: flex; flex-direction: column; min-width: 0; }
.l-item b { color: var(--dark); } .l-item span { color: var(--g-600); font-size: .88rem; } .l-item .pn { font-size: .8rem; }
.l-price, .l-total { font-weight: 700; color: var(--dark); }
.l-total { font-size: 1.1rem; }
.l-qty small { display: block; color: var(--red); font-size: .72rem; margin-top: 4px; }
.l-qty .qty button, .l-qty .qty input { height: 38px; } .l-qty .qty button { width: 34px; } .l-qty .qty input { width: 46px; }
.l-del { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--g-100); font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.l-del:hover { background: var(--red); color: var(--white); }
.summary { padding: 22px; position: sticky; top: 96px; }
.summary h2 { font-size: 1.2rem; color: var(--dark); margin-bottom: 12px; }
.summary h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--g-600); margin: 18px 0 8px; padding-top: 16px; border-top: 1px solid #E6E6E6; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.sum dt { color: var(--g-600); } .sum dd { font-weight: 500; color: var(--dark); text-align: right; }
.sum .muted dd { font-weight: 400; color: var(--g-600); font-size: .85rem; }
.sum .total { border-top: 1px solid #E6E6E6; margin-top: 6px; padding-top: 12px; } .sum .total dt { color: var(--dark); font-weight: 700; } .sum .total dd { font-size: 1.6rem; font-weight: 900; }
.fld { display: block; margin-bottom: 12px; } .fld span { display: block; font-size: .85rem; color: var(--g-600); margin-bottom: 4px; } .fld em { font-style: normal; color: var(--g-400); }
.fld input, .fld textarea { width: 100%; border: 1px solid var(--g-300); border-radius: var(--r-ctl); padding: 0 12px; height: 44px; font: inherit; background: var(--white); transition: border-color .15s; }
.fld textarea { height: auto; padding: 10px 12px; resize: vertical; }
.fld input:hover, .fld textarea:hover { border-color: var(--gold); }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.fld input.bad { border-color: var(--red); background: #FEF2F2; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.err { color: var(--red); font-size: .88rem; margin-bottom: 10px; }
.btn.big { width: 100%; height: 52px; font-size: 1.1rem; }
.fine { color: var(--g-600); font-size: .8rem; margin-top: 10px; text-align: center; }
.empty-cart, .done { text-align: center; padding: 56px 24px; max-width: 560px; margin: 24px auto 56px; }
.empty-cart h2, .done h2 { font-size: 1.5rem; color: var(--dark); margin-bottom: 6px; } .empty-cart p, .done p { color: var(--g-600); margin-bottom: 18px; }
.done-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--black); display: grid; place-items: center; font-size: 32px; font-weight: 900; margin: 0 auto 14px; }
@media (max-width: 960px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
}
@media (max-width: 700px) {
  .page-head h1 { font-size: 1.6rem; }
  .cart-head { display: none; }
  .line { grid-template-columns: 1fr 1fr; grid-template-areas: "item item" "price qty" "total total"; gap: 10px 12px; padding: 16px; position: relative; }
  .l-item { grid-area: item; padding-right: 40px; } .l-price { grid-area: price; } .l-qty { grid-area: qty; } .l-total { grid-area: total; text-align: right; }
  .l-price::before, .l-total::before { content: attr(data-label) ': '; color: var(--g-600); font-weight: 400; font-size: .85rem; }
  .l-del { position: absolute; top: 12px; right: 12px; }
  .two { grid-template-columns: 1fr; }
}

@media (max-width: 600px) { .p-nav > a.p-link { display: none; } }

/* ---- account page ---- */
.p-link.on { background: var(--dark); color: var(--gold); }
.acc-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 56px; }
.acc-nav { padding: 20px; position: sticky; top: 96px; }
.acc-who { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #E6E6E6; margin-bottom: 10px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--dark); color: var(--gold); display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; flex: none; }
.acc-who b { display: block; color: var(--dark); line-height: 1.2; word-break: break-word; }
.status { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: var(--g-100); color: var(--dark-3); margin-top: 4px; }
.status.ok { background: #FFE2A6; color: #6B4300; }
.acc-nav nav { display: flex; flex-direction: column; }
.acc-nav nav a, .acc-nav nav button { display: block; text-align: left; border: 0; background: none; padding: 11px 12px; border-radius: var(--r-ctl); color: var(--dark); text-decoration: none; font-weight: 500; cursor: pointer; font-size: 1rem; transition: background .15s, color .15s; }
.acc-nav nav a:hover, .acc-nav nav button:hover { background: var(--dark); color: var(--gold); }
.acc-nav nav a.on { background: #FFF3DC; box-shadow: inset 3px 0 0 var(--gold); font-weight: 700; }
.acc-nav nav button { color: var(--g-600); border-top: 1px solid #EDEDED; border-radius: 0 0 var(--r-ctl) var(--r-ctl); margin-top: 8px; }
.acc-main { display: grid; gap: 20px; min-width: 0; }
.acc-card { padding: 26px 28px; }
.acc-card h2 { font-size: 1.3rem; color: var(--dark); }
.acc-card .sub { color: var(--g-600); font-size: .92rem; margin: 2px 0 18px; }
.three { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 10px; }
.acc-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.saved { color: #6B4300; font-weight: 700; font-size: .92rem; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.card-head a { color: var(--gold-dark); font-weight: 700; text-decoration: none; font-size: .92rem; } .card-head a:hover { text-decoration: underline; }
.o-row { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr .8fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #E6E6E6; border-radius: var(--r-ctl); margin-bottom: 8px; color: var(--dark); text-decoration: none; transition: border-color .15s, background .15s; }
.o-row:hover { border-color: var(--gold); background: #FFF9EC; }
.o-row span { color: var(--g-600); font-size: .92rem; } .o-row .o-total { color: var(--dark); font-weight: 700; } .o-row .status { margin: 0; }
.muted-p { color: var(--g-600); }
@media (max-width: 900px) {
  .acc-layout { grid-template-columns: minmax(0, 1fr); }
  .acc-nav { position: static; }
  .acc-nav nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .acc-nav nav button { border-top: 0; margin: 0; border-radius: var(--r-ctl); background: var(--g-100); }
  .acc-nav nav a { background: var(--g-100); }
}
@media (max-width: 600px) {
  .acc-card { padding: 20px 16px; }
  .three { grid-template-columns: 1fr 1fr; } .three label:first-child { grid-column: 1 / -1; }
  .o-row { grid-template-columns: 1fr 1fr; } .o-row .status { justify-self: start; }
}

/* ---- admin ---- */
.admin-tag { background: var(--dark); color: var(--gold); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; padding: 5px 12px; border-radius: 999px; margin-right: auto; margin-left: 14px; }
.adm-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.adm-tabs button { border: 1px solid #D9D9D9; background: var(--white); border-radius: var(--r-ctl); padding: 11px 20px; font-weight: 700; cursor: pointer; color: var(--g-600); transition: background .15s, color .15s; }
.adm-tabs button:hover { background: var(--dark); color: var(--gold); }
.adm-tabs button.on { background: var(--gold); color: var(--black); border-color: var(--gold); }
.adm-tabs span { opacity: .65; font-weight: 500; margin-left: 4px; }
.adm-panel { padding: 18px 20px 14px; margin-bottom: 56px; }
.adm-panel[hidden] { display: none; }
.adm-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-tools .grow { flex: 1; min-width: 220px; height: 44px; } .adm-tools .sel { width: auto; min-width: 150px; height: 44px; } .adm-tools .btn { height: 44px; }
.adm-head, .adm-row { display: grid; align-items: center; gap: 12px; padding: 10px 14px; }
.adm-head.keys, .adm-row.keys { grid-template-columns: 56px minmax(0, 2.2fr) 1.2fr 1.1fr .8fr .6fr 70px 80px; }
.adm-head.veh, .adm-row.veh { grid-template-columns: 1fr 1.2fr 1.4fr 1fr .5fr 80px; }
.adm-head { background: var(--g-50); border: 1px solid #E6E6E6; border-radius: var(--r-ctl); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--g-600); font-weight: 700; }
.adm-row { border-bottom: 1px solid #EDEDED; cursor: pointer; transition: background .12s; }
.adm-row:hover { background: #FFF9EC; }
.adm-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.adm-row img { width: 48px; height: 48px; object-fit: contain; background: var(--g-50); border: 1px solid #E6E6E6; border-radius: 8px; padding: 4px; }
.c-veh b { display: block; color: var(--dark); } .c-veh small { color: var(--g-600); }
.mono { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: .85rem; color: var(--g-600); }
.strong { font-weight: 700; color: var(--dark); }
.stock.low { color: #B45309; font-weight: 700; } .stock.out { color: var(--red); font-weight: 700; }
.toggle.mini { gap: 0; } .toggle.mini .sw { width: 40px; height: 22px; } .toggle.mini .sw::after { width: 16px; height: 16px; } .toggle.mini input:checked + .sw::after { left: 21px; }
.btn.sm { padding: 6px 14px; font-size: .85rem; }
.btn-danger { background: var(--white); color: var(--red); border: 1.5px solid var(--red); box-shadow: none; margin-left: auto; }
.btn-danger:hover:not(:disabled) { background: var(--red); color: var(--white); box-shadow: 0 6px 16px rgba(220,38,38,.35); }
.adm-empty { text-align: center; color: var(--g-600); padding: 36px 0; }
.adm-count { color: var(--g-600); font-size: .85rem; padding: 12px 14px 0; }
.drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-bg.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--white); z-index: 71; transform: translateX(105%); transition: transform .22s; display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(0,0,0,.25); }
.drawer.open { transform: none; }
.d-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid #E6E6E6; border-top: 4px solid var(--gold); }
.d-head h2 { font-size: 1.25rem; color: var(--dark); }
.x2 { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--g-100); font-size: 22px; cursor: pointer; line-height: 1; } .x2:hover { background: var(--dark); color: var(--white); }
.d-body { padding: 20px 24px 0; overflow: auto; flex: 1; display: flex; flex-direction: column; }
.d-foot { position: sticky; bottom: 0; background: var(--white); border-top: 1px solid #E6E6E6; margin: auto -24px 0; padding: 14px 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.hint { display: block; color: var(--g-400); font-size: .76rem; margin-top: 4px; }
.three2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.fld .sel { height: 44px; }
.img-edit { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; padding: 14px; background: var(--g-50); border: 1px solid #E6E6E6; border-radius: var(--r-card); }
.img-prev { width: 110px; height: 110px; background: var(--white); border: 1px solid #E6E6E6; border-radius: 10px; display: grid; place-items: center; flex: none; }
.img-prev img { max-width: 90%; max-height: 90%; object-fit: contain; }
.img-btns { display: flex; flex-direction: column; gap: 6px; } .img-btns small { color: var(--g-600); } .img-btns div { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
label.btn { cursor: pointer; }
@media (max-width: 900px) {
  .adm-head { display: none; }
  .adm-row.keys { grid-template-columns: 56px 1fr 70px; grid-template-areas: "img veh tog" "img type tog" "img info edit"; row-gap: 4px; padding: 14px 8px; }
  .adm-row.keys img { grid-area: img; } .adm-row.keys .c-veh { grid-area: veh; } .adm-row.keys .toggle { grid-area: tog; justify-self: end; align-self: start; }
  .adm-row.keys > div:nth-of-type(2) { grid-area: type; color: var(--g-600); font-size: .85rem; }
  .adm-row.keys .mono, .adm-row.keys .strong, .adm-row.keys .stock { display: inline; }
  .adm-row.keys > .btn { grid-area: edit; justify-self: end; }
  .adm-row.keys .mono::before, .adm-row.keys .stock::before { content: attr(data-label) ': '; color: var(--g-400); }
  .adm-row.veh { grid-template-columns: 1fr 1fr; } .adm-row.veh > .btn { justify-self: start; }
  .adm-row.veh > div::before { content: attr(data-label) ': '; color: var(--g-400); font-weight: 400; font-size: .8rem; }
}
@media (max-width: 600px) { .adm-panel { padding: 14px 10px; } .three2, .drawer .two { grid-template-columns: 1fr; } .adm-tools .sel { flex: 1; min-width: 130px; } .admin-tag { margin-left: 8px; } .p-nav .btn-dark { display: none; } }
@media (max-width: 900px) {
  .adm-row.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 8px; }
  .adm-row.keys .c-veh { flex: 1 1 0; min-width: 0; }
  .adm-row.keys .toggle { margin-left: auto; align-self: center; }
  .adm-row.keys > div:nth-of-type(2) { margin-left: 68px; }
  .adm-row.keys .mono, .adm-row.keys .strong, .adm-row.keys .stock { font-size: .85rem; }
  .adm-row.keys .strong { font-size: 1rem; }
  .adm-row.keys > .btn { margin-left: auto; }
}
@media (max-width: 900px) { .adm-row.keys .c-veh { flex: 1 1 calc(100% - 140px); } }

/* ---- admin: dealers ---- */
.adm-head.deal, .adm-row.deal { grid-template-columns: minmax(0, 2fr) 1.2fr 1.3fr .6fr .9fr .8fr 90px; }
.newdot { font-style: normal; background: var(--red); color: var(--white); border-radius: 999px; font-size: .7rem; font-weight: 700; padding: 1px 7px; margin-left: 6px; }
.newdot[hidden] { display: none; }
.pill-s { display: inline-block; border-radius: 999px; font-size: .74rem; font-weight: 700; padding: 3px 11px; background: var(--g-100); color: var(--dark-3); }
.pill-s.approved { background: #FFE2A6; color: #6B4300; } .pill-s.pending { background: var(--dark); color: var(--gold); }
.pill-s.rejected { background: #FEE2E2; color: #991B1B; } .pill-s.suspended { background: var(--g-300); color: var(--dark-3); }
.drawer.wide-d { width: min(680px, 100vw); }
.drawer .d-head > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.d-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; padding: 14px 16px; background: var(--g-50); border: 1px solid #E6E6E6; border-radius: var(--r-card); margin-bottom: 14px; }
.d-info small { display: block; color: var(--g-600); font-size: .74rem; } .d-info b { color: var(--dark); font-weight: 500; word-break: break-word; font-size: .92rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
.stat { border: 1px solid #E3E3E3; border-top: 3px solid var(--gold); border-radius: var(--r-ctl); padding: 12px 12px 10px; background: var(--white); }
.stat small { color: var(--g-600); font-size: .74rem; display: block; } .stat b { font-size: 1.45rem; font-weight: 900; color: var(--black); line-height: 1.15; display: block; } .stat span { color: var(--g-400); font-size: .74rem; }
.d-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--g-600); margin: 20px 0 8px; } .d-h small { text-transform: none; letter-spacing: 0; color: var(--g-400); font-weight: 400; margin-left: 6px; }
.dk td { vertical-align: middle; } .num-c { text-align: right !important; white-space: nowrap; }
.mini-k { display: flex; gap: 10px; align-items: center; } .mini-k img { width: 40px; height: 40px; object-fit: contain; background: var(--g-50); border: 1px solid #E6E6E6; border-radius: 8px; padding: 3px; flex: none; }
.mini-k b { display: block; color: var(--dark); font-size: .9rem; } .mini-k small { color: var(--g-600); font-size: .76rem; }
.ord { border: 1px solid #E6E6E6; border-radius: var(--r-ctl); margin-bottom: 6px; background: var(--white); }
.ord summary { display: grid; grid-template-columns: 1.1fr 1.1fr .8fr .8fr auto; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; font-size: .9rem; list-style: none; }
.ord summary::-webkit-details-marker { display: none; } .ord summary span { color: var(--g-600); } .ord summary .strong { color: var(--dark); }
.ord[open] { border-color: var(--gold); } .ord[open] summary { background: #FFF9EC; }
.ord-items { padding: 6px 14px 10px; border-top: 1px solid #EDEDED; } .ord-items > div { display: grid; grid-template-columns: 1fr auto 70px; gap: 10px; padding: 6px 0; font-size: .86rem; color: var(--dark); } .ord-items em { color: var(--g-400); font-style: normal; } .ord-items > div b { text-align: right; }
.d-body.wide .d-foot { margin-top: 18px; }
@media (max-width: 900px) {
  .adm-row.deal { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 14px 8px; }
  .adm-row.deal .c-veh { flex: 1 1 100%; } .adm-row.deal > div { font-size: .88rem; } .adm-row.deal > div::before { content: attr(data-label) ': '; color: var(--g-400); font-size: .78rem; } .adm-row.deal .c-veh::before { content: none; } .adm-row.deal > .btn { margin-left: auto; }
}
@media (max-width: 600px) { .d-info { grid-template-columns: 1fr 1fr; } .stats { grid-template-columns: 1fr 1fr; } .ord summary { grid-template-columns: 1fr 1fr; } }

/* ======== App skin: flat, dense work screens (see "Правила стиля портала.md") ======== */
body.app .page-head { margin: 24px 0 16px; }
body.app .page-head h1 { font-size: 1.5rem; font-weight: 700; margin-top: 4px; }
body.app .panel { box-shadow: none; border: 1px solid #DDD; border-radius: 8px; }
body.app .btn { box-shadow: none; }
body.app .btn:hover:not(:disabled) { box-shadow: none; transform: none; }
body.app .btn:active:not(:disabled) { transform: none; }
body.app .btn-outline { background: var(--white); color: var(--dark); border: 1px solid #CFCFCF; }
body.app .btn-outline:hover:not(:disabled) { background: var(--dark); color: var(--gold); border-color: var(--dark); box-shadow: none; }
body.app .btn-danger:hover:not(:disabled) { box-shadow: none; }
body.app .fld span { font-size: .875rem; color: #333; font-weight: 500; }
body.app .fld input, body.app .fld textarea, body.app .sel, body.app .num { border-color: #CFCFCF; }
body.app .admin-tag { background: none; color: var(--g-600); border: 1px solid #CFCFCF; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .8rem; padding: 2px 10px; }
/* tabs */
body.app .adm-tabs { gap: 24px; border-bottom: 1px solid #DDD; margin-bottom: 16px; }
body.app .adm-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 0; margin-bottom: -1px; color: var(--g-600); font-weight: 500; }
body.app .adm-tabs button:hover { background: none; color: var(--black); border-bottom-color: #BBB; }
body.app .adm-tabs button.on { background: none; color: var(--black); border-bottom-color: var(--gold); font-weight: 700; }
/* tables */
body.app .adm-panel { padding: 16px; }
body.app .adm-head { background: none; border: 0; border-bottom: 1px solid #DDD; border-radius: 0; font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--g-600); font-weight: 500; padding: 8px 12px; }
body.app .adm-row { border-bottom: 1px solid #EEE; padding: 8px 12px; min-height: 56px; }
body.app .adm-row:hover { background: #F7F7F7; }
body.app .adm-row img { border: 1px solid #E5E5E5; }
body.app .stock.low { color: var(--dark); font-weight: 700; }
body.app .btn.sm { padding: 5px 12px; font-size: .8125rem; }
/* status: dot + text */
body.app .pill-s, body.app .status { background: none; padding: 0; border-radius: 0; font-size: .875rem; font-weight: 500; color: #333; display: inline-flex; align-items: center; gap: 8px; margin: 0; }
body.app .pill-s::before, body.app .status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dark); flex: none; }
body.app .pill-s.pending::before { background: var(--gold); }
body.app .pill-s.rejected::before { background: var(--red); }
body.app .pill-s.suspended::before, body.app .status:not(.ok)::before { background: #AAA; }
body.app .status.ok::before { background: var(--dark); }
body.app .newdot { background: var(--dark); color: var(--gold); }
/* drawer + dealer card */
body.app .d-head { border-top: 0; padding: 16px 24px; }
body.app .d-head h2 { font-size: 1.25rem; font-weight: 700; }
body.app .img-edit { background: none; }
body.app .d-info { background: none; border: 0; padding: 0 0 16px; border-bottom: 1px solid #EEE; border-radius: 0; margin-bottom: 16px; }
body.app .d-info small { font-size: .75rem; } body.app .d-info b { font-weight: 500; }
body.app .stats { gap: 8px; }
body.app .stat { border: 1px solid #DDD; border-top: 1px solid #DDD; border-radius: 8px; }
body.app .stat b { font-size: 1.5rem; font-weight: 700; }
body.app .d-h { font-size: .875rem; text-transform: none; letter-spacing: 0; color: var(--dark); font-weight: 700; margin: 24px 0 8px; }
body.app .d-h small { font-size: .75rem; }
body.app .ord { border-radius: 8px; } body.app .ord[open] { border-color: #BBB; } body.app .ord[open] summary { background: #F7F7F7; }
body.app .m-table thead th { background: none; font-size: .75rem; text-transform: none; letter-spacing: 0; font-weight: 500; border-bottom: 1px solid #DDD; }
/* account */
body.app .acc-nav { padding: 12px; }
body.app .acc-who { padding: 4px 8px 12px; margin-bottom: 8px; }
body.app .acc-who b { font-weight: 700; margin-bottom: 4px; }
body.app .acc-nav nav a, body.app .acc-nav nav button { padding: 8px 12px; border-radius: 6px; }
body.app .acc-nav nav a:hover, body.app .acc-nav nav button:hover { background: #F4F4F4; color: var(--black); }
body.app .acc-nav nav a.on { background: none; box-shadow: inset 2px 0 0 var(--dark); font-weight: 700; border-radius: 0 6px 6px 0; }
body.app .acc-card { padding: 24px; }
body.app .acc-card h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; }
body.app .saved { color: var(--g-600); font-weight: 500; }
body.app .o-row { border-radius: 6px; } body.app .o-row:hover { background: #F7F7F7; border-color: #BBB; }
body.app .card-head a { color: var(--dark); text-decoration: underline; }
@media (max-width: 900px) { body.app .acc-nav nav a, body.app .acc-nav nav button { background: none; border: 1px solid #DDD; } body.app .acc-nav nav a.on { box-shadow: none; border-color: var(--dark); border-radius: 6px; } }
body.app .d-info { grid-template-columns: 1fr 1fr 1.5fr; }

/* ---- admin title centered + split tabs + recent changes ---- */
body.app.adm .page-head { text-align: center; margin: 32px 0 24px; }
body.app.adm .page-head h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: .01em; }
body.app .adm-tabs { justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px 24px; }
body.app .adm-tabs .grp { display: flex; gap: 24px; }
.sec-h { font-size: 1rem; font-weight: 700; color: var(--dark); margin: 8px 0 8px; }
.sec-h:not(:first-of-type) { margin-top: 28px; }
.adm-head.chg, .adm-row.chg { grid-template-columns: minmax(0, 2fr) .7fr .7fr 1fr 1fr; }
.adm-row.chg.total { cursor: default; font-weight: 700; border-bottom: 0; } .adm-row.chg.total:hover { background: none; }
.feed { border-bottom: 1px solid #EEE; }
.feed summary, .feed .row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 90px 110px; gap: 12px; align-items: center; padding: 12px; cursor: default; list-style: none; font-size: .9rem; }
.feed summary { cursor: pointer; } .feed summary::-webkit-details-marker { display: none; } .feed summary:hover { background: #F7F7F7; }
.feed .when { color: var(--g-600); font-size: .8rem; } .feed .kind { color: var(--g-600); font-size: .8rem; text-align: right; }
.feed.order[open] summary { background: #F7F7F7; } .feed .ord-items { margin: 0 12px 12px 152px; border-top: 0; background: var(--white); border: 1px solid #E6E6E6; border-radius: 8px; }
.ord-items .muted-row { color: var(--g-600); font-size: .78rem; display: block; padding-bottom: 4px; }
@media (max-width: 900px) {
  .adm-head.chg { display: none; }
  .adm-row.chg { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 12px 8px; } .adm-row.chg > div::before { content: attr(data-label) ': '; color: var(--g-400); font-size: .78rem; } .adm-row.chg .strong:first-child::before { content: none; } .adm-row.chg > div:first-child { flex: 1 1 100%; }
  .feed summary, .feed .row { grid-template-columns: 1fr auto; row-gap: 4px; } .feed .when { grid-column: 1 / -1; } .feed .ord-items { margin: 0 8px 12px; }
  body.app .adm-tabs { gap: 4px 16px; } body.app .adm-tabs .grp { gap: 16px; }
}

.adm-row.chg .tt::before { content: none !important; }

/* ---- recent changes: bought = green, in cart = gold (no red) ---- */
.adm-head.chg, .adm-row.chg { grid-template-columns: minmax(0, 1.8fr) .6fr .6fr 1fr 1.2fr 1fr; }
.dot-t { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.dot-t::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-t.buy { font-weight: 700; color: #166534; } .dot-t.buy::before { background: #16A34A; }
.dot-t.cart::before { background: var(--gold); }
body.app .pill-s.bought::before { background: #16A34A; }
body.app .pill-s.cart::before { background: var(--gold); }
body.app .pill-s.bought, body.app .pill-s.cart { font-weight: 700; }
.feed.order .strong { color: #166534; }
.feed.cart summary:hover, .feed.cart[open] summary { background: #FFF9EC; }
.feed.order summary:hover, .feed.order[open] summary { background: #F0FAF3; }
.feed .when::before { content: ''; display: inline-block; width: 4px; height: 14px; border-radius: 2px; margin-right: 8px; vertical-align: -2px; background: #DDD; }
.feed.order .when::before { background: #16A34A; } .feed.cart .when::before { background: var(--gold); }
@media (max-width: 900px) { .adm-row.chg .spent:first-child::before { content: none; } }
@media (max-width: 600px) { body.app .d-info { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { body.app .d-info { grid-template-columns: 1fr; } }

/* ---- header: same logo size/position as the main site, dealer menu ---- */
.p-header { padding: 8px 0; }
.p-header .wrap { max-width: 1200px; padding: 0 20px; height: auto; min-height: 64px; }
.p-logo img { height: 64px; width: auto; display: block; }
.p-menu a.on { color: var(--black); box-shadow: inset 0 -4px 0 var(--gold); }
.p-menu .menu-back { display: none; }
.p-back { white-space: nowrap; }
@media (max-width: 900px) {
  .p-back { display: none; }
  .p-menu .menu-back { display: flex; align-items: center; gap: 8px; }
  .p-menu .menu-back svg { width: 20px; height: 20px; }
  .p-menu a.on { box-shadow: inset 4px 0 0 var(--gold); }
}
@media (max-width: 768px) { .p-header .wrap { padding: 0 16px; } .p-logo img { height: 48px; } }
@media (max-width: 375px) { .p-logo img { height: 40px; } }

/* ---- header = logo only; dealer menu moved to a bar at the top of the page ---- */
.p-bar { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0; border-bottom: 1px solid #DDD; }
.p-tabs { display: flex; gap: 24px; }
.p-tabs a { padding: 10px 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--g-600); font-weight: 500; text-decoration: none; }
.p-tabs a:hover { color: var(--black); border-bottom-color: #BBB; }
.p-tabs a.on { color: var(--black); font-weight: 700; border-bottom-color: var(--gold); }
.p-acts { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; }
.p-acts .btn { padding: 8px 14px; font-size: .9rem; }
@media (max-width: 600px) { .p-bar { gap: 0 12px; } .p-tabs { gap: 16px; } .p-acts { width: 100%; justify-content: flex-end; padding: 8px 0; border-top: 1px solid #EEE; order: 2; } .p-tabs { order: 1; } }
.p-tabs a, .p-acts .btn { white-space: nowrap; } .p-tabs { flex-wrap: nowrap; } @media (max-width: 400px) { .p-tabs { gap: 12px; } .p-tabs a { font-size: .9rem; } .p-acts { flex-wrap: wrap; } }

body > main.wrap > .p-bar:first-child { margin-top: 24px; }

/* ---- logo back, in the top bar; bigger tab names ---- */
body > main.wrap > .p-bar:first-child { margin-top: 8px; }
.p-bar { align-items: stretch; gap: 0 32px; }
.p-bar .p-logo { display: flex; align-items: center; padding: 8px 0; margin-right: auto; }
.p-tabs { align-items: stretch; margin-right: auto; }
.p-tabs a { display: flex; align-items: center; font-size: 1.25rem; font-weight: 600; padding: 0 4px; }
.p-tabs a.on { font-weight: 700; }
.p-acts { align-self: center; padding-bottom: 0; }
@media (max-width: 900px) {
  .p-bar .p-logo { flex: 1 1 100%; margin-right: 0; }
  .p-tabs { order: 1; margin-right: 0; } .p-acts { order: 2; width: 100%; justify-content: flex-end; padding: 8px 0; border-top: 1px solid #EEE; margin-top: 0; }
  .p-tabs a { padding: 12px 4px; font-size: 1.15rem; }
}
@media (max-width: 400px) { .p-tabs { gap: 14px; } .p-tabs a { font-size: 1rem; } }

/* ---- 4 tabs + phone button: stack earlier, tabs can scroll as a fallback ---- */
.p-tabs { overflow-x: auto; scrollbar-width: none; } .p-tabs::-webkit-scrollbar { display: none; }
.p-acts .btn svg { width: 18px; height: 18px; }
@media (max-width: 1100px) {
  .p-bar .p-logo { flex: 1 1 100%; margin-right: 0; }
  .p-tabs { order: 1; margin-right: 0; } .p-acts { order: 2; width: 100%; justify-content: flex-end; padding: 8px 0; border-top: 1px solid #EEE; }
  .p-tabs a { padding: 12px 4px; font-size: 1.15rem; }
}
@media (max-width: 480px) { .p-tabs { gap: 12px; } .p-tabs a { font-size: .9rem; } .p-acts .btn { padding: 8px 12px; } }
@media (max-width: 480px) { .p-tabs { gap: 10px; } .p-tabs a { font-size: .85rem; padding: 12px 0; } }

/* ---- bigger buttons everywhere (esp. height); bigger menu items, bar height unchanged ---- */
.btn { min-height: 48px; padding: 12px 24px; font-size: 1rem; }
.btn.sm, body.app .btn.sm { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.ico-btn, .reset-pill, .x2 { width: 40px; height: 40px; }
.p-acts .btn { min-height: 52px; padding: 0 24px; font-size: 1.1rem; }
.p-acts .btn svg { width: 22px; height: 22px; }
.p-tabs { gap: 36px; }
.p-tabs a { font-size: 1.4rem; }
@media (max-width: 1240px) {
  .p-bar .p-logo { flex: 1 1 100%; margin-right: 0; }
  .p-tabs { order: 1; margin-right: 0; } .p-acts { order: 2; width: 100%; justify-content: flex-end; padding: 8px 0; border-top: 1px solid #EEE; }
  .p-tabs a { padding: 12px 4px; }
}
@media (max-width: 900px) { .p-tabs { gap: 24px; } .p-tabs a { font-size: 1.25rem; } }
@media (max-width: 480px) { .p-tabs { gap: 8px; } .p-tabs a { font-size: .9rem; padding: 12px 0; } .p-acts .btn { min-height: 48px; padding: 0 16px; font-size: 1rem; } }

/* ---- menu in the main-site style: bold black, hover = gray block + gold text ---- */
.p-bar { background: #F9FAFB; border: 1px solid #E5E5E5; border-radius: 8px; padding: 0 16px; margin-bottom: 16px; }
.p-tabs { gap: 0; }
.p-tabs a { margin: 0; padding: 24px 20px; border: 0; border-radius: 6px; color: #000; font-size: 1.35rem; font-weight: 600; transition: color .3s ease, background .3s ease; }
.p-tabs a:hover, .p-tabs a.on { background: #E5E5E5; color: var(--gold); border: 0; }
.p-tabs a.on { font-weight: 600; }
@media (max-width: 1360px) {
  .p-bar .p-logo { flex: 1 1 100%; margin-right: 0; }
  .p-tabs { order: 1; margin-right: 0; } .p-acts { order: 2; width: 100%; justify-content: flex-end; padding: 8px 0; border-top: 1px solid #EEE; }
  .p-tabs a { padding: 14px 16px; }
}
@media (max-width: 900px) { .p-tabs a { font-size: 1.2rem; padding: 14px 12px; } }
@media (max-width: 480px) { .p-bar { padding: 0 10px; } .p-tabs a { font-size: .9rem; padding: 12px 5px; } }
@media (max-width: 480px) { .p-bar { padding: 0 4px; } .p-tabs a { font-size: .85rem; padding: 12px 4px; } }

/* ---- no panel behind the menu bar: only the menu items get the gray hover block ---- */
.p-bar { background: none; border: 0; border-radius: 0; padding: 0; }
.p-acts { border-top: 0 !important; }

/* ---- slightly darker page background; filter panel scrolls on its own ---- */
body { background: #EBEBEB; }
.p-tabs a:hover, .p-tabs a.on { background: #D9D9D9; }
@media (min-width: 901px) { .filters { top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; } }

/* ---- dealers as centered rectangular cards ---- */
#dRows { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.dcard { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--white); border: 1px solid #DDD; border-radius: 8px; padding: 24px 20px; min-height: 300px; cursor: pointer; transition: border-color .15s, background .15s; }
.dcard:hover, .dcard:focus-visible { border-color: #888; background: #FAFAFA; outline: 0; }
.dcard .pill-s { margin-bottom: 16px; }
.dcard h3 { font-size: 1.3rem; font-weight: 700; color: var(--dark); line-height: 1.25; margin-bottom: 12px; }
.d-lines { display: flex; flex-direction: column; gap: 4px; font-size: 1rem; color: var(--g-600); }
.d-lines b { color: var(--dark); font-weight: 500; font-size: 1.1rem; }
.d-last { margin-top: auto; padding-top: 16px; width: 100%; border-top: 1px solid #EEE; }
.d-last small { display: block; font-size: .75rem; color: var(--g-600); margin-bottom: 8px; }
.d-last ul { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; font-size: .9rem; }
.d-last li { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.35; color: var(--dark); }
.d-last li .when { font-size: .75rem; color: var(--g-600); }
.d-last li .when::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #AAA; }
.d-last li.buy .when::before { background: #16A34A; } .d-last li.cart .when::before { background: var(--gold); }
.d-last li.none { color: var(--g-600); }

/* ---- recent changes: big, tall blocks ---- */
.sec-h { font-size: 1.4rem; margin: 8px 0 16px; } .sec-h:not(:first-of-type) { margin-top: 40px; }
.adm-head.chg { font-size: .9rem; padding: 8px 24px; }
.adm-head.chg, .adm-row.chg { grid-template-columns: minmax(0, 1.8fr) .6fr .6fr 1.1fr 1.3fr 1.1fr; }
.adm-row.chg { background: var(--white); border: 1px solid #DDD; border-radius: 8px; margin: 12px 0 0; padding: 0 24px; min-height: 96px; font-size: 1.15rem; gap: 16px; }
.adm-row.chg:hover { background: #FAFAFA; border-color: #888; }
.adm-row.chg .strong { font-size: 1.3rem; }
.adm-row.chg.total { background: none; border: 0; border-top: 2px solid var(--dark); border-radius: 0; margin-top: 16px; min-height: 80px; font-size: 1.3rem; font-weight: 700; }
.adm-row.chg .dot-t::before { width: 14px; height: 14px; }
.adm-row.chg .dot-t.buy { font-size: 1.3rem; }
.feed { background: var(--white); border: 1px solid #DDD; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.feed summary, .feed .row { grid-template-columns: 190px minmax(0, 1fr) 130px 150px; min-height: 96px; padding: 24px; font-size: 1.15rem; gap: 16px; }
.feed .when { font-size: 1rem; } .feed .kind { font-size: 1rem; }
.feed .strong { font-size: 1.4rem; }
.feed .pill-s { font-size: 1.05rem; }
.feed .when::before { height: 28px; width: 5px; vertical-align: -8px; margin-right: 12px; }
.feed .ord-items { margin: 0 24px 24px 214px; }
.feed .ord-items > div { font-size: 1rem; padding: 10px 14px; }
@media (max-width: 900px) {
  .adm-row.chg { padding: 16px; min-height: 0; font-size: 1.05rem; }
  .adm-row.chg > div:first-child { font-size: 1.25rem; }
  .feed summary, .feed .row { grid-template-columns: 1fr auto; padding: 16px; min-height: 0; font-size: 1.05rem; }
  .feed .ord-items { margin: 0 16px 16px; }
}
body.app .adm-row.chg { padding: 0 24px; min-height: 96px; border: 1px solid #DDD; }
body.app .adm-row.chg.total { padding: 0 24px; min-height: 80px; border: 0; border-top: 2px solid var(--dark); }
body.app .adm-head.chg { padding: 8px 24px; }
@media (max-width: 900px) { body.app .adm-row.chg { padding: 16px; min-height: 0; } body.app .adm-row.chg.total { padding: 16px; min-height: 0; } }

/* ---- recent changes = one feed: bought = green block, in cart = yellow block, ~14% taller ---- */
.feed { margin-bottom: 12px; }
.feed summary, .feed .row { min-height: 110px; padding: 28px 24px; }
.feed.order { background: #E4F5E9; border-color: #A9D9B7; }
.feed.cart { background: #FFF3D1; border-color: #F2D586; }
.feed.order summary:hover, .feed.order[open] summary { background: #D4EEDC; }
.feed.cart summary:hover, .feed.cart[open] summary { background: #FFEBB5; }
.feed.order .ord-items, .feed.cart .ord-items { background: var(--white); }
@media (max-width: 900px) { .feed summary, .feed .row { min-height: 0; padding: 20px 16px; } }

/* ---- dealer cards: header zone, stats strip, colored last-change blocks ---- */
#dRows { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dcard { padding: 0; overflow: hidden; align-items: stretch; min-height: 0; }
.dcard .dc-top { background: #F3F3F3; border-bottom: 1px solid #E2E2E2; padding: 18px 20px 16px; display: flex; flex-direction: column; align-items: center; }
.dcard .dc-top .pill-s { margin-bottom: 8px; font-size: .85rem; }
.dcard .dc-top h3 { margin: 0; font-size: 1.35rem; }
.dcard .d-lines { padding: 16px 20px 14px; align-items: center; }
.dcard .d-lines b { font-size: 1.15rem; font-weight: 700; }
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; }
.d-stats > div { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; }
.d-stats > div + div { border-left: 1px solid #EEE; }
.d-stats b { font-size: 1.2rem; font-weight: 700; color: var(--dark); line-height: 1.2; }
.d-stats small { font-size: .75rem; color: var(--g-600); }
.dcard .d-last { margin-top: auto; border-top: 0; padding: 14px 16px 16px; width: auto; }
.dcard .d-last small { text-align: center; margin-bottom: 8px; }
.dcard .d-last ul { gap: 8px; }
.dcard .d-last li { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; background: #F1F1F1; border: 1px solid #E2E2E2; text-align: left; }
.dcard .d-last li .when::before { content: none; }
.dcard .d-last li .when { font-size: .8rem; color: #555; white-space: nowrap; }
.dcard .d-last li .tx { font-weight: 500; text-align: right; }
.dcard .d-last li.buy { background: #E4F5E9; border-color: #A9D9B7; }
.dcard .d-last li.cart { background: #FFF3D1; border-color: #F2D586; }
.dcard .d-last li.none { justify-content: center; background: none; border-style: dashed; color: var(--g-600); }
.dcard.pending { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.dcard.rejected, .dcard.suspended { background: #F7F7F7; }
.dcard.rejected .dc-top h3, .dcard.suspended .dc-top h3 { color: #666; }

/* ---- dealer cards: each dealer gets its own soft background (set inline) ---- */
.dcard .dc-top { background: rgba(0,0,0,.05); border-bottom-color: rgba(0,0,0,.08); }
.d-stats, .d-stats > div + div { border-color: rgba(0,0,0,.08); }
.dcard:hover, .dcard:focus-visible { filter: brightness(.97); }
.dcard.rejected, .dcard.suspended { filter: saturate(.3); }

/* ---- lighter page background; slim scrollbar that stays inside the rounded filter panel ---- */
body { background: #F1F1F1; }
.p-tabs a:hover, .p-tabs a.on { background: #E2E2E2; }
.filters { overflow-x: hidden; }
.filters::-webkit-scrollbar { width: 14px; }
.filters::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.filters::-webkit-scrollbar-thumb { background: #CFCFCF; border-radius: 8px; border: 4px solid transparent; background-clip: padding-box; min-height: 40px; }
.filters::-webkit-scrollbar-thumb:hover { background: #AAA; background-clip: padding-box; }
.filters::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports (-moz-appearance: none) { .filters { scrollbar-width: thin; scrollbar-color: #CFCFCF transparent; } }
@media (min-width: 901px) { .layout { grid-template-columns: 330px minmax(0, 1fr); } }

/* ---- filter 10% narrower; card buttons 10% smaller ---- */
@media (min-width: 901px) { .layout { grid-template-columns: 297px minmax(0, 1fr); } }
.card .buy .btn { min-height: 43px; padding: 8px 12px; font-size: .8rem; }
.card .buy .btn svg { width: 18px; height: 18px; }
.card .buy .btn { min-width: 148px; }

/* ---- order page: centered, compact checkout (form + summary side by side under the items) ---- */
.page-head { text-align: center; }
.cart-layout { display: block; max-width: 980px; margin: 0 auto 56px; }
.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.co-form, .checkout .summary { padding: 24px; position: static; }
.co-form h2, .checkout .summary h2 { font-size: 1.2rem; color: var(--dark); margin-bottom: 16px; text-align: center; }
.checkout .summary .btn.big { margin-top: 16px; }
.checkout .fine { text-align: center; margin-top: 12px; }
@media (max-width: 800px) { .checkout { grid-template-columns: minmax(0, 1fr); } }

/* ---- order page v3: keys as square cards on the left, everything else in one column on the right ---- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; max-width: 1200px; margin: 0 auto 56px; align-items: start; }
.panel.side { padding: 24px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.panel.side h2 { font-size: 1.2rem; color: var(--dark); margin-bottom: 12px; text-align: center; }
.panel.side h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--g-600); margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid #E6E6E6; text-align: center; }
.panel.side .fld { margin-bottom: 10px; } .panel.side .fld input { height: 40px; }
.panel.side .btn.big { margin-top: 12px; }
.panel.side .fine { text-align: center; margin-top: 10px; }
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .panel.side { position: static; max-height: none; overflow: visible; }
}
/* tighter right column */
.panel.side { padding: 20px; }
.panel.side h2 { margin-bottom: 6px; }
.panel.side .sum > div { padding: 3px 0; } .panel.side .sum .total { margin-top: 4px; padding-top: 8px; } .panel.side .sum .total dd { font-size: 1.4rem; }
.panel.side h3 { margin: 12px 0 8px; padding-top: 12px; }
.panel.side .fld { margin-bottom: 8px; } .panel.side .fld span { margin-bottom: 2px; font-size: .8rem; } .panel.side .fld input { height: 38px; }
.panel.side .two, .panel.side .three { gap: 8px; }
.panel.side .btn.big { margin-top: 8px; height: 48px; } .panel.side .fine { margin-top: 8px; font-size: .75rem; }

/* ---- order page: same card as the catalog, the Add button is a quantity stepper ---- */
#items.grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
#items .card { cursor: default; } #items .card:hover { transform: none; }
#items .buy .qty button { width: 36px; height: 40px; } #items .buy .qty input { width: 42px; height: 40px; }
#items .max-note { color: var(--red); font-size: .72rem; margin-top: 6px; text-align: right; }
@media (max-width: 600px) { #items.grid { grid-template-columns: 1fr 1fr; gap: 12px; } #items .buy .qty { justify-content: center; } #items .buy .qty input { flex: 1; width: auto; } }

/* ---- login / registration ---- */
.auth-card { max-width: 480px; margin: 36px auto 60px; padding: 28px 30px 30px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #DDD; margin: -4px 0 22px; }
.auth-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-weight: 700; font-size: 1.05rem; padding: 12px 0; cursor: pointer; color: #666; transition: color .15s; }
.auth-tabs button:hover { color: var(--gold); }
.auth-tabs button.on { color: #000; border-bottom-color: var(--gold); }
.auth-card h1 { font-size: 1.45rem; font-weight: 700; text-align: center; margin-bottom: 6px; color: var(--dark); }
.auth-sub { text-align: center; color: var(--g-600); margin-bottom: 20px; }
.auth-card .btn.big { width: 100%; margin-top: 4px; }
.auth-hint { font-size: .82rem; color: var(--g-600); margin: -4px 0 12px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: .92rem; }
.auth-links:only-child, .auth-links a:only-child { margin-left: auto; margin-right: auto; }
.auth-links a { color: var(--dark); text-decoration: underline; text-underline-offset: 3px; } .auth-links a:hover { color: var(--gold); }
.auth-ok { background: #F3F3F3; border-left: 4px solid var(--gold); padding: 11px 14px; margin-bottom: 18px; font-size: .92rem; color: var(--dark); }
.auth-mail { margin-top: 6px; } .auth-mail > small { display: block; color: var(--g-600); font-size: .8rem; margin-bottom: 8px; }
.mail-box { border: 1px dashed #BDBDBD; background: #FAFAFA; padding: 16px; display: grid; gap: 8px; justify-items: start; }
.mail-box span { color: #444; font-size: .92rem; }
@media (max-width: 600px) { .auth-card { margin: 18px auto 40px; padding: 20px 16px 22px; } .auth-card .two { grid-template-columns: 1fr; } }

.auth-hint.c { text-align: center; margin: 4px 0 0; }

/* ---- admin: real dealers and orders ---- */
.ord-items > .o-meta { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; padding: 8px 0 12px; margin-bottom: 4px; border-bottom: 1px solid #EDEDED; }
.o-meta small { display: block; color: var(--g-600); font-size: .75rem; margin-bottom: 2px; } .o-meta small.nt { margin-top: 8px; }
.o-meta b { font-weight: 500; } .o-meta .sel { height: 38px; min-width: 150px; }
.adm-who { text-align: center; color: var(--g-600); margin: -14px 0 18px; font-size: .9rem; } .adm-who a { color: var(--dark); text-decoration: underline; text-underline-offset: 3px; } .adm-who a:hover { color: var(--gold); }
@media (max-width: 600px) { .ord-items > .o-meta { grid-template-columns: 1fr; } }

/* ---- login: nicer card ---- */
.auth-tabs[hidden] { display: none; }
.auth-card { border-top: 4px solid var(--gold); border-radius: 12px; box-shadow: 0 10px 34px rgba(0, 0, 0, .08); padding: 32px 34px 34px; }
body.app .auth-card { box-shadow: 0 10px 34px rgba(0, 0, 0, .08); border-radius: 12px; }
.auth-ico { width: 64px; height: 64px; border-radius: 50%; background: #FBF3DC; color: #8A5A00; display: grid; place-items: center; margin: 2px auto 16px; }
.auth-ico svg { width: 30px; height: 30px; }
.auth-done { text-align: center; }
.auth-done h1 { font-size: 1.6rem; }
.auth-done .auth-sub { margin-bottom: 8px; }
.auth-mailto { display: inline-block; max-width: 100%; word-break: break-all; background: #F3F3F3; border: 1px solid #E2E2E2; border-radius: 8px; padding: 9px 16px; font-weight: 700; color: var(--dark); margin: 2px 0 14px; }
.auth-steps { list-style: none; text-align: left; margin: 10px auto 14px; padding: 14px 16px; background: #FAFAFA; border: 1px solid #ECECEC; border-radius: 10px; display: grid; gap: 10px; }
.auth-steps li { display: flex; align-items: center; gap: 12px; font-size: .95rem; color: #333; }
.auth-steps li span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #1a1200; font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.auth-done .btn { margin-top: 12px; min-width: 200px; }
.auth-done .btn:disabled { opacity: .55; cursor: default; }
.auth-done .auth-links { justify-content: center; margin-top: 14px; }
@media (max-width: 600px) { .auth-card { padding: 24px 18px 26px; } }

/* ---- admin: CSV import ---- */
.imp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
.imp-stats > div { background: #F6F6F6; border: 1px solid #E6E6E6; border-radius: 8px; padding: 12px 8px; text-align: center; }
.imp-stats b { display: block; font-size: 1.5rem; color: var(--dark); } .imp-stats small { color: var(--g-600); font-size: .75rem; }
.imp-errs { list-style: none; margin: 6px 0 0; padding: 0; font-size: .86rem; color: #991B1B; display: grid; gap: 4px; }
.imp-errs.ok { color: var(--dark); } .imp-errs li { padding: 6px 10px; background: #FEF2F2; border-radius: 6px; } .imp-errs.ok li { background: #F3F3F3; }
@media (max-width: 600px) { .imp-stats { grid-template-columns: 1fr 1fr; } }

/* ---- order: dealership known from the account ---- */
.d-line { background: #F6F6F6; border: 1px solid #E6E6E6; border-radius: 8px; padding: 10px 14px; display: grid; gap: 2px; font-size: .88rem; color: #444; margin-bottom: 4px; }
.d-line b { color: var(--dark); font-size: .95rem; }
.d-line a { color: var(--dark); text-decoration: underline; text-underline-offset: 3px; font-size: .82rem; margin-top: 4px; } .d-line a:hover { color: var(--gold); }

/* ---- my orders ---- */
.my-orders { padding: 18px; margin-bottom: 40px; }
.my-orders .ord-items .o-meta { display: block; }
.my-orders .o-acts { display: flex; justify-content: flex-end; padding-top: 10px; }
.my-orders .empty { text-align: center; padding: 34px 10px; color: var(--g-600); }
.my-orders .empty .btn { margin-top: 14px; }
@media (max-width: 600px) { .my-orders { padding: 12px 8px; } }

/* ---- portal header = the main-site header: same bar, container span, logo, menu, phone button, and the same burger on phones ---- */
header.p-bar { position: sticky; top: 0; z-index: 1000; display: block; background: #f9fafb; border: 0; border-radius: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); padding: 8px 0; margin: 0 0 24px; }
/* the main-site header runs 1275px from the logo, so the phone sits at the right: copy that span */
header.p-bar .p-in { width: 1312px; max-width: calc(100% - max(0px, (100% - 1200px) / 2)); margin: 0 0 0 max(0px, calc((100% - 1200px) / 2)); padding: 0 17px 0 20px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 0; }
header.p-bar .p-logo { display: flex; flex: none; margin: 0; padding: 0; }
header.p-bar .p-logo img { height: 64px; width: auto; display: block; }
header.p-bar .p-burger { display: none; background: none; border: 0; padding: 0 6px; font-size: 36px; line-height: 1; color: #000; cursor: pointer; user-select: none; transition: color .2s ease, transform .2s ease; }
header.p-bar .p-burger:hover { color: #FCAE1E; transform: scale(1.1); }
header.p-bar .p-tabs { display: flex; align-items: center; flex: 0 1 auto; gap: 0; margin: 0 24px; overflow: visible; order: 0; }
header.p-bar .p-tabs a { display: block; padding: 24px 12px; font-size: 1.35rem; font-weight: 600; color: #000; background: none; border: 0; border-radius: 0; transition: color .3s ease; white-space: nowrap; }
header.p-bar .p-tabs a:hover, header.p-bar .p-tabs a.on { background: none; color: #FCAE1E; }
header.p-bar .p-tabs a.p-ext-m { display: none; }
header.p-bar .p-acts { display: flex; align-items: center; gap: 12px; padding: 0; margin: 0; border: 0; width: auto; order: 0; }
header.p-bar .p-acts .btn { height: 44px; min-height: 44px; padding: 0 18px; border-radius: 6px; font-size: 1.1rem; font-weight: 700; background: #FCAE1E; color: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); transition: opacity .2s, transform .2s; white-space: nowrap; }
header.p-bar .p-acts .btn:hover { opacity: .92; transform: translateY(-1px); }
header.p-bar .p-acts .btn svg { width: 20px; height: 20px; }
header.p-bar .p-acts .btn i.o-w { font-style: normal; }
/* Locksmith service: the outlined button, like "Dealer Portal" on the main site */
header.p-bar .p-acts .btn.p-ext { background: #FFF4D9; color: #000; border: 2px solid #FCAE1E; border-radius: 8px; box-shadow: none; font-size: 1.35rem; font-weight: 600; padding: 0 16px; }
header.p-bar .p-acts .btn.p-ext:hover { background: #FCAE1E; opacity: 1; transform: none; }
/* phone: black icon block + gold number, 240x44 like the site */
header.p-bar .p-acts .btn-dark { width: 240px; padding: 0; gap: 0; justify-content: flex-start; border-radius: 0; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, .2); }
header.p-bar .p-acts .btn-dark svg { box-sizing: content-box; width: 22px; height: 22px; padding: 11px 16px; background: #000; color: #FCAE1E; }
header.p-bar .p-acts .btn-dark span { flex: 1; text-align: center; font-size: 1.4rem; font-weight: 700; padding: 0 10px; }

@media (max-width: 1260px) {
  header.p-bar .p-tabs { margin: 0 8px; } header.p-bar .p-tabs a { font-size: 1.1rem; padding: 24px 8px; }
  header.p-bar .p-acts { gap: 8px; } header.p-bar .p-acts .btn { padding: 0 12px; font-size: 1rem; }
  header.p-bar .p-acts .btn.p-ext { font-size: 1.1rem; padding: 0 12px; }
  header.p-bar .p-acts .btn-dark { width: 210px; padding: 0; } header.p-bar .p-acts .btn-dark span { font-size: 1.2rem; padding: 0 8px; }
}
/* phones and tablets: logo, burger, phone; the menu drops down as a dark panel like on the main site */
@media (max-width: 1040px) {
  header.p-bar .p-in { width: auto; max-width: none; margin: 0; padding: 0 20px; }
  header.p-bar .p-logo img { height: 52px; }
  header.p-bar .p-burger { display: block; }
  header.p-bar .p-tabs { display: none; position: absolute; top: 62px; left: 50%; transform: translateX(-50%); width: 220px; margin: 0; padding: 12px 20px; flex-direction: column; align-items: center; gap: 8px; background: #1a1a1a; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); z-index: 999; overflow: visible; }
  header.p-bar .p-tabs.open { display: flex; }
  header.p-bar .p-tabs a { width: 100%; text-align: center; padding: 6px 0; font-size: 15px; font-weight: 500; color: #fff; }
  header.p-bar .p-tabs a:hover, header.p-bar .p-tabs a.on { color: #FCAE1E; }
  header.p-bar .p-tabs a.p-ext-m { display: block; width: auto; margin-top: 6px; padding: 8px 24px; border: 2px solid #FCAE1E; border-radius: 8px; color: #FCAE1E; font-weight: 700; }
  header.p-bar .p-tabs a.p-ext-m:hover { background: #FCAE1E; color: #000; }
  header.p-bar .p-acts .btn.p-ext { display: none; }
  header.p-bar .p-acts .btn { font-size: 1rem; }
  header.p-bar .p-acts .btn-dark { width: 240px; } header.p-bar .p-acts .btn-dark span { font-size: 1.2rem; }
}
@media (max-width: 768px) { header.p-bar .p-logo img { height: 48px; } }
@media (max-width: 560px) {
  header.p-bar .p-in { padding: 0 12px; }
  header.p-bar .p-acts { gap: 8px; }
  header.p-bar .p-acts .btn { height: 36px; min-height: 36px; padding: 0 10px; }
  header.p-bar .p-acts .btn i.o-w { display: none; }
  header.p-bar .p-acts .btn-dark { width: 170px; padding: 0; }
  header.p-bar .p-acts .btn-dark svg { width: 18px; height: 18px; padding: 9px 8px; }
  header.p-bar .p-acts .btn-dark span { font-size: .9rem; padding: 0 5px; }
}
@media (max-width: 375px) {
  header.p-bar .p-logo img { height: 40px; }
  header.p-bar .p-burger { font-size: 30px; padding: 0 2px; }
  header.p-bar .p-acts .btn { padding: 0 8px; }
  header.p-bar .p-acts .btn-dark { width: 150px; height: 34px; min-height: 34px; }
  header.p-bar .p-acts .btn-dark svg { padding: 8px 4px; }
  header.p-bar .p-acts .btn-dark span { padding: 0 4px; }
}

/* real key photos (white background): fill the frame and let the white drop out */
.thumb img.ph { width: 100%; height: 100%; padding: 6%; box-sizing: border-box; mix-blend-mode: multiply; }
.mk-media img.ph { width: 72%; max-height: 380px; filter: none; mix-blend-mode: multiply; }
@media (max-width: 600px) { .mk-media img.ph { width: 60%; max-height: 220px; } }

/* cars that match the search: photo + name, click to show only that car's keys */
.veh-strip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: thin; }
.veh-strip:empty { display: none; }
.veh { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E3E3E3; border-radius: 10px; padding: 8px 14px 8px 8px; cursor: pointer; font: inherit; text-align: left; color: inherit; }
.veh:hover { border-color: #FCAE1E; }
.veh.on { border-color: #FCAE1E; background: #FFF8E6; box-shadow: 0 0 0 2px #FCAE1E inset; }
.veh img { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; background: #F1F1F1; }
.veh b { display: block; font-size: .95rem; } .veh small { color: #666; font-size: .82rem; }
.mk-car { margin: 16px 0 0; } .mk-car img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; display: block; background: #F1F1F1; }
.mk-car figcaption { font-size: .78rem; color: #666; margin-top: 6px; line-height: 1.4; }
@media (max-width: 600px) { .veh img { width: 72px; height: 50px; } .mk-car img { max-height: 200px; } }

.more-wrap { grid-column: 1 / -1; display: flex; justify-content: center; padding: 8px 0 20px; }

/* desktop: bigger car cards in the strip */
@media (min-width: 601px) {
  .veh-strip { gap: 16px; }
  .veh { gap: 16px; padding: 10px 22px 10px 10px; border-radius: 12px; }
  .veh img { width: 168px; height: 112px; border-radius: 8px; }
  .veh b { font-size: 1.15rem; margin-bottom: 4px; } .veh small { font-size: .95rem; }
}

/* catalog: no left filter panel, only the vehicle bar on top */
.layout { grid-template-columns: 1fr; }
.filters, #backdrop, #openFilters { display: none !important; }