 :root{--purple:#32105c;--purple2:#21083f;--purple3:#54218a;--gold:#d9A7FF;--cream:#faf8f4;--ink:#241a2d;--muted:#786f80;--line:#e9e3ec;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}a{color:inherit}.site-header{height:86px;background:var(--purple2);display:flex;align-items:center;justify-content:space-between;padding:0 7%;color:#fff;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:19px;letter-spacing:1px;color:#fff;font-weight:500}.brand b{color:var(--gold)}.brand small{display:block;font-size:8px;letter-spacing:2px;color:#c8b8d7;margin-top:4px}.brand-mark{width:42px;height:42px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:21px}.site-header nav{display:flex;gap:30px}.site-header nav a{text-decoration:none;font-size:13px;color:#eee}.site-header nav a:hover{color:var(--gold)}button,input,select,textarea{font:inherit}.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;border:0;border-radius:3px;padding:13px 20px;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.5px;cursor:pointer;transition:.2s}.button:hover{transform:translateY(-2px)}.button-gold{background:var(--gold);color:var(--purple2)}.button-purple{background:var(--purple);color:#fff}.button-outline{background:transparent;border:1px solid #806b93;color:#fff}.hero{min-height:540px;background: linear-gradient(135deg, #160020 0%, #240038 55%, #39005c 100%);display:grid;grid-template-columns:1fr 1.1fr;align-items:center;padding:55px 7%;color:#fff;overflow:hidden}.hero-copy{position:relative;z-index:1}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:800;color:var(--gold);margin:0 0 17px}.hero h1,.section-heading h2,.about h2,.contact h2,.modal h2{font-family:"Playfair Display",Georgia,serif;font-size:clamp(43px,5.4vw,72px);line-height:1.04;font-weight:600;margin:0 0 20px}.hero h1 em,.section-heading h2 em,.about h2 em,.contact h2 em,.modal h2 em{color:var(--gold);font-style:normal}.hero-lead{max-width:430px;color:#d5c9df;line-height:1.8;font-size:14px;margin:0 0 28px}.hero-points{display:flex;gap:20px;flex-wrap:wrap;margin-top:32px;color:#c9b9d6;font-size:11px}.hero-art{position:relative;padding:20px}.hero-art img{width:100%;height:350px;object-fit: contain !important;;position:relative;z-index:1;border-radius:3px;box-shadow:0 30px 70px #10031f88}.hero-orbit{position:absolute;width:390px;height:390px;border:1px solid #d4af3755;border-radius:50%;right:4%;top:0}.hero-stamp{position:absolute;z-index:2;bottom:0;left:0;width:105px;height:105px;background:var(--gold);color:var(--purple2);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg)}.hero-stamp b{font-family:"Playfair Display";font-size:30px}.hero-stamp span{font-size:8px;letter-spacing:1px;text-align:center;font-weight:800}.search-panel{margin:-1px auto 0;background:#fff;box-shadow:0 12px 40px #28103913;padding:25px 7%;display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:15px;align-items:end;position:relative}.search-panel label,.car-form label,.form-stack label{display:block;font-size:11px;font-weight:800;color:#574c60}.search-panel input,.search-panel select,.car-form input,.car-form select,.car-form textarea,.form-stack input{width:100%;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);outline-color:var(--purple3)}.section-wrap{padding:80px 7%}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-heading h2,.about h2,.contact h2{font-size:47px;color:var(--purple2);margin:0}.section-heading .eyebrow,.about .eyebrow,.contact .eyebrow{margin-bottom:12px}.muted{color:var(--muted);font-size:12px}.car-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}.car-card{background:#fff;border:1px solid var(--line);box-shadow:0 8px 28px #2810390b;min-width:0}.car-photo{height:245px;background:#eee;position:relative;overflow:hidden}.car-photo img{width:100%;height:100%;object-fit:contain;object-position: center; background: #f2f2f2;
}


.car-info h3 {
    margin-left: 10px;
}.car-card:hover .car-photo img{transform:scale(1.04)}.photo-count{position:absolute;right:12px;bottom:12px;background:#21083fcc;color:#fff;padding:6px 9px;font-size:10px}.car-content{padding:20px}.car-content h3{font-size:19px;margin:0 0 12px;color:var(--purple2)}.car-meta{display:flex;gap:8px;flex-wrap:wrap;color:#766c7b;font-size:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}.car-meta span{background:#f5f1f7;padding:6px 8px}.car-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:16px;gap:10px}.car-price{font-size:21px;font-weight:800;color:var(--purple3)}.car-price small{display:block;font-size:9px;color:#928899;font-weight:500}.car-bottom .button{padding:10px 12px;font-size:10px}.empty-state{grid-column:1/-1;padding:50px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line)}.about{background:#f0eaf4;display:grid;grid-template-columns:180px 1fr;gap:45px;align-items:center}.about-badge{width:150px;height:150px;border:1px solid var(--gold);outline:8px solid #d4af3722;display:grid;place-content:center;text-align:center;color:var(--purple);font-family:"Playfair Display";font-size:32px;line-height:1.1}.about p:not(.eyebrow){max-width:600px;color:#6d6273;line-height:1.9;font-size:14px}.contact{text-align:center;background:var(--purple);color:#fff}.contact h2{color:#fff}.contact>p:not(.eyebrow){color:#d4c5df;margin:0 auto 25px;font-size:13px}footer{background:#16052c;color:#c9bbd4;padding:25px 7%;display:flex;justify-content:space-between;align-items:center;font-size:10px}.footer-brand{transform:scale(.8);transform-origin:left center}.modal-backdrop{display:none;position:fixed;inset:0;background:#16052cbb;z-index:10;padding:20px;overflow:auto;align-items:center;justify-content:center}.modal-backdrop.open{display:flex}.modal{width:min(100%,480px);background:#fff;padding:35px;position:relative;max-height:95vh;overflow:auto}.modal-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;cursor:pointer;color:var(--purple)}.modal h2{font-size:39px;color:var(--purple2)}.form-stack{display:grid;gap:17px;margin-top:24px}.form-message{font-size:12px;color:#a52a45;min-height:16px}.car-modal{width:min(100%,850px)}.car-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:25px}.car-form label{min-width:0}.car-form small{display:block;color:#887e8e;font-weight:400;line-height:1.5;margin-top:6px}.full-field{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px}.admin-shell{display:none;position:fixed;inset:0;z-index:8;background:#f7f4f8;overflow:auto}.admin-shell.open{display:block}.admin-topbar{background:var(--purple2);padding:15px 5%;display:flex;justify-content:space-between;align-items:center;gap:15px}.admin-topbar>div{display:flex;align-items:center;gap:12px}.admin-main{padding:45px 5%;max-width:1400px;margin:auto}.admin-main .section-heading h2{font-size:42px}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:25px}.stat-card{background:#fff;border:1px solid var(--line);padding:20px}.stat-card span{display:block;color:var(--muted);font-size:11px}.stat-card b{display:block;color:var(--purple);font-size:30px;margin-top:8px}.admin-table-wrap{overflow:auto;background:#fff;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;text-align:left;min-width:650px}th,td{padding:15px;border-bottom:1px solid var(--line);font-size:12px}th{color:#766c7b;background:#faf8fb;font-size:10px;text-transform:uppercase;letter-spacing:1px}td strong{color:var(--purple2)}.table-actions{display:flex;gap:7px}.small-action{border:1px solid var(--line);background:#fff;padding:7px 9px;border-radius:3px;cursor:pointer;font-size:10px}.small-action.danger{color:#a52a45}.status-pill{padding:5px 8px;border-radius:20px;font-size:10px;background:#e8f5ed;color:#217744}.status-pill.sold{background:#f8e9e9;color:#a52a45}.admin-note{font-size:11px;color:var(--muted);margin-top:15px}.toast{position:fixed;bottom:20px;right:20px;background:var(--purple2);color:#fff;padding:13px 18px;font-size:12px;z-index:20;display:none;box-shadow:0 8px 30px #0003}.toast.show{display:block}@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:65px}.hero-art{margin-top:25px}.hero-art img{height:280px}.search-panel{grid-template-columns:1fr 1fr}.car-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-header{padding:0 4%}.section-wrap{padding:60px 5%}}@media(max-width:600px){.site-header{height:auto;min-height:78px;flex-wrap:wrap;padding:14px 5%;gap:12px}.site-header nav{order:3;width:100%;justify-content:space-between;gap:10px}.site-header nav a{font-size:11px}.site-header>.button{padding:9px 11px;font-size:10px}.hero{padding:55px 6%}.hero-art{padding:8px}.hero-art img{height:210px}.hero-stamp{width:78px;height:78px}.hero-stamp b{font-size:23px}.search-panel{grid-template-columns:1fr;padding:22px 6%}.section-wrap{padding:55px 6%}.section-heading{align-items:start;gap:10px;flex-direction:column}.section-heading h2,.about h2,.contact h2{font-size:39px}.car-grid{grid-template-columns:1fr}.about{grid-template-columns:1fr;gap:25px}.about-badge{width:105px;height:105px;font-size:25px}.contact{padding:55px 7%}footer{gap:10px;flex-direction:column;align-items:flex-start}.car-form{grid-template-columns:1fr}.full-field{grid-column:auto}.modal{padding:28px 20px}.stats-row{gap:7px}.stat-card{padding:12px}.stat-card b{font-size:23px}.admin-main .section-heading{flex-direction:column;align-items:stretch}.admin-topbar{flex-wrap:wrap}.admin-topbar>div{flex-wrap:wrap}.admin-topbar .muted{display:none}}
 .car-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit:  contain !important;;
}
/* IF MOTORS - Vehicle Details Gallery */

.car-details-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 5, 28, 0.92);
  padding: 25px;
  overflow-y: auto;
}

.car-details-modal.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.car-details-content {
  position: relative;
  width: 100%;
  max-width: 1150px;
  margin: 25px auto;
  padding: 28px;
  border-radius: 18px;
  background: #32105C;
  color: white;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
}

.close-details {
  position: absolute;
  top: 12px;
  right: 15px;
  background: #D4AF37;
  color: #21083F;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 26px;
  cursor: pointer;
  z-index: 2;
}

.details-gallery {
  min-width: 0;
}

#detailsMainPhoto {
  width: 100%;
  height: 420px;
  object-fit: contain;
  background: #21083F;
  border-radius: 12px;
}

.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin: 15px 0;
}

.gallery-controls button {
  background: #D4AF37;
  color: #21083F;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
}

.details-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.details-thumbnails img {
  width: 85px;
  height: 65px;
  object-fit:  contain !important;;
  border-radius: 7px;
  cursor: pointer;
  border: 2px solid transparent;
}

.details-thumbnails img.active {
  border-color: #D4AF37;
}

.details-information {
  padding: 20px 5px;
}

.details-information h2 {
  color: #D4AF37;
  margin: 12px 0;
}

.details-information h3 {
  margin-top: 25px;
}

.details-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}

.details-specs div {
  padding: 13px;
  background: #21083F;
  border-radius: 8px;
}

.details-specs strong {
  display: block;
  color: #D4AF37;
  margin-bottom: 5px;
}

#detailsWhatsApp {
  display: inline-block;
  margin-top: 25px;
  text-decoration: none;
}

@media (max-width: 750px) {
  .car-details-content {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  #detailsMainPhoto {
    height: 260px;
  }

  .car-details-modal {
    padding: 8px;
  }
 
@media (max-width: 750px) {
  /* existing mobile styles */
}

#adminOpen {
  display: none !important;
}
.car-photo {
    width: 100%;
    height: 310px;
    overflow: hidden;
    background: #f4f4f4;
}

.car-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.car-info p {
    margin-left: 12px;
}
.car-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.car-info h3,
.car-info p {
    margin: 0;
}
.hero h1 {
    color: #FFFFFF;
}

.hero h1 span {
    color: #D9A7FF;
}


/* IF MOTORS - Lavender Theme */

.hero h1 span,
.hero h1 em,
.hero h1 strong {
    color: #D9A7FF !important;
}

.hero .eyebrow,
.hero .kicker {
    color: #D9A7FF !important;
}

.hero .button,
.hero .btn,
.hero a.button {
    background: #8739C6 !important;
    color: #FFFFFF !important;
    border-color: #8739C6 !important;
}
.hero h1 em {
    color: #D9A7FF !important;
    font-style: italic;
}
.hero .button-gold {
    background: #8739C6 !important;
    color: #FFFFFF !important;
    border-color: #8739C6 !important;
}
.about-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.about-logo img {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  background: transparent;
}
.about-logo {
    width: 100%;
    max-width: 460px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        ellipse,
        #32105c 0%,
        #21083f 55%,
        transparent 75%
    );
    border-radius: 12px;
    overflow: hidden;
}

.about-logo img {
    width: 100%;
    max-width: 440px;
    height: auto;
    object-fit: contain;
    opacity: 1;
    filter: none;
    display: block;
}
}
