/* BASAK_PATCH_069 — consolidated mobile-only public navigation/RTL/scroll stability */

.mobile-nav-actions { display: none; }

@media (max-width: 1100px) {
  :root { --basak-mobile-control: 34px; }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Keep the viewport coordinate system LTR on mobile. Dari content remains RTL below. */
  html[dir="rtl"] body { direction: ltr !important; }
  html[dir="rtl"] main,
  html[dir="rtl"] .site-footer { direction: rtl !important; }

  body { padding-top: 74px !important; }

  html.public-menu-open,
  html.public-menu-open body {
    overscroll-behavior: none !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.mobile-nav-open > .public-mobile-drawer { touch-action: pan-y !important; }

  .site-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    z-index: 9100 !important;
    background: rgba(247,245,240,.99) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header .header-row {
    direction: ltr !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    align-items: center !important;
    gap: 9px !important;
  }

  /* Explicit placement prevents RTL auto-placement from throwing the logo off-screen. */
  .site-header .brand-lockup {
    grid-column: 1 !important;
    justify-self: start !important;
    direction: ltr !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
  }

  .mobile-header-languages {
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    direction: ltr !important;
    white-space: nowrap !important;
  }

  .menu-toggle { grid-column: 3 !important; }

  .mobile-header-languages a,
  .menu-toggle {
    box-sizing: border-box !important;
    inline-size: var(--basak-mobile-control) !important;
    min-inline-size: var(--basak-mobile-control) !important;
    max-inline-size: var(--basak-mobile-control) !important;
    block-size: var(--basak-mobile-control) !important;
    min-block-size: var(--basak-mobile-control) !important;
    max-block-size: var(--basak-mobile-control) !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: none !important;
  }

  .mobile-header-languages a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ink) !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .mobile-header-languages a.active {
    color: var(--orange) !important;
    border-color: var(--orange) !important;
    background: rgba(217,107,43,.07) !important;
  }

  /* Static, cheap three-dot control. No morph/rotation/scale animation. */
  .menu-toggle,
  .menu-toggle:hover,
  .menu-toggle:active,
  .menu-toggle[aria-expanded="true"] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: var(--ink) !important;
    transform: none !important;
    transition: border-color 80ms linear, color 80ms linear, background-color 80ms linear !important;
    will-change: auto !important;
  }

  .menu-toggle[aria-expanded="true"] {
    color: var(--orange) !important;
    border-color: var(--orange) !important;
    background: rgba(217,107,43,.07) !important;
  }

  .menu-toggle span,
  .menu-toggle span:nth-child(1),
  .menu-toggle span:nth-child(2),
  .menu-toggle span:nth-child(3),
  .menu-toggle[aria-expanded="true"] span:nth-child(1),
  .menu-toggle[aria-expanded="true"] span:nth-child(2),
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    position: static !important;
    display: block !important;
    width: 4px !important;
    min-width: 4px !important;
    height: 4px !important;
    min-height: 4px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: currentColor !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .site-header .header-actions { display: none !important; }

  /* site.js mounts this as a direct body child on mobile only. */
  body > .public-mobile-drawer,
  html[dir="rtl"] body > .public-mobile-drawer {
    display: flex !important;
    position: fixed !important;
    z-index: 9090 !important;
    top: 82px !important;
    right: 10px !important;
    left: auto !important;
    width: min(356px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    max-height: calc(100dvh - 94px) !important;
    margin: 0 !important;
    padding: 17px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    direction: ltr !important;
    text-align: left !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(247,245,240,.995) !important;
    border: 1px solid rgba(23,23,23,.11) !important;
    border-radius: 22px 4px 22px 22px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.20) !important;
    transform: translate3d(12px,0,0) !important;
    transform-origin: top right !important;
    transition: transform 120ms ease-out, opacity 100ms linear, visibility 0s linear 120ms !important;
    contain: layout paint !important;
  }

  body > .public-mobile-drawer.open,
  html[dir="rtl"] body > .public-mobile-drawer.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) !important;
    transition: transform 120ms ease-out, opacity 100ms linear, visibility 0s !important;
  }

  body > .public-mobile-drawer > a {
    width: 100% !important;
    min-height: 50px !important;
    padding: 11px 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  body > .public-mobile-drawer > a::after { display: none !important; }

  html[dir="rtl"] body > .public-mobile-drawer > a {
    direction: rtl !important;
    text-align: right !important;
    justify-content: flex-start !important;
  }

  .mobile-nav-inline-login,
  .mobile-nav-footer,
  .mobile-nav-theme-row { display: none !important; }

  body > .public-mobile-drawer .mobile-nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin-top: 13px !important;
    padding-top: 13px !important;
    border-top: 1px solid var(--line) !important;
    direction: ltr !important;
  }

  body > .public-mobile-drawer .mobile-nav-login-compact {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-height: 46px !important;
    margin: 0 !important;
  }

  body > .public-mobile-drawer .mobile-public-theme-toggle {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.88) !important;
    color: var(--ink) !important;
  }

  body > .public-mobile-backdrop {
    display: block !important;
    position: fixed !important;
    z-index: 9080 !important;
    inset: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(8,8,8,.46) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity 100ms linear, visibility 0s linear 100ms !important;
    touch-action: none !important;
  }

  body.mobile-nav-open > .public-mobile-backdrop {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 100ms linear, visibility 0s !important;
  }

  /* Translated mobile content must never wait for JS reveal to become visible. */
  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Final public mobile overflow/grid safety net. */
  main,
  main section,
  main .container,
  .page-hero,
  .hero,
  .product-card,
  .category-card,
  .editorial-grid,
  .certificate-grid,
  .factory-grid,
  .export-grid,
  .two-col,
  .contact-grid,
  .contact-hero-grid,
  .product-detail-grid,
  .branch-map-grid,
  .branch-map-card,
  .contact-info-table,
  .contact-form {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  main { overflow-x: hidden !important; }
  main img,
  main iframe,
  main video,
  main svg { max-width: 100% !important; }

  .product-card h3,
  .product-info h1,
  .page-hero h1,
  .hero h1,
  .contact-info-row a,
  .branch-map-info p,
  .footer-grid a,
  .footer-grid span { overflow-wrap: anywhere !important; }

  html[data-theme="dark"] .site-header { background: rgba(16,16,16,.99) !important; }

  html[data-theme="dark"] .mobile-header-languages a,
  html[data-theme="dark"] .menu-toggle,
  html[data-theme="dark"] body > .public-mobile-drawer .mobile-public-theme-toggle {
    background: rgba(255,255,255,.045) !important;
    color: #f5f1ea !important;
    border-color: rgba(255,255,255,.12) !important;
  }

  html[data-theme="dark"] .mobile-header-languages a.active,
  html[data-theme="dark"] .menu-toggle[aria-expanded="true"] {
    color: var(--orange) !important;
    border-color: var(--orange) !important;
    background: rgba(217,107,43,.10) !important;
  }

  html[data-theme="dark"] body > .public-mobile-drawer {
    background: rgba(16,16,16,.995) !important;
    border-color: rgba(255,255,255,.10) !important;
  }
}

@media (max-width: 760px) {
  body { padding-top: 68px !important; }

  .site-header .header-row {
    height: 68px !important;
    min-height: 68px !important;
    gap: 7px !important;
  }

  body > .public-mobile-drawer,
  html[dir="rtl"] body > .public-mobile-drawer {
    top: 76px !important;
    right: 8px !important;
    width: min(344px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 86px) !important;
    padding: 15px !important;
    border-radius: 20px 4px 20px 20px !important;
  }

  .branch-map-grid,
  .category-grid,
  .product-grid,
  .product-grid-wide,
  .factory-grid,
  .export-grid,
  .two-col,
  .contact-grid,
  .contact-hero-grid,
  .product-detail-grid,
  .editorial-grid,
  .certificate-grid,
  .form-two { grid-template-columns: minmax(0,1fr) !important; }

  .branch-map-card .map-frame,
  .branch-map-card .map-frame iframe {
    min-height: 270px !important;
    height: 270px !important;
  }

  .contact-info-row,
  html[dir="rtl"] .contact-info-row {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 6px !important;
  }

  html[dir="rtl"] .contact-info-label,
  html[dir="rtl"] .contact-info-row strong,
  html[dir="rtl"] .contact-info-row a,
  html[dir="rtl"] .section-heading,
  html[dir="rtl"] .product-info,
  html[dir="rtl"] .factory-copy { text-align: right !important; }
}

@media (max-width: 430px) {
  :root { --basak-mobile-control: 30px; }

  .site-header .container { width: calc(100% - 14px) !important; }
  .site-header .header-row { gap: 5px !important; }

  .site-header .brand-lockup .brand-symbol {
    width: 37px !important;
    height: 37px !important;
    flex-basis: 37px !important;
  }

  .site-header .wordmark-copy > span {
    max-width: 108px !important;
    font-size: 15px !important;
  }

  .site-header .wordmark-copy small {
    font-size: 5.5px !important;
    letter-spacing: .26em !important;
  }

  .mobile-header-languages { gap: 4px !important; }
  .mobile-header-languages a { font-size: 8.8px !important; }

  .menu-toggle span,
  .menu-toggle span:nth-child(1),
  .menu-toggle span:nth-child(2),
  .menu-toggle span:nth-child(3) {
    width: 3.6px !important;
    min-width: 3.6px !important;
    height: 3.6px !important;
    min-height: 3.6px !important;
  }

  body > .public-mobile-drawer,
  html[dir="rtl"] body > .public-mobile-drawer {
    right: 7px !important;
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }
}

@media (max-width: 360px) {
  :root { --basak-mobile-control: 28px; }
  .site-header .wordmark-copy > span { font-size: 14px !important; max-width: 92px !important; }
  .site-header .wordmark-copy small { display: none !important; }
  .mobile-header-languages a { font-size: 8.2px !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1100px) {
  .menu-toggle,
  body > .public-mobile-drawer,
  body > .public-mobile-backdrop { transition: none !important; }
}