/* Daroonab mobile header + search V3. Desktop layout and catalog stay untouched. */
@media (max-width: 767px) {
  html body #app .header-four.header-four-sticky {
    transition: transform .18s ease, opacity .18s ease;
  }
  html body #app .header-four.header-four-sticky.dn-header-away:not(.dn-search-open) {
    transform: translate3d(0, calc(-100% - 60px), 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive {
    padding: 6px 12px 7px !important;
    border-bottom: 1px solid #e6edf0;
    box-shadow: 0 3px 14px rgba(20, 57, 69, .055);
  }
  html body #app .header-four.header-four-sticky .page-header-responsive > .page-header-responsive-row:first-child {
    min-height: 34px;
    padding: 0 !important;
    margin: 0 0 5px !important;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .navigation-container--icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background: #f4f7f9;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .navigation-container--icon i { font-size: 21px !important; }
  html body #app .header-four.header-four-sticky .page-header-responsive .logo img {
    height: 26px !important;
    width: auto !important;
    max-width: 105px;
    object-fit: contain;
    margin-right: 9px !important;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .user-helpers {
    padding: 0 !important;
    gap: 2px;
    background: transparent !important;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .user-helpers > .user-helper {
    width: 32px !important;
    height: 34px !important;
    min-width: 32px;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .user-helper > a,
  html body #app .header-four.header-four-sticky .page-header-responsive .user-helper > button {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .user-helper i { font-size: 20px !important; line-height: 1 !important; }
  html body #app .header-four.header-four-sticky .page-header-responsive .user-helper .count-badage { top: -1px !important; right: 0 !important; }
  html body #app .header-four.header-four-sticky .page-header-responsive .search-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transition: none !important;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .search-container form { min-height: 40px !important; }
  html body #app .header-four.header-four-sticky .page-header-responsive .search-container .search-field {
    height: 40px !important; min-height: 40px !important;
    border: 1px solid #e3eaf0 !important;
    background: #f3f6f9 !important;
    border-radius: 13px !important;
    padding-top: 7px !important; padding-bottom: 7px !important;
    padding-right: 48px !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .search-container .search-field:focus {
    border-color: #a6cfd5 !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(19, 111, 133, .065) !important;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .dn-lens-camera-btn {
    top: 3px !important; right: 4px !important;
    transform: none !important; margin: 0 !important;
    width: 34px !important; height: 34px !important;
    min-width: 34px !important; min-height: 34px !important;
    border-radius: 10px !important;
  }
  html body #app .header-four.header-four-sticky .page-header-responsive .dn-lens-camera-btn svg { width: 21px !important; height: 21px !important; }
  html body #app .header-four.header-four-sticky .page-header-responsive button.search-button--popular-search {
    top: 4px !important; left: 4px !important;
    height: 32px !important; min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
  html body .header-four.dn-search-open { z-index: 12000 !important; transform: none !important; opacity: 1 !important; }
  /* Out-specific the theme's !important translateY(56px), which created the gap. */
  html body .header-four .page-header-responsive .search-container form .search-dropdown > .dropdown-menu[data-dn-search-scroll="1"],
  html body .full-header-search .search-container form .search-dropdown > .dropdown-menu[data-dn-search-scroll="1"] {
    position: absolute !important;
    inset: var(--dn-search-top, 100%) 0 auto 0 !important;
    transform: none !important;
    translate: none !important;
    margin: 4px 0 0 !important;
    width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important;
    max-height: var(--dn-search-height, 50vh) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    overflow-anchor: none;
    scroll-behavior: auto !important;
    transition: none !important;
    padding: 12px !important;
    border: 1px solid #e5ecf1 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(20, 45, 62, .13) !important;
  }
  html body .search-container .dropdown-menu[data-dn-search-scroll="1"] > .history .search-product-list ul { transform: none !important; }
  html body .page-header-responsive .search-container .dropdown-menu[data-dn-search-scroll="1"] > .history .search-product-list ul li div a { width: 100% !important; }
  html.dn-mobile-search-active .support-floating-button,
  html.dn-mobile-search-active .dn-ai-launcher-v3,
  html.dn-mobile-search-active #daroonab-ai-v3-label { visibility: hidden !important; pointer-events: none !important; }
  html body#dark .header-four.dn-header-managed .page-header-responsive .navigation-container--icon { background: #414150; }
  html body#dark .header-four.dn-header-managed .page-header-responsive .search-container .search-field { background: #414150 !important; border-color: #54546a !important; color: #fff !important; }
  html body#dark .header-four .page-header-responsive .search-container form .search-dropdown > .dropdown-menu[data-dn-search-scroll="1"] { border-color: #54546a !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #app .header-four.header-four-sticky { transition: none !important; }
}