/* ==========================================================================
   Abdellaoui Universal Cars — Design System
   Palette: Onyx black, Signal red (from logo), Warm white, Steel greys
   Type: "Cairo" (display/headings, geometric-bold) + "Tajawal" (body, readable)
   Motif: diagonal "speed-cut" lines echoing the logo's car swoosh
   ========================================================================== */

:root{
  --c-black: #0b0b0c;
  --c-black-soft: #16161a;
  --c-surface: #1e1f24;
  --c-red: #d81324;
  --c-red-dark: #a30f1c;
  --c-white: #ffffff;
  --c-paper: #f6f5f3;
  --c-steel: #8b8d94;
  --c-steel-light: #c9cacf;
  --c-line: rgba(255,255,255,.10);
  --c-line-dark: rgba(0,0,0,.09);

  --f-display: "Cairo", "Tajawal", sans-serif;
  --f-body: "Tajawal", "Cairo", sans-serif;

  --container: 1240px;
  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-card: 0 1px 0 rgba(0,0,0,.04);

  --ease: cubic-bezier(.2,.7,.2,1);
}

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

html,body{ margin:0; padding:0; }
body{
  font-family: var(--f-body);
  background: var(--c-paper);
  color: var(--c-black);
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 .5em;
  color: var(--c-black);
}
p{ margin:0 0 1em; color:#3a3a3d; }
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
input,select,textarea{ font-family: inherit; font-size:1rem; }

.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 20px; }
.section{ padding: 72px 0; }
.section-tight{ padding: 40px 0; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--c-red);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 30px;
  font-weight: 700;
  font-size: .98rem;
  border-radius: 2px;
  border: 2px solid transparent;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--c-red); color:#fff; }
.btn-primary:hover{ background: var(--c-red-dark); }
.btn-dark{ background: var(--c-black); color:#fff; }
.btn-dark:hover{ background: #000; }
.btn-outline{ background: transparent; border-color: var(--c-black); color: var(--c-black); }
.btn-outline:hover{ background: var(--c-black); color:#fff; }
.btn-outline-light{ background: transparent; border-color: rgba(255,255,255,.55); color:#fff; }
.btn-outline-light:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:.85rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(11,11,12,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:44px; width:auto; }
.brand-text{ color:#fff; font-family: var(--f-display); font-weight:800; font-size:1.05rem; line-height:1.15; }
.brand-text small{ display:block; font-family: var(--f-body); font-weight:400; color: var(--c-steel-light); font-size:.68rem; letter-spacing:.02em; }

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav a{
  color: var(--c-steel-light); font-weight:600; font-size:.95rem;
  padding:10px 14px; border-radius: 2px; position:relative;
  transition: color .15s var(--ease);
}
.main-nav a:hover, .main-nav a.active{ color:#fff; }
.main-nav a.active::after{
  content:""; position:absolute; right:14px; left:14px; bottom:4px; height:2px; background: var(--c-red);
}

.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:2px; color:#fff; background: transparent; border:1px solid var(--c-line);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.icon-btn:hover{ border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
.icon-btn svg{ width:20px; height:20px; }
.cart-badge{
  position:absolute; top:-6px; left:-6px; min-width:19px; height:19px; padding:0 4px;
  border-radius: 50%; background: var(--c-red); color:#fff; font-size:.65rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--c-black);
}
.cart-badge[hidden]{ display:none; }
.hamburger{ display:none; }

@media (max-width: 980px){
  .main-nav{ display:none; }
  .header-actions .btn{ display:none; }
  .hamburger{ display:flex; }
}

/* Mobile drawer */
.mobile-drawer{
  position: fixed; inset:0; z-index: 900; display:none;
}
.mobile-drawer.open{ display:block; }
.mobile-drawer .backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.mobile-drawer .panel{
  position:absolute; top:0; right:0; height:100%; width:min(320px,84vw);
  background: var(--c-black); padding:24px 20px; display:flex; flex-direction:column; gap:4px;
  transform: translateX(100%); transition: transform .28s var(--ease);
  border-left:1px solid var(--c-line);
}
.mobile-drawer.open .panel{ transform:none; }
.mobile-drawer .drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mobile-drawer a{ color:#fff; font-weight:700; padding:14px 6px; border-bottom:1px solid var(--c-line); font-size:1.05rem; }
.mobile-drawer .close-drawer{ color:#fff; background:none; border:none; font-size:1.6rem; line-height:1; }

/* ---------- Hero ---------- */
.hero{
  position:relative; background: var(--c-black); color:#fff; overflow:hidden;
  padding: 96px 0 110px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 85% 10%, rgba(216,19,36,.22), transparent 60%),
    linear-gradient(180deg, #0b0b0c 0%, #0b0b0c 100%);
  pointer-events:none;
}
.hero-swoosh{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
}
.hero .container{ position:relative; z-index:2; }
.hero-eyebrow{ color: var(--c-red); font-weight:800; letter-spacing:.02em; margin-bottom:14px; font-size:.95rem; }
.hero h1{
  color:#fff; font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 16ch; margin-bottom:.35em;
  opacity:0; transform: translateY(16px); animation: heroUp .7s var(--ease) .1s forwards;
}
.hero .lede{
  color: var(--c-steel-light); font-size:1.15rem; max-width: 48ch; margin-bottom:2em;
  opacity:0; transform: translateY(16px); animation: heroUp .7s var(--ease) .25s forwards;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; transform: translateY(16px); animation: heroUp .7s var(--ease) .4s forwards;
}
.hero-stats{
  display:flex; gap:36px; margin-top:56px; flex-wrap:wrap;
  opacity:0; transform: translateY(16px); animation: heroUp .7s var(--ease) .55s forwards;
}
.hero-stats .stat b{ display:block; font-family: var(--f-display); font-size:1.9rem; color:#fff; }
.hero-stats .stat span{ color: var(--c-steel); font-size:.88rem; }
@keyframes heroUp{ to{ opacity:1; transform:none; } }

/* Page header (inner pages) */
.page-hero{
  background: var(--c-black); color:#fff; padding: 56px 0 62px; position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; left:-10%; top:-40%; width:60%; height:220%;
  background: linear-gradient(120deg, transparent 46%, rgba(216,19,36,.16) 47%, rgba(216,19,36,.16) 49%, transparent 50%);
}
.page-hero h1{ color:#fff; margin-bottom:8px; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.breadcrumbs{ color: var(--c-steel); font-size:.9rem; }
.breadcrumbs a{ color: var(--c-steel-light); }
.breadcrumbs a:hover{ color:#fff; }

/* ---------- Section headings ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom:6px; }
.section-head p{ margin:0; max-width:52ch; }

/* ---------- Cards: cars & parts ---------- */
.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3, .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border:1px solid var(--c-line-dark); border-radius: var(--radius-s);
  overflow:hidden; display:flex; flex-direction:column;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover{ border-color: var(--c-black); transform: translateY(-3px); }
.card-media{
  position:relative; aspect-ratio: 4/3; background: linear-gradient(160deg,#101013,#1c1c20);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card-media svg{ width:82%; height:auto; }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.badge{
  position:absolute; top:12px; right:12px; background: var(--c-red); color:#fff;
  font-size:.72rem; font-weight:800; padding:5px 10px; border-radius:2px;
}
.badge-outline{ background: rgba(255,255,255,.12); backdrop-filter: blur(4px); color:#fff; border:1px solid rgba(255,255,255,.35); }
.badge-steel{ position:absolute; top:12px; left:12px; }
.badge-avail{ background:#1c8a4a; }
.badge-unavail{ background:#6a6c72; }

.card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-title{ font-family: var(--f-display); font-weight:800; font-size:1.08rem; }
.card-sub{ color: var(--c-steel); font-size:.85rem; margin-top:-6px; }
.spec-row{ display:flex; flex-wrap:wrap; gap:8px 14px; font-size:.82rem; color:#4a4a4d; padding:10px 0; border-top:1px solid var(--c-line-dark); border-bottom:1px solid var(--c-line-dark); }
.spec-row span{ display:flex; align-items:center; gap:6px; }
.spec-row svg{ width:15px; height:15px; color: var(--c-red); flex-shrink:0; }
.card-price{ font-family: var(--f-display); font-weight:800; font-size:1.25rem; color: var(--c-black); }
.card-price small{ font-family: var(--f-body); font-weight:500; color: var(--c-steel); font-size:.72rem; }
.card-actions{ display:flex; gap:10px; margin-top:auto; }
.card-actions .btn{ flex:1; padding:11px 10px; font-size:.86rem; }

/* ---------- Why us ---------- */
.feature{ display:flex; flex-direction:column; gap:14px; padding:26px 22px; border:1px solid var(--c-line-dark); border-radius: var(--radius-s); background:#fff; }
.feature .ico{ width:48px; height:48px; border-radius:2px; background: var(--c-black); color: var(--c-red); display:flex; align-items:center; justify-content:center; }
.feature .ico svg{ width:24px; height:24px; }
.feature h3{ font-size:1.05rem; margin-bottom:2px; }
.feature p{ font-size:.92rem; margin:0; }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--c-black); color:#fff; padding: 70px 0; text-align:center; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse 700px 300px at 50% 0%, rgba(216,19,36,.25), transparent 65%); }
.cta-band .container{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; font-size: clamp(1.6rem,3vw,2.3rem); max-width:24ch; margin: 0 auto 10px; }
.cta-band p{ color: var(--c-steel-light); max-width: 46ch; margin: 0 auto 28px; }

/* ---------- Footer ---------- */
.site-footer{ background: #000; color: var(--c-steel-light); padding: 56px 0 0; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid var(--c-line); }
@media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:38px; }
.footer-brand span{ font-family: var(--f-display); font-weight:800; color:#fff; }
.site-footer h4{ color:#fff; font-size:.95rem; margin-bottom:16px; }
.site-footer ul li{ margin-bottom:10px; }
.site-footer a{ color: var(--c-steel-light); font-size:.92rem; transition: color .15s; }
.site-footer a:hover{ color: var(--c-red); }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{ width:38px; height:38px; border:1px solid var(--c-line); border-radius:2px; display:flex; align-items:center; justify-content:center; }
.social-row svg{ width:17px; height:17px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; font-size:.82rem; color: var(--c-steel); flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color: var(--c-steel); }
.footer-bottom a:hover{ color:#fff; }

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:8px; }
.field .hint{ font-size:.78rem; color: var(--c-steel); margin-top:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid #d8d7d3; border-radius:2px; background:#fff; color:var(--c-black);
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--c-black); }
.field-error input, .field-error select, .field-error textarea{ border-color: var(--c-red); }
.field-error .error-msg{ color: var(--c-red); font-size:.8rem; margin-top:6px; display:block; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .form-row{ grid-template-columns:1fr; } }
fieldset{ border:1px solid var(--c-line-dark); border-radius: var(--radius-s); padding:20px; margin:0 0 20px; }
legend{ font-family: var(--f-display); font-weight:800; padding:0 8px; }

/* ---------- Toasts ---------- */
#toast-wrap{ position: fixed; bottom:22px; left:22px; z-index:2000; display:flex; flex-direction:column; gap:10px; }
.toast{
  background: var(--c-black); color:#fff; padding:14px 18px; border-radius:2px; min-width:260px; max-width:340px;
  display:flex; align-items:center; gap:10px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-right:3px solid var(--c-red);
  animation: toastIn .25s var(--ease);
  font-size:.9rem;
}
.toast.success{ border-right-color:#1c8a4a; }
.toast.error{ border-right-color: var(--c-red); }
@keyframes toastIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- Skeletons ---------- */
.skeleton{ background: linear-gradient(90deg,#eceae5 25%, #e3e1db 37%, #eceae5 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius:2px; }
@keyframes shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }
.skel-card{ height: 380px; }

/* ---------- Empty / error states ---------- */
.state-block{ text-align:center; padding: 70px 20px; }
.state-block .glyph{ width:64px; height:64px; margin:0 auto 18px; color: var(--c-steel); }
.state-block h3{ margin-bottom:8px; }
.state-block p{ max-width: 42ch; margin: 0 auto 22px; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.muted{ color: var(--c-steel); }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.tag{ display:inline-block; padding:5px 12px; border:1px solid var(--c-line-dark); border-radius:20px; font-size:.78rem; font-weight:700; color:#3a3a3d; }
.divider{ height:1px; background: var(--c-line-dark); border:none; margin: 32px 0; }
.filters-bar{ background:#fff; border:1px solid var(--c-line-dark); border-radius: var(--radius-s); padding:18px; margin-bottom:28px; }
.filters-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:14px; align-items:end; }
@media (max-width: 980px){ .filters-grid{ grid-template-columns: repeat(2,1fr); } }
.results-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; }
.pagination button{ width:40px; height:40px; border:1px solid var(--c-line-dark); background:#fff; border-radius:2px; font-weight:700; }
.pagination button.active{ background: var(--c-black); color:#fff; border-color: var(--c-black); }

.accordion-item{ border-bottom:1px solid var(--c-line-dark); }
.accordion-q{ width:100%; text-align:right; background:none; border:none; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; font-family: var(--f-display); font-weight:700; font-size:1rem; }
.accordion-q svg{ width:18px; height:18px; transition: transform .2s; flex-shrink:0; }
.accordion-item.open .accordion-q svg{ transform: rotate(45deg); }
.accordion-a{ max-height:0; overflow:hidden; transition: max-height .25s var(--ease); }
.accordion-item.open .accordion-a{ max-height: 400px; }
.accordion-a p{ padding: 0 4px 20px; }

.step-track{ display:flex; align-items:center; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
.step-track .step{ display:flex; align-items:center; gap:8px; color: var(--c-steel); font-weight:700; font-size:.9rem; }
.step-track .step .dot{ width:28px; height:28px; border-radius:50%; border:2px solid var(--c-steel-light); display:flex; align-items:center; justify-content:center; font-size:.82rem; }
.step-track .step.active{ color: var(--c-black); }
.step-track .step.active .dot{ border-color: var(--c-red); background: var(--c-red); color:#fff; }
.step-track .step.done .dot{ border-color: var(--c-black); background: var(--c-black); color:#fff; }
.step-track .sep{ width:32px; height:2px; background: var(--c-line-dark); }

.summary-box{ background:#fff; border:1px solid var(--c-line-dark); border-radius: var(--radius-s); padding:22px; }
.summary-row{ display:flex; justify-content:space-between; padding:10px 0; font-size:.92rem; border-bottom:1px solid var(--c-line-dark); }
.summary-row.total{ border-bottom:none; padding-top:16px; font-family: var(--f-display); font-weight:800; font-size:1.15rem; }

.cart-line{ display:grid; grid-template-columns: 96px 1fr auto; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--c-line-dark); }
.cart-line .thumb{ width:96px; height:72px; background: linear-gradient(160deg,#101013,#1c1c20); border-radius:2px; display:flex; align-items:center; justify-content:center; }
.cart-line .thumb svg{ width:78%; }
.qty-box{ display:flex; align-items:center; border:1px solid var(--c-line-dark); border-radius:2px; width: fit-content; }
.qty-box button{ width:34px; height:34px; background:none; border:none; font-size:1.1rem; font-weight:700; }
.qty-box input{ width:40px; text-align:center; border:none; padding:0; }
.remove-link{ color: var(--c-red); font-size:.82rem; font-weight:700; }

.info-card{ background:#fff; border:1px solid var(--c-line-dark); border-radius: var(--radius-s); padding:22px; display:flex; gap:16px; }
.info-card .ico{ width:42px; height:42px; border-radius:2px; background: var(--c-black); color: var(--c-red); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-card .ico svg{ width:20px; height:20px; }

.value-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
@media (max-width:620px){ .value-list{ grid-template-columns:1fr; } }
.value-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; }
.value-list svg{ width:18px; height:18px; color: var(--c-red); flex-shrink:0; margin-top:3px; }

.gallery-main{ aspect-ratio:16/10; background: linear-gradient(160deg,#101013,#1c1c20); border-radius:2px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.gallery-main svg{ width:60%; }
.gallery-thumbs{ display:flex; gap:10px; }
.gallery-thumbs .th{ width:74px; height:56px; border-radius:2px; background: linear-gradient(160deg,#101013,#1c1c20); border:2px solid transparent; display:flex; align-items:center; justify-content:center; }
.gallery-thumbs .th.active{ border-color: var(--c-red); }
.gallery-thumbs .th svg{ width:70%; }

.detail-specs{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--c-line-dark); border:1px solid var(--c-line-dark); border-radius: var(--radius-s); overflow:hidden; }
.detail-specs .spec{ background:#fff; padding:16px 18px; }
.detail-specs .spec b{ display:block; font-family: var(--f-display); font-size:1rem; }
.detail-specs .spec span{ color: var(--c-steel); font-size:.82rem; }

.map-frame{ width:100%; aspect-ratio: 16/8; border:0; border-radius: var(--radius-s); filter: grayscale(.15); }

.error-code{ font-family: var(--f-display); font-weight:800; font-size: clamp(4rem,14vw,9rem); color: var(--c-black); line-height:1; }

.admin-shell{ display:flex; min-height:100vh; }
.admin-side{ width:250px; background: var(--c-black); color:#fff; padding:22px 16px; flex-shrink:0; }
.admin-side .brand{ margin-bottom:26px; padding:0 6px; }
.admin-side nav a{ display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:2px; color: var(--c-steel-light); font-weight:600; font-size:.92rem; margin-bottom:2px; }
.admin-side nav a.active, .admin-side nav a:hover{ background: rgba(255,255,255,.08); color:#fff; }
.admin-side nav svg{ width:18px; height:18px; }
.admin-main{ flex:1; background: var(--c-paper); min-width:0; }
.admin-topbar{ background:#fff; border-bottom:1px solid var(--c-line-dark); padding:16px 28px; display:flex; justify-content:space-between; align-items:center; }
.admin-content{ padding:28px; }
.kpi-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom:28px; }
@media (max-width:980px){ .kpi-grid{ grid-template-columns: repeat(2,1fr); } }
.kpi-card{ background:#fff; border:1px solid var(--c-line-dark); border-radius: var(--radius-s); padding:20px; }
.kpi-card span{ color: var(--c-steel); font-size:.85rem; }
.kpi-card b{ display:block; font-family: var(--f-display); font-size:1.7rem; margin-top:6px; }
.admin-table-wrap{ background:#fff; border:1px solid var(--c-line-dark); border-radius: var(--radius-s); overflow:auto; }
table.admin-table{ width:100%; border-collapse: collapse; min-width:640px; }
table.admin-table th, table.admin-table td{ padding:14px 16px; text-align:right; border-bottom:1px solid var(--c-line-dark); font-size:.9rem; }
table.admin-table th{ color: var(--c-steel); font-weight:700; font-size:.8rem; }
table.admin-table tr:last-child td{ border-bottom:none; }
.row-actions{ display:flex; gap:8px; }
.row-actions button{ border:1px solid var(--c-line-dark); background:none; padding:6px 12px; border-radius:2px; font-size:.8rem; font-weight:700; }
.row-actions button.danger{ color: var(--c-red); border-color: rgba(216,19,36,.4); }
.pill{ padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:700; }
.pill-green{ background:#e5f5ec; color:#1c8a4a; }
.pill-grey{ background:#eceae5; color:#6a6c72; }
.pill-red{ background:#fdeaec; color: var(--c-red); }
.admin-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.modal-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.open{ display:flex; }
.modal-box{ background:#fff; border-radius: var(--radius-s); width:100%; max-width:560px; max-height:88vh; overflow:auto; padding:26px; }
.modal-box h3{ margin-bottom:18px; }
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--c-black); padding:20px; }
.login-card{ background:#fff; width:100%; max-width:400px; padding:38px 32px; border-radius:2px; }
.login-card .brand{ justify-content:center; margin-bottom: 22px; }

/* ==========================================================================
   Cars system upgrade — status badges, richer car card, filter sheet,
   professional gallery with zoom / fullscreen
   ========================================================================== */

/* ---------- Status badges ---------- */
.card-badges{ position:absolute; top:12px; right:12px; left:12px; display:flex; justify-content:space-between; gap:8px; z-index:2; }
.badge-status{ position:static; }
.badge-status-available{ background:#1c8a4a; }
.badge-status-reserved{ background:#b8790a; }
.badge-status-sold{ background:#4a4a4d; }
.badge.badge-outline{ position:static; }

/* ---------- Car card: bigger media, 3 actions ---------- */
.car-card-media{ aspect-ratio: 16/10; }
.car-card-media svg{ width:88%; }
.car-card-actions{ flex-direction:column; gap:8px; }
.car-card-actions-row{ display:flex; gap:8px; }
.car-card-actions-row .btn{ flex:1; padding:11px 10px; font-size:.86rem; }
.btn-whatsapp{ background:#1fae5a; color:#fff; display:flex; align-items:center; justify-content:center; gap:6px; }
.btn-whatsapp:hover{ background:#189049; }
.btn-whatsapp svg{ width:16px; height:16px; flex-shrink:0; }
.btn-whatsapp[disabled]{ opacity:.5; }

/* ---------- Search + filters (cars listing) ----------
   One filters panel, two presentations: an always-visible inline card on
   desktop, and a slide-up bottom sheet on mobile — same DOM, controlled
   purely by CSS + an .open toggle class, so there's a single source of
   truth for filter state (no duplicated fields to keep in sync). */
.search-row{ margin-bottom:14px; }
.search-input-wrap{ position:relative; }
.search-input-wrap svg{ position:absolute; top:50%; right:16px; transform:translateY(-50%); width:18px; height:18px; color: var(--c-steel); }
.search-input-wrap input{ padding-right:44px; }
.filters-grid.filters-grid-wide{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .filters-grid.filters-grid-wide{ grid-template-columns: repeat(2,1fr); } }
.price-range-row{ display:flex; align-items:center; gap:8px; }
.price-range-row input{ width:100%; }
.price-range-row span{ color: var(--c-steel); flex-shrink:0; }
.filters-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.filter-open-btn{ display:none; align-items:center; gap:8px; }
.filter-open-btn svg{ width:16px; height:16px; }
.active-filter-count{ background: var(--c-red); color:#fff; border-radius:20px; font-size:.72rem; font-weight:800; padding:1px 7px; margin-right:4px; }

.filters-panel{ margin-bottom:28px; }
.filters-panel .backdrop{ display:none; }
.filters-panel .sheet-panel{
  position:static; transform:none; background:#fff; border:1px solid var(--c-line-dark);
  border-radius: var(--radius-s); padding:18px; max-height:none; overflow:visible;
}
.filters-panel .sheet-top,
.filters-panel .sheet-actions{ display:none; }
.sheet-top{ align-items:center; justify-content:space-between; margin-bottom:16px; }
.sheet-top h3{ margin:0; }
.sheet-close{ background:none; border:none; padding:6px; }
.sheet-close svg{ width:22px; height:22px; }
.sheet-actions{ gap:10px; margin-top:18px; position:sticky; bottom:0; background:#fff; padding-top:12px; }
.sheet-actions .btn{ flex:1; }

@media (max-width: 980px){
  .filter-open-btn{ display:inline-flex; }
  .filters-panel{
    position:fixed; inset:0; z-index:1200; margin:0; display:none;
  }
  .filters-panel.open{ display:block; }
  .filters-panel .backdrop{ display:block; position:absolute; inset:0; background: rgba(0,0,0,.55); }
  .filters-panel .sheet-panel{
    position:absolute; right:0; left:0; bottom:0; max-height:88vh; overflow:auto;
    background:#fff; border-radius:14px 14px 0 0; border:none;
    padding:20px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .25s var(--ease);
  }
  .filters-panel.open .sheet-panel{ transform:none; }
  .filters-panel .sheet-top,
  .filters-panel .sheet-actions{ display:flex; }
}

/* ---------- Sort select on the results toolbar ---------- */
.sort-field{ display:flex; align-items:center; gap:8px; }
.sort-field select{ padding:9px 12px; border:1px solid var(--c-line-dark); border-radius:2px; background:#fff; font-weight:700; font-size:.86rem; }

/* ---------- Professional gallery (detail page) ---------- */
.gallery-main{ position:relative; overflow:hidden; cursor: zoom-in; }
.gallery-main-content{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; transition: transform .35s var(--ease); }
.gallery-main:hover .gallery-main-content{ transform: scale(1.06); }
.gallery-main-content svg{ width:60%; }
.gallery-main-content img{ width:100%; height:100%; object-fit:cover; }
.gallery-fullscreen-btn{
  position:absolute; bottom:12px; left:12px; width:38px; height:38px; border-radius:2px;
  background: rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
}
.gallery-fullscreen-btn svg{ width:18px; height:18px; }
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background: rgba(0,0,0,.5); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
}
.gallery-nav svg{ width:16px; height:16px; }
.gallery-nav.prev{ right:12px; transform:translateY(-50%) rotate(90deg); }
.gallery-nav.next{ left:12px; transform:translateY(-50%) rotate(-90deg); }
.gallery-thumbs .th{ cursor:pointer; padding:0; }

/* Fullscreen lightbox */
.lightbox-backdrop{
  position:fixed; inset:0; z-index:2000; background: rgba(4,4,6,.94); display:none;
  align-items:center; justify-content:center; padding:40px;
}
.lightbox-backdrop.open{ display:flex; }
.lightbox-stage{ max-width:min(92vw, 1100px); max-height:82vh; width:100%; display:flex; align-items:center; justify-content:center; }
.lightbox-stage svg{ width:70%; max-height:80vh; }
.lightbox-stage img{ max-width:100%; max-height:82vh; object-fit:contain; }
.lightbox-close{ position:absolute; top:20px; left:20px; width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; display:flex; align-items:center; justify-content:center; }
.lightbox-close svg{ width:20px; height:20px; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.8rem; line-height:1; }
.lightbox-nav.prev{ right:24px; }
.lightbox-nav.next{ left:24px; }
@media (max-width:620px){
  .lightbox-backdrop{ padding:16px; }
  .lightbox-nav{ width:42px; height:42px; }
}

/* ---------- Detail page: status + action buttons ---------- */
.summary-box .badge-status{ position:static; display:inline-block; }
.detail-actions{ display:flex; flex-direction:column; gap:10px; }
.detail-actions .btn-whatsapp{ padding:13px 16px; }

/* ---------- Sold overlay on a card ---------- */
.car-card.is-sold .car-card-media::after{
  content:""; position:absolute; inset:0; background: rgba(11,11,12,.35);
}

/* ---------- Small-screen interaction and layout safeguards ---------- */
.mobile-sticky-actions{ display:none; }
@media (max-width: 620px){
  body{ overflow-x:hidden; }
  .container{ padding-left:16px; padding-right:16px; }
  .section{ padding:42px 0; }
  .site-header .container{ height:64px; gap:10px; }
  .brand{ min-width:0; gap:8px; }
  .brand img{ height:36px; flex-shrink:0; }
  .brand-text{ font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-text small{ font-size:.58rem; }
  .header-actions{ gap:6px; }
  .icon-btn{ width:44px; height:44px; }
  .page-hero{ padding:34px 0 38px; }
  .page-hero h1{ font-size:1.55rem; overflow-wrap:anywhere; }
  .breadcrumbs{ font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .grid-3, .grid-4{ grid-template-columns:1fr; gap:16px; }
  .card-media{ aspect-ratio: 16/11; }
  .card-body{ padding:16px; }
  .card-title{ font-size:1rem; }
  .card-price{ font-size:1.22rem; }
  .card-actions, .car-card-actions-row{ gap:8px; }
  .card-actions .btn, .car-card-actions-row .btn{ min-height:46px; padding:10px 8px; }
  .filters-grid, .filters-grid.filters-grid-wide{ grid-template-columns:1fr; gap:10px; }
  .filters-bar{ padding:14px; margin-bottom:20px; }
  .results-bar{ align-items:stretch; flex-direction:column; }
  .results-bar .btn{ width:100%; min-height:44px; }
  .detail-layout, #detail-grid{ grid-template-columns:1fr !important; gap:24px !important; }
  .detail-layout > *{ min-width:0; max-width:100%; }
  .detail-layout .detail-specs, .detail-layout .summary-box{ min-width:0; }
  .detail-layout + .mobile-sticky-actions{ display:grid; }
  .mobile-sticky-actions{
    position:fixed; right:0; bottom:0; left:0; z-index:700; display:grid; grid-template-columns:repeat(3,1fr);
    gap:6px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:rgba(11,11,12,.97); border-top:1px solid var(--c-line);
  }
  .mobile-sticky-actions .btn{ min-height:46px; padding:8px 5px; font-size:.78rem; }
  body:has(.mobile-sticky-actions){ padding-bottom:76px; }
  .gallery-main{ min-height:0; }
  .gallery-thumbs{ overflow-x:auto; padding-bottom:3px; }
  .gallery-thumbs .th{ flex:0 0 74px; }
  .detail-specs{ grid-template-columns:1fr; }
  .summary-box{ padding:16px; }
  .cart-line{ grid-template-columns:64px 1fr; gap:10px; padding:14px 0; }
  .cart-line .thumb{ width:64px; height:58px; grid-row:span 2; }
  .cart-line > div:last-child{ grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .cart-line .qty-box button{ width:40px; height:40px; }
  #cart-layout, #checkout-body > .grid{ grid-template-columns:1fr !important; gap:20px !important; }
  #cart-layout > div:last-child{ display:block; }
  #cart-layout .summary-box{ position:static !important; }
  #checkout-form .btn{ min-height:48px; }
  .step-track{ gap:6px; margin-bottom:24px; }
  .step-track .step{ font-size:.76rem; }
  .step-track .sep{ width:12px; }
  .footer-bottom{ align-items:flex-start; flex-direction:column; }
}
@media (min-width:621px){
  .detail-layout + .mobile-sticky-actions{ display:none; }
}

/* ==========================================================================
   Admin: image uploader (add/edit photos per car from the dashboard)
   ========================================================================== */
.image-uploader{ margin-bottom:18px; }
.image-uploader .drop-zone{
  border:2px dashed #d8d7d3; border-radius: var(--radius-s); padding:22px; text-align:center;
  cursor:pointer; transition: border-color .15s, background .15s; background:#fbfaf8;
}
.image-uploader .drop-zone:hover, .image-uploader .drop-zone.drag-over{ border-color: var(--c-red); background:#fff5f5; }
.image-uploader .drop-zone svg{ width:26px; height:26px; margin:0 auto 8px; color: var(--c-steel); display:block; }
.image-uploader .drop-zone p{ margin:0; font-size:.85rem; color: var(--c-steel); }
.image-uploader input[type=file]{ display:none; }
.image-thumbs{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-top:12px; }
.image-thumbs .thumb{ position:relative; aspect-ratio:4/3; border-radius:2px; overflow:hidden; border:1px solid var(--c-line-dark); background:#f0efec; }
.image-thumbs .thumb img{ width:100%; height:100%; object-fit:cover; }
.image-thumbs .thumb .cover-tag{ position:absolute; bottom:4px; right:4px; background: var(--c-red); color:#fff; font-size:.62rem; font-weight:800; padding:2px 6px; border-radius:2px; }
.image-thumbs .thumb button{
  position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%; border:none;
  background: rgba(11,11,12,.75); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; line-height:1;
}
.image-thumbs .thumb button:hover{ background: var(--c-red); }

/* ==========================================================================
   Scroll-reveal & micro-interactions (progressive enhancement)
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-stagger.in-view > *{ animation: revealStagger .6s var(--ease) both; }
.reveal-stagger.in-view > *:nth-child(1){ animation-delay:.03s; }
.reveal-stagger.in-view > *:nth-child(2){ animation-delay:.09s; }
.reveal-stagger.in-view > *:nth-child(3){ animation-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(4){ animation-delay:.21s; }
@keyframes revealStagger{ from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform:none; } }
.btn{ position:relative; overflow:hidden; }
.btn-primary:active, .btn-dark:active, .btn-whatsapp:active{ transform: scale(.97); }
.feature .ico, .info-card .ico{ transition: transform .35s var(--ease); }
.feature:hover .ico{ transform: rotate(-8deg) scale(1.08); }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ==========================================================================
   Hero: on-brand ambient motif evoking imported vehicles (no stock photos)
   ========================================================================== */
.hero{ background: var(--c-black) radial-gradient(1200px 700px at 15% 115%, rgba(216,19,36,.10), transparent 60%); }
.hero-fleet{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.9;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 32%, #000 100%);
}
.hero-fleet svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero-fleet .drift{ animation: heroDrift 16s ease-in-out infinite; }
.hero-fleet .drift-slow{ animation: heroDrift 24s ease-in-out infinite; }
@keyframes heroDrift{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
@media (prefers-reduced-motion: reduce){ .hero-fleet .drift, .hero-fleet .drift-slow{ animation:none; } }
@media (max-width: 860px){ .hero-fleet{ opacity:.45; } }

/* ---------- Car "landing page" mode (focused single-car header + hero) ---------- */
.site-header.header-focus .main-nav, .site-header.header-focus .header-actions .icon-btn.cart-link, .site-header.header-focus .hamburger{ display:none; }
.site-header.header-focus .header-actions{ gap:8px; }
@media (max-width:980px){ .site-header.header-focus .header-actions .btn{ display:inline-flex; } }
@media (max-width:560px){ .site-header.header-focus .back-to-catalog span{ display:none; } }
.back-to-catalog{ display:inline-flex; align-items:center; gap:6px; color: var(--c-steel-light); font-weight:700; font-size:.88rem; }
.back-to-catalog:hover{ color:#fff; }
.back-to-catalog svg{ width:16px; height:16px; transform: rotate(-90deg); }

.car-landing-hero{
  background: var(--c-black); color:#fff; position:relative; overflow:hidden; padding:44px 0 40px;
}
.car-landing-hero::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse 800px 420px at 90% -10%, rgba(216,19,36,.28), transparent 60%);
}
.car-landing-hero .container{ position:relative; z-index:2; }
.car-landing-hero .breadcrumbs{ margin-bottom:14px; }
.car-landing-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px; }
.car-landing-title h1{ color:#fff; margin-bottom:6px; font-size:clamp(1.7rem,3.6vw,2.5rem); }
.car-landing-title .badges{ display:flex; gap:8px; margin-bottom:10px; }
.car-landing-price{ font-family: var(--f-display); font-weight:800; font-size:2rem; color:#fff; white-space:nowrap; }
.car-landing-price small{ display:block; font-family: var(--f-body); font-weight:500; font-size:.72rem; color: var(--c-steel-light); }
.car-landing-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.car-landing-chips span{ display:flex; align-items:center; gap:6px; background: rgba(255,255,255,.07); border:1px solid var(--c-line); padding:8px 14px; border-radius:20px; font-size:.84rem; color: var(--c-steel-light); }
.car-landing-chips svg{ width:15px; height:15px; color: var(--c-red); }
.car-landing-cta{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
@media (max-width:620px){ .car-landing-cta .btn{ flex:1; min-width:140px; } }