@media (max-width: 1100px) {
  .ksseo-mobile-offcanvas {
    --ksoc-row-height: 48px;
    --ksoc-touch-target: 44px;
    --ksoc-edge-control: 48px;
    --ksoc-icon-size: 16px;
    --ksoc-pad-x: 16px;
    --ksoc-text: #171311;
    --ksoc-muted-bg: #faf8f6;
    --ksoc-line: rgba(25, 20, 17, .08);
    --ksoc-focus: #9f7a5c;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    width: min(88vw, 380px);
    max-width: 380px;
    background: #fff;
    box-shadow: 0 0 38px rgba(20, 16, 13, .16);
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-overlay {
    background: rgba(18, 15, 13, .42);
    backdrop-filter: blur(2px);
  }

  /* Off-canvas header: logo + close control. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-header {
    min-height: 72px;
    padding: 12px var(--ksoc-pad-x);
    border-bottom: 1px solid var(--ksoc-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ksseo-offcanvas-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 1 auto;
    line-height: 0;
    text-decoration: none;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ksseo-offcanvas-logo img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 66px !important;
    max-height: 52px !important;
    object-fit: contain;
  }

  /* 44px minimum touch target; icon stays visually 16px. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
    width: var(--ksoc-touch-target);
    height: var(--ksoc-touch-target);
    min-width: var(--ksoc-touch-target);
    min-height: var(--ksoc-touch-target);
    padding: 14px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 50%;
    background: #f6f3ef;
    color: var(--ksoc-text);
    line-height: 1;
    touch-action: manipulation;
    transition: background-color .16s ease;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close:hover {
    background: #eee9e3;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close:focus-visible {
    outline: 2px solid var(--ksoc-focus);
    outline-offset: 2px;
    background: #eee9e3;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close svg,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close .ast-icon {
    width: var(--ksoc-icon-size) !important;
    height: var(--ksoc-icon-size) !important;
    margin: 0 !important;
    display: block;
    line-height: 1;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-content {
    padding: 0 0 24px;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item {
    position: relative !important;
  }

  /* Every navigation link keeps a consistent 48px touch row. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
    width: 100% !important;
    max-width: none !important;
    min-height: var(--ksoc-row-height);
    display: flex;
    align-items: center;
    box-sizing: border-box !important;
    position: relative;
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--ksoc-line);
    color: var(--ksoc-text);
    line-height: 1.4;
    touch-action: manipulation;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link {
    padding-left: var(--ksoc-pad-x);
    padding-right: calc(var(--ksoc-edge-control) + 12px);
    font-size: 14px;
    font-weight: 600;
  }

  .rtl.ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link {
    padding-right: var(--ksoc-pad-x);
    padding-left: calc(var(--ksoc-edge-control) + 12px);
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .sub-menu {
    background: var(--ksoc-muted-bg) !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link {
    padding-left: 20px !important;
    padding-right: calc(var(--ksoc-edge-control) + 12px) !important;
    font-size: 14px;
    font-weight: 500;
  }

  .rtl.ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link {
    padding-right: 20px !important;
    padding-left: calc(var(--ksoc-edge-control) + 12px) !important;
  }

  /* Remove Astra/decorative leading chevrons inside submenu labels. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link::before,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link:before {
    content: none !important;
    display: none !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link > .ast-icon:first-child,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link > svg:first-child {
    display: none !important;
  }

  /* Full-height edge control, not a boxed button in the middle of the row. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
    position: absolute !important;
    inset-block-start: 0 !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    width: var(--ksoc-edge-control) !important;
    height: var(--ksoc-row-height) !important;
    min-width: var(--ksoc-edge-control) !important;
    min-height: var(--ksoc-row-height) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ksoc-text) !important;
    line-height: 1 !important;
    overflow: visible !important;
    touch-action: manipulation;
  }

  .rtl.ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
    right: auto !important;
    left: 0 !important;
    inset-inline-end: 0 !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle:hover {
    background: rgba(159, 122, 92, .06) !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle:focus-visible {
    outline: 2px solid var(--ksoc-focus) !important;
    outline-offset: -3px;
    background: rgba(159, 122, 92, .06) !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle .ast-icon {
    width: var(--ksoc-icon-size) !important;
    height: var(--ksoc-icon-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    overflow: visible !important;
    line-height: 1 !important;
    transform: rotate(0deg) !important;
    transform-origin: center !important;
    transition: transform .16s ease !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle svg {
    width: var(--ksoc-icon-size) !important;
    height: var(--ksoc-icon-size) !important;
    display: block !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: rotate(0deg) !important;
    transform-origin: center !important;
    transition: transform .16s ease !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle::before,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle:before {
    margin: 0 !important;
    font-size: var(--ksoc-icon-size) !important;
    line-height: 1 !important;
    transform: rotate(0deg) !important;
    transform-origin: center !important;
    transition: transform .16s ease !important;
  }

  /* Open state = inverse/up arrow. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item-has-children.ast-submenu-expanded > .ast-menu-toggle .ast-icon,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item-has-children.ast-submenu-expanded > .ast-menu-toggle svg,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item-has-children > .ast-menu-toggle[aria-expanded="true"] .ast-icon,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item-has-children > .ast-menu-toggle[aria-expanded="true"] svg,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item-has-children.ast-submenu-expanded > .ast-menu-toggle::before,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item-has-children > .ast-menu-toggle[aria-expanded="true"]::before {
    transform: rotate(180deg) !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
    overscroll-behavior: contain;
  }
}

@media (max-width: 420px) {
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    width: 90vw;
    max-width: 90vw;
  }
}


/* Canonical off-canvas arrow system: exactly one arrow per expandable item. */
@media (max-width: 1100px) {
  /* Astra can render a decorative leading icon inside links. Never show it here. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-link > .ast-icon.icon-arrow:first-child,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-link > svg:first-child {
    display: none !important;
  }

  /* Astra also renders an inline dropdown toggle inside the anchor.
     The dedicated button.ast-menu-toggle is the canonical mobile control. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-link > .dropdown-menu-toggle,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-link > .ast-header-navigation-arrow {
    display: none !important;
  }

  /* Hide Astra's SVG inside the canonical button and draw one predictable chevron. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle > .ast-icon,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle > svg {
    display: none !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle::before {
    content: none !important;
    display: none !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle::after {
    content: "" !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    box-sizing: border-box !important;
    border: solid currentColor !important;
    border-width: 0 1.75px 1.75px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: rotate(45deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform .16s ease !important;
    pointer-events: none !important;
  }

  /* The button's aria-expanded is Astra's authoritative open/closed state. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle[aria-expanded="true"]::after,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item-has-children.ast-submenu-expanded > .ast-menu-toggle::after {
    transform: rotate(-135deg) !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle[aria-expanded="false"]::after {
    transform: rotate(45deg) !important;
  }
}


/* Mobile menu trigger focus: suppress Astra's dotted tap outline.
   Keep a clean keyboard-only focus indication for accessibility. */
@media (max-width: 1100px) {
  .ksseo-mobile-offcanvas [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:focus {
    outline: none !important;
  }

  .ksseo-mobile-offcanvas [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  .ksseo-mobile-offcanvas [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(159, 122, 92, .38) !important;
    border-radius: 10px;
  }
}


/* Final submenu-toggle normalization: no Astra dotted focus/border and exact arrow centering. */
@media (max-width: 1100px) {
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle:hover,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle:focus,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle:active {
    border: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* Keyboard focus remains visible without a dotted rectangle. */
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
    background: rgba(159, 122, 92, .10) !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle::after {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -60%) rotate(45deg) !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle[aria-expanded="true"]::after,
  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-menu .menu-item-has-children.ast-submenu-expanded > .ast-menu-toggle::after {
    transform: translate(-50%, -35%) rotate(-135deg) !important;
  }

  .ksseo-mobile-offcanvas .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle[aria-expanded="false"]::after {
    transform: translate(-50%, -60%) rotate(45deg) !important;
  }
}


/* Header-control hardening: direct Astra selectors, independent of body-class/cascade order. */
@media (max-width: 1100px) {
  #ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap > .menu-toggle,
  #ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap > .menu-toggle:hover,
  #ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap > .menu-toggle:focus,
  #ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap > .menu-toggle:focus-visible,
  #ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap > .menu-toggle:active,
  .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > button.ast-menu-toggle,
  .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > button.ast-menu-toggle:hover,
  .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > button.ast-menu-toggle:focus,
  .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > button.ast-menu-toggle:focus-visible,
  .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > button.ast-menu-toggle:active {
    outline: 0 !important;
    outline-style: none !important;
    outline-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap > .menu-toggle:focus-visible,
  .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > button.ast-menu-toggle:focus-visible {
    background-color: rgba(159, 122, 92, .08) !important;
  }

  #ast-mobile-header [data-section="section-header-mobile-trigger"] .ast-button-wrap > .menu-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}