/* Sirisup v1.6.16 — Mobile header brand & menu typography balance.
 * Scoped to managed pages and phones. Preserves v1.6.15 full-width dropdown,
 * desktop header, existing Elementor widgets and all six page contents.
 */
@media (max-width:767px) {
  body.ss-bionic-site .ss-header-section .ss-nav {
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    min-height:76px!important;
    padding:9px 12px!important;
  }
  /* Legacy [sirisup_header]: logo left, Thai company name to its right.
     English subheading may wrap naturally under the Thai company name. */
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > a.ss-brand {
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    max-width:calc(100% - 58px)!important;
    gap:9px!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > a.ss-brand > img {
    flex:0 0 47px!important;
    width:47px!important;
    height:47px!important;
    min-width:47px!important;
    object-fit:contain!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) .ss-brand-words {
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    font-size:clamp(12px, 3.8vw, 16px)!important;
    font-weight:700!important;
    line-height:1.3!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    text-align:left!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) .ss-brand-words small {
    display:block!important;
    margin-top:2px!important;
    font-size:clamp(7px,1.95vw,8.5px)!important;
    line-height:1.3!important;
    letter-spacing:.005em!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
  }

  /* Elementor header: remove the legacy negative margin causing the subtitle
     to shift and use a proper two-column grid without hardcoded text. */
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-editable {
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:calc(100% - 58px)!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-section,
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-section > .elementor-container,
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-brand-col {
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-brand-col {
    display:block!important;
    flex:1 1 auto!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-brand-col > .elementor-widget-wrap {
    display:grid!important;
    grid-template-columns:47px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:'logo title' 'logo subtitle'!important;
    align-items:center!important;
    align-content:center!important;
    justify-items:start!important;
    gap:2px 9px!important;
    padding:0!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-brand-col .elementor-widget-image {
    grid-area:logo!important;
    width:47px!important;
    margin:0!important;
    align-self:center!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-logo img {
    display:block!important;
    width:47px!important;
    height:47px!important;
    max-width:47px!important;
    object-fit:contain!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-brand-col .elementor-widget-heading {
    grid-area:title!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    align-self:end!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-brand .elementor-heading-title {
    font-size:clamp(12px,3.8vw,16px)!important;
    line-height:1.3!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    text-align:left!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-brand-col .elementor-widget-text-editor {
    grid-area:subtitle!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    align-self:start!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-en p {
    margin:0!important;
    font-size:clamp(7px,1.95vw,8.5px)!important;
    font-weight:500!important;
    line-height:1.3!important;
    letter-spacing:.005em!important;
    white-space:normal!important;
    text-align:left!important;
  }
  /* One consistent, accessible hamburger size across both header renderers. */
  body.ss-bionic-site .ss-header-section .ss-nav > button.ss-menu-toggle {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 48px!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    padding:0!important;
    margin:0 0 0 auto!important;
    font-size:24px!important;
    line-height:1!important;
    border-radius:9px!important;
  }

  /* Balanced 1-column mobile dropdown; keep v1.6.15 geometry (viewport-wide). */
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > ul.ss-menu,
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-menu {
    padding:10px 16px 14px!important;
    border-radius:0 0 24px 24px!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > ul.ss-menu > li > a,
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-menu .elementor-button {
    min-height:49px!important;
    padding:10px 12px!important;
    font-family:'Prompt',Tahoma,sans-serif!important;
    font-size:16px!important;
    font-weight:650!important;
    line-height:1.35!important;
    text-align:center!important;
    justify-content:center!important;
    white-space:normal!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > ul.ss-menu > li:last-child > a,
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-menu .ss167-menu-contact .elementor-button {
    min-height:56px!important;
    margin-top:10px!important;
    padding:12px 16px!important;
    font-size:17px!important;
    font-weight:700!important;
  }
}
@media (max-width:359px) {
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > a.ss-brand > img,
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-logo img {
    width:42px!important;height:42px!important;min-width:42px!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-brand-col > .elementor-widget-wrap {
    grid-template-columns:42px minmax(0,1fr)!important;
    column-gap:7px!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-brand-col .elementor-widget-image {width:42px!important;}
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > a.ss-brand {gap:7px!important;}
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > ul.ss-menu > li > a,
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav .ss167-header-menu .elementor-button {font-size:15px!important;min-height:46px!important;}
}