/*
 * Shared header submenu geometry.
 *
 * Keep this as a dedicated final stylesheet. Earlier Artbin header iterations
 * left several fixed-width desktop rules in different files; a menu could look
 * narrow while its actual pointer area had a different width or top offset.
 */

/*
 * The Elementor header container carries a faint default bottom border.  It
 * reads as an unexplained inner frame at some widths, especially when the
 * compact header is handed between the desktop and tablet layouts.  The
 * header itself already has its own background and elevation, so remove only
 * this container border while leaving menu-panel and control borders intact.
 */
html body :is(
  #header-hz-elementor .elementor-element-d2776dd.e-con,
  .elementor-location-header .elementor-element-d2776dd.e-con,
  header.elementor-location-header > .elementor-element-d2776dd.e-con
) {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

@media (min-width: 1400px) {
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu)
  > :is(ul.sub-menu, .elementor-nav-menu--dropdown) {
    position: absolute !important;
    top: calc(100% + 2px) !important;
    right: auto !important;
    left: 50% !important;
    z-index: 100250 !important;
    display: none !important;
    inline-size: max-content !important;
    width: max-content !important;
    min-inline-size: max-content !important;
    min-width: max-content !important;
    max-inline-size: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
    transition: none !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu).artbin-submenu-open
  > :is(ul.sub-menu, .elementor-nav-menu--dropdown) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu)
  > :is(ul.sub-menu, .elementor-nav-menu--dropdown) > li:is(.artbin-about-mega-wrapper, .artbin-blog-mega-wrapper, .artbin-properties-mega-wrapper),
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  :is(.artbin-about-menu .artbin-about-mega, .artbin-blog-menu .artbin-blog-mega, .artbin-properties-menu .artbin-properties-mega) {
    inline-size: max-content !important;
    width: max-content !important;
    min-inline-size: max-content !important;
    min-width: 0 !important;
    max-inline-size: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  :is(.artbin-about-menu .artbin-about-mega__item, .artbin-blog-menu .artbin-blog-mega__item, .artbin-properties-menu .artbin-properties-mega__item) {
    grid-template-columns: 38px max-content 18px !important;
    inline-size: max-content !important;
    width: max-content !important;
    min-width: 100% !important;
    white-space: nowrap !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  :is(.artbin-about-menu .artbin-about-mega__label, .artbin-blog-menu .artbin-blog-mega__label, .artbin-properties-menu .artbin-properties-mega__label) {
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* Same icon-led hover used by Blog, now shared with About and Properties. */
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  :is(.artbin-about-menu .artbin-about-mega__item, .artbin-blog-menu .artbin-blog-mega__item, .artbin-properties-menu .artbin-properties-mega__item):is(:hover, :focus-visible) {
    background: #fffaf0 !important;
    border-color: #f4b51b !important;
    box-shadow: inset 0 0 0 1px rgba(244, 181, 27, .24), 0 7px 15px rgba(199, 145, 12, .11) !important;
    transform: none !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  :is(.artbin-about-menu .artbin-about-mega__item, .artbin-blog-menu .artbin-blog-mega__item, .artbin-properties-menu .artbin-properties-mega__item):is(:hover, :focus-visible)
  :is(.artbin-about-mega__icon, .artbin-blog-mega__icon, .artbin-properties-mega__icon) {
    border-radius: 9px !important;
    background: #f4b51b !important;
    color: #10233a !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  :is(.artbin-about-menu .artbin-about-mega__item, .artbin-blog-menu .artbin-blog-mega__item, .artbin-properties-menu .artbin-properties-mega__item):is(:hover, :focus-visible)
  :is(.artbin-about-mega__arrow, .artbin-blog-mega__arrow, .artbin-properties-mega__arrow) {
    transform: translateX(3px) !important;
  }
}

/* The header is a solid colour band. Elementor applies borders and a faint
 * inner shadow to different wrapper levels depending on the breakpoint,
 * which creates the unwanted horizontal "frame" seen inside the header.
 * Reset those decorative layers only on the header shell; navigation controls
 * and their individual borders/shadows keep their own styling. */
html body :is(
  #header-hz-elementor,
  .elementor-location-header,
  header.elementor-location-header,
  header[data-elementor-type="header"],
  header[data-elementor-type="wp-post"]
) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body :is(
  #header-hz-elementor,
  .elementor-location-header,
  header.elementor-location-header,
  header[data-elementor-type="header"],
  header[data-elementor-type="wp-post"]
) :is(
  .elementor-element-26e1a6f,
  .elementor-element-d2776dd.e-con,
  .elementor-element-26e1a6f > .e-con-inner,
  .elementor-element-d2776dd.e-con > .e-con-inner
) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body :is(
  #header-hz-elementor,
  .elementor-location-header,
  header.elementor-location-header,
  header[data-elementor-type="header"],
  header[data-elementor-type="wp-post"]
)::before,
html body :is(
  #header-hz-elementor,
  .elementor-location-header,
  header.elementor-location-header,
  header[data-elementor-type="header"],
  header[data-elementor-type="wp-post"]
)::after {
  border: 0 !important;
  box-shadow: none !important;
}

/*
 * Properties: one explicit disclosure state at every non-phone width.
 *
 * The generated card used to keep two competing states: the click handler
 * toggled `.is-expanded`, while an older `:hover` selector also exposed the
 * residential types.  Moving between the parent and a child then left the
 * old vertical rail and its yellow dots behind, occasionally with a white
 * background inherited from Elementor.  The card below is deliberately
 * click-only; hover still gives an item feedback but never changes its
 * structure.
 */
@media (min-width: 768px) {
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega {
    background: #0d2845 !important;
    color: #ffffff !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) .artbin-properties-mega__label {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch:not(.is-expanded) > .artbin-properties-mega__nested,
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__nested[hidden] {
    display: none !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch.is-expanded > .artbin-properties-mega__nested:not([hidden]) {
    display: flex !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__nested {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__nested::before,
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__nested-item::before {
    display: none !important;
    content: none !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__nested-item {
    min-height: 52px !important;
    padding: 11px 10px 11px 26px !important;
    background: rgba(6, 27, 49, .28) !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__item--parent {
    cursor: pointer !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch > .artbin-properties-mega__item--parent .artbin-properties-mega__arrow,
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch.is-expanded .artbin-properties-mega__arrow {
    transform: none !important;
  }
}

/* Phone: root rows and their disclosures share one calm, flat navigation
 * surface.  These selectors intentionally come last: the older mega-menu
 * sheets still describe a white card treatment for desktop. */
@media (max-width: 767.98px) {
  html body #header-hz-elementor .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container
  .elementor-nav-menu > li:is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu).artbin-mobile-submenu-open
  :is(.artbin-about-mega__item, .artbin-blog-mega__item, .artbin-properties-mega__item, .artbin-properties-mega__nested-item) {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f7f9fc !important;
    -webkit-text-fill-color: #f7f9fc !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body #header-hz-elementor .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container
  .elementor-nav-menu > li:is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu).artbin-mobile-submenu-open
  :is(.artbin-about-mega__label, .artbin-blog-mega__label, .artbin-properties-mega__label, .artbin-properties-mega__nested-label) {
    display: block !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #f7f9fc !important;
    -webkit-text-fill-color: #f7f9fc !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
  }

  html body #header-hz-elementor .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container
  .elementor-nav-menu > li:is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu).artbin-mobile-submenu-open
  :is(.artbin-about-mega__icon, .artbin-about-mega__arrow, .artbin-blog-mega__icon, .artbin-blog-mega__arrow, .artbin-properties-mega__icon, .artbin-properties-mega__arrow) {
    color: #f4b51b !important;
    -webkit-text-fill-color: #f4b51b !important;
  }

  html body #header-hz-elementor .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container
  .elementor-nav-menu > li:is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu).artbin-mobile-submenu-open
  :is(.artbin-about-mega__item, .artbin-blog-mega__item, .artbin-properties-mega__item, .artbin-properties-mega__nested-item):is(:hover, :focus-visible) {
    background: rgba(244, 181, 27, .10) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Final geometry: parent and nested rows use the exact same right-side arrow
 * rail.  The menu can grow only in its text column; arrow positions never
 * shift with an icon, a wrapped translation, or the expanded state. */
@media (min-width: 768px) {
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) {
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
    column-gap: 10px !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) .artbin-properties-mega__arrow {
    grid-column: 3 !important;
    grid-row: 1 !important;
    inline-size: 24px !important;
    width: 24px !important;
    min-inline-size: 24px !important;
    min-width: 24px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: end !important;
    transform: none !important;
  }
}

/* Compact menu, final visual contract.
 *
 * Nested links are not a separate card or a second navigation language. They
 * are the same dark, full-width rows as their parents, revealed only by the
 * click-controlled `.artbin-mobile-submenu-open` state. A modest left inset
 * and a smaller type size are the sole second-level cue. */
@media (max-width: 1399.98px) {
  html body:not(#artbin-mobile-header-v1-lock)
  :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu
  > li.menu-item-has-children > ul.sub-menu {
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(#artbin-mobile-header-v1-lock)
  :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu
  > li.menu-item-has-children.artbin-mobile-submenu-open > ul.sub-menu {
    display: block !important;
  }

  html body:not(#artbin-mobile-header-v1-lock)
  :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu
  > li.menu-item-has-children.artbin-mobile-submenu-open
  :is(.artbin-about-mega, .artbin-blog-mega, .artbin-properties-mega) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(#artbin-mobile-header-v1-lock)
  :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu
  > li.menu-item-has-children.artbin-mobile-submenu-open
  :is(ul.sub-menu > li.menu-item > a, .artbin-about-mega__item, .artbin-blog-mega__item, .artbin-properties-mega__item, .artbin-properties-mega__nested-item) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 30px 10px 54px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    font-family: "Unbounded", "Wix Madefor Display", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  html body:not(#artbin-mobile-header-v1-lock)
  :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu
  > li.menu-item-has-children.artbin-mobile-submenu-open
  :is(.artbin-about-mega__label, .artbin-blog-mega__label, .artbin-properties-mega__label, .artbin-properties-mega__nested-label) {
    margin: 0 !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font: inherit !important;
    text-transform: inherit !important;
  }

  html body:not(#artbin-mobile-header-v1-lock)
  :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu
  > li.menu-item-has-children.artbin-mobile-submenu-open
  :is(.artbin-about-mega__icon, .artbin-blog-mega__icon, .artbin-properties-mega__icon) {
    display: none !important;
  }

  html body:not(#artbin-mobile-header-v1-lock)
  :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .elementor-widget-nav-menu > .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu
  > li.menu-item-has-children.artbin-mobile-submenu-open
  :is(.sub-arrow, .artbin-about-mega__arrow, .artbin-blog-mega__arrow, .artbin-properties-mega__arrow) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 0 0 auto !important;
    color: #fdb714 !important;
    -webkit-text-fill-color: #fdb714 !important;
    line-height: 1 !important;
    transform: none !important;
  }
}

/* The mobile lock keeps Elementor's original main-nav list as the live
 * disclosure tree, so use the lock class instead of the generated container
 * selector above.  This wins over historic white mega-card styles. */
@media (max-width: 767.98px) {
  html body #header-hz-elementor .elementor-widget-nav-menu.artbin-menu-force-open
  :is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu)
  :is(.artbin-about-mega__item, .artbin-blog-mega__item, .artbin-properties-mega__item, .artbin-properties-mega__nested-item) {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f7f9fc !important;
    -webkit-text-fill-color: #f7f9fc !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body #header-hz-elementor .elementor-widget-nav-menu.artbin-menu-force-open
  :is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu)
  :is(.artbin-about-mega__label, .artbin-blog-mega__label, .artbin-properties-mega__label, .artbin-properties-mega__nested-label) {
    display: block !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #f7f9fc !important;
    -webkit-text-fill-color: #f7f9fc !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
  }

  html body #header-hz-elementor .elementor-widget-nav-menu.artbin-menu-force-open
  :is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu)
  :is(.artbin-about-mega__icon, .artbin-about-mega__arrow, .artbin-blog-mega__icon, .artbin-blog-mega__arrow, .artbin-properties-mega__icon, .artbin-properties-mega__arrow) {
    color: #f4b51b !important;
    -webkit-text-fill-color: #f4b51b !important;
  }

  html body #header-hz-elementor .elementor-widget-nav-menu.artbin-menu-force-open
  :is(.artbin-about-menu, .artbin-blog-menu, .artbin-properties-menu)
  :is(.artbin-about-mega__item, .artbin-blog-mega__item, .artbin-properties-mega__item, .artbin-properties-mega__nested-item):is(:hover, :focus-visible) {
    background: rgba(244, 181, 27, .10) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Keep every Properties arrow in one fixed right-hand rail.  Labels may wrap
 * on narrower adaptive layouts, but their arrows never follow the text. */
@media (min-width: 768px) {
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) {
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
    column-gap: 10px !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) .artbin-properties-mega__icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) .artbin-properties-mega__label {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) .artbin-properties-mega__arrow {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
  }
}

/*
 * Desktop Properties disclosure: keep the panel compact and give every row
 * one shared right-hand arrow rail.  Nested property types are deliberately
 * click-only; hover/focus may style a row but must never open its children.
 * This is scoped to the full desktop breakpoint so the existing tablet and
 * mobile accordion layouts remain unchanged.
 */
@media (min-width: 1400px) {
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.artbin-properties-menu
  > :is(ul.sub-menu, .elementor-nav-menu--dropdown),
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega,
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega-wrapper {
    inline-size: 360px !important;
    width: 360px !important;
    min-inline-size: 360px !important;
    min-width: 360px !important;
    max-inline-size: min(360px, calc(100vw - 32px)) !important;
    max-width: min(360px, calc(100vw - 32px)) !important;
    box-sizing: border-box !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__list,
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__section,
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch {
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) {
    grid-template-columns: 36px minmax(0, 1fr) 20px !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: none !important;
    max-width: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__nested-item {
    padding-right: 10px !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__label {
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__nested {
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) .artbin-properties-mega__arrow {
    justify-self: end !important;
    margin-left: 0 !important;
    flex: 0 0 20px !important;
    min-width: 20px !important;
    width: 20px !important;
    transform: none !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch:not(.is-expanded):is(:hover, :focus-within) > .artbin-properties-mega__nested {
    display: none !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch.is-expanded > .artbin-properties-mega__nested:not([hidden]) {
    display: flex !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch:not(.is-expanded):is(:hover, :focus-within) .artbin-properties-mega__arrow {
    transform: none !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch.is-expanded .artbin-properties-mega__arrow {
    transform: rotate(-90deg) !important;
  }

  /* Rotating the parent disclosure arrow exposes an 18px glyph box inside
   * its 20px rail. Shift only that rotated control to the shared rail edge. */
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch > .artbin-properties-mega__item--parent .artbin-properties-mega__arrow {
    transform: translateX(2px) rotate(-90deg) !important;
  }
}

/* Final cascade guard for the compact Properties card.  This deliberately
 * comes after the desktop-width geometry guard above: every arrow retains the
 * same right-hand rail and the expanded branch has no legacy guide line or
 * dots left from the retired hover variant. */
@media (min-width: 768px) {
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__nested {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__nested-item {
    padding: 11px 10px 11px 26px !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch > .artbin-properties-mega__item--parent .artbin-properties-mega__arrow,
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega__branch.is-expanded .artbin-properties-mega__arrow {
    transform: none !important;
  }
}

/* Finalize the geometry after the legacy desktop rules: the third grid track
 * is the shared arrow rail for every row, including nested property types. */
@media (min-width: 768px) {
  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) {
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
    column-gap: 10px !important;
  }

  html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
  .artbin-properties-menu .artbin-properties-mega :is(.artbin-properties-mega__item, .artbin-properties-mega__nested-item) .artbin-properties-mega__arrow {
    grid-column: 3 !important;
    grid-row: 1 !important;
    inline-size: 24px !important;
    width: 24px !important;
    min-inline-size: 24px !important;
    min-width: 24px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: end !important;
    transform: none !important;
  }
}