/**
 * Khan Dry Fruit — Smooth UI (3 Oct 2026)
 * Fix ugly tap highlights and focus backgrounds on buttons
 */

/* Remove ugly default tap highlight on mobile */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent !important;
}

/* Buttons: smooth, no ugly background on click/focus */
button, a, .nv-add-cart, .nv-deal-atc {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

/* Custom subtle focus (keyboard accessibility) */
button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(15, 61, 46, 0.4) !important;
  outline-offset: 2px !important;
}

/* Active state: subtle scale instead of ugly background */
.nv-add-cart:active, .nv-deal-atc:active,
button:active {
  transform: scale(0.98) !important;
  transition: transform 0.1s ease !important;
}

/* Smooth transitions on all interactive elements */
button, a {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

/* 2-per-screen REVERTED 3 Oct 2026 - user wants single product */

/* ===== Smooth Hide-on-Scroll Header (Mobile) - 3 Oct 2026 ===== */
@media (max-width: 900px) {
  .nv-header {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
  }
  .nv-header.nv-header--hidden {
    transform: translateY(-100%) !important;
  }
  /* Prevent layout shift */
  .nv-header.nv-header--hidden + * {
    margin-top: 0 !important;
  }
}

/* ===== Disable compact height changes on mobile (prevent jitter) - 3 Oct 2026 ===== */
@media (max-width: 900px) {
  /* Keep header height constant - no layout shifts */
  .nv-header.is-compact .nv-m-shift,
  .nv-header.is-compact .nv-m-search-wrap,
  .nv-header.is-compact .nv-topbar,
  .nv-header.is-compact .nv-nav {
    transform: none !important;
    margin: 0 !important;
    padding-top: inherit !important;
    padding-bottom: inherit !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Smooth hide/show only via transform */
  .nv-header {
    transform: translateY(0) !important;
  }
  .nv-header.nv-header--hidden {
    transform: translateY(-110%) !important;
  }
}