/* SUNNY mobile menu — black editorial 2×2 grid, Nov 2026.
   Uses Enfold's original mobile navigation anchors and native close action. */
@media (max-width:767px) {
  body#top .av-burger-overlay.sunny-menu-ready {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    color: #f7f5f1 !important;
    font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  body#top .av-burger-overlay.sunny-menu-ready .av-burger-overlay-bg {
    background: #111 !important;
    opacity: 1 !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready .av-burger-overlay-scroll {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: #111 !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready .av-burger-overlay-inner {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0,44%) minmax(0,56%);
    grid-template-rows: 64px minmax(360px,auto) minmax(175px,auto) minmax(176px,1fr);
    grid-template-areas: "bar bar" "brand links" "social address" "photo photo";
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: #111 !important;
    color: #f7f5f1 !important;
    align-items: stretch;
    align-content: start;
    box-sizing: border-box;
    text-align: left !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready .av-burger-overlay-inner *,
  body#top .av-burger-overlay.sunny-menu-ready .av-burger-overlay-inner *::before,
  body#top .av-burger-overlay.sunny-menu-ready .av-burger-overlay-inner *::after {
    box-sizing: border-box;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-topbar {
    grid-area: bar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 10px 20px;
    background: #101010 !important;
    border-bottom: 1px solid #56514f;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-top-label {
    color: #b3aba6 !important;
    font-size: 11px !important;
    font-weight: 550;
    letter-spacing: .16em;
    line-height: 1.3;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-close-label {
    color: #eae7e2 !important;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .05em;
    margin-right: 39px;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-brand-panel,
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-social-panel {
    border-right: 1px solid #56514f;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-brand-panel {
    grid-area: brand;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    min-height: 360px;
    padding: 25px 14px 28px 20px;
    background: #151515;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-logo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 30px;
    padding: 0 !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    color: #fff !important;
    font-size: 24px !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-logo img {
    display: block;
    width: 100% !important;
    max-width: 175px !important;
    height: auto !important;
    max-height: 58px !important;
    object-fit: contain;
    object-position: left center;
    filter: none !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-brand-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    width: 100%;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-meta {
    display: block;
    color: #d95c61 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .10em;
    font-weight: 650;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-meta::before {
    content: "●";
    color: #d62b38 !important;
    font-size: 7px;
    padding-right: 7px;
    vertical-align: 1px;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-brand-title {
    color: #fff !important;
    font-size: clamp(17px,5vw,22px);
    line-height: 1.37;
    font-weight: 600;
    letter-spacing: .02em;
    word-break: keep-all;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-brand-description {
    color: #cac4bf !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    padding: 0 !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul {
    grid-area: links;
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    padding: 19px 15px 19px 20px !important;
    margin: 0 !important;
    float: none !important;
    overflow: visible !important;
    background: #0e0e0e !important;
    list-style: none !important;
    text-align: left !important;
    border: 0 !important;
    vertical-align: top !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul > li {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    list-style: none !important;
    opacity: 1 !important;
    transform: none !important;
    border: 0 !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul > li > a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    color: #f7f5f1 !important;
    font-family: inherit !important;
    font-size: clamp(19px,5.5vw,24px) !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    letter-spacing: .01em !important;
    white-space: normal !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-indent: 0 !important;
    opacity: 1 !important;
    background: none !important;
    border: 0 !important;
    transition: color .2s ease;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul > li > a::before {
    content: "·";
    display: inline-block;
    flex: 0 0 11px;
    color: #e3313f !important;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-top: -4px;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul > li > a:hover,
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul > li > a:focus-visible {
    color: #ef7278 !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul .avia-menu-text {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: inherit !important;
    text-transform: none !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul > li > a .av-submenu-indicator {
    display: inline-block !important;
    margin-left: auto !important;
    color: #d63b44 !important;
    font-size: 13px !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul .sub-menu {
    position: static !important;
    width: 100% !important;
    padding: 4px 0 12px 14px !important;
    margin: 0 !important;
    list-style: none !important;
    background: #0e0e0e !important;
    border: none !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul .sub-menu > li {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul .sub-menu > li > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 9px 4px !important;
    margin: 0 !important;
    color: #cbc5c0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    border: 0 !important;
    background: none !important;
    text-decoration: none !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-social-panel,
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-address-panel {
    min-width: 0;
    min-height: 175px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 14px 24px 20px;
    border-top: 1px solid #56514f;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-social-panel {
    grid-area: social;
    background: #181818;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-address-panel {
    grid-area: address;
    background: #111;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: auto;
    gap: 9px;
    width: 100%;
  }
  body#top .av-burger-overlay.sunny-menu-ready a.sunny-menu-action {
    display: inline-flex !important;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    min-height: 24px;
    padding: 0 !important;
    margin: 0 !important;
    color: #f4f0ec !important;
    background: none !important;
    border: none !important;
    text-decoration: none !important;
    font-size: clamp(13px,4.2vw,17px) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-action-icon {
    display: inline-block;
    color: #e53440 !important;
    font-size: 18px !important;
    line-height: 1;
    flex: 0 0 auto;
    font-weight: 650;
  }
  body#top .av-burger-overlay.sunny-menu-ready a.sunny-menu-map {
    margin-top: auto !important;
    line-height: 1.55 !important;
    font-size: clamp(12px,3.6vw,14px) !important;
    white-space: pre-line !important;
    overflow-wrap: anywhere;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-photo-frame {
    grid-area: photo;
    display: flex;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 176px;
    padding: 14px 16px 16px;
    border-top: 1px solid #56514f;
    background: #111;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 156px;
    border: 1px solid #65605c;
    background:
      linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.20)),
      url("https://sunny168.com.tw/wp-content/uploads/2023/12/06c34e01-da39-4770-bbe8-d84774e54b9b_0.jpg") center 53% / cover no-repeat;
  }
  /* Native Enfold close X stays in place, with brand-red contrast. */
  body#top .av-burger-menu-main .av-hamburger.is-active .av-hamburger-inner,
  body#top .av-burger-menu-main .av-hamburger.is-active .av-hamburger-inner::before,
  body#top .av-burger-menu-main .av-hamburger.is-active .av-hamburger-inner::after {
    background-color: #e33844 !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready a:focus-visible {
    outline: 2px solid #eb5c65 !important;
    outline-offset: 3px;
  }
}
@media (max-width:360px) {
  body#top .av-burger-overlay.sunny-menu-ready .av-burger-overlay-inner {
    grid-template-columns: minmax(0,42%) minmax(0,58%);
    grid-template-rows: 62px minmax(360px,auto) minmax(175px,auto) minmax(162px,1fr);
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-brand-panel {
    padding: 22px 10px 24px 14px;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul {
    padding: 17px 9px 17px 12px !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready #av-burger-menu-ul > li > a {
    font-size: 19px !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-social-panel,
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-address-panel {
    padding: 18px 9px 21px 13px;
  }
  body#top .av-burger-overlay.sunny-menu-ready a.sunny-menu-map {font-size: 12px !important;}
  body#top .av-burger-overlay.sunny-menu-ready a.sunny-menu-action {font-size: 13px !important;}
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-photo-frame {padding: 12px 13px;}
}
@media (prefers-reduced-motion: reduce) {
  body#top .av-burger-overlay.sunny-menu-ready *,
  body#top .av-burger-overlay.sunny-menu-ready *::before,
  body#top .av-burger-overlay.sunny-menu-ready *::after {
    transition: none !important;
  }
}
/* Final visual QA: prevent emoji-style link arrows, align the address. */
@media (max-width:767px) {
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-action,
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-top-label {
    font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready .sunny-menu-action-icon {
    font-family: Arial, sans-serif !important;
    font-style: normal !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    color: #e23845 !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready a.sunny-menu-map {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding-right: 18px !important;
    font-size: 13px !important;
  }
  body#top .av-burger-overlay.sunny-menu-ready a.sunny-menu-map .sunny-menu-action-icon {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }
}