/*
 * OnTechnic V3.4 — navigation/hero/chat visual refinement.
 * Isolated CSS patch: preserve V3 motion, geometry, imagery and content.
 */

/* 1. Navigation stays readable on both states: transparent cinematic
 *    on top and cream with dark type after scrolling. */
.site-header{
 transition:background-color .42s ease,color .42s ease,box-shadow .42s ease,backdrop-filter .42s ease;
}
.site-header .desktop-nav a{
 font-size:clamp(12px,.88vw,14px);
 font-weight:500;
 letter-spacing:.012em;
 line-height:1.35;
 opacity:.96;
}
.site-header .desktop-nav{gap:clamp(12px,1.15vw,20px)}
.site-header .language-switch{font-size:12px}
.site-header .language-switch a{color:inherit}
.site-header .language-switch a[aria-current]{color:#fff}
.site-header.scrolled{
 background:rgba(245,242,234,.97)!important;
 color:#16241d!important;
 border-bottom:1px solid rgba(30,46,34,.17);
 box-shadow:0 9px 30px rgba(15,25,20,.10);
 backdrop-filter:blur(22px);
 -webkit-backdrop-filter:blur(22px);
}
.site-header.scrolled::after{background:rgba(26,44,32,.18)}
.site-header.scrolled .brand-word{color:#1b2b22!important}
.site-header.scrolled .brand-word small{color:#54634f!important}
.site-header.scrolled .desktop-nav a{color:#14251b!important;opacity:.95!important}
.site-header.scrolled .desktop-nav a:hover,
.site-header.scrolled .desktop-nav a:focus-visible{color:#326243!important;opacity:1!important}
.site-header.scrolled .desktop-nav a::after{background:#69815c!important}
.site-header.scrolled .language-switch{color:#45564a!important}
.site-header.scrolled .language-switch a,
.site-header.scrolled .language-switch a[aria-current]{color:#203b2a!important}
.site-header.scrolled .language-switch a[aria-current]{font-weight:800}
.site-header.scrolled .header-cta{background:#203528!important;color:#f8f4eb!important}
.site-header.scrolled .header-cta:hover{background:#385746!important}
.site-header.scrolled .menu-toggle span{background:#17261c!important}
.site-header.scrolled .otc-cart-shortcut{border-color:#647e66;color:#1b3020!important}
.site-header.scrolled .otc-cart-shortcut small{background:#1b3020;color:#fff}

/* When the mobile menu is open retain dark header controls on the light bar,
 * while menu links keep their intentionally dark overlay and light type. */
.nav-open .mobile-nav{background:#151d1b;color:#f4f1e8}
.nav-open .mobile-links a{color:#f4f1e8}

@media(min-width:1071px) and (max-width:1250px){
 .site-header .desktop-nav a{font-size:12px!important}
 .site-header .desktop-nav{gap:10px}
 .site-header{gap:20px;padding-inline:clamp(22px,3.7vw,60px)}
 .site-header .header-actions{gap:11px}
}
@media(max-width:1070px){
 .site-header .desktop-nav{display:none}
 .site-header .menu-toggle{display:flex}
}

/* 2. A comfortable, matching text inset on every page's cinematic hero.
 *      Keep max-width centering and avoid any negative left offsets. */
.cinematic-inner .inner-cinema > .inner-cinema-copy.wrap{
 box-sizing:border-box;
 width:min(calc(100% - 10vw),1400px);
 margin-left:auto;
 margin-right:auto;
 padding-left:clamp(16px,1.8vw,32px);
 padding-right:clamp(16px,1.8vw,32px);
}
.cinematic-inner .inner-cinema .cinema-overline,
.cinematic-inner .inner-cinema .cinema-title,
.cinematic-inner .inner-cinema .cinema-summary,
.cinematic-inner .inner-cinema .cinema-actions{
 margin-left:0;
}
.cinematic-inner .inner-cinema > .cinema-foot.wrap{
 width:min(calc(100% - 10vw),1400px);
 padding-inline:clamp(16px,1.8vw,32px);
}
.hero .hero-inner.wrap{
 box-sizing:border-box;
 padding-left:clamp(16px,1.8vw,32px);
 padding-right:clamp(16px,1.8vw,32px);
}
.ot-commerce-hero .ot-commerce-hero-inner.wrap{
 box-sizing:border-box;
 padding-left:clamp(16px,1.8vw,32px);
 padding-right:clamp(16px,1.8vw,32px);
}

/* 3. Lift Peyman away from device browser chrome and WPVibe preview bar. */
.peyman{
 bottom:clamp(86px,9vh,112px)!important;
 right:clamp(22px,3.6vw,60px)!important;
}
.peyman-trigger{
 border:1px solid rgba(48,60,45,.24);
 box-shadow:0 16px 44px rgba(12,25,18,.23);
}
.peyman-panel{
 max-height:min(540px,calc(100dvh - 185px));
 overflow-y:auto;
 overscroll-behavior:contain;
}

/* Responsive: allow natural title wrapping and reserve assistant clearance. */
@media(max-width:740px){
 .cinematic-inner .inner-cinema > .inner-cinema-copy.wrap{
  width:calc(100% - 32px);
  padding-left:clamp(9px,2.4vw,17px);
  padding-right:clamp(9px,2.4vw,17px);
 }
 .cinematic-inner .inner-cinema > .cinema-foot.wrap{
  width:calc(100% - 32px);
  padding-inline:clamp(9px,2.4vw,17px);
 }
 .hero .hero-inner.wrap,
 .ot-commerce-hero .ot-commerce-hero-inner.wrap{padding-inline:12px}
 .site-header.scrolled{background:rgba(245,242,234,.98)!important}
 .peyman{right:18px!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
 .peyman-trigger{min-height:55px}
 .peyman-panel{max-height:min(500px,calc(100dvh - 175px))}
}
@media(max-height:610px){
 .peyman{bottom:67px!important}
 .peyman-panel{max-height:calc(100dvh - 155px);bottom:65px}
}
@media(prefers-reduced-motion:reduce){
 .site-header{transition:none}
}