:root{
      /* Brand */
      --brand-black:#150f11;
      --brand-orange:#f63a00;

      /* Base */
      --bg:#ffffff;
      --text: var(--brand-black);
      --muted: rgba(21,15,17,.68);
      --soft: rgba(21,15,17,.06);
      --line: #EEE;

      /* UI */
      --radius: 4px;
      --shadow: 0 18px 50px rgba(21,15,17,.10);
      --shadow-sm: 0 10px 24px rgba(21,15,17,.10);

      --focus: rgba(246,58,0,.25);
      --max: 1470px;
    }


* { margin: 0; padding: 0; outline: none; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }



    body{
      margin:0; 
      font-family: 'Euclid Circular A', sans-serif;
      background: #FFF;
      color: var(--text);
      line-height:1.5;
      font-size:15px;
    }

    a{color:inherit; text-decoration:none}
    .container{max-width:var(--max); margin:0 auto; }

    /* Header */
    header{
      position:sticky; top:0; z-index:50;
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(10px);
      box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.1);
      z-index: 9999;
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:15px 0;
      gap:14px;
    }
    .logo{min-width:250px}


    .logo img:first-child{display: block;}
    .logo img:nth-child(2){display: none;}
    .logo img:nth-child(3){display: none;}




    nav ul{
      list-style:none; display:flex; gap:18px;
      padding:0; margin:0; align-items:center;
    }
    nav a{
      font-size:16px;
      color: rgba(21,15,17,.92);
      padding:10px 10px;
      font-weight: 500;
    }
    nav a:hover{background: var(--soft)}

    .nav-actions{
      display:flex; gap:10px; align-items:center;
      min-width:220px; justify-content:flex-end;
    }


    body.sticky .header { background:#FFF;position:sticky !important; }
    body.sticky .header .nav {justify-content: flex-start;}
    body.sticky .logo {max-width: 60px;min-width: 60px;}
    body.sticky .logo img:not(.icon) { display: none; }
    body.sticky .header img.icon { display:block !important;max-width: 50px;}
    body.sticky .header .nav-actions {margin-left:auto;}


    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius: 4px;
      border:none;
      background: #fff;
      color: var(--text);
      font-weight:500;
      font-family: inherit;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px); box-shadow: var(--shadow-sm)}
    .btn:active{transform: translateY(0px)}

    .btn.primary{
      border-color: rgba(246,58,0,.35);
      background: var(--brand-orange);
      color:#fff;
      box-shadow: 0 16px 34px rgba(246,58,0,.22);
    }
    .btn.primary:hover{filter: brightness(1.02)}
   

    
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 12px;
      border-radius:999px;
      background: rgba(246,58,0,.08);
      border:1px solid rgba(246,58,0,.20);
      color: rgba(21,15,17,.88);
      font-size:13px;
      width:fit-content;
    }
    .dot{
      width:8px; height:8px; border-radius:50%;
      background: var(--brand-orange);
      box-shadow: 0 0 0 4px rgba(246,58,0,.18);
    }

    h1{
      margin:14px 0 10px;
      font-size:42px;
      line-height:1.08;
      letter-spacing:-.8px;
      color: var(--brand-black);
    }
    .lead{
      margin:0 0 18px;
      color: rgba(21,15,17,.72);
      font-size:16px;
      max-width:56ch;
    }

    .card-title{
      display:flex; justify-content:space-between; align-items:flex-start;
      gap:10px;
    }
    .card-title h2{
      margin:0;
      font-size:18px;
      letter-spacing:-.2px;
    }
    .badge{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(246,58,0,.24);
      background: rgba(246,58,0,.08);
      color: rgba(21,15,17,.82);
      white-space:nowrap;
    }

    .form{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:6px;
    }
    .field{display:flex; flex-direction:column; gap:6px}
    label{font-size:12.5px; color: rgba(21,15,17,.75)}
    input, select{
      width:100%;
      padding:11px 12px;
      border-radius: 4px;
      border:1px solid rgba(21,15,17,.18);
      background: #fff;
      color: var(--brand-black);
      outline:none;
      font-family: inherit;
    }
    input::placeholder{color: rgba(21,15,17,.45)}
    input:focus, select:focus{
      border-color: rgba(246,58,0,.55);
      box-shadow: 0 0 0 4px var(--focus);
    }
    .form .full{grid-column: 1 / -1}
    .form-actions{display:flex; gap:10px; margin-top:4px}
    .hint{margin:0; font-size:12.5px; color: rgba(21,15,17,.62)}

    /* Sections */
    .section-head{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      margin-bottom:30px;
    }
    .section-head h3{
      margin:0;
      font-size:35px;
      color: var(--brand-black);
    }
    .section-head p{
      margin:0;
      color:rgb(144 146 148);
      font-size:15px;
      max-width:70ch;
      letter-spacing: 1px;
    }

 
    /* Value props */
    .grid3{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:12px;
    }
    
    /* Campaign strip */
    .campaign{
      border:1px solid rgba(246,58,0,.22);
      background:
        radial-gradient(800px 260px at 10% 0%, rgba(246,58,0,.16), transparent 60%),
        linear-gradient(180deg, rgba(246,58,0,.07), rgba(255,255,255,1));
      border-radius:22px;
      padding:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .campaign b{font-size:16px}
    .campaign p{margin:4px 0 0; color: rgba(21,15,17,.70); font-size:13.5px}

    
    

.layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items:start;
  padding: 12px 0 26px;
}

.panel{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.panel .panel-h{
  padding: 30px;
  border-bottom:1px solid rgba(21,15,17,.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.panel .panel-h b{font-size:14.5px}
.panel .panel-b{padding: 30px}


.filters { position:sticky;top:15px; }
.filters .field{margin-bottom: 12px}
.row2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 4px;
  border:1px solid rgba(21,15,17,.18);
  background:#fff;
  cursor:pointer;
  user-select:none;
  width:100%;
}
.chip input{width:auto}

.filters .actions{display:flex; gap:10px; margin-top:15px;padding:30px;background: #FFF;box-shadow: var(--shadow-sm);}
.filters .actions > * { flex:1; }
.results-top{
  padding:30px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom: 15px;
  box-shadow: var(--shadow-sm);
  background: #FFF;
}
.results-top h1{
  font-size:22px;
  margin:0;
  letter-spacing:-.2px;
}
.results-top p{
  margin:6px 0 0;
  color: rgba(21,15,17,.65);
  font-size: 13.5px;
}
.toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.toolbar select{
  padding: 10px 12px;
  border-radius: 4px;
  border:1px solid rgba(21,15,17,.18);
}

/* Cards */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 15px;
}

.car-card{
  position: relative;
  background:#fff;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  display:flex;
  flex-direction:column; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.car-card:hover{
  transform: translateY(-2px);
}
.car-media{
  background: rgba(21,15,17,.04);
  display:flex;align-items: center;justify-content: center;
  height: 250px;min-height: 250px;max-height: 250px;
  background: #FFF;
  border-bottom:1px solid var(--line);


}
.car-media img{
 width: 90%;
}
.car-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  height: 100%;
}
.car-title{
  padding:30px 30px 0px 30px;
}

.car-body .hint{
  position:absolute;top:30px;left:30px;

  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #150f11;
  color:#FFF;
  white-space:nowrap;
}
.specs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0px 30px 30px 30px;
  color: rgba(21,15,17,.70);
  font-size: 13px;
}




.price{display:flex;flex-direction: column; gap:2px;
  margin-top:auto;

}
.price b{font-size:18px}
.price span{font-size:12.5px; color: rgba(21,15,17,.60)}

.car-actions{display:flex;justify-content: space-between;align-items: center; gap:10px;background: #F9F9F9;padding:30px;
  border-top:1px solid var(--line);margin-top:auto;}
.car-actions .btn{flex:1; padding:5px 30px;}


/* Empty state */
.empty{
  border:1px dashed rgba(21,15,17,.22);
  background: rgba(21,15,17,.02);
  border-radius: 4px;
  padding: 18px;
  color: rgba(21,15,17,.72);
}

/* Responsive */
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr}
  .grid{grid-template-columns: 1fr}
}

/* === Cars: checkbox filter UI === */
.filter-group{display:flex; flex-direction:column; gap:10px; margin-bottom:15px;padding:30px;background: #FFF;
  box-shadow: var(--shadow-sm);border-radius: 4px;}
.filter-title{
  font-weight:800;

  color: rgba(21,15,17,.85);
  margin-bottom:5px;
}
.checklist{display:flex; flex-direction:column; gap:8px}

.check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#fff;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.check:hover{
  transform: translateY(-1px);
}
.check .left{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.check input{
  width: 18px;
  height: 18px;
  margin-top:3px;
  accent-color: var(--brand-orange);
}
.check b{
  font-size: 13.5px;
}
.check span{
  display:block;
  font-size: 12.5px;
}
.check .count{
  font-size:12px;
  color: rgba(21,15,17,.55);
}

/* Price range stays as input */
.range-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}




  .main { position:relative;background:url(../main4.jpg) bottom center no-repeat;background-size:cover;padding:300px 0px 400px 0px;margin-bottom:50px;overflow:hidden; text-align: center;}

 
.main:after {
    position: absolute;
    left:0;
    bottom: -3vw;
    width: 100%;
    height: 200px;
    z-index: 3;
    content: '';
    background:url(../wave.svg) bottom center no-repeat;
background-size:100%;}

  .main:before {
    content:'';
    background:rgba(21, 15, 17,.8);
    position: absolute;
    top:0;left:0;width:100%;height:100%;z-index: 3;
}



.main .container { position:relative;z-index:5; }

@keyframes bounceSoft {
  0%   { transform: translateX(50%) translateY(0);   animation-timing-function: ease-out; }
  20%  { transform: translateX(50%) translateY(-16px); animation-timing-function: ease-in; }
  40%  { transform: translateX(50%) translateY(0);   animation-timing-function: ease-out; }
  55%  { transform: translateX(50%) translateY(-8px);  animation-timing-function: ease-in; }
  70%  { transform: translateX(50%) translateY(0);   animation-timing-function: ease-out; }
  80%  { transform: translateX(50%) translateY(-3px);  animation-timing-function: ease-in; }
  100% { transform: translateX(50%) translateY(0); }
}



  .main-icon {
    
    position: absolute;
   left:calc(50% - 70px);bottom:50px;
   width:70px;min-width: 70px;max-width: 70px;
   z-index: 102;
   right: 50%;
  transform:translateX(50%) ;animation: bounceSoft 1.05s infinite ;

 }




.main h1 { color:#FFF;font-weight:600; }
.main p { color:rgba(255,255,255,.8);max-width:70%;margin:0 auto;font-weight:300; }

.main span { display:block;position:relative;color:rgba(255,255,255,.8);display:block;font-size:12.5px; margin-top:50px;z-index: 5; }



.search { margin-top:50px;max-width:70%;margin:0 auto; }
.search .tab-pane { display:none; }
.search .tab-pane.active { display:grid; }

.search form { grid-template-columns:1fr 1fr 1fr 1fr minmax(0,125px);background: #FFF;border-radius: 100px;padding:25px 40px;gap:30px; }
.search form .field {border-right:1px solid #EEE;}
.search form input, .search form select{ border:none;padding:0px;padding-right:30px; }
.search form label { text-align:left; }

.search .btn { border-radius:50px; }

.tab-search {display: flex;align-items: center;justify-content: center;gap:5px;margin-top:50px;}
.tab-search li.active  a { background:#FFF; }
.tab-search li  a {display: block;padding:10px 50px; border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid var(--line);font-weight:500;background:#DDD; }




.extras-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 15px;
}
.extra-card{
  
  border-radius: 4px;
  background:#fff;
  box-shadow: var(--shadow-sm);
  padding: 30px 30px 0px 30px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 210px;
}
.extra-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.extra-ico{
  width:42px; 
  height:42px;
  border-radius: 4px;
  display:grid; place-items:center;
  border:1px solid rgba(246,58,0,.22);
  background: rgba(246,58,0,.08);
  font-size:18px;
}

.extra-card .desc{
  margin:0;
  color: rgba(21,15,17,.66);
  font-size: 13.5px;
}

.extra-card .btn { padding:8px 15px; }

.price-mini{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #EEE;padding:25px 30px;
  margin-left:-30px;margin-right:-30px;
}
.price-mini .p{
  display:flex;
  flex-direction:column;
  font-size:18px;
  line-height: 20px;

}
.price-mini .p span{font-size:12.5px; color: rgba(21,15,17,.60)}

.meta{
  display:flex;
  flex-wrap:wrap;
  flex-direction: column;
  gap:5px;
  margin-bottom: 15px;
}
.meta .spec{
  font-size: 12.5px;
  color:rgba(21,15,17,.66);
}
.meta .spec .fa { color:#f63a00; }

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 30px;
  align-items:start;
}

.info-cards{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}
.info-card{
  border-radius: 4px;
  background:#fff;
  box-shadow: var(--shadow-sm);
  padding: 30px;
  display:flex;
  gap:25px;
   font-size:16px;
}

.info-ico{
  display:flex;align-items: center;justify-content: center;
  background:#f63a00;color:#FFF;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;max-height:44px;border-radius: 4px;
  font-size: 20px;
}
.info-card b{display:block; }
.info-card p{margin:0; color: rgba(21,15,17,.66);}
.info-card a{color: rgba(21,15,17,.86)}
.info-card a:hover{color: var(--brand-orange)}

.form-card{
  
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.form-card .h{
  padding: 30px;
  border-bottom:1px solid rgba(21,15,17,.10);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.form-card .h b{font-size:15px}
.form-card .h span{display:block; font-size:12.5px; color: rgba(21,15,17,.62); margin-top:3px}
.form-card .b{padding: 30px}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-grid .full{grid-column: 1 / -1}

textarea{
  width:100%;
  min-height: 120px;
  resize: vertical;
  padding:11px 12px;
  border-radius: 4px;
  border:1px solid rgba(21,15,17,.18);
  outline:none;
  font-family: inherit;
}
textarea:focus{
  border-color: rgba(246,58,0,.55);
  box-shadow: 0 0 0 4px var(--focus);
}

.map-card{
  
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow-sm);
  overflow:hidden;

  height: 100%;
  background:
    linear-gradient(0deg, rgba(21,15,17,.05), rgba(21,15,17,.05)),
    repeating-linear-gradient(90deg, rgba(21,15,17,.06) 0, rgba(21,15,17,.06) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(0deg, rgba(21,15,17,.06) 0, rgba(21,15,17,.06) 1px, transparent 1px, transparent 18px);
  display:grid;
  place-items:center;
  color: rgba(21,15,17,.65);
  font-size: 13.5px;
  text-align:center;
}
.map-card iframe { width:100%;height:100%;min-width: 100%;min-height: 100%;}



.ribbon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 4px;
  border:1px solid rgba(246,58,0,.22);
  background: rgba(246,58,0,.08);
  color: rgba(21,15,17,.80);
  font-size: 13px;
}
.ribbon strong{color: var(--brand-black)}

.campaigns-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 15px;
}

.camp-card{
  border-radius: 4px;
  background:#fff;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 250px;
}
.camp-media{
  height: 200px;
  background:url(../kampanya.jpg) center center no-repeat;
  background-size:cover;
 
  border-bottom:1px solid rgba(21,15,17,.08);
  position:relative;
}

.camp-media:before { 
  content:'';
  position: absolute;top:0;left:0;right:0;bottom:0;
background:
    radial-gradient(520px 160px at 25% 30%, rgba(246,58,0,.22), transparent 60%),
    radial-gradient(520px 160px at 75% 70%, rgba(21,15,17,.10), transparent 60%),
    linear-gradient(180deg, rgba(21,15,17,.02), rgba(21,15,17,.00));
    z-index: 5;
     }
.camp-badge{
  position:absolute;
  left: 30px;
  top: 30px;
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #150f11;
  color: #FFF;
  z-index: 99;
}
.camp-body{
  padding: 30px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.camp-body b{
  font-size: 15px;
  letter-spacing: -.1px;
}
.camp-body p{
  margin:0;
  color: rgba(21,15,17,.66);
  font-size: 13.5px;
}
.camp-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.camp-meta .spec{
  border:1px solid rgba(21,15,17,.12);
  background: rgba(21,15,17,.03);
  padding: 6px 10px;
  border-radius:999px;
  font-size: 12.5px;
  color: rgba(21,15,17,.72);
}
.camp-footer{
  margin-top:auto;
  display:flex;
  gap:10px;
}
.camp-footer .btn{flex:1}

.note-card{
  margin-top: 12px;
  border:1px solid rgba(246,58,0,.22);
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(246,58,0,.16), transparent 60%),
    linear-gradient(180deg, rgba(246,58,0,.06), #fff);
  border-radius: 4px;
  padding: 16px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.note-card b{font-size:15.5px}
.note-card p{margin:6px 0 0; color: rgba(21,15,17,.70); font-size: 13.5px}

.steps{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.step{
  
  border-radius: 4px;
  background:#fff;
  box-shadow: var(--shadow-sm);
  padding: 30px;
}
.step .n{
  width:34px; height:34px;
  border-radius: 4px;
  display:grid; place-items:center;
  border:1px solid rgba(246,58,0,.22);
  background: rgba(246,58,0,.08);
  font-weight:900;
  margin-bottom: 10px;
}
.step b{display:block; margin-bottom:6px}
.step p{margin:0; color: rgba(21,15,17,.66); font-size: 13.5px}

.faq-lite{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.faq-lite .qa b{display:block; margin-bottom:6px}
.faq-lite .qa p{margin:0; color: rgba(21,15,17,.66); font-size: 13.5px}

@media (max-width: 980px){
  .campaigns-grid{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .faq-lite{grid-template-columns: 1fr}
}
/* === Corporate page === */
.corp-wrap{padding: 18px 0 30px}



.breadcrumb { position:relative;display: flex;
  color: rgba(255,255,255,.68);margin-bottom:15px; }
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li:before {  
   content: '/';
   padding: 0.0000rem 0.3125rem;display: inline-block;font-size: 0.6250rem;font-weight: bold;
   position: relative;top: -0.0625rem;
} 

.breadcrumb > li > a { 
  color: rgba(255,255,255,.68); }
.breadcrumb > li > a .fa { margin-right: 0.3125rem; }
.breadcrumb > li + li:before{ 
  color: rgba(255,255,255,.68); }



.hero{
  
  position: relative;
  background:url(../hero.jpg) center center no-repeat;
  background-size:cover;
  box-shadow: var(--shadow);
  border-bottom:1px solid var(--line);
  padding: 50px 0px;
  margin-bottom:50px;
  text-align: center;
  overflow: hidden;

}


.hero:before {
  content:'';
    background:radial-gradient(980px 320px at 12% 10%, rgba(246,58,0,.9), transparent 100%),  rgba(21, 15, 17,.90);
    position: absolute;
    top:0;left:0;width:100%;height:100%;
}

.hero .container { position:relative;z-index:5; }



.hero h1{
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: -.3px;
  font-weight: 600;
  color:#FFF;
}

.hero p{
  margin: 0 0;
  color: rgba(255,255,255,.9);
  max-width: 80ch;
  font-weight: 300;
  margin:0 auto;
}

/* === Car Detail Page === */
.detail-wrap{padding: 18px 0 30px}

.detail-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  align-items:start;
}

.gallery{
  
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.gallery-main{
  aspect-ratio: 16/10;
  padding:30px;
}
.gallery-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gallery-thumbs{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  padding: 12px;
  background: #fff;
}
.thumb{
  border-radius: 4px;
  overflow:hidden;
  background: #FFF;
  padding:15px;
  aspect-ratio: 16/10;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb.active{border-color: rgba(246,58,0,.40); box-shadow: 0 0 0 4px rgba(246,58,0,.12)}

.detail-card{
  
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.detail-card .h{
  padding: 30px;
  border-bottom:1px solid rgba(21,15,17,.10);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.detail-title{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.detail-title{
  margin:0;
  font-size: 22px;
  letter-spacing:-.25px;
  font-weight: 600;
}
.detail-sub{color: rgba(21,15,17,.62); font-size: 13.5px}

.kpi-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  padding: 30px;
}
.kpi-mini{
  border:1px solid rgba(21,15,17,.12);
  background: rgba(21,15,17,.03);
  border-radius: 4px;
  padding: 12px;
}
.kpi-mini b{display:block; }
.kpi-mini span{display:block; margin-top:4px; color: rgba(21,15,17,.62); font-size:12.5px}

.price-box{
  padding: 30px;
  border-top:1px solid rgba(21,15,17,.10);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.price-box .p{display:flex; flex-direction:column; gap:2px}
.price-box .p b{font-size:22px}
.price-box .p span{color: rgba(21,15,17,.62); font-size:12.5px}
.price-box .cta{display:flex; gap:10px; flex-wrap:wrap}


.block{
  
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.block .bh{
  padding: 30px;
  border-bottom:1px solid rgba(21,15,17,.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.block .bh b{font-size:15px}
.block .bb{padding: 30px}

.spec-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.spec-item{
  border:1px solid rgba(21,15,17,.12);
  background: rgba(21,15,17,.03);
  border-radius: 4px;
  padding: 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.spec-item span{color: rgba(21,15,17,.62); }
.spec-item b{font-size:13.5px}

.detail-desc{
  margin:0;
  color: rgba(21,15,17,.68);
  font-size: 13.8px;
}

.note{
  margin-top: 12px;
  border:1px solid rgba(246,58,0,.22);
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(246,58,0,.16), transparent 60%),
    linear-gradient(180deg, rgba(246,58,0,.06), #fff);
  border-radius: 4px;
  padding: 16px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.note b{font-size:15.5px}
.note p{margin:6px 0 0; color: rgba(21,15,17,.70); font-size: 13.5px}

.similar{
  margin-top: 30px;
}
.similar .grid{
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 980px){
  .detail-grid{grid-template-columns: 1fr}
  .sticky{position:static}
  .spec-grid{grid-template-columns: 1fr}
  .similar .grid{grid-template-columns: 1fr}
}

/* === Detail sidebar form === */
.form-row{display:grid; grid-template-columns: 1fr 1fr; gap:15px;margin-bottom:30px;}
.form-row .full{grid-column: 1 / -1}

select{
  width:100%;
  padding: 11px 12px;
  border-radius: 4px;
  border:1px solid rgba(21,15,17,.18);
  outline:none;
  background:#fff;
}
select:focus{
  border-color: rgba(246,58,0,.55);
  box-shadow: 0 0 0 4px var(--focus);
}

.hr{height:1px; background: rgba(21,15,17,.10); margin:30px 0}

.radio-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.radio{
  border:1px solid rgba(21,15,17,.14);
  background:#fff;
  border-radius: 4px;
  padding: 10px 12px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.radio input{margin-top:2px; width:18px; height:18px; accent-color: var(--brand-orange)}
.radio b{font-size:13.5px; display:block; line-height:1.2}
.radio span{display:block; font-size:12.3px; color: rgba(21,15,17,.62); margin-top:2px}

.summary{
  border:1px solid rgba(21,15,17,.12);
  background: rgba(21,15,17,.03);
  border-radius: 4px;
  padding: 12px;
}
.sum-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 8px 0;
  border-top:1px dashed rgba(21,15,17,.14);
  color: rgba(21,15,17,.78);
  font-size: 13.2px;
}
.sum-row:first-child{border-top:0; padding-top:0}
.sum-row b{font-weight:900}
.sum-row .muted{color: rgba(21,15,17,.60)}
.sum-total{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}
.sum-total b{font-size:20px}
.sum-total span{display:block; font-size:12.5px; color: rgba(21,15,17,.60)}

.small-note{
  margin-top:10px;
  font-size:12.5px;
  color: rgba(21,15,17,.62);
}

@media (max-width: 980px){
  .radio-grid{grid-template-columns: 1fr}
}

/* === Eligibility + Terms blocks === */
.mini-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.term-list{display:flex; flex-direction:column; gap:10px}
.term{
  border:1px solid rgba(21,15,17,.12);
  background: rgba(21,15,17,.03);
  border-radius: 4px;
  padding: 12px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.term span{display:block; margin-top:2px; font-size:12.5px; color: rgba(21,15,17,.62)}
.term .val{
  font-size:12px;
  color: rgba(21,15,17,.70);
  padding: 4px 10px;
  border-radius:999px;
  border:1px solid rgba(21,15,17,.12);
  background:#fff;
  white-space:nowrap;
}
@media (max-width: 980px){
  .mini-grid{grid-template-columns: 1fr}
}