/* ---- Replacements for Wix runtime behaviour ---- */
/* Desktop dropdown menu */
.wixui-dropdown-menu__item{position:relative}
.wixui-dropdown-menu__item>ul{display:none!important}
.wixui-dropdown-menu__item:hover>ul,.wixui-dropdown-menu__item:focus-within>ul,.wixui-dropdown-menu__item.tp-open>ul{
  display:block!important;position:absolute!important;top:100%!important;left:50%!important;transform:translateX(-50%);
  width:auto!important;height:auto!important;min-width:190px;clip:auto!important;clip-path:none!important;overflow:visible!important;
  margin:0!important;padding:8px 0!important;list-style:none!important;background:#fff!important;z-index:1000!important;
  box-shadow:0 8px 24px rgba(0,0,0,.15)!important;border-radius:4px;opacity:1!important;visibility:visible!important}
.wixui-dropdown-menu__item>ul>li{display:block!important;list-style:none!important;margin:0!important;padding:0!important;width:auto!important;height:auto!important;position:static!important;opacity:1!important;visibility:visible!important}
.wixui-dropdown-menu__item>ul a{display:block!important;padding:10px 18px!important;color:#002952!important;font:15px/1.4 'wfont_e7142e_8288d3082c574ed0819e7e94c06ea6d6','wf_8288d3082c574ed0819e7e94c',"IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;text-decoration:none!important;white-space:nowrap}
.wixui-dropdown-menu__item>ul a:hover{background:#f2f4f7!important}
[id$="__more__"]{display:none!important}
/* Mobile menu */
#MENU_AS_CONTAINER.tp-open{display:block!important;visibility:visible!important;opacity:1!important;position:fixed!important;inset:0!important;z-index:10000!important;overflow:auto!important;transform:none!important}
#MENU_AS_CONTAINER.tp-open *{visibility:visible}
.tp-menu-close{position:fixed;top:12px;right:12px;z-index:10001;width:44px;height:44px;border:0;border-radius:50%;background:#002952;color:#fff;font-size:26px;line-height:44px;cursor:pointer}
/* Form status */
.tp-form-msg{margin:12px 0;padding:12px 14px;border-radius:6px;font:15px/1.5 "IBM Plex Sans Thai","IBM Plex Sans",sans-serif;background:#eef6ee;color:#1f5f2a}
.tp-form-msg.err{background:#fdecea;color:#8a1f11}
.tp-form-msg a{color:inherit;font-weight:600}
/* Lulo Clean (Wix-licensed, all-caps) replaced by Syncopate */
.font_0,[style*="lulo-clean"]{text-transform:uppercase;letter-spacing:.14em}
#MENU_AS_CONTAINER.tp-open{background:#fff!important}
#MENU_AS_CONTAINER.tp-open #container-MENU_AS_CONTAINER{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;opacity:1!important;visibility:visible!important;background:#fff!important}
.wixui-vertical-menu__item.tp-sub-open>.wixui-vertical-menu__submenu{display:block!important;height:auto!important;max-height:none!important;opacity:1!important;visibility:visible!important;overflow:visible!important}
.wixui-vertical-menu__item.tp-sub-open .wixui-vertical-menu__arrow{transform:rotate(180deg)}
#MENU_AS_CONTAINER.tp-open #overlay-MENU_AS_CONTAINER{display:block!important;position:fixed!important;left:0;top:0;width:200vw!important;height:200vh!important;background:rgba(0,26,54,.55)!important;opacity:1!important;visibility:visible!important}
.wixui-captcha{display:none!important}
/* Header menu with the added "Car Wash" item: start right after the logo; Contact Us sat under the search box on the original */
#comp-j67q58hlitemsContainer{text-align:left!important;padding-left:136px!important}
#comp-j67q58hl1{width:168px!important}
#comp-tpcarwash{width:86px!important}#comp-j67q58hl2{width:80px!important}
#comp-j67q58hl4{display:none!important}
/* Photo-caption overlays: Thai copy is longer than the Wix original, so lines break further and the block falls out of the image card. Tighten line-height and add a dark backdrop so the caption reads as part of the image. */
#comp-luuwyo8o, #comp-luuxgrdr{background:rgba(0,26,54,.55);padding:10px 14px;border-radius:0 0 15px 15px}
#comp-luuwyo8o p, #comp-luuxgrdr p{line-height:1.3em!important}

/* ===== TP+ chrome (header + footer injected on every Wix page by site.js) ===== */
/* Brand typefaces per TP+ Brand Guidelines: Aktiv Grotesk Thai + Gibson are Adobe Fonts (paid), so we use IBM Plex Sans / IBM Plex Sans Thai from Google Fonts as a free, closely-matched lookalike until a Typekit kit is wired in. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');

/* Wix pages hard-coded 'lulo-clean-w01-one-bold' (Monotype, Wix-licensed) for headlines and 'avenir-lt-w01-*' / 'din-next-w01-light' for body — none of them can be fetched here, so headlines were falling back to Arial. Override the --font_* custom properties that Wix typography classes (.font_0 … .font_10) read from, so every Wix text element switches to IBM Plex Sans without touching per-element markup. */
.theme-vars, .max-width-container, body{
  --font_0:normal normal normal 20px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_1:normal normal normal 16px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_2:normal normal normal 70px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_3:normal normal bold 90px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_4:normal normal normal 70px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_5:normal normal normal 42px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_6:normal normal normal 28px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_7:normal normal normal 20px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_8:normal normal normal 16px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_9:normal normal normal 14px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
  --font_10:normal normal normal 12px/1.4em "IBM Plex Sans Thai","IBM Plex Sans",sans-serif!important;
}
/* Catch stray inline font-families that bypass the --font_* variables */
*[style*="lulo-clean"], *[class*="lulo-clean"],
*[style*="avenir-lt"], *[style*="din-next"],
h1, h2, h3, h4, h5, h6{
  font-family:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,sans-serif!important;
}

/* H4: Brand orange on hero photos can match orange EV cables/towels in the image. Add a dark halo to any text that still inherits the orange color so it stays legible on photos. */
*[style*="color:#CC6E29"]{text-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.45)}
.tp-chrome-header,.tp-chrome-footer,.tp-banner{font-family:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,sans-serif}
.tp-chrome-header *,.tp-chrome-footer *,.tp-banner *{box-sizing:border-box}
.tp-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* Chrome header — single tall white bar, bigger logo, Contact dropdown */
.tp-chrome-header{background:#FFFFFF;border-bottom:1px solid #E5E3E5;position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(0,41,82,.04)}
.tp-chrome-header .tp-wrap{padding-top:20px;padding-bottom:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.tp-logo{display:block;line-height:0}
.tp-logo img{height:60px;width:auto;display:block}
.tp-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;font-weight:500;font-size:17px}
.tp-nav .tp-nav-link{color:#002952;text-decoration:none}
.tp-nav .tp-nav-link:hover{color:#CC6E29}
.tp-nav .tp-nav-link.is-current{color:#CC6E29;font-weight:600}
.tp-nav .tp-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;background:#002952;color:#FFFFFF !important;border-radius:999px;font-weight:600;text-decoration:none}
.tp-nav .tp-cta:hover{background:#204B7E}

/* Contact dropdown */
.tp-chrome-header .contact-menu{position:relative}
.tp-chrome-header .contact-btn{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 20px;background:transparent;color:#002952;border:2px solid #002952;border-radius:999px;font:inherit;font-weight:600;font-size:17px;cursor:pointer}
.tp-chrome-header .contact-btn:hover,.tp-chrome-header .contact-menu[data-open="true"] .contact-btn{background:#002952;color:#FFFFFF}
.tp-chrome-header .contact-btn svg{transition:transform .2s ease}
.tp-chrome-header .contact-menu[data-open="true"] .contact-btn svg{transform:rotate(180deg)}
.tp-chrome-header .contact-drop{position:absolute;right:0;top:calc(100% + 10px);min-width:260px;background:#FFFFFF;border:1px solid #E5E3E5;border-radius:14px;box-shadow:0 10px 32px rgba(0,41,82,.14);padding:8px;z-index:50;display:none}
.tp-chrome-header .contact-menu:hover .contact-drop,.tp-chrome-header .contact-menu[data-open="true"] .contact-drop{display:block}
.tp-chrome-header .contact-drop a{display:flex;align-items:center;gap:12px;padding:12px 14px;color:#002952;text-decoration:none;border-radius:10px;font-weight:500}
.tp-chrome-header .contact-drop a:hover{background:#F6F5F3}
.tp-chrome-header .contact-drop a.line{color:#06C755}
.tp-chrome-header .contact-drop a.line:hover{background:#E8F8EB}
.tp-chrome-header .contact-drop a .ic{width:36px;height:36px;border-radius:50%;background:#F6F5F3;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tp-chrome-header .contact-drop a.line .ic{background:#06C755;color:#FFFFFF}
.tp-chrome-header .contact-drop a .num{display:block;font-size:16px;font-weight:600}
.tp-chrome-header .contact-drop a .lbl{display:block;font-size:12px;color:#4A5A6E;font-weight:400}

/* Mobile menu */
.tp-chrome-header .menu-toggle{display:none;width:48px;height:48px;border:0;background:transparent;color:#002952;cursor:pointer;padding:0;align-items:center;justify-content:center}
.tp-chrome-header .menu-toggle svg{display:block}
.tp-chrome-header .mobile-nav{display:none;background:#FFFFFF;border-bottom:1px solid #E5E3E5;padding:0 24px 16px}
.tp-chrome-header .mobile-nav.open{display:block}
.tp-chrome-header .mobile-nav a{display:block;padding:14px 4px;color:#002952;font-weight:500;font-size:17px;text-decoration:none;border-bottom:1px solid #F2F2F0}
.tp-chrome-header .mobile-nav a:last-child{border-bottom:0}

@media (max-width:860px){
  .tp-logo img{height:48px}
  .tp-nav .tp-nav-link{display:none}
  .tp-chrome-header .menu-toggle{display:inline-flex}
  .tp-nav{gap:8px}
  .tp-chrome-header .contact-drop{right:auto;left:0}
}
@media (max-width:480px){
  .tp-logo img{height:40px}
  .tp-chrome-header .tp-wrap{padding-top:12px;padding-bottom:12px}
}

/* Footer */
.tp-chrome-footer{background:#001A36;color:#B8C6D6;font-size:14px}
.tp-footer-top{padding-top:32px;padding-bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.tp-footer-top img{height:32px;width:auto;display:block}
.tp-footer-grid{padding-top:16px;padding-bottom:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tp-footer-grid strong{color:#FFFFFF}
.tp-footer-grid a{color:#B8C6D6;text-decoration:none}
.tp-footer-grid a:hover{color:#FFFFFF}

/* Wix mesh-grid pages hard-code column widths at 980px and position every
   component with absolute `left: Xpx`. Below that width children overlap. Flatten the grid: on narrow viewports every component stacks vertically and loses its horizontal offset. */
@media (max-width:980px){
  html,body{overflow-x:hidden}
  [id^="SITE_"],#masterPage,#PAGES_CONTAINER,#SITE_PAGES,[id^="comp-"]{min-width:0!important;max-width:100vw!important}
  [data-mesh-id$="-gridContainer"]{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;grid-template-rows:none!important;height:auto!important;align-items:stretch!important}
  [data-mesh-id$="-gridContainer"] > [id^="comp-"]{position:relative!important;left:0!important;right:auto!important;top:auto!important;grid-area:auto!important;margin-left:0!important;margin-right:0!important;max-width:100%!important;width:auto!important;justify-self:stretch!important;align-self:stretch!important}
  /* image components whose intrinsic sizes are too large */
  [id^="comp-"].wixui-image{width:auto!important;height:auto!important}
  [id^="comp-"].wixui-image img{max-width:100%!important;height:auto!important}
  /* Column strips: stack their inner columns */
  .wixui-column-strip{flex-direction:column!important}
  .wixui-column-strip > div{min-width:0!important}
  .wixui-column-strip__column{width:100%!important;min-width:0!important;flex:0 0 auto!important}
}