:root {
  --fp-navy-950: #071a2f;
  --fp-navy-900: #0f2742;
  --fp-navy-800: #173858;
  --fp-green-700: #1f873b;
  --fp-green-600: #2fae4e;
  --fp-green-100: #eaf7ee;
  --fp-canvas: #f6f8fa;
  --fp-surface: #ffffff;
  --fp-surface-subtle: #eef2f5;
  --fp-text: #17233b;
  --fp-muted: #5b6677;
  --fp-border: #dce3e9;
  --fp-border-strong: #c7d1db;
  --fp-danger: #b42318;
  --fp-radius-control: 12px;
  --fp-radius-cta: 14px;
  --fp-radius-card: 16px;
  --fp-radius-section: 20px;
  --fp-shadow-sm: 0 1px 2px rgba(7, 26, 47, .05), 0 8px 24px rgba(7, 26, 47, .05);
  --fp-shadow-md: 0 18px 48px rgba(7, 26, 47, .10);
  --fp-focus: 0 0 0 4px rgba(47, 174, 78, .22);
  --cream: var(--fp-canvas);
  --cream-2: var(--fp-surface-subtle);
  --navy-deep: var(--fp-navy-950);
  --navy: var(--fp-navy-900);
  --gold: var(--fp-green-600);
  --gold-light: #86dda0;
  --bg: var(--fp-canvas);
  --bg-panel: var(--fp-surface);
  --bg-panel-2: var(--fp-surface-subtle);
  --border: var(--fp-border);
  --text: var(--fp-text);
  --text-dim: var(--fp-muted);
  --accent: var(--fp-green-600);
  --accent-dim: var(--fp-green-700);
}

html { color-scheme: light; scroll-behavior: smooth; }
body { max-width: none !important; margin: 0 !important; padding: 0 !important; background: var(--fp-canvas) !important; color: var(--fp-text) !important; line-height: 1.55; }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, [role="button"], input[type="button"], input[type="submit"], a.btn, a.buy { min-height: 44px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--fp-green-700) !important;
  outline-offset: 3px !important;
  box-shadow: var(--fp-focus);
}
:where(button, .btn, .buy, .savebtn, .loadmorebtn, .filters-toggle) { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; }
:where(button, .btn, .buy, .savebtn, .loadmorebtn, .filters-toggle):active { transform: translateY(1px); }
:where(button, .btn, input, select, textarea):disabled { cursor: not-allowed !important; opacity: .55; }

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  min-height: 48px;
  border: 1px solid var(--fp-border-strong) !important;
  border-radius: var(--fp-radius-control) !important;
  background: var(--fp-surface) !important;
  color: var(--fp-text) !important;
  padding: 11px 14px;
}
:where(input, select, textarea)::placeholder { color: #7b8795; opacity: 1; }
:where(input, select, textarea):hover { border-color: #a9b7c4 !important; }
:where(input, select, textarea):focus { border-color: var(--fp-green-600) !important; }

:where(.btn, .buy, .savebtn, button[type="submit"], input[type="submit"]) {
  border: 1px solid transparent !important;
  border-radius: var(--fp-radius-control) !important;
  padding: 11px 18px;
  background: var(--fp-green-600);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
:where(.btn, .buy, .savebtn, button[type="submit"], input[type="submit"]):hover { background: var(--fp-green-700); box-shadow: 0 8px 18px rgba(31, 135, 59, .18); }
:where(.btn-secondary, .loadmorebtn, .filters-toggle, .tabs button, .acct-toggle label) {
  border: 1px solid var(--fp-border-strong) !important;
  border-radius: var(--fp-radius-control) !important;
  background: var(--fp-surface) !important;
  color: var(--fp-navy-900) !important;
}

header.topbar, header.top, .site-header {
  background: var(--fp-navy-950) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}
header.topbar .logo, header.top .logo, .logo-row::before {
  border-radius: var(--fp-radius-control) !important;
  background: var(--fp-green-600) !important;
}
header.topbar a, header.top a { text-underline-offset: 3px; }
.crumbs { line-height: 1.5; }

:where(main.page, main.wide, main.wrap, body > main) { width: min(100%, 1180px); }
:where(.card, .box, .searchpanel, .vcard, .stat, .facts, .offer, .related li, .product-list li) {
  border-color: var(--fp-border) !important;
  border-radius: var(--fp-radius-card) !important;
  background: var(--fp-surface) !important;
  box-shadow: var(--fp-shadow-sm);
}
:where(.index-card, .merchant, .brand-card, .cat-card) {
  border: 1px solid var(--fp-border) !important;
  border-radius: var(--fp-radius-card) !important;
  background: var(--fp-surface) !important;
  box-shadow: var(--fp-shadow-sm);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
:where(.index-card, .merchant, .brand-card, .cat-card):hover {
  border-color: #aebbc7 !important;
  transform: translateY(-2px);
  box-shadow: var(--fp-shadow-md);
}
.index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
.index-card { min-height: 112px; padding: 20px !important; display: flex !important; flex-direction: column; justify-content: space-between; }
.index-card .name { color: var(--fp-navy-950) !important; font-weight: 750 !important; }
.index-card .count { color: var(--fp-muted) !important; }
.index-card .count::after { content: "  ·  Vezi piesele →"; color: var(--fp-green-700); font-weight: 650; }

.badge, .pill, [class*="badge-"] { border-radius: 999px !important; }
.sitefooter, .site-footer, footer.pagefooter {
  background: var(--fp-navy-950) !important;
  color: rgba(255, 255, 255, .72) !important;
}
.sitefooter a, .site-footer a, footer.pagefooter a { color: rgba(255, 255, 255, .84) !important; }
.sitefooter a:hover, .site-footer a:hover, footer.pagefooter a:hover { color: #fff !important; }
.footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px !important; }

/* Homepage: one integrated search control and restrained hierarchy. */
/* Container: o singura bordura simpla, pe tot conturul (fara overflow:hidden
   - vezi mai jos de ce). */
.topsearch-inner, .search-view-form {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;
  height: 50px !important;
  border: 1px solid var(--fp-border-strong) !important;
  border-radius: var(--fp-radius-cta) !important;
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow-sm);
}
.topsearch-inner input, .search-view-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.topsearch-inner .btn, .search-view-form .btn {
  flex: 0 0 auto;
  /* Fara overflow:hidden pe container, butonul poate sa se extinda -1px
     sus/jos/dreapta si sa acopere chiar el segmentul de bordura din spatele
     lui (in loc sa se bazeze pe clipping, care ascundea acest overlap).
     Colturile din dreapta rotunjite explicit (nu prin clip) - fara ele,
     extinderea de mai sus ar lasa coltul patrat vizibil peste bordura
     rotunjita a containerului. */
  margin: -1px -1px -1px 0 !important;
  height: calc(100% + 2px) !important;
  min-height: 50px;
  border-radius: 0 var(--fp-radius-cta) var(--fp-radius-cta) 0 !important;
  white-space: nowrap;
}
.search-view-form > .field { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.search-view-form > .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.demo-form {
  position: relative;
  display: block !important;
  width: 100%;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* La latimi intre 901px si 1279px, .demo-inner ramane un card propriu
   (fundal gri deschis + border + colturi rotunjite + padding din
   index.html), care incadreaza bara de cautare (.demo-search-control,
   fundal alb + propriile colturi rotunjite) - rezultatul e un "chenar in
   chenar" (2 cutii vizibile, una in alta). La >=1280px asta e deja
   dezactivat in index.html (.demo-inner devine transparent); extindem
   aceeasi eliminare la toate latimile, nu doar la cele foarte late. */
.demo-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.demo-form::before { content: none !important; }
.demo-search-control {
  display: flex;
  width: 100%;
  min-height: 54px;
  height: 54px;
  /* Fara overflow:hidden: butonul (mai jos) acopera el insusi, prin
     suprapunere (margine negativa), segmentul de bordura din spatele lui -
     un overflow:hidden aici ar taia acea suprapunere inainte sa acopere
     ceva, lasand bordura vizibila peste verde ("dunga" raportata initial). */
  border: 1px solid var(--fp-border-strong);
  border-radius: var(--fp-radius-cta);
  background: var(--fp-surface);
  box-shadow: var(--fp-shadow-sm);
}
.demo-search-control::before {
  content: '';
  width: 20px;
  height: 20px;
  margin-left: 16px;
  flex: 0 0 20px;
  align-self: center;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8795' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
.demo-search-control input[type="text"] {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  height: 100% !important;
  min-height: 52px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--fp-surface) !important;
  box-shadow: none !important;
}
.demo-search-control .btn {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 52px;
  /* Butonul se extinde -1px sus/jos/dreapta ca sa acopere el insusi
     segmentul de bordura al containerului din spatele lui (containerul nu
     mai are overflow:hidden, deci suprapunerea chiar acopera, nu e taiata).
     Coltul din dreapta e rotunjit explicit, ca sa continue exact rotunjimea
     containerului fara sa mai fie nevoie de clipping. */
  height: calc(100% + 2px) !important;
  margin: -1px -1px -1px 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 0 var(--fp-radius-cta) var(--fp-radius-cta) 0 !important;
  white-space: nowrap;
}
.demo-form .search-suggest { border-radius: var(--fp-radius-control) !important; }
.hero-actions-3 { gap: 10px !important; }
.hero-actions-3 :where(button, a) { height: 52px !important; min-height: 52px; border-radius: 10px !important; }
#heroActCar { order: 1; }
#heroActScan { order: 2; }
#heroActDeviz { order: 3; }
.hero-live-card, .pcard { border-radius: var(--fp-radius-section); }
.benefits-bar { border-color: var(--fp-border) !important; }

/* Homepage geometry: fluid type and a compact trust strip keep the hero in balance. */
.hero, .hero-flex, .hero-desktop-copy, .hero-actions-3 { min-width: 0; }
.hero-desktop-copy h1 {
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: clamp(38px, 4.2vw, 68px) !important;
  line-height: 1.02 !important;
}
@media (min-width: 901px) {
  .benefits-bar { min-height: 48px !important; }
  .benefit-item { padding: 7px 20px !important; }
  .hero { padding-top: 32px !important; }
  .hero-flex > .demo { margin-top: 20px !important; }
}

/* Search/catalog. */
#searchFiltersPanel { border-radius: var(--fp-radius-section) !important; }
.filters-sheet-panel { border-radius: var(--fp-radius-section) var(--fp-radius-section) 0 0 !important; }
.results { gap: 16px !important; }
.product-card, .result-card, .pcard-item, .product {
  border: 1px solid var(--fp-border) !important;
  border-radius: var(--fp-radius-card) !important;
  background: var(--fp-surface) !important;
  box-shadow: var(--fp-shadow-sm);
}
.offer.best { border-color: rgba(47, 174, 78, .55) !important; background: var(--fp-green-100) !important; }
.offer .buy { border-radius: var(--fp-radius-control) !important; }

/* Product and vehicle pages. */
.pimg { border-radius: var(--fp-radius-card) !important; background: #fff !important; }
.mycar-pill, .mycar-match, .sp-vehicle-context { border-radius: var(--fp-radius-control) !important; }
.offer { padding: 16px 18px !important; }

/* Upload: style the native input as an intentional drop area without changing its API. */
input[type="file"] {
  width: 100%;
  min-height: 150px;
  padding: 54px 18px 18px !important;
  border: 1.5px dashed var(--fp-border-strong) !important;
  border-radius: var(--fp-radius-card) !important;
  background: linear-gradient(#fff, #fff) padding-box !important;
  color: var(--fp-muted);
  cursor: pointer;
  text-align: center;
}
input[type="file"]::file-selector-button {
  min-height: 44px;
  border: 1px solid var(--fp-border-strong);
  border-radius: var(--fp-radius-control);
  background: var(--fp-surface);
  color: var(--fp-navy-900);
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}
input[type="file"].is-dragging { border-color: var(--fp-green-600) !important; background: var(--fp-green-100) !important; }
.premium-upload-copy { margin: 16px 0 8px; text-align: center; color: var(--fp-navy-900); }
.premium-upload-copy small { color: var(--fp-muted); }
.upload-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; padding: 0; list-style: none; counter-reset: upload-step; }
.upload-steps li { padding: 12px; border-radius: var(--fp-radius-control); background: var(--fp-surface-subtle); color: var(--fp-muted); font-size: 13px; font-weight: 650; }
.upload-steps li::before { counter-increment: upload-step; content: counter(upload-step); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 7px; border-radius: 999px; background: var(--fp-navy-900); color: #fff; font-size: 12px; }

/* Authentication remains calm and compact. */
body:has(#authCard) { background: linear-gradient(180deg, #eef3f6 0, var(--fp-canvas) 280px); }
#authCard { border-radius: var(--fp-radius-section) !important; box-shadow: var(--fp-shadow-md); }
.logo-row a { color: var(--fp-navy-950) !important; }
.tabs button { min-height: 44px; border-width: 0 0 2px !important; border-radius: 0 !important; }

.premium-tools { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.premium-search { position: relative; flex: 1 1 320px; }
.premium-search label { display: block; margin-bottom: 7px; color: var(--fp-navy-950); font-weight: 700; }
.premium-search input { width: 100%; }
.premium-alpha { display: flex; flex-wrap: wrap; gap: 6px; align-self: end; }
.premium-alpha button { min-width: 44px; padding: 8px; border: 1px solid var(--fp-border); border-radius: 999px; background: #fff; color: var(--fp-navy-900); font-weight: 700; }
.premium-intents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.premium-intents a { min-height: 82px; display: flex; align-items: center; padding: 16px; border: 1px solid var(--fp-border); border-radius: var(--fp-radius-card); background: #fff; color: var(--fp-navy-900); text-decoration: none; font-weight: 700; }
.premium-empty { display: none !important; }

/* Compact generated category/brand landing pages. */
body > :where(.back, h1, p:not(.footer-note), a.btn) { max-width: 960px; margin-left: auto !important; margin-right: auto !important; }
body > .back { padding: 24px 20px 0; margin-bottom: 0 !important; }
body > h1 { padding: 0 20px; margin-top: 28px !important; color: var(--fp-navy-950) !important; }
body > p:not(.back):not(.footer-note) { padding: 0 20px; color: var(--fp-muted) !important; }
body > a.btn { display: table !important; margin-top: 22px !important; margin-bottom: 56px !important; }
footer.pagefooter { max-width: none !important; padding: 28px max(20px, calc((100vw - 960px) / 2)) !important; border: 0 !important; }

@media (max-width: 900px) {
  header.topbar .topsearch-inline { display: none !important; }
  .hero-actions-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100% !important; max-width: none !important; gap: 8px !important; }
  .hero-actions-3 > button { display: flex !important; min-width: 0; }
  .hero { padding-top: 20px !important; }
  .hero-desktop-copy h1 { font-size: clamp(27px, 7.4vw, 34px) !important; line-height: 1.06 !important; }
  .hero-desktop-copy p { font-size: clamp(13px, 3.5vw, 14.5px) !important; line-height: 1.45; }
  .hero-flex > .demo { margin-top: 14px !important; }
  .hero-mobile-mascot { max-width: calc(100% - 32px); }
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-intents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body { min-width: 0; }
  header.topbar { padding-inline: 16px !important; }
  :where(main.page, main.wide, main.wrap, body > main) { padding-left: 16px !important; padding-right: 16px !important; }
  .index-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .index-card { min-height: 94px; padding: 16px !important; }
  .footer-grid { grid-template-columns: 1fr; }
  .premium-intents { grid-template-columns: 1fr; }
  .upload-steps { grid-template-columns: 1fr; }
  .topsearch-inner, .demo-form, .search-view-form { width: 100%; }
  .topsearch-inner .btn, .search-view-form .btn { padding-inline: 15px !important; }
  .pcard { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  .offer { align-items: stretch !important; }
  .offer .buy { display: flex !important; align-items: center; justify-content: center; width: 100%; margin-top: 10px; }
  .hero-actions-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .hero-actions-3 > button { padding: 8px 10px !important; font-size: 12.5px !important; line-height: 1.2; }
  #heroActDeviz { grid-column: 1 / -1; }
  .hero-actions-3 > button svg { width: 16px; flex: 0 0 16px; }
  .demo-search-control { min-height: 52px; height: 52px; }
  .demo-search-control::before { width: 18px; height: 18px; margin-left: 13px; flex-basis: 18px; }
  .demo-search-control input[type="text"] { min-height: 50px; padding-inline: 10px !important; }
  .demo-search-control .btn { min-width: 76px; min-height: 50px; padding-inline: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}