/* ===== YOUR ORIGINAL CSS (unchanged) ===== */
.site-header{ height:90px; background:#fff; border-bottom:1px solid #e5e5e5; position:relative; }
.site-header .container{ width:1200px; max-width:95%; margin:0 auto; height:100%; }
.header-wrapper{display:flex;align-items:center;justify-content:space-between;height:100%;}
.header-categories{ display:flex; align-items:center; gap:24px;}
.header-search{margin-left:20px;}
.header-right{display:flex;align-items:center;gap:30px; }

/* ===== icon buttons (3-dot / search) ===== */
.icon-btn{
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
}
.icon-btn svg{ width:22px; height:22px; pointer-events:none; }

/* hidden on desktop by default */
.menu-toggle,
.search-toggle{ display:none; }

/* search wrapper: on desktop just shows the WP search form normally */
.header-search{ display:flex; align-items:center; }
.search-form-wrap{ display:block; }

/* ===================== RESPONSIVE (mobile only, desktop untouched) ===================== */
@media (max-width:768px){
  .header-wrapper{ position:relative; justify-content:space-between; }

  /* show the 3-dot + search icon */
  .menu-toggle,
  .search-toggle{ display:flex; }

  /* logo centered — only applied under 768px, desktop position is untouched */
  .site-branding{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .site-branding img{ height:44px !important; }

  .header-right{ gap:0; }

  /* category nav becomes a dropdown drawer — FORCE hidden by default,
     !important so no inline style / theme CSS / load order can override it */
  .header-categories{
    display:none !important;
    position:absolute;
    top:90px; left:0; right:0;
    background:#fff;
    border-bottom:1px solid #e5e5e5;
    box-shadow:0 4px 8px rgba(0,0,0,0.06);
    padding:14px 20px;
    z-index:50;
  }
  .header-categories.open{
    display:block !important;
  }

  /* the <ul> inside has an inline style="display:flex;gap:30px;align-items:center".
     Forcing every relevant property with !important so nothing else (theme
     CSS, load order, etc.) can pull it back into a row. */
  .header-categories.open ul{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
    width:100%;
  }
  .header-categories.open ul li{
    width:100%;
  }
  .header-categories.open ul li a{
    display:block;
    width:100%;
    padding:6px 0;
  }

  /* search: hide the form, show only the icon, reveal form as overlay when open */
  .header-search{ margin-left:0; }
  .search-form-wrap{ display:none !important; }
  .header-search.open .search-form-wrap{
    display:block !important;
    position:absolute;
    left:0; right:0; top:90px;
    padding:10px 20px;
    background:#fff;
    border-bottom:1px solid #e5e5e5;
    box-shadow:0 4px 8px rgba(0,0,0,0.06);
    z-index:60;
  }
  .header-search.open .search-form-wrap form{ width:100%; }
  .header-search.open .search-form-wrap input[type="search"],
  .header-search.open .search-form-wrap input[type="text"]{
    width:100%;
  }

  /* when categories drawer is open, make sure search overlay is closed
     and vice versa — pure CSS fallback in case JS only adds classes */
  .header-search.open ~ .header-categories,
  .header-categories.open ~ .header-search .search-form-wrap{
    display:none !important;
  }
}