/* J&J Site Fixes 1.3.5 — hotfix on top of J&J Site Core 1.3.0 (fold into Site Core 1.4.0).
   Mobile layout fixes, count-up support, fallbacks for browsers without dvh units, accessibility, page speed,
   the footer row height and the sticky header. */

/* About: keep digit widths steady while the stats count up (fixes.js). */
.jj-stat-value .elementor-heading-title{font-variant-numeric:tabular-nums}

/* Portfolio intro on phones: normal flow instead of fixed positions, so the heading, the description,
   the four filter chips and the PORTFOLIO watermark never overlap (narrow 360px phones and longer text included).
   :not(#jj) only raises specificity above portfolio-qa.css. */
@media(max-width:767px){
 html:root body.elementor-page-109 .elementor-109 .jj-portfolio-intro:not(#jj){height:auto!important;min-height:0!important;display:flex!important;flex-direction:column;align-items:stretch;gap:0!important;padding:44px 20px 88px!important}
 html:root body.elementor-page-109 .elementor-109 .jj-portfolio-intro:not(#jj)>.elementor-widget:not(.jj-portfolio-watermark){position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;max-width:100%!important}
 html:root body.elementor-page-109 .elementor-109 .jj-portfolio-intro:not(#jj)>.jj-portfolio-title{margin-top:18px!important}
 html:root body.elementor-page-109 .elementor-109 .jj-portfolio-intro:not(#jj)>.jj-portfolio-description{margin-top:23px!important}
 html:root body.elementor-page-109 .elementor-109 .jj-portfolio-intro:not(#jj)>.jj-filter{margin-top:22px!important}
 html:root body.elementor-page-109 .elementor-109 .jj-portfolio-intro:not(#jj)>.jj-portfolio-watermark{top:auto!important;bottom:14px!important;left:0!important}
}
/* Portfolio intro on tablets (768–1100px): the four-line description touched the chip row; move the chips down a little. */
@media(min-width:768px) and (max-width:1100px){
 html:root body.elementor-page-109 .elementor-109 .jj-portfolio-intro:not(#jj)>.jj-filter{top:338px!important}
}

/* Browsers without dvh (older Android WebView / in-app browsers) drop every dvh value, which left the
   product popup as tall as its content with the footer button cut off. Size from the viewport instead. */
@supports not (height:100dvh){
 .jj-quote-dialog{height:min(832px,calc(100vh - 48px))}
 .jj-quote-dialog.is-contact{height:min(875px,calc(100vh - 48px))}
 .jj-quote-dialog.is-success{height:min(600px,calc(100vh - 48px))}
 .jj-quote-dialog[data-rfq-stage="added"]{height:min(832px,calc(100vh - 48px))}
 .jj-quote-dialog[data-rfq-stage="cart"],.jj-quote-dialog[data-rfq-stage="contact"]{height:min(880px,calc(100vh - 48px))}
 .jj-quote-dialog[data-rfq-stage="success"]{height:min(660px,calc(100vh - 48px))}
 .jj-image-dialog{height:100%}
 .jj-viewer-frame.has-crop{width:min(80vw,calc((100vh - 112px)*1.142857))}
 html:root body.elementor-page .jj-project-dialog{max-height:90vh}
 @media(max-width:767px){
  .jj-quote-dialog,.jj-quote-dialog.is-contact,.jj-quote-dialog.is-success,.jj-quote-dialog[data-rfq-stage]{top:0;bottom:0;height:auto;max-height:none}
 }
}

/* Project popup on phones: the sticky × floats over the text while reading; keep the title clear of it (1.2.0). */
@media(max-width:767px){
 html:root body.elementor-page .jj-project-dialog .jj-project-preview-content>h2{padding-right:40px}
}

/* Header TH | EN switcher: links instead of the "coming soon" button once English exists (1.2.0). */
html:root body.elementor-page .elementor .jj-language a{font-size:13px;line-height:36px;padding:0 14px;border-radius:100px;color:var(--jj-muted);text-decoration:none;display:inline-block;transition:background-color .2s,color .2s}
html:root body.elementor-page .elementor .jj-language a:hover,html:root body.elementor-page .elementor .jj-language a:focus-visible{background:rgba(20,26,33,.07);color:var(--jj-ink)}
/* English product popup: the English name is already the title. */
html[lang^="en"] .jj-quote-dialog .jj-mobile-product-en{display:none}
/* English product cards: the second line repeats the English name (1.2.2). */
html[lang^="en"] .jj-product-card .jj-card-subtitle{display:none}
/* English home hero on phones: longer words need the height to follow the text (1.2.2). */
@media(max-width:767px){
 html[lang^="en"]:root body.elementor-page .elementor .jj-home-hero-title{height:auto}
 html[lang^="en"]:root body.elementor-page .elementor .jj-home-hero-title .elementor-heading-title{font-size:min(28px,7.2vw);line-height:1.2}
}

/* Accessibility (1.2.5) ------------------------------------------------------------------------------------------- */
/* <main id="content"> (a11y.php) is the skip-link target; no focus ring around the whole page when it is used. */
.jj-main{display:block}
.jj-main:focus{outline:0}
/* Text contrast 4.5:1 (WCAG AA), same hues only darker, and only where the text was too light.
   Small blue labels on the light grey sections: #1B73DD (4.2:1) → #196CD0 (4.65:1). */
.jj-hs-micro-label .elementor-heading-title,
.elementor-element-6bcc0aa .elementor-heading-title,.elementor-element-8bd2f72 .elementor-heading-title,
.elementor-element-81c808b .elementor-heading-title,.elementor-element-8f59382 .elementor-heading-title,
.elementor-element-ae8c426 .elementor-heading-title,.elementor-element-6c2c05b .elementor-heading-title,
.elementor-element-487d2c3 .elementor-heading-title,.elementor-element-520b642 .elementor-heading-title,
.elementor-element-0d12a97 .elementor-heading-title{color:#196cd0!important}
/* Grey captions #8A939D / #87929E (2.8–3.1:1) → #666F79 (4.6:1 on grey, 5.1:1 on white): client names and label,
   contact card labels, form note, breadcrumb, item count, footer copyright. */
.jj-hs-clients-label .elementor-heading-title,.jj-hs-client-name .elementor-heading-title,
.jj-copyright .elementor-heading-title,.jj-form-note,
.elementor-element-4b3009f .elementor-heading-title,.elementor-element-fc0aad3 .elementor-heading-title,
.elementor-element-25d43ee .elementor-heading-title,.elementor-element-b82d75a .elementor-heading-title,
.elementor-element-e0969d8 .elementor-heading-title{color:#666f79!important}
/* Client strip, second line under each client (#C9D0D7, 1.5:1) → #6B7480 (4.7:1); the strip stays as designed. */
.jj-hs-client-sub .elementor-heading-title{color:#6b7480!important}
/* Home call-to-action: the gradient is a lazy-loaded background (added when the section nears the screen); until
   then the white text sat on the page grey. A matching solid navy underneath. */
html:root body.elementor-page .elementor .jj-hs-cta{background-color:#12233a}
/* Phone numbers stacked on two lines: each link at least 24px tall (touch target). */
html:root body .elementor a.jj-phone-line{padding-block:2px}

/* Page speed (1.2.6) ---------------------------------------------------------------------------------------------- */
/* Phones: the frosted-glass blur behind the header pills, card captions, hero dots and About cards is drawn again on
   every frame and is slow on phones (and it holds up the first paint in PageSpeed's phone test). On phones these
   keep their tinted backgrounds (a little more solid where text sits on photos) without the blur. Desktop unchanged. */
@media (max-width:767px){
 html:root body .jj-header-logo,html:root body .jj-nav,html:root body .jj-phone-pill,html:root body .jj-language,
 html:root body .jj-card-caption,html:root body .jj-category-caption,html:root body .jj-project-group,
 html:root body .jj-about-stat,html:root body .jj-team-caption,html:root body .jj-hs-factory-caption,
 html:root body .jj-hs-cta-contact,html:root body .jj-hero-dots{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html:root body .jj-about-hero::before{filter:none!important}
 html:root body.elementor-page .elementor .jj-header-logo,html:root body.elementor-page .elementor .jj-nav,
 html:root body.elementor-page .elementor .jj-phone-pill,html:root body.elementor-page .elementor .jj-language{background:rgba(255,255,255,.95)}
 html:root body.elementor-page .elementor .jj-card-caption{background:linear-gradient(145deg,rgba(14,20,27,.86),rgba(14,20,27,.64))}
 html:root body.elementor-page .elementor .jj-category-caption{background:linear-gradient(170deg,rgba(14,20,27,.86),rgba(14,20,27,.64))}
 html:root body.elementor-page .elementor .jj-project-group{background:rgba(14,20,27,.5)}
 html:root body.elementor-page .elementor .jj-hero-dots{background:rgba(14,20,27,.5)}
}
/* Contact: the map behind the location card loads when the card nears the screen (fixes.js); nothing shows until then. */
.jj-map-bg__frame:not([src]){visibility:hidden}
/* Hero slide dots (1.2.7, 1.2.8): on tablets and desktops the dots stand in a column 20px apart centre to centre;
   16px gaps make it 26px, so each small dot keeps a 24px touch area of its own (WCAG 2.5.8 target size / spacing).
   Phones keep their own row (30px gaps, already far enough apart). The dots themselves are unchanged. */
@media (min-width:768px){html:root body.elementor-page .elementor .jj-hero-dots{gap:16px}}

/* Products sidebar, "ไม่เจอสินค้าที่ต้องการ?" box (1.3.4): the "สอบถามเพิ่มเติม →" label sat 4px high (fixed 44px height
   with the text at the top of the box) and 4px right of centre (padding 20px left, 12px right, products-qa.css).
   Centre it both ways; the button keeps its size. */
html:root body.elementor-page .elementor-107 .jj-catalog-help a.elementor-button{display:inline-flex!important;align-items:center;justify-content:center;padding:0 16px!important}

/* Home hero (1.3.5): in the design the hero card starts 12px below the header (about 122px from the top, 24px under the
   logo pill); the build had it touching the header (13px under the pill). Same 12px as the space under the hero. */
html:root body.elementor-page .elementor .elementor-element.jj-home-hero-outer{padding-top:12px!important}

/* Footer (1.3.0): Site Core fixes the desktop footer row at the Figma height (238.695px). Longer text (the English
   pages, or narrower desktop windows) wraps onto more lines, so the social icons slid down over the divider line.
   The row now grows with its content and is never shorter than the design. */
@media (min-width:1101px){html:root body.elementor-page .elementor .elementor-element.jj-footer-columns{height:auto;min-height:238.695px}}

/* Sticky header (1.3.0) ------------------------------------------------------------------------------------------- */
/* The header stays at the top of the screen. At the top of a page it looks exactly as designed. Once the page is
   scrolled (fixes.js adds .jj-stuck) the separate pills melt into one floating frosted-glass capsule. On computers it
   stays on screen; on phones and tablets it slides away while the visitor reads down (.jj-hidden) and glides back as
   soon as they scroll up (1.3.1). Phones also get the quote button. The header moves with transform only, so the
   page never shifts. */
html:root{scroll-padding-top:calc(var(--jj-ab-h,var(--wp-admin--admin-bar--height,0px)) + 80px)}
/* Header height: kept at the design's 110px (pills 27px from the top). 1.3.4 tried 92px; measured against the design
   artifact (1.3.5) the pills sit 26.5–27px from the top and the home hero starts about 122px down, so 92px was too tight.
   The band only looked too tall to logged-in editors because of the transparent second admin-bar row (fixed below). */
/* Logged-in editors: the WordPress admin bar can wrap onto two rows; fixes.js measures it (--jj-admin-offset). */
html:root body:not(.elementor-editor-active) header.elementor-location-header{position:sticky;top:var(--jj-admin-offset,var(--wp-admin--admin-bar--height,0px));z-index:100;
 --jj-cap-top:28px;--jj-cap-h:68px;--jj-cap-x:12px;--jj-lift:-18px;
 transition:transform .6s cubic-bezier(.22,1,.36,1)}
/* Two-row admin bar (1.3.4, logged-in only; fixes.js adds .jj-ab-tall with --jj-ab-h / --jj-ab-x): the wrapped second
   row had no background (white text on the light page, looking like an empty band above the header) and the header was
   pushed down over the top of the page. Paint the second row dark like the first and start the page below it. */
html.jj-ab-tall{margin-top:var(--jj-ab-h)!important}
html.jj-ab-tall #wpadminbar{box-shadow:0 calc(var(--jj-ab-x) / 2) 0 calc(var(--jj-ab-x) / 2) #1d2327}
html:root body:not(.elementor-editor-active) header.elementor-location-header.jj-stuck{transform:translateY(var(--jj-lift))}
html:root body:not(.elementor-editor-active) header.elementor-location-header.jj-hidden{transform:translateY(-140%);transition-duration:.42s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
@media (max-width:600px){html:root body.admin-bar:not(.elementor-editor-active) header.elementor-location-header{top:0}}
/* The capsule: a layer behind the header content that fades and settles in. width:auto (1.3.2): Elementor's own
   .e-con::before rule sets width:100%, which made the capsule full width, so it started 12px in and ran 12px past the
   right edge of the screen; with width:auto the left and right insets decide the width and both sides are equal. */
html:root body.elementor-page header.elementor-location-header .jj-header::before{content:"";position:absolute;z-index:-1;pointer-events:none;
 top:var(--jj-cap-top);height:var(--jj-cap-h);left:var(--jj-cap-x);right:var(--jj-cap-x);width:auto;max-width:none;border-radius:999px;
 background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.72);
 box-shadow:0 0 0 1px rgba(20,26,33,.05),0 16px 40px -18px rgba(20,26,33,.34),0 4px 12px -6px rgba(20,26,33,.12),inset 0 1px 0 rgba(255,255,255,.9);
 opacity:0;transform:scale(.965);transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1)}
html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-header::before{opacity:1;transform:none;
 -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
/* The pills lose their own white backgrounds inside the capsule (the language switch keeps a light tint). */
html:root body.elementor-page header.elementor-location-header .jj-header{transition:padding .6s cubic-bezier(.22,1,.36,1)}
html:root body.elementor-page header.elementor-location-header :is(.jj-header-logo,.jj-nav,.jj-phone-pill,.jj-language,.jj-menu-toggle){
 transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease,-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease,flex-basis .6s cubic-bezier(.22,1,.36,1),width .6s cubic-bezier(.22,1,.36,1)}
html:root body.elementor-page header.elementor-location-header.jj-stuck :is(.jj-header-logo,.jj-nav,.jj-phone-pill){background-color:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-language{background-color:rgba(20,26,33,.05);border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-menu-toggle{background-color:rgba(20,26,33,.06);border-color:transparent}
/* The logo pill narrows to exactly the logo, so the logo slides to the capsule's edge and the space inside the
   capsule is the same on the left and on the right (1.3.1). 96px = the 94px logo + the pill's 1px borders (1.3.4: at
   94px the logo was squeezed to 92px). */
html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-header-logo{flex-basis:96px!important;width:96px!important}
/* Logo centred in its pill (1.3.4, all states): its link was an inline box sitting on the text baseline, which added
   9.5px under the image and lifted the logo about 5px above the middle of the pill (1.3.1 nudged it only in the capsule). */
html:root body.elementor-page .elementor .jj-header-logo .elementor-widget-image a{display:block}
/* Mobile menu while stuck: opens under the capsule without pushing the page down. */
html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-mobile-menu.is-open{position:absolute;top:calc(var(--jj-cap-top) + var(--jj-cap-h) + 8px);left:0;right:0;margin:0 auto;box-shadow:0 20px 44px -18px rgba(20,26,33,.3)}
@media (max-width:1100px){
 html:root body:not(.elementor-editor-active) header.elementor-location-header{--jj-cap-x:10px}
 html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-header{padding-left:24px!important;padding-right:24px!important}
}
@media (max-width:767px){
 html:root body:not(.elementor-editor-active) header.elementor-location-header{--jj-cap-top:32px;--jj-cap-h:60px;--jj-cap-x:6px;--jj-lift:-24px}
 html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-header{padding-left:20px!important;padding-right:20px!important}
 html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-header::before{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px)}
 /* Phones: the quote button joins the capsule. */
 html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-header-quote{display:block;animation:jj-hdr-pop .55s cubic-bezier(.22,1,.36,1) both}
 html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-header-quote .elementor-button{height:40px;padding:0 16px;font-size:14px;box-shadow:none}
}
@media (max-width:359px){html:root body.elementor-page header.elementor-location-header.jj-stuck .jj-header-quote .elementor-button{padding:0 12px;font-size:13px}}
@keyframes jj-hdr-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 html:root body header.elementor-location-header,html:root body header.elementor-location-header *,html:root body header.elementor-location-header .jj-header::before{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{html:root body header.elementor-location-header{position:static;transform:none}}