/* Thmanyah Serif: text face for comfortable reading and display face for headings. */
@font-face{font-family:'Thmanyah Serif Text';src:url('../assets/fonts/thmanyahseriftext-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Text';src:url('../assets/fonts/thmanyahseriftext-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Text';src:url('../assets/fonts/thmanyahseriftext-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Text';src:url('../assets/fonts/thmanyahseriftext-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Text';src:url('../assets/fonts/thmanyahseriftext-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('../assets/fonts/thmanyahserifdisplay-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('../assets/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('../assets/fonts/thmanyahserifdisplay-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('../assets/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('../assets/fonts/thmanyahserifdisplay-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}



  :root{
    /* هوية بصرية مطابقة لألوان الشعار الحقيقي (مأخوذة من لافتة المحل الفعلية):
       خلفية بيضاء + أحمر أساسي + كحلي غامق، بنفس روح اللافتة الحقيقية */
    --sand-50:#FFFFFF;
    --sand-100:#FFFFFF;
    --teal-900:#1E3A8A;
    --teal-800:#1D4ED8;
    --teal-700:#2563EB;
    --gold-600:#C21D30;
    --gold-700:#9E1626;
    --gold-100:#FBE4E7;
    --ink:#2B2D2F;
    --steel-500:#6B7178;
    --steel-200:#DEE3E8;
    --white:#FFFFFF;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
.about-section,.section{scroll-margin-top:90px;}
  body{
    font-family:'Thmanyah Serif Text','Segoe UI',Tahoma,serif;
    color:var(--ink);
    background:var(--sand-50);
    line-height:1.7;
  }
  img{max-width:100%; display:block;}
  a,a:link,a:visited,a:hover,a:focus,a:active{text-decoration:none!important;color:inherit;}
  h1,h2,h3,.brand-name .main{font-family:'Thmanyah Serif Display','Thmanyah Serif Text',serif;font-synthesis:none;font-weight:700;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

  /* شريط زخرفي هندسي مستلهم من الفن الإسلامي */
  .motif-strip{
    height:44px; display:block; line-height:0; background:var(--white);
  }
  .motif-strip svg{ display:block; width:100%; height:100%; }
  .motif-strip.reverse{
    background-image:repeating-linear-gradient(45deg, var(--gold-600) 0 6px, transparent 6px 12px);
  }

  /* header */
  header{
    background:var(--white);
    border-bottom:3px solid var(--gold-600);
    position:sticky; top:0; z-index:40;
  }
  .headbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px; gap:20px;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand-mark{
    width:52px; height:52px; flex:none;
    display:flex; align-items:center; justify-content:center;
  }
  .brand-mark img{width:100%; height:100%; object-fit:contain; display:block;}
  .brand-mark-full{
    width:auto; height:68px;
  }
  .brand-name{color:var(--ink); line-height:1.3; display:flex; flex-direction:column;}
  .brand-name .main{font-weight:700; font-size:16px;}
  .brand-name .sub{font-size:11px; font-weight:400; color:var(--steel-500); margin-top:2px;}
  nav{display:flex; gap:28px;}
  nav a{color:var(--ink); font-size:14.5px; font-weight:500; transition:color .15s;}
  nav a:hover{color:var(--gold-600);}
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:11px 22px; border-radius:8px; font-weight:700; font-size:14.5px;
    white-space:nowrap;
  }
  .btn-gold{background:var(--gold-600); color:var(--white);}
  .btn-gold:hover{background:var(--gold-700);}
  .btn-outline{border:1.5px solid var(--steel-500); color:var(--ink);}
  .btn-outline-light{border:1.5px solid #3D5A78; color:var(--white);}
  /* utility top bar (contact strip) */
  .util-bar{
    background:#12233A; color:#A9C2D6; font-size:12.5px;
  }
  .util-bar .wrap{
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 24px; gap:16px; flex-wrap:wrap;
  }
  .util-bar a{color:#C9D6E3;}
  .util-left{display:flex; gap:18px; flex-wrap:wrap;}
  .util-item{display:flex; align-items:center; gap:6px;}

  /* header search */
  .search-box{
    display:flex; align-items:center; gap:8px;
    background:var(--sand-100); border:1px solid var(--steel-200);
    border-radius:8px; padding:6px 12px; flex:1; min-width:120px; max-width:320px;
  }
  .search-box input{
    background:none; border:0; outline:0; color:var(--ink);
    font-family:inherit; font-size:13.5px; width:100%;
  }
  .search-box input::placeholder{color:var(--steel-500);}
  .search-box svg{width:16px; height:16px; color:var(--steel-500); flex:none;}

  .brand-card.hidden-by-search{display:none;}
  .no-results{
    grid-column:1/-1; text-align:center; color:var(--steel-500);
    font-size:14px; padding:24px 0;
  }

  .header-cta{display:flex; align-items:center; gap:12px;}

  .header-contact-btn{
    width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex:none;
    color:#fff; text-decoration:none;
  }
  .header-contact-btn svg{width:18px; height:18px;}
  .header-contact-btn.call{background:var(--teal-900);}
  .header-contact-btn.call:hover{background:var(--teal-700);}
  .header-contact-btn.wa{background:#25D366;}
  .header-contact-btn.wa:hover{background:#1fb959;}
  .mobile-contact-row{display:flex; gap:10px; margin:14px 0;}
  .mobile-contact-row .header-contact-btn{
    width:auto; height:44px; border-radius:10px; flex:1; gap:8px; font-size:14px; font-weight:700;
  }
  .lang-btn{
    background:none; border:1.5px solid var(--steel-200); color:var(--ink);
    font-size:13px; font-weight:700; padding:7px 14px; border-radius:8px;
    cursor:pointer; font-family:inherit; white-space:nowrap;
  }
  .lang-btn:hover{border-color:var(--gold-600); color:var(--gold-600);}
  .lang-btn-mobile{margin-top:10px; align-self:flex-start;}

  .menu-btn{
    display:flex; flex-direction:column; gap:5px; background:none; border:0;
    cursor:pointer; padding:6px;
  }
  .menu-btn span{width:24px; height:2.5px; background:var(--ink); border-radius:2px;}
  @media(min-width:860px){ .menu-btn{display:none;} }
  .mobile-nav{
    display:none; flex-direction:column; background:var(--white);
    padding:8px 24px 18px; border-top:1px solid var(--steel-200);
  }
  .mobile-nav.open{display:flex;}
  .mobile-nav a{
    color:var(--ink); font-size:15px; font-weight:500; padding:12px 0;
    border-bottom:1px solid var(--steel-200);
  }
  .mobile-nav a:last-of-type{border-bottom:0;}
  @media(min-width:860px){ .mobile-nav{display:none !important;} }

  /* hero */
  .hero{
    position:relative;
    background:var(--white);
    overflow:hidden;
    padding:64px 0 56px;
  }
  .hero-pattern{
    position:absolute; inset-inline-end:-60px; top:-60px;
    width:460px; height:460px; opacity:.07; pointer-events:none;
    object-fit:contain;
  }
  .hero-inner{position:relative; display:grid; gap:18px; max-width:640px;}
  .hero-logo{ height:72px; width:auto; margin-bottom:22px; display:block; }
  .eyebrow{
    color:var(--gold-700); font-weight:700; font-size:14.5px; margin-bottom:6px;
    display:flex; align-items:center; gap:8px;
  }
  .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--gold-600); display:inline-block;}
  h1{
    font-size:clamp(30px,4.4vw,46px);
    font-weight:800; color:var(--teal-900); line-height:1.32;
  }
  .hero p.lead{
    font-size:17px; color:#4A463F; max-width:560px;
  }
  .hero-meta{
    display:flex; gap:26px; margin-top:28px; flex-wrap:wrap;
  }
  .hero-meta div{font-size:13.5px; color:var(--steel-500);}
  .hero-meta strong{display:block; font-size:20px; color:var(--teal-900); font-weight:800;}

  /* section heading */
  .section{padding:64px 0;}
  .section-head{max-width:600px; margin-bottom:34px;}
  .section-head .kicker{
    display:flex; align-items:center; gap:8px; color:var(--gold-700);
    font-size:13px; font-weight:700; margin-bottom:8px;
  }
  .section-head .kicker svg{width:16px; height:16px;}
  .section-head h2{font-size:clamp(22px,3vw,30px); font-weight:800; color:var(--teal-900);}
  .section-head p{color:var(--steel-500); font-size:15px; margin-top:8px;}

  /* Car brands: clean auto-parts storefront grid inspired by template 194923 */
  .brand-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    align-items:start;
  }
  .brand-card{
    border:1px solid #DDE4E8;
    border-radius:6px;
    background:var(--white);
    overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,.05);
    transition:box-shadow .18s, transform .18s, border-color .18s;
  }
  .brand-card:hover{box-shadow:0 10px 24px rgba(30,58,138,.12);transform:translateY(-2px);border-color:var(--gold-600);}
  .brand-card.open{border-color:var(--gold-600);}
  .brand-toggle{
    width:100%; background:var(--white); border:0; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:9px;
    padding:20px 14px 16px; font-family:inherit;
  }
  .brand-logo{
    width:100%; height:78px; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid #EEF2F4; padding:8px;
  }
  .brand-logo.has-img{background:#fff;}
  .brand-logo img{width:auto;max-width:92%;height:auto;max-height:62px;object-fit:contain;display:block;}
  .brand-toggle span.name{font-size:15px;font-weight:800;color:#171717;}
  .brand-toggle .chev{width:15px;height:15px;margin-top:0;color:#6E7A80;transition:transform .2s;}
  .brand-card.open .brand-toggle .chev{transform:rotate(180deg);color:#C21D30;}
  .model-panel{max-height:0;overflow:hidden;transition:max-height .28s ease;background:#F4F7F8;border-top:1px solid #DDE4E8;}
  .brand-card.open .model-panel{max-height:600px;overflow-y:auto;}
  .model-list{list-style:none;padding:10px;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  .model-list li{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12.5px;color:#263238;font-weight:600;background:var(--white);border:1px solid #E0E7EA;border-radius:3px;padding:8px 9px;line-height:1.45;}
  .parts-label{padding:10px 12px 2px;color:#C21D30;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;}
  .brand-card .part-arrow{color:#C21D30;font-weight:800;line-height:1;}
  @media(max-width:980px){.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(max-width:560px){.brand-grid{grid-template-columns:1fr;}.model-list{grid-template-columns:1fr 1fr;}}


  /* vehicle identification panel */
  .vehicle-panel{display:none;margin-top:24px;border:1px solid #DDE4E8;border-radius:12px;background:var(--white);box-shadow:0 10px 28px rgba(0,0,0,.07);overflow:hidden;scroll-margin-top:92px;}
  .vehicle-panel.visible{display:block;}
  .vehicle-panel-head{background:#F4F7F8;border-bottom:1px solid #DDE4E8;padding:18px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
  .vehicle-panel-head h3{margin:2px 0 0;color:var(--teal-900);font-size:20px;font-weight:800;}
  .vehicle-panel-head p{margin:5px 0 0;color:var(--steel-500);font-size:13px;max-width:680px;}
  .vehicle-kicker{color:var(--gold-700);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
  .selected-vehicle{display:flex;align-items:center;justify-content:center;min-width:170px;padding:10px 14px;border-radius:10px;background:var(--teal-900);color:#fff;font-weight:800;font-size:13px;line-height:1.35;text-align:center;}
  .vin-guide{display:none;grid-template-columns:minmax(250px,.8fr) minmax(450px,1.4fr);gap:22px;padding:20px;background:linear-gradient(180deg,#fff 0%,#F5F6F8 100%);border-bottom:1px solid #DEE3E8;}
  .vin-guide.open{display:grid;}
  .vin-guide-copy{padding:4px 2px;}
  .vin-guide-title{display:flex;align-items:center;gap:11px;margin-bottom:10px;}
  .vin-guide-title strong{display:block;color:var(--teal-900);font-size:17px;font-weight:800;}
  .vin-guide-title span:not(.vin-guide-icon){display:block;color:var(--steel-500);font-size:12px;margin-top:2px;}
  .vin-guide-icon{width:42px;height:42px;border-radius:10px;background:var(--gold-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;box-shadow:0 4px 10px rgba(194,29,48,.2);}
  .vin-guide-copy p{color:#4b4a46;font-size:13px;line-height:1.8;margin:0 0 12px;}
  .vin-guide-art{min-height:300px;border-radius:12px;overflow:hidden;border:1px solid #DEE3E8;background:#F5F6F8;}
  .vin-guide-art svg{width:100%;height:auto;display:block;}
  .vin-reg-help{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #DEE3E8;background:#fff;border-radius:8px;padding:10px 12px;cursor:pointer;font-family:inherit;color:var(--teal-900);font-weight:800;font-size:12.5px;text-align:start;}
  .vin-reg-help:hover{border-color:var(--gold-600);}
  .vin-reg-help-panel{margin-top:8px;border-inline-start:3px solid var(--gold-600);padding:8px 12px;background:#fffaf0;border-radius:6px;}
  .vin-reg-help-panel p{margin:0;color:#5b554b;font-size:12px;line-height:1.75;}
  .vehicle-form{padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .vehicle-field{display:flex;flex-direction:column;gap:6px;}
  .vehicle-field.full{grid-column:1/-1;}
  .vehicle-field label{font-size:12.5px;font-weight:800;color:#263238;}
  .field-caption{font-size:12px;color:var(--steel-500);font-weight:700;}
  .vehicle-context-value{border:1px solid #D8E0E4;border-radius:7px;padding:11px 12px;background:#F7F9FA;color:var(--teal-900);font-weight:800;}
  .required-mark{color:#b43b2f;font-weight:900;}
  .optional-mark{font-size:10.5px;color:var(--steel-500);font-weight:600;margin-inline-start:4px;}
  .vehicle-field input,.vehicle-field select,.vehicle-field textarea{width:100%;border:1px solid #D8E0E4;border-radius:7px;padding:11px 12px;background:#fff;color:#171717;font-family:inherit;font-size:13.5px;outline:none;}
  .vehicle-field textarea{min-height:96px;max-height:240px;line-height:1.65;overflow-y:auto;resize:none;white-space:pre-wrap;overflow-wrap:anywhere;}
  .vin-hint-link{
    display:inline-flex; align-items:center; gap:5px; margin-top:2px;
    background:none; border:0; cursor:pointer; padding:0;
    color:var(--gold-700); font-family:inherit; font-size:12px; font-weight:800;
    text-decoration:none;
  }
  .vin-hint-link:hover{color:var(--gold-600);}
  .vin-hint-link svg{width:13px;height:13px;flex:none;}
  .vehicle-field input:focus,.vehicle-field select:focus,.vehicle-field textarea:focus{border-color:#C21D30;box-shadow:0 0 0 3px rgba(194,29,48,.1);}
  .vehicle-field input:invalid:not(:placeholder-shown),.vehicle-field select:invalid{border-color:#c75a4f;}
  .field-help{font-size:11.5px;line-height:1.6;color:var(--steel-500);}
  .vehicle-validation{margin:0 18px 16px;padding:10px 12px;border-radius:7px;background:#fff2f0;border:1px solid #f0c5bf;color:#8f2d24;font-size:12.5px;font-weight:700;}
  /* Neutral guidance tone by default — this note shows before the visitor has done
     anything wrong, so it must not read as a warning/error (that's #vehicleValidation's job). */
  .selection-note{display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border-radius:6px;background:#EEF3FB;color:#2D3B55;font-size:12px;font-weight:800;}
  .vehicle-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 18px 18px;}
  @media(max-width:940px){.vin-guide{grid-template-columns:1fr;}.vin-guide-art{order:-1;}}
  @media(max-width:860px){.vehicle-panel-head{flex-direction:column;}.selected-vehicle{width:100%;}.vehicle-form{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.vehicle-form{grid-template-columns:1fr;}.vehicle-field.full{grid-column:auto;}.vehicle-actions{flex-direction:column;align-items:stretch;}.vehicle-actions .btn{width:100%;}.vin-guide{padding:14px;}.vin-guide-art{min-height:0;}.vehicle-panel-head{padding:16px;}}

  /* about us */
  .why{background:var(--teal-900); color:var(--white);}
  .why .section-head h2{color:var(--white);}
  .why .section-head p{color:#A9C2D6;}
  .why .kicker{color:var(--gold-100);}
  .why-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px;
  }
  .why-item{border-inline-start:3px solid var(--gold-600); padding-inline-start:18px;}
  .why-item h3{font-size:17px; font-weight:700; margin-bottom:8px;}
  .why-item p{font-size:14px; color:#A9C2D6;}

  /* location */
  .location{background:var(--sand-100);}
  .loc-grid{display:grid; grid-template-columns:1fr; gap:28px;}
  @media(min-width:860px){ .loc-grid{grid-template-columns:1fr 1fr; align-items:stretch;} }
  .loc-card{
    background:var(--white); border:1px solid var(--steel-200); border-radius:12px;
    padding:28px; display:flex; flex-direction:column; gap:16px; justify-content:center;
  }
  .loc-row{display:flex; gap:12px; align-items:flex-start;}
  .loc-row div strong{display:block; font-size:15px; font-weight:700; margin-bottom:2px; color:var(--teal-900);}
  .loc-row div span{font-size:14px; color:var(--steel-500);}
  .loc-hours{display:block; margin-top:4px;}
  .map-frame{
    border:1px solid var(--steel-200); border-radius:12px; overflow:hidden; min-height:280px;
    position:relative; display:block; cursor:pointer;
  }
  .map-frame iframe{width:100%; height:100%; min-height:280px; border:0; display:block; pointer-events:none;}
  .map-overlay{
    position:absolute; inset:0; background:rgba(30,58,138,0); transition:background .15s;
  }
  .map-frame:hover .map-overlay{background:rgba(30,58,138,.06);}
  .map-frame::after{
    content:'فتح في خرائط قوقل';
    position:absolute; bottom:12px; inset-inline-end:12px;
    background:var(--gold-600); color:#fff; font-size:12.5px; font-weight:700;
    padding:7px 14px; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.2);
  }
  html[dir="ltr"] .map-frame::after{ content:'Open in Google Maps'; }

  /* footer */
  footer{background:var(--teal-900); color:#A9C2D6; padding:44px 0 26px;}
  .foot-top{
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px;
    padding-bottom:28px; border-bottom:1px solid #26504E;
  }
  .foot-brand{display:flex; align-items:center; gap:10px;}
  .foot-brand span{color:var(--white); font-weight:700; font-size:15px;}
  .foot-cta{display:flex; gap:12px; flex-wrap:wrap;}
  .foot-why{padding:28px 0; border-bottom:1px solid #26504E;}
  .foot-why h2{color:var(--white); font-size:20px; font-weight:800; margin-bottom:20px;}
  .foot-why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px;}
  .foot-why-item{border-inline-start:2px solid var(--gold-600); padding-inline-start:14px;}
  .foot-why-item h3{color:var(--white); font-size:15px; font-weight:700; margin-bottom:5px;}
  .foot-why-item p{color:#A9C2D6; font-size:13.5px; line-height:1.6;}
  .foot-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    padding-top:20px; font-size:12.5px; color:#6FA09B;
  }

  @media(max-width:859px){
    nav{display:none;}
  }

  /* contact modal (whatsapp part-request form) */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,20,20,.55);
    z-index:60; align-items:center; justify-content:center; padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal-box{
    background:var(--white); border-radius:14px; max-width:420px; width:100%;
    padding:26px; max-height:90vh; overflow-y:auto;
  }
  .modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
  .modal-head h3{font-size:18px; font-weight:800; color:var(--teal-900);}
  .modal-close{
    background:none; border:0; cursor:pointer; color:var(--steel-500);
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  }
  .modal-close svg{width:20px; height:20px;}
  .modal-sub{font-size:13.5px; color:var(--steel-500); margin-bottom:18px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px;}
  .field select, .field input, .field textarea{
    width:100%; border:1px solid var(--steel-200); border-radius:8px;
    padding:10px 12px; font-family:inherit; font-size:14px; color:var(--ink);
    background:var(--sand-50);
  }
  .field textarea{resize:vertical; min-height:70px;}
  .field select:focus, .field input:focus, .field textarea:focus{outline:2px solid var(--gold-600); outline-offset:1px;}
  .modal-submit{
    width:100%; margin-top:6px; background:#25D366; color:var(--white);
    border:0; border-radius:8px; padding:13px; font-family:inherit;
    font-size:15px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .modal-submit:hover{background:#1FB855;}
  .modal-submit svg{width:18px; height:18px;}


  /* ==========================================================
     2026 UI/UX refinement — keeps Emaar Al Maha white/red/blue identity
     ========================================================== */
  :root{
    --brand-blue:#1E3A8A;
    --brand-blue-2:#2563EB;
    --brand-red:#C21D30;
    --brand-red-dark:#9E1626;
    --brand-red-soft:#FFF1F3;
    --surface:#FFFFFF;
    --surface-alt:#F7F9FC;
    --text:#20252B;
    --muted:#667085;
    --line:#E4E9F0;
    --shadow-sm:0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(22,43,77,.07);
    --shadow-md:0 4px 10px rgba(16,24,40,.05), 0 18px 46px rgba(22,43,77,.13);
    --radius:16px;
    --ease-premium:cubic-bezier(.16,1,.3,1);
  }
  html{scroll-padding-top:96px;}
  body{background:var(--surface);color:var(--text);overflow-x:clip;}
  body.modal-open{overflow:hidden;}
  ::selection{background:rgba(194,29,48,.18);color:var(--text);}
  :focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:3px;border-radius:7px;}
  .skip-link{position:fixed;inset-inline-start:16px;top:-60px;z-index:9999;background:var(--brand-blue);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-weight:800;transition:top .2s;}
  .skip-link:focus{top:0;}

  header{border-bottom:1px solid var(--line);box-shadow:0 2px 16px rgba(22,43,77,.06);backdrop-filter:saturate(140%) blur(12px);background:rgba(255,255,255,.96);}
  .headbar{min-height:78px;padding-block:8px;}
  .brand-mark-full{height:60px;}
  nav{gap:8px;align-items:center;}
  nav a{padding:9px 12px;border-radius:9px;font-weight:700;transition:background .2s,color .2s;}
  nav a:hover{background:var(--brand-red-soft);color:var(--brand-red);}
  .search-box{max-width:350px;border-radius:12px;background:#fff;border-color:var(--line);padding:9px 13px;box-shadow:inset 0 0 0 1px rgba(30,58,138,.01);transition:border-color .2s,box-shadow .2s;}
  .search-box:focus-within{border-color:var(--brand-blue-2);box-shadow:0 0 0 4px rgba(37,99,235,.10);}
  .search-box input{font-size:14px;}
  .search-box svg{color:var(--brand-blue);}
  .header-contact-btn{border-radius:11px;transition:transform .2s,box-shadow .2s,background .2s;}
  .header-contact-btn:hover{transform:translateY(-1px);}
  .header-contact-btn.call{background:var(--brand-blue);box-shadow:0 6px 14px rgba(30,58,138,.18);}
  .header-contact-btn.call:hover{background:#173172;}
  .header-contact-btn.wa{background:#25D366;box-shadow:0 6px 14px rgba(37,211,102,.16);}
  .lang-btn{border-color:var(--brand-blue);color:var(--brand-blue);border-radius:10px;padding:8px 13px;}
  .lang-btn:hover{border-color:var(--brand-red);color:var(--brand-red);background:var(--brand-red-soft);}
  .mobile-nav{box-shadow:0 16px 24px rgba(22,43,77,.08);}
  .mobile-search{margin:10px 0 4px;max-width:none;width:100%;}

  .hero{padding:76px 0 70px;background:linear-gradient(135deg,#fff 0%,#fff 56%,#F5F8FF 100%);border-bottom:1px solid var(--line);}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:48px;}
  .hero-inner{position:relative;display:grid;gap:20px;}
  .hero h1{max-width:none;line-height:1.28;letter-spacing:-.02em;font-size:clamp(34px,4.6vw,56px);font-weight:800;color:#1D2733;}
  .hero .lead{max-width:560px;color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.9;}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;}
  .hero-actions .btn{min-height:48px;border-radius:12px;padding-inline:22px;gap:8px;}
  .hero-actions .btn-primary{background:var(--brand-red);color:#fff;box-shadow:0 10px 24px rgba(194,29,48,.20);}
  .hero-actions .btn-primary:hover{background:var(--brand-red-dark);transform:translateY(-1px);}
  .hero-actions .btn-secondary{border:1.5px solid var(--brand-blue);color:var(--brand-blue);background:#fff;}
  .hero-actions .btn-secondary:hover{background:#F5F8FF;}
  .hero-trust{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px;}
  .trust-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#475467;font-size:12.5px;font-weight:700;box-shadow:0 3px 12px rgba(22,43,77,.04);}
  .trust-chip::before{content:"✓";width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#EAF0FF;color:var(--brand-blue);font-size:11px;font-weight:900;}

  /* Hero visual: a small collage of real product photography instead of a
     generic decorative shape, grounding the hero in what the shop actually
     sells. */
  .hero-visual{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;}
  .hero-visual-glow{
    position:absolute;inset:6% 8%;z-index:0;border-radius:50%;
    background:radial-gradient(closest-side, rgba(30,58,138,.15), rgba(194,29,48,.08) 65%, transparent 76%);
  }
  .hero-photo{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md);overflow:hidden;}
  .hero-photo img{width:100%;height:100%;object-fit:contain;display:block;}
  .hero-photo-main{width:76%;aspect-ratio:1/1;padding:26px;transform:rotate(-3deg);margin-inline:auto;}
  .hero-photo-accent{position:absolute;z-index:2;width:42%;aspect-ratio:1/1;inset-inline-start:-4%;bottom:-4%;padding:16px;transform:rotate(6deg);}
  .hero-photo-accent2{position:absolute;z-index:2;width:36%;aspect-ratio:1/1;inset-inline-end:-2%;top:2%;padding:14px;transform:rotate(-7deg);}
  .hero-photo-accent3{position:absolute;z-index:2;width:32%;aspect-ratio:1/1;inset-inline-end:6%;bottom:-6%;padding:14px;transform:rotate(9deg);}

  @media(max-width:960px){
    .hero-grid{grid-template-columns:1fr;gap:40px;}
    .hero-visual{max-width:360px;margin-inline:auto;min-height:300px;}
  }
  @media(max-width:640px){
  .promo-slide--delivery-map .delivery-routes-map{max-width:260px;max-height:200px}

    .hero-visual{max-width:280px;min-height:240px;}
    .hero-photo-accent3{display:none;}
  }

  .section{padding:78px 0;content-visibility:auto;contain-intrinsic-size:1px 850px;}
  .section-head{max-width:720px;margin-bottom:30px;}
  .section-head h2{font-size:clamp(28px,4vw,42px);line-height:1.35;color:#1D2733;letter-spacing:-.015em;}
  .section-head p{color:var(--muted);font-size:15.5px;}
  .kicker{color:var(--brand-red);font-weight:800;letter-spacing:.01em;}
  .kicker svg{color:var(--brand-blue);}

  #products{background:linear-gradient(180deg,#F8FAFD 0%,#fff 100%);}
  .brand-grid{gap:16px;}
  .brand-card{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;}
  .brand-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(30,58,138,.22);}
  .brand-card.open{border-color:var(--brand-blue);box-shadow:0 12px 34px rgba(30,58,138,.12);}
  .brand-toggle{min-height:98px;padding:16px;}
  .brand-logo{width:66px;height:58px;border-radius:12px;background:#F9FAFB;padding:7px;border:1px solid #EEF1F5;}
  .brand-toggle .name{font-weight:850;font-size:16px;}
  .brand-card.open .chev{color:var(--brand-red);}
  .model-panel{background:#FBFCFE;border-top-color:var(--line);}
  .parts-label{color:var(--brand-blue);font-weight:850;}
  .model-list li{border-radius:9px;margin:3px 6px;padding:10px 12px;}
  .model-list li:hover,.model-list li:focus{background:#EDF3FF;color:var(--brand-blue);}
  .part-arrow{color:var(--brand-red);}
  .no-results{background:#fff;border:1px dashed #CCD5E1;border-radius:14px;padding:28px;}

  .vehicle-panel{margin-top:28px;border:1px solid rgba(30,58,138,.18);border-radius:18px;box-shadow:var(--shadow-md);overflow:hidden;background:#fff;}
  .vehicle-panel-head{background:linear-gradient(125deg,#F4F7FF,#fff);border-bottom:1px solid var(--line);padding:24px 26px;}
  .vehicle-kicker{color:var(--brand-red);font-weight:900;}
  .vehicle-panel-head h3{color:#1D2733;font-size:26px;}
  .selected-vehicle{background:var(--brand-blue);color:#fff;border:0;border-radius:999px;padding:8px 14px;font-weight:800;min-height:36px;}
  .vehicle-form{padding:25px 26px;gap:18px;}
  .vehicle-field label{font-weight:800;color:#344054;}
  .vehicle-field input,.vehicle-field select,.vehicle-field textarea{border:1px solid #D8E0EA;border-radius:11px;min-height:48px;background:#fff;font-family:inherit;transition:border-color .2s,box-shadow .2s;}
  .vehicle-field input:focus,.vehicle-field select:focus,.vehicle-field textarea:focus{border-color:var(--brand-blue-2);box-shadow:0 0 0 4px rgba(37,99,235,.09);outline:0;}
  .vehicle-context-field{background:#F5F8FF;border:1px solid #DFE7F5;border-radius:12px;padding:14px 16px;}
  .vehicle-context-value{color:var(--brand-blue);font-weight:900;}
  .field-help{color:var(--muted);}
  .vin-hint-link{color:var(--brand-blue);font-weight:800;}
  .vehicle-actions{border-top:1px solid var(--line);background:#FBFCFE;padding:18px 26px;}
  .vehicle-actions .btn{background:var(--brand-red);border-radius:11px;min-height:48px;padding-inline:24px;}
  .vehicle-actions .btn:hover{background:var(--brand-red-dark);}
  .vehicle-validation{margin:0 26px 4px;background:#FFF3F4;border:1px solid #F7CDD3;color:#9E1626;border-radius:10px;padding:11px 13px;font-weight:700;}
  .selection-note{color:var(--muted);font-weight:700;}
  .required-mark{color:var(--brand-red);}
  .vin-guide{background:#F8FAFD;border-block:1px solid var(--line);padding:20px 26px;grid-template-columns:1fr;}
  .vin-guide-card{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
  .vin-location{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;}
  .vin-location strong{display:block;color:var(--brand-blue);margin-bottom:4px;}
  .vin-location span{color:var(--muted);font-size:12.5px;}

  .location{background:#fff;}
  .loc-grid{gap:22px;align-items:stretch;}
  .loc-card,.map-frame{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;}
  .loc-card{padding:24px;background:#fff;}
  .loc-row+ .loc-row{border-top:1px solid var(--line);padding-top:18px;margin-top:18px;}
  .loc-row strong{color:var(--brand-blue);}
  .loc-hours{color:var(--muted)!important;}
  .map-frame{min-height:290px;transition:transform .2s,box-shadow .2s;}
  .map-frame:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
  .map-overlay{box-shadow:inset 0 0 0 1px rgba(30,58,138,.08);}

  footer{background:#101D36!important;border-top:4px solid var(--brand-red);}
  footer a:hover{color:#fff;}
  .modal{border-radius:18px;box-shadow:0 22px 70px rgba(16,24,40,.28);}
  .modal-submit{background:var(--brand-red);}
  .modal-submit:hover{background:var(--brand-red-dark);}

  @media(max-width:1050px){
    .headbar{gap:12px}.search-box{max-width:260px}.brand-mark-full{height:54px}
  }
  @media(max-width:859px){
    .headbar{min-height:70px}.brand-mark-full{height:50px}.hero{padding:52px 0 46px}.hero-meta{max-width:none}.section{padding:60px 0}.vehicle-panel-head{align-items:flex-start;gap:14px}.selected-vehicle{align-self:flex-start}
  }
  @media(max-width:640px){
    .wrap{padding-inline:18px}.hero{padding-top:42px}.hero h1{font-size:32px}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%}.hero-trust{gap:7px}.trust-chip{font-size:11.5px}.hero-meta{grid-template-columns:1fr 1fr 1fr}.hero-meta>div{padding-inline:10px;text-align:center}.hero-meta>div:first-child{padding-inline-start:10px}.hero-meta strong{font-size:21px}.hero-meta span{font-size:10.5px}.section-head{margin-bottom:22px}.brand-grid{grid-template-columns:1fr 1fr;gap:10px}.brand-toggle{min-height:92px;padding:12px}.brand-logo{width:55px;height:49px}.brand-toggle .name{font-size:14px}.vehicle-panel{border-radius:14px}.vehicle-panel-head,.vehicle-form,.vehicle-actions{padding-inline:16px}.vin-guide{padding:16px}.vin-guide-card{grid-template-columns:1fr}.loc-grid{grid-template-columns:1fr}.map-frame{min-height:240px}
  }
  @media(max-width:390px){.brand-grid{grid-template-columns:1fr}.hero h1{font-size:31px}}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}.promo-slide,*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
  }


/* Contact Us dropdowns */
.contact-dropdown-wrap{position:relative;display:flex;align-items:center;gap:10px}
.contact-us-btn,.mobile-contact-toggle{
  border:0;background:var(--blue-700,#1E3A8A);color:#fff;border-radius:10px;
  min-height:42px;padding:9px 14px;font-family:inherit;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px
}
.contact-us-btn svg{width:16px;height:16px}
.contact-dropdown{
  position:absolute;top:calc(100% + 10px);inset-inline-end:46px;z-index:120;
  min-width:220px;background:#fff;border:1px solid #e3e7ef;border-radius:14px;
  box-shadow:0 16px 38px rgba(15,23,42,.16);padding:8px
}
.contact-choice,.mobile-contact-choice{
  width:100%;border:0;background:#fff;color:var(--ink);font-family:inherit;text-decoration:none!important;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:11px 12px;border-radius:9px;cursor:pointer;font-weight:700
}
.contact-choice:hover,.mobile-contact-choice:hover{background:#f5f7fb}
.contact-choice,.contact-choice:link,.contact-choice:visited,.contact-choice:hover,.contact-choice:focus,.contact-choice:active,.mobile-contact-choice,.mobile-contact-choice:link,.mobile-contact-choice:visited,.mobile-contact-choice:hover,.mobile-contact-choice:focus,.mobile-contact-choice:active{ text-decoration:none!important; }
.contact-choice span,.mobile-contact-choice span{ text-decoration:none!important; }
.contact-choice.call span:first-child,.mobile-contact-choice:first-child span:first-child{color:#1E3A8A}
.contact-choice.wa span:first-child,.mobile-contact-choice:last-child span:first-child{color:#25D366}
.mobile-contact-wrap{margin:14px 0}
.mobile-contact-toggle{width:100%}
.mobile-contact-menu{margin-top:8px;border:1px solid var(--steel-200);border-radius:12px;padding:6px;background:#fff}
[hidden]{display:none!important}
.vehicle-field input[readonly]{background:#f6f8fc;color:#1E3A8A;font-weight:800}


/* 2026-09-24 refinements */
.hero-pattern{display:none!important}

/* Clean, flat white canvas: the tiled fixed-background photo read as noisy at
   small sizes and re-painted on every scroll on mobile, so section surfaces
   now carry their own subtle tints (see .hero / #products) instead. */
body{background:var(--surface)!important;}
header{background:rgba(255,255,255,.97)!important;backdrop-filter:blur(10px)}
footer{position:relative}

/* Contact menus: icon-first, no visible phone number */
.contact-choice,.mobile-contact-choice{
  justify-content:flex-start!important;
}
.contact-choice-icon{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.contact-choice-icon svg{width:17px;height:17px}
.contact-choice.call .contact-choice-icon,.mobile-contact-choice:first-child .contact-choice-icon{
  background:#EEF3FF;color:#1E3A8A
}
.contact-choice.wa .contact-choice-icon,.mobile-contact-choice:last-child .contact-choice-icon{
  background:#EAFBF0;color:#1FAE55
}

/* Main part request intentionally shows only three required inputs */
.vehicle-form > input[type="hidden"]{display:none!important}

/* One location card with the Google Maps preview at the corrected pin. */
.loc-grid-simple{display:block!important;max-width:980px!important}
.location-card-layout{
  display:flex;flex-direction:column;gap:0;overflow:hidden;padding:0;
}
.location-card-heading{padding:22px 24px 18px}
.location-card-heading strong{display:block;color:#1E3A8A;font-size:1.12rem;font-weight:800}
.location-address{padding:0 24px 18px;margin:0;color:var(--muted);font-style:normal;line-height:1.7}
.location-map-preview{min-height:360px;border:0;border-radius:0;cursor:pointer}
.location-map-preview iframe{
  display:block;width:100%;height:380px;min-height:360px;border:0;background:#F4F7FC;
  pointer-events:none;
}
.location-map-preview::after{content:'فتح في خرائط Google'}
html[dir="ltr"] .location-map-preview::after{content:'Open in Google Maps'}
@media(max-width:859px){
  .location-map-preview,.location-map-preview iframe{min-height:300px;height:320px}
}

/* Footer contact actions and payment badges share one icon-row layout so both blocks line up. */
.foot-contact-panel,.foot-payments{padding:22px 0 26px;border-bottom:1px solid rgba(255,255,255,.18)}
.foot-contact-panel h3,.foot-payments h3{margin:0 0 14px;color:#fff;font-size:17px;font-weight:800}
.foot-contact-actions,.foot-payments-badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

.foot-contact-action{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:0;
  color:#fff;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,filter .15s ease
}
.foot-contact-action:hover{transform:translateY(-2px);filter:brightness(1.08)}
.foot-contact-action,.foot-contact-action:link,.foot-contact-action:visited,.foot-contact-action:hover,.foot-contact-action:focus,.foot-contact-action:active{text-decoration:none!important}
.foot-contact-action:focus-visible{outline:3px solid #F7C6CB;outline-offset:3px}
.foot-contact-action svg{width:20px;height:20px;flex:none}
.foot-contact-action.call{background:#1E3A8A;border-color:#4965A5}
.foot-contact-action.wa{background:#168C45;border-color:#39B96C}

/* Tabby/Tamara ship as self-contained brand badges (their own colored pill baked
   into the image); mada ships as a bare transparent mark. Giving every logo the
   same white rounded chip double-boxed the first two (a colored pill inside a
   white pill). Only the bare mark gets a chip now — all three still align on one
   shared height so the row reads as a single, consistent payment strip. */
.payment-badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px;
}
.payment-badge img{display:block; height:34px; width:auto; max-width:92px; object-fit:contain; border-radius:8px;}
.payment-badge--mark{
  padding:5px 10px;
  border-radius:8px; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.payment-badge--mark img{height:24px;}



/* Direct car-brand selection */
.brand-toggle{width:100%;justify-content:center;gap:12px;cursor:pointer}
.brand-card.open .brand-toggle{background:#F5F8FF}
.brand-toggle .name{flex:0 0 auto}

/* Delivery highlight: a soft, continuous glow that breathes between brand
   blue and red, instead of a hard strobe cut — same intent (keep this chip
   noticeably alive), refined so it reads as premium rather than a warning light. */
.delivery-chip{
  color:#fff;
  background:#1E3A8A;
  border-color:#60A5FA;
  box-shadow:0 0 6px rgba(59,130,246,.65),0 0 16px rgba(59,130,246,.45),inset 0 0 5px rgba(191,219,254,.3);
  text-shadow:0 0 6px rgba(59,130,246,.55);
  animation:delivery-location-neon 3.4s ease-in-out infinite;
}
.delivery-chip::before{
  background:#60A5FA;
  color:#fff;
  box-shadow:0 0 6px rgba(96,165,250,.75);
  animation:delivery-icon-neon 3.4s ease-in-out infinite;
}
@keyframes delivery-location-neon{
  0%,100%{
    background:#1E3A8A;border-color:#60A5FA;
    box-shadow:0 0 6px rgba(59,130,246,.65),0 0 16px rgba(59,130,246,.45),inset 0 0 5px rgba(191,219,254,.3);
    text-shadow:0 0 6px rgba(59,130,246,.55);
  }
  /* Bridge through a near-white tone (not a direct navy<->red blend) so the
     crossfade never passes through a muddy purple/magenta mid-frame. */
  25%,75%{
    background:#E7EEFC;border-color:#fff;
    box-shadow:0 0 6px rgba(255,255,255,.6),0 0 16px rgba(255,255,255,.35),inset 0 0 5px rgba(255,255,255,.4);
    text-shadow:none;
  }
  50%{
    background:#C1121F;border-color:#FF6978;
    box-shadow:0 0 6px rgba(255,52,72,.65),0 0 16px rgba(255,52,72,.45),inset 0 0 5px rgba(255,205,210,.25);
    text-shadow:0 0 6px rgba(255,52,72,.55);
  }
}
@keyframes delivery-icon-neon{
  0%,100%{background:#60A5FA;box-shadow:0 0 6px rgba(96,165,250,.75);}
  25%,75%{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.7);}
  50%{background:#FF6978;box-shadow:0 0 6px rgba(255,52,72,.75);}
}
/* This chip was explicitly requested to stay animated, so keep it moving under reduced-motion settings — just slower and always smooth, never a hard cut. */
@media(prefers-reduced-motion:reduce){
  .delivery-chip{animation:delivery-location-neon 4.5s ease-in-out infinite!important;}
  .delivery-chip::before{animation:delivery-icon-neon 4.5s ease-in-out infinite!important;}
}


/* Mobile header: keep the logo, search, contact, language, and menu in one fixed row. */
@media(max-width:640px){
  header{
    position:fixed;
    top:env(safe-area-inset-top,0px);
    inset-inline:0;
    width:100%;
    z-index:40;
  }
  body{padding-top:calc(56px + env(safe-area-inset-top,0px));}
  .headbar{
    display:grid;
    grid-template-columns:clamp(52px,17vw,64px) minmax(0,1fr) auto auto;
    align-items:center;
    column-gap:5px;
    padding:6px 8px;
    min-height:0;
  }
  .headbar>.brand{
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .headbar>.brand .brand-mark-full{
    width:100%;
    height:42px;
    max-width:none;
    flex:none;
  }
  .headbar>.brand .brand-mark-full img{
    width:100%;
    max-width:100%;
    height:100%;
    max-height:100%;
    object-fit:contain;
  }
  .headbar>.search-box:not(.mobile-search){
    grid-column:2;
    grid-row:1;
    width:100%;
    min-width:0;
    max-width:none;
    margin:0;
    padding:5px 7px;
    gap:5px;
    box-sizing:border-box;
  }
  .headbar>.search-box:not(.mobile-search) input{
    min-width:0;
    font-size:12px;
  }
  .headbar>.search-box:not(.mobile-search) svg{width:14px;height:14px;}
  .headbar>.header-cta{
    display:flex;
    grid-column:3;
    grid-row:1;
    align-items:center;
    gap:3px;
    min-width:0;
  }
  .headbar>.header-cta .header-contact-btn{
    width:30px;
    height:30px;
    border-radius:50%;
  }
  .headbar>.header-cta .header-contact-btn svg{width:16px;height:16px;}
  .headbar>.header-cta .lang-btn{
    min-height:32px;
    padding:4px 6px;
    font-size:11px;
  }
  .headbar>.menu-btn{
    grid-column:4;
    grid-row:1;
    justify-self:end;
    margin-inline-start:0;
    padding:4px;
  }
  .headbar>.menu-btn span{width:20px;}
  .mobile-nav .mobile-search,
  .mobile-nav .mobile-contact-wrap,
  .mobile-nav .lang-btn-mobile{display:none!important;}
}

/* .header-cta now shows at every width below 860px, so the hamburger's
   duplicate search/contact/language controls are redundant there too. */
@media(max-width:859px){
  .mobile-nav .mobile-search,
  .mobile-nav .mobile-contact-wrap,
  .mobile-nav .lang-btn-mobile{display:none!important;}
}

/* FAQ accordion: each question gets a topic icon, the open item reads as active. */
.faq-list{display:flex; flex-direction:column; gap:10px; max-width:760px;}
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; box-shadow:var(--shadow-sm);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.faq-item[open]{
  border-color:rgba(194,29,48,.22);
  box-shadow:0 4px 10px rgba(16,24,40,.05), 0 14px 34px rgba(194,29,48,.10);
}
.faq-item summary{
  cursor:pointer; font-weight:700; font-size:15.5px; color:var(--ink);
  list-style:none; display:flex; align-items:center; gap:14px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-icon-wrap{
  flex:none; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-red-soft); color:var(--brand-red);
  transition:background .2s,color .2s;
}
.faq-icon{width:18px;height:18px;flex:none}
.faq-item[open] .faq-icon-wrap{background:var(--brand-red); color:#fff;}
.faq-q{flex:1; min-width:0;}
.faq-item summary::after{
  content:"+"; flex:none; font-size:20px; line-height:1; font-weight:400; color:var(--brand-blue);
  transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{
  margin-top:10px; margin-inline-start:50px; padding-inline-end:26px;
  color:var(--muted); font-size:14.5px; line-height:1.8;
}
@media(max-width:640px){
  .faq-icon-wrap{width:32px;height:32px;border-radius:9px}
  .faq-icon{width:16px;height:16px}
  .faq-item summary{gap:11px}
  .faq-item p{margin-inline-start:43px;padding-inline-end:4px}
}


/* Keep native controls in the page's Thmanyah typography. */
button,input,select,textarea{font-family:inherit}

/* Responsive request fields: keep every control inside its grid cell, and let
   the parts list grow as the customer adds entries. */
.vehicle-panel,.vehicle-panel *{box-sizing:border-box}
.vehicle-panel{width:100%;max-width:100%;min-width:0}
.vehicle-panel-head>div,.vehicle-form,.vehicle-field{min-width:0}
.vehicle-field input,.vehicle-field select,.vehicle-field textarea,
.vehicle-context-value,.selected-vehicle{width:100%;max-width:100%;min-width:0}
.vehicle-context-value,.selected-vehicle,.selection-note{overflow-wrap:anywhere;word-break:normal}
.vehicle-field textarea{text-align:start;}
.vehicle-field-help{color:var(--muted);font-size:12px;line-height:1.65;}
.vehicle-validation{max-width:100%;overflow-wrap:anywhere;}
@media(max-width:640px){
  .vehicle-panel-head{padding:18px 16px;gap:12px}
  .vehicle-panel-head>div{width:100%}
  .vehicle-panel-head h3{font-size:22px;line-height:1.35}
  .vehicle-form{grid-template-columns:minmax(0,1fr);padding:16px;gap:14px}
  .vehicle-field,.vehicle-field.full{grid-column:1;}
  .vehicle-field input,.vehicle-field select,.vehicle-field textarea{font-size:16px;}
  .vehicle-actions{padding:16px;align-items:stretch;}
  .vehicle-actions .btn,.selection-note{width:100%;max-width:100%;justify-content:center;text-align:center;}
}

/* Keep the WhatsApp request dialog and every field within the viewport on phones. */
.modal-box,.modal-box *{box-sizing:border-box;min-width:0}
.modal-box{width:min(100%,420px);max-width:420px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.modal-box .field{width:100%;min-width:0}
.modal-box .field input,.modal-box .field select,.modal-box .field textarea{display:block;width:100%;max-width:100%;min-width:0}
.modal-box .field textarea{min-height:96px;max-height:240px;line-height:1.65;overflow-y:auto;resize:none;white-space:pre-wrap;overflow-wrap:anywhere}
.modal-field-help{display:block;margin-top:6px;color:var(--steel-500);font-size:12px;line-height:1.65}

/* Proof marquee: an endless scrolling strip of real stock photos, placed right
   after the hero as quick visual proof of inventory before the promo carousel.
   Two identical halves of .marquee-track scroll together; looping back to 0%
   at -50% is seamless because the second half is a duplicate of the first. */
.proof-marquee{padding:34px 0 40px;background:var(--sand-50);overflow:hidden}
.proof-marquee .section-head{margin-bottom:20px}
.marquee-viewport{overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marqueeScroll 42s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{position:relative;flex:0 0 132px;aspect-ratio:1/1;border-radius:13px;overflow:hidden;box-shadow:0 10px 22px rgba(20,35,92,.14)}
.marquee-item img{width:100%;height:100%;object-fit:cover;display:block}
.marquee-item-tag{position:absolute;inset-inline:0;bottom:0;background:linear-gradient(0deg,rgba(8,13,32,.86) 0%,transparent 100%);color:#fff;font-size:11px;font-weight:700;line-height:1.3;padding:14px 9px 7px;direction:rtl;text-align:start}
html[dir="ltr"] .marquee-item-tag{direction:ltr}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.marquee-item{flex-basis:104px}.marquee-item-tag{font-size:10px;padding:12px 7px 6px}}

/* Showcase banner carousel: swipe/drag, snap, and keyboard-readable controls. */
.brand-showcase{overflow:hidden;background:linear-gradient(180deg,#F7F9FC 0%,#FFFFFF 100%)}
.promo-toolbar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin:-8px 0 16px}
.promo-control{min-height:42px;min-width:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--brand-blue);font:inherit;font-size:13px;font-weight:800;padding:8px 12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.promo-control:hover{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.promo-control:active{transform:scale(.96)}
.promo-control:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:2px}
.promo-control svg{width:19px;height:19px;flex:none}
.promo-position{min-width:46px;text-align:center;color:var(--muted);font-size:13px;font-weight:800;direction:ltr}
.promo-viewport{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 14px;scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior:contain;overflow-anchor:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:rgba(30,58,138,.35) transparent}

/* Promo cards: brand-color statements with a bespoke illustration each. */
.promo-slide{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:12px;position:relative;flex:0 0 min(430px,78vw);min-height:280px;
  padding:24px 26px 24px;overflow:hidden;
  border-radius:18px;color:#fff;box-shadow:0 14px 30px rgba(20,35,92,.16);
  transition:transform .25s var(--ease-premium),box-shadow .25s var(--ease-premium);
}
.promo-slide:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(20,35,92,.22)}
.promo-slide:focus-visible{outline:3px solid #fff;outline-offset:3px}
.promo-slide--navy{background:linear-gradient(150deg,var(--teal-900) 0%,#101B42 100%)}
.promo-slide--red{background:linear-gradient(150deg,var(--gold-600) 0%,var(--gold-700) 100%)}
/* A real photo of a genuine/original part stands in for the icon+blue-fill
   treatment here; a dark scrim keeps the white heading/body text readable
   over it regardless of how light the photo is. */
.promo-slide--photo{background-size:cover;background-position:center;}
.promo-slide--photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(0deg, rgba(8,13,32,.92) 0%, rgba(8,13,32,.55) 48%, rgba(8,13,32,.12) 100%);
}
.promo-slide--photo h3,.promo-slide--photo p{position:relative;z-index:1;}
.promo-art{width:92px;height:92px;flex:none}
.promo-slide--delivery-map{gap:9px}
.promo-slide--delivery-map .delivery-routes-map{display:block;width:100%;max-width:300px;height:auto;max-height:231px;object-fit:contain;flex:none;align-self:center;margin:0 auto -5px;overflow:visible}
.promo-slide--delivery-map .delivery-jeddah-label text{font-family:inherit}

.promo-slide h3{font-size:clamp(19px,2vw,23px);line-height:1.32;font-weight:800;color:#fff;max-width:26ch}
.promo-slide p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);max-width:32ch}
.promo-viewport::-webkit-scrollbar{height:7px}
.promo-viewport::-webkit-scrollbar-thumb{background:rgba(30,58,138,.35);border-radius:99px}
html[dir="rtl"] .promo-prev svg{transform:rotate(180deg)}
html[dir="ltr"] .promo-next svg{transform:rotate(180deg)}
.wa-form-validation,.wa-form-status{border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.65;margin-top:10px}
.wa-form-validation{color:#8f2d24;background:#fff2f0;border:1px solid #f0c5bf;font-weight:700}
.wa-form-status{color:var(--brand-blue);background:#eff5ff;border:1px solid #d9e6ff}
.wa-form-fallback,.vehicle-whatsapp-fallback{color:var(--brand-blue);font-weight:800;text-decoration:none;line-height:1.6}
.wa-form-fallback{display:inline-flex;margin-top:8px}
.vehicle-whatsapp-fallback{display:inline-flex;align-items:center}
.wa-form-validation[hidden],.wa-form-status[hidden],.wa-form-fallback[hidden],.vehicle-whatsapp-fallback[hidden]{display:none!important}
.modal-submit:disabled,#vehicleSearchBtn:disabled{opacity:.72;cursor:wait;transform:none;}
@media(max-width:640px){
  .modal-overlay{padding:12px}
  .modal-box{padding:18px;border-radius:14px}
  .modal-head h3{font-size:18px;line-height:1.35}
  .modal-sub{line-height:1.6}
  .modal-box .field input,.modal-box .field select,.modal-box .field textarea{font-size:16px}
  .modal-submit{min-height:48px}
  .promo-toolbar{justify-content:center;gap:7px;margin-top:0}
  .promo-slide{flex-basis:calc(100vw - 48px);border-radius:13px;min-height:250px}
  .promo-art{width:76px;height:76px}
  .promo-control{min-height:44px;min-width:44px}
  .vehicle-actions{flex-wrap:wrap}
  .vehicle-whatsapp-fallback{width:100%;text-align:center;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .promo-viewport{scroll-behavior:auto}
  .promo-slide{transition:none}
}


/* ==========================================================
   Interaction polish — a single consistent easing curve for every
   hover/lift, and a subtle reveal-on-scroll. White/blue/red and the
   logo are untouched; this only refines motion and depth.
   ========================================================== */
.brand-card,.map-frame,.header-contact-btn,.foot-contact-action,
.btn,.lang-btn,nav a,.faq-item{
  transition-timing-function:var(--ease-premium);
}
.btn{transition:transform .25s var(--ease-premium),box-shadow .25s var(--ease-premium),background .2s var(--ease-premium);}
.btn:active{transform:translateY(0) scale(.97);}
.hero-actions .btn-primary:active{transform:translateY(0) scale(.97);}

/* Hero CTA: small directional arrow that nudges on hover, mirrored per text direction. */
.btn-primary{display:inline-flex;align-items:center;gap:9px;}
.btn-arrow{width:17px;height:17px;flex:none;transition:transform .3s var(--ease-premium);}
html[dir="rtl"] .btn-arrow{transform:scaleX(-1);}
.btn-primary:hover .btn-arrow{transform:translateX(4px);}
html[dir="rtl"] .btn-primary:hover .btn-arrow{transform:scaleX(-1) translateX(-4px);}
@media(prefers-reduced-motion:reduce){
  .btn-primary:hover .btn-arrow{transform:none;}
  html[dir="rtl"] .btn-primary:hover .btn-arrow{transform:scaleX(-1);}
}

/* Reveal-on-scroll: progressively enhanced — only active once js.classList
   confirms the observer script ran, so content is always visible without JS. */
.js .section-head,.js .brand-card,.js .faq-item,.js .loc-card{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-premium),transform .6s var(--ease-premium);
}
.js .section-head.in-view,.js .brand-card.in-view,
.js .faq-item.in-view,.js .loc-card.in-view{
  opacity:1;transform:translateY(0);
}
@media(prefers-reduced-motion:reduce){
  .js .section-head,.js .brand-card,.js .faq-item,.js .loc-card{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}


/* Brand-showcase section frame: top accent bar reads as one deliberate stripe. */
.brand-showcase{
  position:relative;
  isolation:isolate;
  contain:layout paint;
  overflow:hidden;
  overflow-anchor:none;
}
.brand-showcase::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  z-index:0;
  height:6px;
  background:linear-gradient(90deg,var(--teal-900) 0 33.333%,#FFFFFF 33.333% 66.666%,var(--gold-600) 66.666% 100%);
  pointer-events:none;
}
.brand-showcase>.wrap{position:relative;z-index:1}


/* Request dialog fields fill their column; the parts list grows with its contents. */
#waForm{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;gap:0}
#waForm .field{width:100%;min-width:0;margin:0 0 14px}
#waForm .field label{max-width:100%;overflow-wrap:anywhere}
#waForm .field input:not([type="hidden"]),#waForm .field textarea{
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:48px;
  height:auto;
  padding:12px 14px;
  line-height:1.5;
}
#waForm .field textarea{
  min-height:96px;
  max-height:240px;
  max-height:min(240px,38vh);
  overflow-y:hidden;
  resize:none;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
@media(max-width:640px){
  .modal-box{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  #waForm .field input:not([type="hidden"]),#waForm .field textarea{font-size:16px}
}

/* Brand accents follow the colors in each automaker's logo. */
#products .brand-card[data-key="hyundai"]{--brand-tone:#002C5F;}
#products .brand-card[data-key="kia"]{--brand-tone:#111111;}
#products .brand-card[data-key="haval"]{--brand-tone:#555B61;}
#products .brand-card[data-key="geely"]{--brand-tone:#15509A;}
#products .brand-card[data-key="mg"]{--brand-tone:#C8102E;}
#products .brand-card[data-key="chery"]{--brand-tone:#D0272D;}
#products .brand-card[data-key="changan"]{--brand-tone:#00529B;}
#products .brand-card .brand-logo{background:#fff;border-color:#E7EBF0;}
#products .brand-card .brand-toggle .name{color:var(--brand-tone,#28323D);}
#products .brand-card:hover,#products .brand-card.open{border-color:var(--brand-tone,var(--brand-blue));}
#products .brand-card.open{box-shadow:0 12px 34px rgba(30,58,138,.12);}

/* Keep autoplay and touch scrolling inside the banner strip. */
.brand-showcase .promo-viewport{overscroll-behavior:contain;overflow-anchor:none;}



/* Make the header magnifier an accessible, tappable search control. */
.search-submit{
  display:grid;place-items:center;flex:0 0 32px;width:32px;min-width:32px;height:32px;
  margin:0;padding:0;border:0;border-radius:8px;background:transparent;
  color:var(--brand-blue,#1E3A8A);cursor:pointer;line-height:0;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.search-submit svg{display:block;width:18px;height:18px;color:currentColor;}
.search-submit:hover{background:#EEF4FF;color:#173172;}
.search-submit:active{transform:scale(.94);}
.search-submit:focus-visible{outline:3px solid rgba(37,99,235,.3);outline-offset:2px;}


/* Let the wide Haval and Chery marks fill their tiles without distortion. */
#products .brand-card[data-key="haval"] .brand-logo{width:180px;max-width:100%;height:58px;}
#products .brand-card[data-key="chery"] .brand-logo{width:104px;max-width:100%;height:68px;}


/* Brand identity and vehicle cards: a restrained, consistent retail layout. */
@media(min-width:641px){
  .headbar{min-height:82px;padding-block:6px;}
  .brand-mark-full{width:64px;height:64px;}
}
@media(min-width:1051px){
  .headbar{min-height:88px;}
  .brand-mark-full{width:76px;height:76px;}
  .brand-name .main{font-size:17px;font-weight:800;white-space:nowrap;color:#172033;}
  .brand-name .sub{font-size:11px;color:#667085;}
}
@media(min-width:641px) and (max-width:1050px){
  .brand-name{display:none;}
}
#products .brand-grid{gap:14px;align-items:stretch;}
#products .brand-card{
  border:1px solid #E4E9F0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 3px 12px rgba(16,24,40,.045);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#products .brand-card:hover{
  border-color:#1E3A8A;
  box-shadow:0 10px 24px rgba(30,58,138,.10);
  transform:translateY(-2px);
}
#products .brand-card.open{
  border-color:#B42019;
  box-shadow:0 10px 26px rgba(180,32,25,.10);
}
#products .brand-toggle{
  min-height:118px;
  padding:13px 14px 11px;
  gap:8px;
}
#products .brand-card .brand-logo,
#products .brand-card[data-key="haval"] .brand-logo,
#products .brand-card[data-key="chery"] .brand-logo{
  width:100%;
  max-width:100%;
  height:58px;
  padding:0 6px;
  border:0;
  border-radius:0;
  background:transparent;
}
#products .brand-card .brand-logo img{
  display:block;
  width:100%;
  height:100%;
  max-width:190px;
  max-height:58px;
  object-fit:contain;
}
/* Most brand marks ship on a transparent (or pure-white) background and sit
   flush on the white card. Haval's official asset is a photographed chrome
   badge on its own dark carbon-fibre plaque — dropped in flush like the
   others it reads as a stray dark rectangle instead of a brand mark. Framing
   it as a small rounded plaque (its own real material) makes the difference
   intentional instead of looking like a lower-quality logo. */
#products .brand-card[data-key="haval"] .brand-logo img{
  border-radius:8px;
  box-shadow:0 3px 10px rgba(10,10,12,.22);
  max-width:168px;
}
#products .brand-card .brand-toggle .name{
  color:#111827;
  font-size:15px;
  font-weight:800;
  line-height:1.35;
}
#products .brand-card .brand-toggle:focus-visible{
  outline:3px solid rgba(30,58,138,.42);
  outline-offset:3px;
}
@media(max-width:640px){
  body{padding-top:calc(68px + env(safe-area-inset-top,0px));}
  .headbar{grid-template-columns:clamp(56px,17.5vw,68px) minmax(0,1fr) auto auto;}
  .headbar>.brand .brand-mark-full{width:100%;height:54px;}
  .headbar>.brand .brand-mark-full img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;}
  .headbar>.brand .brand-name{display:none;}
  #products .brand-grid{gap:10px;}
  #products .brand-toggle{min-height:108px;padding:10px 9px 9px;gap:6px;}
  #products .brand-card .brand-logo,
  #products .brand-card[data-key="haval"] .brand-logo,
  #products .brand-card[data-key="chery"] .brand-logo{height:48px;padding-inline:2px;}
  #products .brand-card .brand-logo img{max-height:48px;}
  #products .brand-card .brand-toggle .name{font-size:14px;}
}
@media(prefers-reduced-motion:reduce){
  #products .brand-card{transition:none;}
  #products .brand-card:hover{transform:none;}
}

/* ==========================================================
   Stock photo gallery — real, unstaged part photos
   ========================================================== */
/* 5 columns instead of 6, with a bit more air between cards — 14 categories
   in 6 tight columns read as one dense wall on desktop; this keeps the same
   grid approach but gives each card (and its own little carousel) more room
   to read as its own thing before the eye moves to the next. */
.gallery-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;
}
/* Each category can hold several real photos; .gallery-stack is the card,
   and only the .stack-active item inside it is shown at a time. Arrows let
   the shopper flip through the rest without leaving the grid. */
.gallery-stack{
  position:relative;border:1px solid var(--line);border-radius:12px;background:#fff;
  overflow:hidden;aspect-ratio:1/1;
  transition:box-shadow .18s var(--ease-premium),border-color .18s var(--ease-premium);
}
.gallery-stack:hover,.gallery-stack:focus-within{box-shadow:var(--shadow-md);border-color:var(--brand-red);}
.gallery-stack .gallery-item{
  display:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;
  background:transparent;cursor:pointer;
}
.gallery-stack .gallery-item.stack-active{display:block;}
.gallery-item img{
  width:100%;height:100%;object-fit:contain;padding:10px;background:#fff;
}
/* Real environment photos (the shop itself, not a product cutout) read
   better filling the frame than floating on padded white. */
.gallery-item.item-cover img{object-fit:cover;padding:0;}
.gallery-item-tag{
  position:absolute;inset-inline:0;bottom:0;padding:5px 8px;
  background:rgba(20,26,33,.72);color:#fff;font-size:10.5px;font-weight:700;
  line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(4px);
  transition:opacity .15s var(--ease-premium),transform .15s var(--ease-premium);
}
.gallery-item:hover .gallery-item-tag,.gallery-item:focus-visible .gallery-item-tag{opacity:1;transform:translateY(0);}
.gallery-stack .gallery-item-tag{opacity:1;transform:none;}
.stack-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:28px;height:28px;border:0;border-radius:50%;background:rgba(20,26,33,.45);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s var(--ease-premium);
}
.stack-nav svg{width:15px;height:15px;}
.stack-prev{left:6px;}
.stack-next{right:6px;}
.stack-nav:hover,.stack-nav:focus-visible{background:rgba(20,26,33,.75);outline:none;}
@media(max-width:1024px){.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:640px){
  .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .gallery-stack{border-radius:9px;}
  .gallery-item img{padding:6px;}
  .gallery-item-tag{font-size:9px;padding:4px 5px;}
  /* Keep the touch target close to the 44px comfortable minimum even on small
     cards — a 24px circle was both hard to aim and easy to miss-tap next to
     the card itself. The icon stays modest; only the tappable circle grows. */
  .stack-nav{width:36px;height:36px;}
  .stack-nav svg{width:15px;height:15px;}
}

/* lightbox */
.lightbox-overlay{
  display:none;position:fixed;inset:0;z-index:70;background:rgba(10,14,17,.86);
  align-items:center;justify-content:center;padding:20px;
}
.lightbox-overlay.open{display:flex;}
.lightbox-box{
  position:relative;width:100%;max-width:640px;background:#fff;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-md);
}
.lightbox-frame{
  width:100%;aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;
}
.lightbox-img{width:100%;height:100%;object-fit:contain;padding:18px;}
.lightbox-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-top:1px solid var(--line);
}
.lightbox-tag{font-size:13.5px;font-weight:800;color:var(--brand-blue);}
.lightbox-order{padding-inline:18px;min-height:42px;border:0;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.lightbox-close{
  position:absolute;top:10px;inset-inline-end:10px;z-index:2;
  width:36px;height:36px;border:0;border-radius:50%;background:rgba(20,26,33,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.lightbox-close svg{width:18px;height:18px;}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border:0;border-radius:50%;background:rgba(20,26,33,.45);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.lightbox-nav svg{width:20px;height:20px;}
.lightbox-prev{left:10px;right:auto;}
.lightbox-next{right:10px;left:auto;}
.lightbox-nav:hover,.lightbox-close:hover{background:rgba(20,26,33,.75);}
@media(max-width:640px){
  .lightbox-box{max-width:100%;border-radius:14px;}
  .lightbox-footer{flex-direction:column;align-items:stretch;text-align:center;}
  .lightbox-order{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .gallery-stack{transition:none;}
  .gallery-item-tag{transition:none;}
}
/* Moving delivery markers remain visible in every motion preference mode. */

/* Compact request fields and let part lists grow only as their content needs. */
.vehicle-form{
  box-sizing:border-box;
  width:100%;
  max-width:640px;
  margin-inline:auto;
  padding:18px 22px;
  gap:12px;
}
.vehicle-actions{box-sizing:border-box;width:100%;max-width:640px;margin-inline:auto}
.vehicle-validation{box-sizing:border-box;width:100%;max-width:640px;margin:0 auto 4px}
.vehicle-context-field{padding:10px 12px;}
.vehicle-context-value{min-height:40px;padding:8px 11px;}
.vehicle-field input,.vehicle-field select,.vehicle-field textarea{
  box-sizing:border-box;
  min-height:44px;
  padding:8px 11px;
  line-height:1.45;
}
.vehicle-field textarea{
  min-height:56px;
  max-height:min(200px,34vh);
  overflow-y:hidden;
}
#waForm .field input:not([type="hidden"]),#waForm .field textarea{
  min-height:44px;
  padding:8px 12px;
  line-height:1.45;
}
#waForm .field textarea,.modal-box .field textarea{
  min-height:56px;
  max-height:min(200px,34vh);
}
@media(max-width:640px){
  .vehicle-form{max-width:100%;padding:14px;gap:12px}
  .vehicle-field input,.vehicle-field select,.vehicle-field textarea{
    min-height:44px;
    padding:8px 10px;
    font-size:16px;
  }
  .vehicle-field textarea{min-height:64px}
  #waForm .field input:not([type="hidden"]),#waForm .field textarea{
    min-height:44px;
    padding:8px 10px;
    font-size:16px;
  }
  #waForm .field textarea,.modal-box .field textarea{min-height:64px}
}


/* Lighter, accessible call control and a single clear delivery trip at a time. */
.header-contact-btn.call{background:#2F6CC2;box-shadow:0 6px 14px rgba(30,58,138,.15);}
.header-contact-btn.call:hover{background:#285BA4;}
.promo-slide--delivery-map .delivery-routes-map{max-width:300px;max-height:231px}
.delivery-route-main{
  stroke:#7892b6!important;
  stroke-width:2.2!important;
  stroke-dasharray:4 5;
  opacity:.18!important;
  transition:stroke .22s ease,stroke-width .22s ease,opacity .22s ease;
}
.delivery-routes-map.route-motion-ready .delivery-route-main{
  stroke-width:2.2!important;
  stroke-dasharray:4 5;
  opacity:.42!important;
}
.delivery-route-main.is-active{
  stroke:#C21D30!important;
  stroke-width:2.8!important;
  stroke-dasharray:none;
  opacity:.78!important;
}
.delivery-city-marker{
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 2px rgba(17,36,71,.2));
}
.delivery-city-marker.is-arriving{
  fill:#F7C4CB!important;
  stroke:#C21D30!important;
  stroke-width:4!important;
}
.delivery-route-traveler{
  pointer-events:none;
  will-change:transform,opacity;
}
@media(max-width:640px){
  .promo-slide--delivery-map .delivery-routes-map{max-width:260px;max-height:200px}
  .delivery-city-marker{stroke-width:2.6}
}

/* Testimonials: real, verbatim Google reviews — the single highest-value trust
   signal identified in the design audit. Three equal cards, a 5-star row (the
   rating these specific reviews state in their own words), the quote, then
   the reviewer's name and a small "Google review" provenance label so it
   reads as sourced, not invented. */
.testimonials{background:var(--surface-alt,#F7F9FC)}
.testimonial-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;
}
.testimonial-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 20px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px;
}
.testimonial-stars{display:flex;gap:3px;color:#F5A623}
.testimonial-stars svg{width:16px;height:16px}
.testimonial-quote{color:#344054;font-size:14.5px;line-height:1.85;flex:1}
.testimonial-author{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px dashed var(--line)}
.testimonial-name{font-weight:800;color:#1D2733;font-size:14px}
.testimonial-source{font-size:11.5px;color:var(--muted);font-weight:600}
.testimonials-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:24px;
  color:var(--brand-blue);font-weight:800;font-size:14px;
  border-bottom:1.5px solid transparent;transition:border-color .2s;
}
.testimonials-cta:hover{border-color:var(--brand-blue)}
@media(max-width:860px){
  .testimonial-grid{grid-template-columns:1fr;gap:14px}
}

/* Trust strip: a slim band of service-level reassurances right under the
   hero (response speed, inspection, brand coverage, pricing) — distinct from
   the hero's own inventory chips and from the proof-marquee's "real photos"
   angle. Same promises order.html already makes, just surfaced on the
   homepage too, where the audit found them missing. */
.trust-strip{background:var(--brand-blue);padding:16px 0}
.trust-strip-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.trust-strip-item{
  display:flex;align-items:center;justify-content:center;gap:9px;
  color:#fff;font-size:13.5px;font-weight:700;text-align:center;
  padding-inline:8px;
  border-inline-start:1px solid rgba(255,255,255,.18);
}
.trust-strip-item:first-child{border-inline-start:0}
.trust-strip-item svg{width:19px;height:19px;flex:none;color:#8FD4FF}
@media(max-width:860px){
  .trust-strip-grid{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .trust-strip-item{border-inline-start:0;font-size:12.5px}
  .trust-strip-item:nth-child(odd){border-inline-end:1px solid rgba(255,255,255,.18)}
}
@media(max-width:480px){
  .trust-strip-item{text-align:start;justify-content:flex-start}
}

/* Clarifies the brand grid is "parts we supply for these brands," not an
   official-dealer claim — small, quiet, not a legal-style disclaimer block. */
.brand-disclaimer{
  margin-top:18px;text-align:center;color:var(--muted);font-size:12px;
  line-height:1.8;max-width:560px;margin-inline:auto;
}