/* Main theme CSS — extracted from mockup/index.html <style> block */

html { scroll-behavior: smooth; }
body {
  font-family: 'Toyota Type', 'Toyota Type Book', Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212529;
  -webkit-font-smoothing: antialiased;
}
.toyota-h1 { font-size: 26px; font-weight: 400; letter-spacing: 0.52px; color: #1A1A1A; text-transform: uppercase; }
.toyota-h2 { font-size: 26px; font-weight: 400; color: #101010; line-height: 1.25; }
.toyota-car-name { font-size: 26px; font-weight: 400; letter-spacing: 0.52px; color: #101010; }
.toyota-price { font-size: 14px; font-weight: 400; color: #3A3A3A; }
.toyota-footer-title { font-size: 16px; font-weight: 600; color: #101010; letter-spacing: normal; margin-bottom: 16px; }
.toyota-footer-link { font-size: 14px; font-weight: 400; color: #3A3A3A; }
.toyota-footer-link:hover { color: #EB0A1E; }

/* Mega menu — click-to-open */
.mega-panel { top: 92px; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s ease, visibility .25s, transform .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; z-index: 45; }
header.is-scrolled .mega-panel { top: 60px; }
.nav-item.is-open .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-item.is-open > .nav-link { color: #EB0A1E; }
.nav-item.is-open > .nav-link .chev { transform: rotate(180deg); }
.nav-link .chev { transition: transform .2s; display:inline-block; }

.menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.menu-overlay.active { opacity: 1; visibility: visible; }

.header-red-line { height: 2px; background: #EB0A1E; }
.nav-row-sep { height: 1px; background: #E9E9E9; }

.main-nav-row { transition: height .2s ease; }
.utility-row { transition: opacity .2s ease, max-height .25s ease; overflow: hidden; max-height: 40px; }
header.is-scrolled .utility-row { max-height: 0; opacity: 0; pointer-events: none; }
header.is-scrolled .nav-row-sep { display: none; }

.utility-icons { display: none; align-items: center; justify-content: flex-end; gap: 26px; height: 44px; font-size: 14px; color: #212529; }
.utility-icons a { display: inline-flex; align-items: center; gap: 8px; color: #212529; }
.utility-icons a:hover { color: #EB0A1E; }
.utility-icons a i { font-size: 16px; }
header.is-scrolled .utility-icons { display: flex; }

.header-logo { transition: height .2s ease; }
header.is-scrolled .header-logo { height: 44px !important; }

/* When scrolled, align logo vertically with the main nav row (not with the
   utility-icons row above). Outer flex uses items-center, but right column
   has 2 rows — centering would put the logo between them. Push logo down so
   it aligns with the main nav. */
header .header-logo-link { align-self: center; }
header.is-scrolled .header-logo-link { align-self: flex-end; padding-bottom: 6px; }

.prod-tab { position: relative; padding: 14px 4px; color:#3A3A3A; font-size:14px; font-weight: 500; letter-spacing: .04em; cursor: pointer; background: transparent; border: 0; display: inline-flex; align-items: center; text-decoration: none; }
.prod-tab:hover { color:#EB0A1E; }
.prod-tab.active { color:#EB0A1E; }
.prod-tab.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#EB0A1E; }
.hybrid-dot { width:14px; height:14px; border-radius:50%; background:#0098D8; display:inline-block; margin-right:6px; vertical-align: middle; box-shadow: inset 0 0 0 2px #fff; outline: 1px solid #0098D8; }

details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }
details[open] > summary .fa-chevron-down { transform: rotate(180deg); }

.sep-red::after { content: ''; display: block; width: 56px; height: 3px; background: #EB0A1E; margin-top: 12px; }

.swiper-hero { aspect-ratio: 1425 / 605; overflow: hidden; }
.swiper-hero .swiper-slide img { width: 100%; height: 100%; object-fit: fill; display: block; }

.btn-link { position: relative; }
.btn-link::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:#EB0A1E; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.btn-link:hover::after { transform: scaleX(1); }

.tab-active { color:#EB0A1E; border-bottom-color:#EB0A1E; }

.swiper-button-next, .swiper-button-prev { color: #fff !important; background: rgba(0,0,0,.25); width:44px !important; height:44px !important; border-radius: 50%; }
.swiper-button-next:after, .swiper-button-prev:after { font-size: 16px !important; font-weight: 800; }
.swiper-pagination-bullet-active { background: #EB0A1E !important; }

.news-card img { transition: transform .5s ease; }
.news-card:hover img { transform: scale(1.05); }

.float-contact { box-shadow: 0 6px 20px rgba(235,10,30,.35); }