/* Ketabika mobile repair: independent phone layout, reliable hamburger, dark menu. */
@media (max-width:700px) {
  *, *::before, *::after { box-sizing:border-box !important; }
  html, body {
    width:100% !important; min-width:0 !important; max-width:100% !important;
    margin:0 !important; padding:0 !important; overflow-x:hidden !important;
    position:relative !important; inset-inline: auto !important; transform:none !important;
  }
  body { min-height:100vh; }
  body > *, main, footer, .site-header, .section, section, .hero,
  .ketabika-promo-hero, .category-showcase, .latest-section, .container,
  main > .container, footer > .container {
    min-width:0 !important; max-width:100% !important;
  }
  main, body > main { display:block !important; width:100% !important; margin:0 !important; padding-inline:0 !important; }
  .container, main > .container, footer > .container, .section > .container,
  .site-header .container.header-row, .site-header .header-row {
    width:100% !important; min-width:0 !important; max-width:100% !important;
    margin-inline:0 !important; padding-inline:12px !important;
  }
  .site-header {
    display:block !important; position:relative !important; inset-inline:auto !important;
    width:100% !important; min-width:0 !important; max-width:100% !important;
    margin:0 !important; padding:0 !important; transform:none !important;
    overflow:visible !important; z-index:100000 !important;
  }
  .site-header > .container.header-row, .site-header .header-row {
    position:relative !important; display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"logo actions" "search search" !important;
    align-items:center !important; gap:8px !important;
    width:100% !important; margin:0 !important; padding:8px 12px 10px 62px !important;
    overflow:visible !important; transform:none !important;
  }
  .site-header .header-row > .logo { grid-area:logo !important; justify-self:start !important; max-width:100% !important; min-width:0 !important; }
  .site-header .header-row > .header-actions { grid-area:actions !important; display:flex !important; min-width:0 !important; max-width:100% !important; gap:4px !important; }
  .site-header .header-row > .search { grid-area:search !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; }
  .site-header .site-logo-image { display:block !important; max-width:min(38vw,150px) !important; max-height:42px !important; object-fit:contain !important; }
  .site-header .header-action-link { min-width:34px !important; min-height:34px !important; padding:5px !important; }
  .site-header .header-action-link > span:not(.header-action-icon):not(.header-account-avatar),
  .site-header .header-account-name, .site-header .header-favorite-link { display:none !important; }
  .site-header .search { display:flex !important; height:42px !important; }
  .site-header .search input { flex:1 1 auto !important; width:0 !important; min-width:0 !important; }

  /* Hamburger is always at the very top-left, regardless of RTL grid ordering. */
  .site-header .header-row > .mobile-nav-toggle {
    display:flex !important; position:absolute !important; top:8px !important; left:12px !important; right:auto !important;
    width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important;
    margin:0 !important; padding:9px !important; z-index:100003 !important;
    flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important;
    border:0 !important; border-radius:8px !important; background:#080a13 !important; color:#fff !important;
    box-shadow:none !important; cursor:pointer !important; touch-action:manipulation !important;
  }
  .site-header .mobile-nav-toggle span { display:block !important; width:22px !important; height:2px !important; min-height:2px !important; padding:0 !important; background:#fff !important; border-radius:2px !important; }

  /* A fixed, viewport-bounded dark drawer like the supplied reference. */
  html body .site-header .header-row > nav#primary-navigation,
  html body .site-header nav#primary-navigation {
    display:none !important; position:fixed !important; top:64px !important; left:10px !important; right:10px !important;
    bottom:auto !important; width:auto !important; min-width:0 !important; max-width:none !important;
    height:auto !important; min-height:0 !important; max-height:calc(100dvh - 76px) !important;
    margin:0 !important; padding:12px !important; box-sizing:border-box !important;
    flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; justify-content:flex-start !important;
    gap:3px !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important;
    background:#080a13 !important; color:#f6f7ff !important; border:1px solid #252a45 !important;
    border-radius:13px !important; box-shadow:0 20px 50px rgba(0,0,0,.48) !important;
    z-index:100002 !important; white-space:normal !important; transform:none !important;
  }
  html body.mobile-nav-open .site-header .header-row > nav#primary-navigation,
  html body.mobile-nav-open .site-header nav#primary-navigation { display:flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; }
  html body .site-header nav#primary-navigation > a,
  html body .site-header nav#primary-navigation > .nav-item,
  html body .site-header nav#primary-navigation > .nav-item > .nav-main-link {
    display:flex !important; position:relative !important; flex:0 0 auto !important; width:100% !important;
    min-width:0 !important; min-height:42px !important; height:auto !important; margin:0 !important; padding:10px 12px !important;
    align-items:center !important; justify-content:space-between !important; gap:8px !important;
    color:#f2f3fc !important; background:transparent !important; border:0 !important; border-radius:8px !important;
    font-size:14px !important; font-weight:600 !important; line-height:1.5 !important; text-align:right !important;
    white-space:normal !important; box-shadow:none !important; transform:none !important;
  }
  html body .site-header nav#primary-navigation > .nav-item { display:flex !important; flex-direction:column !important; align-items:stretch !important; }
  html body .site-header nav#primary-navigation > a:hover,
  html body .site-header nav#primary-navigation .nav-item.submenu-open > .nav-main-link { background:#171b2d !important; }
  html body .site-header nav#primary-navigation .nav-chevron { color:#bd65ff !important; }
  html body .site-header nav#primary-navigation .nav-submenu,
  html body .site-header nav#primary-navigation .nav-item:hover > .nav-submenu,
  html body .site-header nav#primary-navigation .nav-item:focus-within > .nav-submenu {
    display:none !important; position:static !important; inset:auto !important; float:none !important;
    width:100% !important; min-width:0 !important; max-width:100% !important; height:auto !important; max-height:none !important;
    margin:2px 0 8px !important; padding:6px 8px !important; overflow:visible !important;
    background:#0e1221 !important; border:1px solid #272d49 !important; border-radius:9px !important;
    box-shadow:none !important; transform:none !important;
  }
  html body .site-header nav#primary-navigation .nav-item.submenu-open > .nav-submenu { display:block !important; visibility:visible !important; opacity:1 !important; }
  html body .site-header nav#primary-navigation .nav-submenu a { display:block !important; width:100% !important; min-height:38px !important; padding:9px 12px !important; color:#c6cce0 !important; background:transparent !important; font-size:13px !important; line-height:1.5 !important; }
  html body .site-header nav#primary-navigation .nav-submenu a:hover { background:#1a2035 !important; color:#fff !important; }

  /* Prevent any old fixed-width sections from creating a blank side gutter. */
  .hero.ketabika-promo-hero, section.hero.ketabika-promo-hero,
  .hero.ketabika-promo-hero > .promo-hero-inner, .hero.ketabika-promo-hero > .container.promo-hero-inner,
  .category-grid, #categoryGrid, .product-grid, .media-grid, .result-grid {
    width:100% !important; min-width:0 !important; max-width:100% !important;
    margin-left:0 !important; margin-right:0 !important; transform:none !important;
  }
  .hero.ketabika-promo-hero { overflow:hidden !important; background-size:cover !important; background-position:center !important; }
  .hero.ketabika-promo-hero .promo-hero-inner { padding-inline:12px !important; }
  .category-grid, #categoryGrid, .product-grid, .media-grid, .result-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  img, video, iframe, svg { max-width:100% !important; }
}