/* The native mobile header and two-level drawer replace the desktop GNB below 992px. */
@media (max-width: 991.98px) {
  .ss-header .ss-util-btn,
  .ss-header .ss-logo {
    min-height: 2.75rem;
  }
  .ss-header .ss-logo {
    display: flex;
    align-items: center;
  }
  .ss-header .ss-util-btn {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
  }
  .ss-header .ss-header-bar {
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.5rem, env(safe-area-inset-right));
  }
  .ss-header .ss-bar-list { padding: 0; }
  .ss-header .ss-bar-item {
    inset-inline: max(.875rem, env(safe-area-inset-left)) max(3.25rem, env(safe-area-inset-right));
  }
  .ss-header .ss-bar-a {
    display: -webkit-box;
    max-width: 100%;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    word-break: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .ss-header .ss-bar-ctl { right: max(.25rem, env(safe-area-inset-right)); }
  .ss-header .ss-bar-x { width: 2.75rem; }

  .ss-header .ss-country-list {
    right: max(.5rem, env(safe-area-inset-right));
    width: max-content;
    min-width: 11rem;
    max-width: calc(100vw - 1rem);
    max-height: min(22rem, calc(100dvh - var(--ss-header-h) - var(--ss-bar-h, 0px) - 1rem));
    padding: .25rem .4rem;
    border: 1px solid #e4e1e5;
    border-radius: .6rem;
    background: #fff;
    color: #151515;
    box-shadow: 0 .3rem 1rem rgb(0 0 0 / .12);
  }
  .ss-header .ss-country-list a[data-i18n-language] {
    min-height: 2.75rem;
    height: auto;
    padding: .55rem .65rem;
    font-size: .94rem;
    line-height: 1.3;
    gap: .65rem;
  }
  /* Each authored link already carries the language's native name as its accessible label. */
  .ss-header .ss-country-list a[data-i18n-language][aria-label] > span:not(.ss-country-emoji) { display: none; }
  .ss-header .ss-country-list a[data-i18n-language][aria-label]::after { content: attr(aria-label); }
  .ss-header .ss-util-btn:focus-visible,
  .ss-header .ss-country-list a:focus-visible,
  .ss-drawer :is(button, a):focus-visible {
    outline: 2px solid #342c39;
    outline-offset: -2px;
  }

  .ss-drawer .ss-drawer-view {
    padding: .25rem max(1.25rem, env(safe-area-inset-right))
             max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  }
  .ss-drawer :is(.ss-drawer-item, .ss-drawer-main-link) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    min-height: 2.875rem;
    padding: .6rem 0;
    font-size: 1.125rem;
    line-height: 1.4;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .ss-drawer .ss-drawer-item::after {
    content: "";
    flex: none;
    width: .9rem;
    height: .9rem;
    background-color: #706c71;
    -webkit-mask: url("/assets/icons/ico-arrow-right.svg") center / contain no-repeat;
    mask: url("/assets/icons/ico-arrow-right.svg") center / contain no-repeat;
  }
  .ss-drawer-top {
    padding-top: env(safe-area-inset-top);
    height: calc(3rem + env(safe-area-inset-top));
  }
}
@media (max-width: 767.98px) {
  .ss-footer-sns[data-social-links] a {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  /* Keep the two existing contact channels clear of the longer text at the right edge. */
  .ss-quick {
    right: max(.6rem, env(safe-area-inset-right));
    bottom: calc(var(--ss-consult-h) + .5rem);
  }
  .ss-quick ul { flex-direction: row; align-items: flex-end; gap: .3rem; }
  .ss-quick li.is-mo a {
    width: auto;
    min-width: 2.75rem;
    height: 2.75rem;
    padding-inline: .4rem;
    gap: .1rem;
    font-size: .625rem;
    line-height: 1.1;
  }
}

@media (max-width: 767.98px) {
  /* When the mobile launcher is ready, both shortcuts live inside its reserved tray. */
  #ssConsult[data-mobile-consult] > .ss-quick {
    position: static;
    inset: auto;
    z-index: auto;
    flex: 0 0 auto;
    margin: 0;
  }
  #ssConsult[data-mobile-consult] > .ss-quick ul {
    align-items: center;
    gap: 0;
    border: 1px solid #d8d8d8;
    border-radius: .5rem;
    background: #fff;
  }
  #ssConsult[data-mobile-consult] > .ss-quick li.is-mo + li.is-mo {
    position: relative;
  }
  #ssConsult[data-mobile-consult] > .ss-quick li.is-mo + li.is-mo::before {
    content: "";
    position: absolute;
    inset: .6rem auto .6rem 0;
    border-inline-start: 1px solid #e6e6e6;
    pointer-events: none;
  }
  #ssConsult[data-mobile-consult] > .ss-quick li.is-mo a {
    width: max-content;
    min-width: 3rem;
    height: calc(3rem - 2px);
    padding: 0 clamp(.45rem, 2vw, .85rem);
    gap: .15rem;
    border-radius: .45rem;
    background: transparent;
    box-shadow: none;
    color: #222;
    font-size: .75rem;
    font-weight: 550;
    line-height: 1.2;
    white-space: nowrap;
  }
  #ssConsult > .ss-quick a[data-social-channel="whatsapp"] svg { color: #087d4b; }
  #ssConsult > .ss-quick a[data-social-channel="line"] svg { color: #087e34; }
  #ssConsult > .ss-quick a[data-social-channel="wechat"] svg { color: #087e49; }
  #ssConsult > .ss-quick a[data-social-channel="facebook"] svg { color: #0866ff; }
  #ssConsult > .ss-quick a[href^="tel:"] img { filter: brightness(0); }
  #ssConsult[data-mobile-consult] > .ss-quick li.is-mo a:focus-visible {
    outline: 2px solid #222;
    outline-offset: -2px;
  }
  #ssConsult[data-mobile-consult] > .ss-quick li.is-mo a:active {
    background: #f3f3f3;
  }
}