/* styles.css — AutoSparesZone (patched header/nav + responsive fixes) */

/* ====== Theme variables ====== */
:root{
  --bg: #f6f8fa;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #0f1724;
  --accent: #2f6ef2;
  --accent-dark: #1f4ed8;
  --radius: 12px;
  --card-shadow: 0 8px 30px rgba(11,18,32,0.06);
  --wrap: 20px;
  --max-width: 1180px;
  --ui-border: #e6e9ef;
  --focus-ring: 3px rgba(47,110,242,0.14);
}

/* ====== Reset / base ====== */
*{box-sizing:border-box}
html,body{height:100%; width:100%; margin:0; padding:0; /* keep overflow-x hidden to avoid accidental horizontal scroll */ overflow-x:hidden;}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

/* ====== Layout helpers ====== */
/* .wrap uses responsive width with max-width but always stays within viewport */
.wrap{
  width:100%;
  max-width: var(--max-width);
  margin:0 auto;
  padding: 28px 18px; /* slight reduction to avoid forcing scroll on tiny screens */
  box-sizing:border-box;
}
.wrap-small{max-width:980px;margin:0 auto;padding:0 18px;box-sizing:border-box}

/* anchor */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ====== Header ====== */
/* Make header a consistent centered container and avoid overflow when nav grows */
.site-header{
  position:sticky; top:0; z-index:9999;
  background:#fff; border-bottom:1px solid rgba(15,23,42,0.04);
  left:0; right:0;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* central header inner container — keeps nav centered and predictable */
.header-inner{
  display:flex;
  gap:18px;
  align-items:center;
  padding:12px 18px;
  max-width:var(--max-width);
  margin:0 auto;
}

/* brand */
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;white-space:nowrap}
.brand-logo{height:36px;width:auto;display:block}
.brand-name{font-weight:700;color:var(--accent);font-size:18px}

/* primary nav (desktop) */
.main-nav{margin-left:18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.main-nav a{color:#111827;padding:8px 10px;border-radius:8px;font-weight:600;font-size:15px}
.main-nav a.active{background:rgba(47,110,242,0.08);color:var(--accent)}

/* CTA on right */
.call-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.phone-btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700;white-space:nowrap;box-shadow:0 6px 18px rgba(15,23,42,0.06)}

/* ====== Hero & grid ====== */
/* Use minmax so aside doesn't reserve too much space on narrow screens */
.hero-grid{
  display:grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap:26px;
  align-items:start;
  margin-top:18px;
}

/* Hero left */
.hero-card{
  background:var(--card); border-radius:var(--radius);
  padding:28px; box-shadow:var(--card-shadow); overflow:hidden;
}
.badge{display:inline-block;background:rgba(47,110,242,0.09);color:var(--accent);padding:6px 10px;border-radius:20px;font-weight:700;font-size:13px}
.hero-card h1{margin:14px 0 8px;font-size:28px;line-height:1.05;letter-spacing:-0.5px}
.lead{color:var(--muted);margin-bottom:18px;font-size:15px}

/* cards */
.card{background:var(--card);border-radius:12px;padding:16px;box-shadow:var(--card-shadow)}
.small.card{padding:12px}
.how-it-works h4{margin:0 0 8px}

/* ====== Lead form (aside) ====== */
.lead-form-card{border-radius:var(--radius);padding:20px;box-shadow:var(--card-shadow);background:var(--card);overflow:visible}
.lead-form-card h3{margin:4px 0 12px;font-size:20px}

/* form controls */
.lead-form label.field-label{display:block;font-size:13px;margin-bottom:6px;color:#111827;font-weight:700}
.lead-form input[type="text"], .lead-form input[type="email"], .lead-form input[type="tel"], .lead-form select, .lead-form input[type="number"]{
  width:100%; border:1px solid var(--ui-border); padding:12px 14px; border-radius:10px; font-size:15px; background:#fff; color:var(--text);
}

/* VIN row */
.vin-row{display:flex;gap:10px}
.vin-row input{flex:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;cursor:pointer;border:1px solid rgba(11,18,32,0.06);background:#fff;font-weight:700}
.btn.small{padding:8px 10px;font-size:14px}
.btn.primary,.btn.btn-primary{background:var(--accent);color:#fff;border:0;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.btn.outline,.btn.btn-ghost{background:transparent;border:1px solid rgba(11,18,32,0.06);color:var(--text)}
.btn[disabled]{opacity:0.6;cursor:default}

/* layout for form columns */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}

/* hints */
.small.muted, .muted { color: var(--muted); font-size:13px; }

/* price hint */
#part-price-hint{font-weight:600;color:var(--muted);margin-top:8px;font-size:13px;min-height:18px}

/* form actions */
.form-actions{display:flex;gap:12px;align-items:center;margin-top:12px}

/* testimonials */
.card-section{margin-top:24px}
.test-list blockquote{background:#fff;border-radius:12px;padding:14px 18px;margin:10px 0;box-shadow:0 6px 20px rgba(11,18,32,0.03)}

/* footer */
.site-footer{margin-top:28px;padding:22px 0;border-top:1px solid rgba(11,18,32,0.04);background:transparent}
.footer-inner{display:flex;gap:20px;align-items:flex-start}

/* select appearance */
.lead-form select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%236b7280' d='M5 8l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 44px; }

/* focus */
input:focus, select:focus, .btn:focus { outline:none; box-shadow:0 0 0 var(--focus-ring); border-color:var(--accent); }

/* mobile call popup injected by JS */
.mobile-call-popup{position:fixed;left:12px;right:12px;bottom:18px;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(10,20,40,0.12);padding:10px;z-index:99999;display:flex;align-items:center;gap:12px}
.mobile-call-inner{display:flex;gap:12px;align-items:center;width:100%}
.mobile-call-inner a{color:var(--accent);font-weight:700;font-size:16px}
.mobile-call-close{background:transparent;border:0;font-size:18px;cursor:pointer}

/* ====== Responsive tweaks ====== */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr minmax(260px,360px);gap:20px}
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:14px}
  /* hide desktop nav, mobile nav toggle handled by header.php */
  .main-nav{display:none !important}
  .call-cta{display:none}
  .row-2{grid-template-columns:1fr}
  .wrap{padding:18px 14px}
  .brand-name{display:none}
  .header-inner{padding:10px 12px}
  .phone-btn{display:none}
  .lead-form-card{width:100%;margin:0}
}

/* very small screens */
@media (max-width:420px){
  .btn{padding:12px 14px;font-size:15px;border-radius:12px}
  .vin-row .btn{padding:10px 12px}
  .wrap{padding-left:12px;padding-right:12px}
  .hero-card{padding:18px}
  .hero-card h1{font-size:22px}
  .lead{font-size:14px}
}

/* clamp images & long strings to avoid overflow */
img, svg, .hero-card, .lead-form-card, .card, .wrap-small { max-width:100%; height:auto; }
* { word-wrap: break-word; }

/* optional debug (hidden by default) */
.debug-box{position:fixed;right:14px;bottom:14px;z-index:99999;font-size:12px;color:#fff;background:rgba(0,0,0,0.6);padding:8px 10px;border-radius:8px;display:none}
/* ================= Images / hero visuals ================= */

/* hero image (clean warehouse) */
.hero-figure { margin: 18px 0 8px; display:flex; flex-direction:column; gap:8px; }
.hero-image {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
  display:block;
  box-shadow: 0 10px 30px rgba(11,18,32,0.06);
}

/* source / salvage image */
.sources-section .content-cards {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  padding:18px;
}
.source-figure { margin:0; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; }
.source-image {
  width: 100%;
  max-width: 540px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 12px 36px rgba(11,18,32,0.06);
}

/* Responsive tweaks for image areas */
@media (max-width: 980px) {
  .hero-image { max-height: 210px; }
  .sources-section .content-cards { flex-direction: column-reverse; gap:12px; }
  .source-image { max-width: 100%; }
}

@media (max-width: 820px) {
  .hero-image { max-height: 180px; }
  .hero-card { padding-bottom: 18px; }
  .sources-section { padding-left: 8px; padding-right: 8px; }
}

/* caption */
.hero-figure figcaption,
.source-figure figcaption { font-size: 13px; color: var(--muted); }

/* small accessibility: ensure images scale well in print */
@media print {
  .hero-image, .source-image { page-break-inside: avoid; max-width: 100%; height: auto; }
}

/* ===== Suppliers grid / cards specific styles ===== */

/* ===== Supplier Network Map (BASE HEIGHT — REQUIRED) ===== */
#supplier-map {
  width: 100%;
  height: 520px;
  min-height: 520px;
  border-radius: 10px;
}

.suppliers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 12px;
}

/* supplier card specifics */
.supplier-card {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 220px;
  padding: 18px;
}

.supplier-card .supplier-meta { display:flex; gap:12px; align-items:center; }
.supplier-logo { width:56px; height:56px; object-fit:contain; border-radius:8px; background:#fff; padding:6px; box-shadow:0 6px 18px rgba(11,18,32,0.04) }

.supplier-card h4 { margin:0 0 4px; font-size:18px; line-height:1.05; }
.supplier-card p { margin: 8px 0; color: var(--muted); font-size:14px; }

/* actions (view + request) */
.supplier-actions { display:flex; gap:10px; align-items:center; margin-top:8px; }
.supplier-actions .btn { min-width:120px; }

/* keep consistent card height for nice alignment on large screens */
@media (min-width: 1200px) {
  .supplier-card { min-height: 260px; }
}

/* filter controls small spacing */
.card select { padding:10px 12px; border-radius:8px; }

/* Map placeholder */
.card > .map-placeholder { height:260px; border-radius:10px; background:#eef6ff; display:flex; align-items:center; justify-content:center; color:var(--muted) }

/* smaller screens: make supplier actions stack */
@media (max-width:420px) {
  .supplier-actions { flex-direction:column; align-items:stretch; }
  .supplier-actions .btn { width:100%; }
}

/* Utility: subtle verified badge inside cards (if you want) */
.verified-inline { display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(47,110,242,0.06);font-weight:600;color:var(--accent); }

/* Small accessibility improvements */
.supplier-card:focus-within { box-shadow: 0 10px 30px rgba(47,110,242,0.06); outline: none; }

/* ===========================
   Modal styles (Instant Request)
   Moved from footer.php inline style into styles.css
   =========================== */

.asz-modal {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: none; /* visible only when JS sets display:flex */
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.asz-modal[aria-hidden="false"] { display:flex; }

.asz-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,12,20,0.45);
}

.asz-modal-panel {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(11,18,32,0.6);
  padding: 18px;
  z-index: 2;
  overflow: auto;
  max-height: 90vh;
}

.asz-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.asz-modal-header h2 { margin:0; font-size:20px; }
.asz-modal-close { background:transparent; border:0; font-size:20px; cursor:pointer; }

.asz-modal-body { margin-top:12px; }

/* make modal form inputs match site styles */
.asz-modal-panel .lead-form input,
.asz-modal-panel .lead-form select,
.asz-modal-panel .lead-form textarea {
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--ui-border); margin-top:6px; font-size:15px;
}

/* ensure modal buttons are visually consistent */
.asz-modal-panel .form-actions { display:flex; gap:10px; align-items:center; margin-top:12px; }

/* responsive tweaks for the modal */
@media (max-width:600px) {
  .asz-modal-panel { padding:14px; width:100%; margin: 0 8px; }
}

/* small animation (optional) */
.asz-modal-panel { transform-origin: center; transition: transform .12s ease, opacity .12s ease; }
.asz-modal[aria-hidden="false"] .asz-modal-panel { transform: translateY(0); opacity:1; }

/* ===========================
   Small component: card grid for lists (listings etc)
   =========================== */

.listings-row {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:14px;
}

.listing-card img { width:100%; height:130px; object-fit:cover; border-radius:8px; }
.listing-card .meta { margin-top:8px; }
/* =====================
   Mobile polish patch — AutoSparesZone
   Paste at end of styles.css
   ===================== */

/* Prevent tiny right-side gap from map / tiles on mobile */
.leaflet-container { width:100% !important; height:100% !important; }

/* Make hero-grid stack cleanly and ensure map doesn't overflow */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap:16px; }
  /* If you want map on right for larger tablets keep min width */
  .hero-grid > section.card { max-width: 100%; width:100%; }
}

/* Suppliers grid: 1 column on narrow phones, 2 on small tablets, 3 on larger */
@media (max-width: 420px) {
  .suppliers-grid { grid-template-columns: 1fr !important; gap:12px; }
  .supplier-card { padding:14px; min-height: unset; }
  .supplier-logo { width:64px; height:64px; }
  .supplier-card h4 { font-size:16px; }
  .supplier-card p { font-size:13px; }
  .supplier-actions { flex-direction:column; gap:8px; }
  .supplier-actions .btn { width:100%; min-width:unset; padding:12px 14px; border-radius:10px; }
  .card { padding:14px; }
  #supplier-map { height:360px !important; }
}

/* Small phones / landscape */
@media (min-width:421px) and (max-width: 768px) {
  .suppliers-grid { grid-template-columns: repeat(2,1fr); }
  .supplier-logo { width:76px; height:76px; }
  #supplier-map { height:420px !important; }
}

/* Modal: full-screen on tiny devices (better UX) */
@media (max-width:600px) {
  .asz-modal-panel, .asz-modal-panel { max-width:100%; width:100%; border-radius:12px 12px 0 0; margin:0; height:92vh; }
  .asz-modal-panel { padding:12px; }
  .asz-modal-body { overflow:auto; max-height:65vh; }
}

/* Mobile call popup: reduce footprint, ensure safe area padding, and hide after user scrolls */
.mobile-call-popup {
  left:12px; right:12px; bottom:18px; padding:10px; display:flex; align-items:center; gap:10px; z-index:140000;
  transition: transform .22s ease, opacity .22s ease;
  will-change: transform, opacity;
}
.mobile-call-popup.hidden { transform: translateY(40px); opacity:0; pointer-events:none; }

/* Make touch targets larger and ensure contrast */
.mobile-call-popup a, .mobile-call-popup button { min-height:44px; padding:10px 12px; border-radius:10px; font-weight:700; }

/* Prevent map/tile images from creating horizontal scroll */
.leaflet-tile, .leaflet-pane, .leaflet-container, .leaflet-marker-icon { -webkit-transform: translateZ(0); transform: translateZ(0); }

/* Ensure selects/wide inputs don't overflow on tiny screens */
.card select, .card input[type="search"], .lead-form input, .lead-form select { min-width: 0; width:100%; box-sizing:border-box; }

/* Small fix for header stickiness to not push content on mobile */
.site-header { position: sticky; top: 0; z-index: 9999; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Focus ring for keyboard users on mobile (bigger) */
:focus { outline: 3px solid rgba(47,110,242,0.18); outline-offset: 2px; }

/* Small utility to reduce map height when keyboard is open on mobile (prevents map resizing jank) */
@media (max-width:420px) {
  .leaflet-container { transition: height .18s ease; }
  body.keyboard-open .leaflet-container { height: calc(100vh - 420px) !important; }
}

/* Keep action bar and filters compact and stack on very small viewports */
@media (max-width:520px) {
  .card > form#filters-form { display:block; }
  .card > form#filters-form > div { width:100%; margin-bottom:8px; }
  .card > form#filters-form .btn { width:48%; display:inline-block; }
}

/* Extra tweak: ensure header nav toggle & mobile nav align nicely */
/* If header.php outputs #mobile-menu-toggle or .mobile-nav, these rules play nicely */
#mobile-menu-toggle{display:none;background:transparent;border:0;padding:8px;border-radius:8px;cursor:pointer}
@media (max-width:820px){
  #mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:8px}
  .main-nav{display:none !important}
}
/* ===== FORCE LEAD MODAL VISIBILITY RULE (DO NOT MOVE) ===== */

/* Always hidden by default */
.asz-modal {
  display: none !important;
}

/* Only visible when explicitly opened */
.asz-modal[aria-hidden="false"] {
  display: flex !important;
}
/* Contact page form polish */
.contact-card {
  padding: 20px;
}

.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  font-size: 15px;
  resize: vertical;
}

.contact-actions {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-actions .btn {
  min-width: 160px;
}

/* Mobile */
@media (max-width: 520px) {
  .contact-actions {
    flex-direction: column;
  }

  .contact-actions .btn {
    width: 100%;
  }
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  font-size: 15px;
  background: #fff;
}
.mobile-call-popup {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: 140000;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 14px 16px;
  background: linear-gradient(135deg, #ffffff, #f9fbff);
  border-radius: 16px;

  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.15),
    0 0 0 1px rgba(47, 110, 242, 0.08);

  animation: slideUpFade 0.35s ease;
}
/* ===============================
   Mobile Sticky Call Bar (FINAL)
   =============================== */

.mobile-call-popup {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: env(safe-area-inset-bottom, 14px);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(10,20,40,0.15);
  padding: 12px 14px;
  z-index: 140000;
  display: none; /* controlled by JS */
  animation: slideUpFade .35s ease forwards;
}

.mobile-call-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Phone icon */
.mobile-call-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(47,110,242,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Content */
.mobile-call-content {
  flex: 1;
  line-height: 1.3;
}

.mobile-call-title {
  font-weight: 700;
  font-size: 15px;
  color: #0f1724;
}

.mobile-call-number {
  display: inline-block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 800;
  color: #2f6ef2;
  text-decoration: none;
}

.mobile-call-subtext {
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
}

/* Close button */
.mobile-call-close {
  background: transparent;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
}

.mobile-call-close:hover {
  color: #0f1724;
}

/* Animation */
@keyframes slideUpFade {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Small phones */
@media (max-width:420px) {
  .mobile-call-popup { padding: 12px 14px; }
  .mobile-call-title { font-size: 14px; }
  .mobile-call-number { font-size: 15px; }
}

/* Mobile only */
@media (min-width: 820px) {
  .mobile-call-popup {
    display: none !important;
  }
}
/* Visible state (JS controlled) */
.mobile-call-popup.is-visible {
  display: block;
  animation: slideUpFade .25s ease-out;
}
/* ==============================
   Trust badges – mobile polish
   ============================== */
@media (max-width: 600px) {

  .card .muted.small + div {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
  }

  .card .muted.small + div img {
    height: 26px !important;
    max-width: 100%;
    object-fit: contain;
    opacity: 0.9;
  }
}
/* ==============================
   Popular parts – mobile layout
   ============================== */
@media (max-width: 600px) {

  .gallery-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .gallery-item {
    padding: 14px;
    gap: 14px;
    align-items: center;
  }

  .gallery-item img {
    width: 64px;
    height: 64px;
  }

  .gallery-item span {
    font-size: 16px;
  }

  .gallery-item .muted.small {
    font-size: 13px;
    line-height: 1.4;
  }
}
/* Cart icon */
.cart-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:#f3f6fb;
  text-decoration:none;
  font-size:20px;
}

.cart-count{
  position:absolute;
  top:-6px;
  right:-6px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:700;
  min-width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
#part-modal select{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--ui-border);
  font-size:15px;
  background:#fff;
}

.row-3{
  display:grid;
  grid-template-columns:1fr 1.5fr 1.5fr;
  gap:12px;
}

@media (max-width:520px){
  .row-3{
    grid-template-columns:1fr;
  }
}
/* PART IMAGE CARD */
.part-thumb {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f6fb;
  margin-bottom: 10px;
}

.part-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.supplier-card:hover .part-thumb img {
  transform: scale(1.05);
}

/* PRICE OVERLAY */
.price-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.price-badge span {
  font-weight: 800;
  margin-left: 4px;
}